From 3133207c42bf1dcd4697de79af5f0b51c6b89e6f Mon Sep 17 00:00:00 2001 From: Satish Gandham Date: Thu, 23 May 2024 15:58:14 +0530 Subject: [PATCH] Move sortabla and radio input to packages/ui --- packages/ui/package.json | 2 +- packages/ui/src/index.ts | 2 ++ packages/ui/src/radio-input/index.tsx | 1 + packages/ui/src/radio-input/radio-input.tsx | 36 ++++++++++++++----- .../ui/src}/sortable/draggable.tsx | 9 ++--- packages/ui/src/sortable/index.ts | 2 ++ packages/ui/src/sortable/sortable.stories.tsx | 32 +++++++++++++++++ .../ui/src}/sortable/sortable.tsx | 0 web/components/estimates/create/stage-one.tsx | 4 +-- web/components/estimates/create/stage-two.tsx | 3 +- web/components/estimates/estimate-item.tsx | 2 +- web/components/radio-group/index.tsx | 1 - yarn.lock | 4 +-- 13 files changed, 77 insertions(+), 21 deletions(-) create mode 100644 packages/ui/src/radio-input/index.tsx rename {web/components => packages/ui/src}/sortable/draggable.tsx (84%) create mode 100644 packages/ui/src/sortable/index.ts create mode 100644 packages/ui/src/sortable/sortable.stories.tsx rename {web/components => packages/ui/src}/sortable/sortable.tsx (100%) delete mode 100644 web/components/radio-group/index.tsx diff --git a/packages/ui/package.json b/packages/ui/package.json index 62c335839..ca8275b40 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -22,7 +22,7 @@ "dependencies": { "@blueprintjs/core": "^4.16.3", "@blueprintjs/popover2": "^1.13.3", - "@headlessui/react": "^1.7.17", + "@headlessui/react": "^2.0.3", "@popperjs/core": "^2.11.8", "clsx": "^2.0.0", "emoji-picker-react": "^4.5.16", diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 5402a43e5..b533d3a12 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -15,3 +15,5 @@ export * from "./toast"; export * from "./drag-handle"; export * from "./typography"; export * from "./drop-indicator"; +export * from "./radio-input"; +export * from "./sortable"; diff --git a/packages/ui/src/radio-input/index.tsx b/packages/ui/src/radio-input/index.tsx new file mode 100644 index 000000000..99ac1d9b6 --- /dev/null +++ b/packages/ui/src/radio-input/index.tsx @@ -0,0 +1 @@ +export * from "./radio-input"; diff --git a/packages/ui/src/radio-input/radio-input.tsx b/packages/ui/src/radio-input/radio-input.tsx index abafccc1d..87666a7c1 100644 --- a/packages/ui/src/radio-input/radio-input.tsx +++ b/packages/ui/src/radio-input/radio-input.tsx @@ -1,19 +1,33 @@ -import { Field, Label, Radio, RadioGroup } from "@headlessui/react"; import React from "react"; +import { Field, Label, Radio, RadioGroup } from "@headlessui/react"; +import { cn } from "../../helpers"; +// helpers type RadioInputProps = { label: string | React.ReactNode | undefined; + labelClassName?: string; ariaLabel?: string; options: { label: string; value: string; disabled?: boolean }[]; vertical?: boolean; selected: string; + onChange: (value: string) => void; + className?: string; }; -const RadioInput = ({ label: inputLabel, options, vertical, selected, ariaLabel }: RadioInputProps) => { +const RadioInput = ({ + label: inputLabel, + labelClassName: inputLabelClassName, + options, + vertical, + selected, + ariaLabel, + onChange, + className, +}: RadioInputProps) => { const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2"; const setSelected = (value: string) => { - console.log(value); + onChange(value); }; let aria = ariaLabel ? ariaLabel.toLowerCase().replace(" ", "-") : ""; @@ -23,19 +37,25 @@ const RadioInput = ({ label: inputLabel, options, vertical, selected, ariaLabel aria = "radio-input"; } + // return

Hello

; + return ( - - + +
- {options.map(({ value, label }) => ( + {options.map(({ value, label, disabled }) => ( - + ))}
diff --git a/web/components/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx similarity index 84% rename from web/components/sortable/draggable.tsx rename to packages/ui/src/sortable/draggable.tsx index f4271a848..cdeef1347 100644 --- a/web/components/sortable/draggable.tsx +++ b/packages/ui/src/sortable/draggable.tsx @@ -1,14 +1,15 @@ -import { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { isEqual } from "lodash"; -import { cn } from "@/helpers/common.helper"; +import { cn } from "../../helpers"; type Props = { children: React.ReactNode; data: any; //@todo make this generic + className?: string; }; -const Draggable = ({ children, data }: Props) => { +const Draggable = ({ children, data, className }: Props) => { const ref = useRef(null); const [dragging, setDragging] = useState(false); // NEW const [isDraggedOver, setIsDraggedOver] = useState(false); @@ -37,7 +38,7 @@ const Draggable = ({ children, data }: Props) => { }, [data]); return ( -
+
{children}
); diff --git a/packages/ui/src/sortable/index.ts b/packages/ui/src/sortable/index.ts new file mode 100644 index 000000000..9dde5a404 --- /dev/null +++ b/packages/ui/src/sortable/index.ts @@ -0,0 +1,2 @@ +export * from "./sortable"; +export * from "./draggable"; diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx new file mode 100644 index 000000000..f5654e8d0 --- /dev/null +++ b/packages/ui/src/sortable/sortable.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { Draggable } from "./draggable"; +import { Sortable } from "./sortable"; + +const meta: Meta = { + title: "Sortable", + component: Sortable, +}; + +export default meta; +type Story = StoryObj; + +const data = [ + { id: "1", name: "John Doe" }, + { id: "2", name: "Jane Doe" }, + { id: "3", name: "Alice" }, + { id: "4", name: "Bob" }, + { id: "5", name: "Charlie" }, +]; +export const Default: Story = { + args: { + data, + render: (item: any) => ( + +
{item.name}
+ + ), + onChange: (data) => console.log(data), + keyExtractor: (item: any) => item.id, + }, +}; diff --git a/web/components/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx similarity index 100% rename from web/components/sortable/sortable.tsx rename to packages/ui/src/sortable/sortable.tsx diff --git a/web/components/estimates/create/stage-one.tsx b/web/components/estimates/create/stage-one.tsx index ccd8023cd..0567298c3 100644 --- a/web/components/estimates/create/stage-one.tsx +++ b/web/components/estimates/create/stage-one.tsx @@ -1,10 +1,10 @@ import { FC } from "react"; // components -import { RadioInput } from "@/components/radio-group"; // constants +import { RadioInput } from "@plane/ui"; +import { TEstimateSystemKeys } from "@/components/estimates/types"; import { ESTIMATE_SYSTEMS } from "@/constants/estimates"; // types -import { TEstimateSystemKeys } from "@/components/estimates/types"; type TEstimateCreateStageOne = { estimateSystem: TEstimateSystemKeys; diff --git a/web/components/estimates/create/stage-two.tsx b/web/components/estimates/create/stage-two.tsx index 74a1de0ae..04c50da41 100644 --- a/web/components/estimates/create/stage-two.tsx +++ b/web/components/estimates/create/stage-two.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; import { Plus } from "lucide-react"; -import { Button } from "@plane/ui"; +import { Button, Sortable } from "@plane/ui"; // components import { EstimateItem } from "@/components/estimates"; import { @@ -10,7 +10,6 @@ import { TEstimateSystemKeyObject, TEstimateSystemKeys, } from "@/components/estimates/types"; -import { Sortable } from "@/components/sortable/sortable"; // constants import { ESTIMATE_SYSTEMS } from "@/constants/estimates"; diff --git a/web/components/estimates/estimate-item.tsx b/web/components/estimates/estimate-item.tsx index aa9e14b31..e881e5d18 100644 --- a/web/components/estimates/estimate-item.tsx +++ b/web/components/estimates/estimate-item.tsx @@ -1,7 +1,7 @@ import { Fragment, useRef, useState } from "react"; import { Check, GripVertical, MoveRight, Pencil, Trash2, X } from "lucide-react"; import { Select } from "@headlessui/react"; -import { Draggable } from "@/components/sortable/draggable"; +import { Draggable } from "@plane/ui"; import { InlineEdit } from "./inline-editable"; import { TEstimatePointNumeric, TEstimatePointString } from "./types"; diff --git a/web/components/radio-group/index.tsx b/web/components/radio-group/index.tsx deleted file mode 100644 index ffd376c16..000000000 --- a/web/components/radio-group/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "./radio-group"; diff --git a/yarn.lock b/yarn.lock index f54a517c2..436886520 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1593,7 +1593,7 @@ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5" integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw== -"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.19": +"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.19": version "1.7.19" resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40" integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw== @@ -4094,7 +4094,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@18.2.48", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48": +"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48": version "18.2.48" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1" integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==