From 26b2dd3d90d36875b236e3c58726bc952a83a604 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Tue, 2 Sep 2025 18:17:42 +0530 Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20Skeleton=20comp?= =?UTF-8?q?onent=20with=20respective=20stories=20in=20propel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/Skeleton/index.ts | 1 + packages/propel/src/Skeleton/root.tsx | 34 +++++++++++++++++++ .../propel/src/Skeleton/skeleton.stories.tsx | 33 ++++++++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 packages/propel/src/Skeleton/index.ts create mode 100644 packages/propel/src/Skeleton/root.tsx create mode 100644 packages/propel/src/Skeleton/skeleton.stories.tsx diff --git a/packages/propel/src/Skeleton/index.ts b/packages/propel/src/Skeleton/index.ts new file mode 100644 index 00000000000..50a9c47c01f --- /dev/null +++ b/packages/propel/src/Skeleton/index.ts @@ -0,0 +1 @@ +export * from "./root"; \ No newline at end of file diff --git a/packages/propel/src/Skeleton/root.tsx b/packages/propel/src/Skeleton/root.tsx new file mode 100644 index 00000000000..3a1155488f0 --- /dev/null +++ b/packages/propel/src/Skeleton/root.tsx @@ -0,0 +1,34 @@ +import React from "react"; +// helpers +import { cn } from "../utils/classname"; + +type Props = { + children: React.ReactNode; + className?: string; +}; + +const Skeleton = ({ children, className = "" }: Props) => ( +
+ {children} +
+); + +type ItemProps = { + height?: string; + width?: string; + className?: string; +}; + +const Item: React.FC = ({ height = "auto", width = "auto", className = "" }) => ( +
+); + +Skeleton.Item = Item; + +Skeleton.displayName = "plane-ui-skeleton"; + +export { Skeleton }; diff --git a/packages/propel/src/Skeleton/skeleton.stories.tsx b/packages/propel/src/Skeleton/skeleton.stories.tsx new file mode 100644 index 00000000000..262bcd0529b --- /dev/null +++ b/packages/propel/src/Skeleton/skeleton.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Skeleton } from "./index"; + +const meta: Meta = { + title: "Components/Skeleton", + component: Skeleton, + parameters: { + layout: "centered", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + ), +}; + +export const Card: Story = { + render: () => ( + + +
+ + +
+ + ), +}; From 2e564db42af8b7a5987a6178992c1453485d8c83 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Tue, 2 Sep 2025 18:25:56 +0530 Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=9A=A8=20fix:=20lint=20issues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/Skeleton/index.ts | 2 +- packages/propel/src/accordion/accordion.tsx | 2 +- packages/utils/src/string.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/propel/src/Skeleton/index.ts b/packages/propel/src/Skeleton/index.ts index 50a9c47c01f..1efe34c51ec 100644 --- a/packages/propel/src/Skeleton/index.ts +++ b/packages/propel/src/Skeleton/index.ts @@ -1 +1 @@ -export * from "./root"; \ No newline at end of file +export * from "./root"; diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx index 1d99019667b..51d519f4ecd 100644 --- a/packages/propel/src/accordion/accordion.tsx +++ b/packages/propel/src/accordion/accordion.tsx @@ -1,6 +1,6 @@ +import * as React from "react"; import { Accordion as BaseAccordion } from "@base-ui-components/react"; import { PlusIcon } from "lucide-react"; -import * as React from "react"; interface AccordionRootProps { defaultValue?: string[]; diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts index fdd0a73496f..7735011511e 100644 --- a/packages/utils/src/string.ts +++ b/packages/utils/src/string.ts @@ -1,5 +1,5 @@ -import type { Content, JSONContent } from "@plane/types"; import DOMPurify from "isomorphic-dompurify"; +import type { Content, JSONContent } from "@plane/types"; /** * @description Adds space between camelCase words From 864cc468e515737f136e533a5134f09fbb660a00 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Tue, 2 Sep 2025 18:34:17 +0530 Subject: [PATCH 03/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20enhan?= =?UTF-8?q?ce=20Skeleton=20component=20with=20improved=20props=20and=20str?= =?UTF-8?q?ucture?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/Skeleton/root.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/propel/src/Skeleton/root.tsx b/packages/propel/src/Skeleton/root.tsx index 3a1155488f0..dee2c27f060 100644 --- a/packages/propel/src/Skeleton/root.tsx +++ b/packages/propel/src/Skeleton/root.tsx @@ -2,13 +2,14 @@ import React from "react"; // helpers import { cn } from "../utils/classname"; -type Props = { +type SkeletonProps = { children: React.ReactNode; className?: string; + ariaLabel?: string; }; -const Skeleton = ({ children, className = "" }: Props) => ( -
+const SkeletonRoot = ({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) => ( +
{children}
); @@ -19,16 +20,17 @@ type ItemProps = { className?: string; }; -const Item: React.FC = ({ height = "auto", width = "auto", className = "" }) => ( +const SkeletonItem: React.FC = ({ height = "auto", width = "auto", className = "" }) => (
); -Skeleton.Item = Item; +const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem }); -Skeleton.displayName = "plane-ui-skeleton"; +SkeletonRoot.displayName = "plane-ui-skeleton"; +SkeletonItem.displayName = "plane-ui-skeleton-item"; export { Skeleton }; From e1c0629948bc560a0665888ec079f4bce44bf8e0 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 13:27:09 +0530 Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20Skeleton=20comp?= =?UTF-8?q?onent=20entry=20to=20package.json?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 633ae10382c..b1b62c9e923 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -27,7 +27,8 @@ "./styles/fonts": "./src/styles/fonts/index.css", "./switch": "./src/switch/index.ts", "./accordion": "./src/accordion/index.ts", - "./card": "./src/card/index.ts" + "./card": "./src/card/index.ts", + "./skeleton": "./src/skeleton/index.ts" }, "dependencies": { "@base-ui-components/react": "^1.0.0-beta.2", @@ -54,4 +55,4 @@ "storybook": "^9.1.2", "typescript": "catalog:" } -} +} \ No newline at end of file From c3f2a0a41c2dec2a555c0b86e88de5e467322d2d Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 13:30:57 +0530 Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=9A=A8=20fix:=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index b1b62c9e923..72f9b6695f2 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -55,4 +55,4 @@ "storybook": "^9.1.2", "typescript": "catalog:" } -} \ No newline at end of file +} From 8e0abd6153b2974c5070d4cd6c68bba8531541c5 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 13:41:27 +0530 Subject: [PATCH 06/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20rename?= =?UTF-8?q?=20Skeleton=20to=20skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/skeleton/index.ts | 1 + packages/propel/src/skeleton/root.tsx | 36 +++++++++++++++++++ .../propel/src/skeleton/skeleton.stories.tsx | 33 +++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 packages/propel/src/skeleton/index.ts create mode 100644 packages/propel/src/skeleton/root.tsx create mode 100644 packages/propel/src/skeleton/skeleton.stories.tsx diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts new file mode 100644 index 00000000000..1efe34c51ec --- /dev/null +++ b/packages/propel/src/skeleton/index.ts @@ -0,0 +1 @@ +export * from "./root"; diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx new file mode 100644 index 00000000000..dee2c27f060 --- /dev/null +++ b/packages/propel/src/skeleton/root.tsx @@ -0,0 +1,36 @@ +import React from "react"; +// helpers +import { cn } from "../utils/classname"; + +type SkeletonProps = { + children: React.ReactNode; + className?: string; + ariaLabel?: string; +}; + +const SkeletonRoot = ({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) => ( +
+ {children} +
+); + +type ItemProps = { + height?: string; + width?: string; + className?: string; +}; + +const SkeletonItem: React.FC = ({ height = "auto", width = "auto", className = "" }) => ( +
+); + +const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem }); + +SkeletonRoot.displayName = "plane-ui-skeleton"; +SkeletonItem.displayName = "plane-ui-skeleton-item"; + +export { Skeleton }; diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx new file mode 100644 index 00000000000..262bcd0529b --- /dev/null +++ b/packages/propel/src/skeleton/skeleton.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Skeleton } from "./index"; + +const meta: Meta = { + title: "Components/Skeleton", + component: Skeleton, + parameters: { + layout: "centered", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + ), +}; + +export const Card: Story = { + render: () => ( + + +
+ + +
+ + ), +}; From 5728efe4aaecd2f7cdb8382c7c98ff8f18b292df Mon Sep 17 00:00:00 2001 From: sriramveeraghanta Date: Fri, 5 Sep 2025 13:47:02 +0530 Subject: [PATCH 07/11] fix: rename fixes --- .../src/{Skeleton => _skeleton}/index.ts | 0 .../src/{Skeleton => _skeleton}/root.tsx | 0 .../skeleton.stories.tsx | 0 packages/propel/src/skeleton/index.ts | 1 - packages/propel/src/skeleton/root.tsx | 36 ------------------- .../propel/src/skeleton/skeleton.stories.tsx | 33 ----------------- 6 files changed, 70 deletions(-) rename packages/propel/src/{Skeleton => _skeleton}/index.ts (100%) rename packages/propel/src/{Skeleton => _skeleton}/root.tsx (100%) rename packages/propel/src/{Skeleton => _skeleton}/skeleton.stories.tsx (100%) delete mode 100644 packages/propel/src/skeleton/index.ts delete mode 100644 packages/propel/src/skeleton/root.tsx delete mode 100644 packages/propel/src/skeleton/skeleton.stories.tsx diff --git a/packages/propel/src/Skeleton/index.ts b/packages/propel/src/_skeleton/index.ts similarity index 100% rename from packages/propel/src/Skeleton/index.ts rename to packages/propel/src/_skeleton/index.ts diff --git a/packages/propel/src/Skeleton/root.tsx b/packages/propel/src/_skeleton/root.tsx similarity index 100% rename from packages/propel/src/Skeleton/root.tsx rename to packages/propel/src/_skeleton/root.tsx diff --git a/packages/propel/src/Skeleton/skeleton.stories.tsx b/packages/propel/src/_skeleton/skeleton.stories.tsx similarity index 100% rename from packages/propel/src/Skeleton/skeleton.stories.tsx rename to packages/propel/src/_skeleton/skeleton.stories.tsx diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts deleted file mode 100644 index 1efe34c51ec..00000000000 --- a/packages/propel/src/skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./root"; diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx deleted file mode 100644 index dee2c27f060..00000000000 --- a/packages/propel/src/skeleton/root.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -// helpers -import { cn } from "../utils/classname"; - -type SkeletonProps = { - children: React.ReactNode; - className?: string; - ariaLabel?: string; -}; - -const SkeletonRoot = ({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) => ( -
- {children} -
-); - -type ItemProps = { - height?: string; - width?: string; - className?: string; -}; - -const SkeletonItem: React.FC = ({ height = "auto", width = "auto", className = "" }) => ( -
-); - -const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem }); - -SkeletonRoot.displayName = "plane-ui-skeleton"; -SkeletonItem.displayName = "plane-ui-skeleton-item"; - -export { Skeleton }; diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx deleted file mode 100644 index 262bcd0529b..00000000000 --- a/packages/propel/src/skeleton/skeleton.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react-vite"; -import { Skeleton } from "./index"; - -const meta: Meta = { - title: "Components/Skeleton", - component: Skeleton, - parameters: { - layout: "centered", - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - render: () => ( - - - - ), -}; - -export const Card: Story = { - render: () => ( - - -
- - -
- - ), -}; From fc05679b022f7630134e0fbf9ee7cbe657274acb Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 13:48:45 +0530 Subject: [PATCH 08/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20rename?= =?UTF-8?q?=20skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/src/{_skeleton => skeleton}/index.ts | 0 packages/propel/src/{_skeleton => skeleton}/root.tsx | 0 packages/propel/src/{_skeleton => skeleton}/skeleton.stories.tsx | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename packages/propel/src/{_skeleton => skeleton}/index.ts (100%) rename packages/propel/src/{_skeleton => skeleton}/root.tsx (100%) rename packages/propel/src/{_skeleton => skeleton}/skeleton.stories.tsx (100%) diff --git a/packages/propel/src/_skeleton/index.ts b/packages/propel/src/skeleton/index.ts similarity index 100% rename from packages/propel/src/_skeleton/index.ts rename to packages/propel/src/skeleton/index.ts diff --git a/packages/propel/src/_skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx similarity index 100% rename from packages/propel/src/_skeleton/root.tsx rename to packages/propel/src/skeleton/root.tsx diff --git a/packages/propel/src/_skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx similarity index 100% rename from packages/propel/src/_skeleton/skeleton.stories.tsx rename to packages/propel/src/skeleton/skeleton.stories.tsx From 578137e2a030ef8aac7ebf40c13a35353fb9021a Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 13:55:05 +0530 Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=9A=A8=20fix:=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 2d1dbf224cc..1455a7da9d5 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -64,4 +64,4 @@ "tsdown": "catalog:", "typescript": "catalog:" } -} \ No newline at end of file +} From 8ebac75c55c63f12bb48972345327afb7374704d Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 14:33:50 +0530 Subject: [PATCH 10/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20add=20sk?= =?UTF-8?q?eleton=20entry=20to=20tsdown=20config=20and=20package.json?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 4 ++-- packages/propel/tsdown.config.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 1455a7da9d5..a01f0ffb088 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -29,11 +29,11 @@ "./popover": "./dist/popover/index.js", "./styles/fonts": "./dist/styles/fonts/index.css", "./switch": "./dist/switch/index.js", + "./skeleton": "./dist/skeleton/index.js", "./table": "./dist/table/index.js", "./tabs": "./dist/tabs/index.js", "./tooltip": "./dist/tooltip/index.js", - "./utils": "./dist/utils/index.js", - "./skeleton": "./dist/skeleton/index.js" + "./utils": "./dist/utils/index.js" }, "dependencies": { "@base-ui-components/react": "^1.0.0-beta.2", diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts index 05d57001aea..8f23c301cb8 100644 --- a/packages/propel/tsdown.config.ts +++ b/packages/propel/tsdown.config.ts @@ -13,6 +13,7 @@ export default defineConfig({ "src/icons/index.ts", "src/menu/index.ts", "src/popover/index.ts", + "src/skeleton/index.ts", "src/switch/index.ts", "src/table/index.ts", "src/tabs/index.ts", From 6bfe500474560b9bdb91e8ad7881c3ab87b7d247 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 5 Sep 2025 15:40:16 +0530 Subject: [PATCH 11/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20sorte?= =?UTF-8?q?d=20propel=20exports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/propel/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index a01f0ffb088..aa5ae59f6e3 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -27,9 +27,9 @@ "./icons": "./dist/icons/index.js", "./menu": "./dist/menu/index.js", "./popover": "./dist/popover/index.js", + "./skeleton": "./dist/skeleton/index.js", "./styles/fonts": "./dist/styles/fonts/index.css", "./switch": "./dist/switch/index.js", - "./skeleton": "./dist/skeleton/index.js", "./table": "./dist/table/index.js", "./tabs": "./dist/tabs/index.js", "./tooltip": "./dist/tooltip/index.js",