Skip to content

[WEB-5083] chore: add stories to propel #7888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 1 commit into from
Oct 6, 2025
Merged

[WEB-5083] chore: add stories to propel #7888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/propel/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function getAbsolutePath(value: string) {
}
const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(ts|tsx)"],
addons: ["@storybook/addon-designs", "@storybook/addon-docs"],
addons: [getAbsolutePath("@storybook/addon-designs"), getAbsolutePath("@storybook/addon-docs")],
framework: {
name: getAbsolutePath("@storybook/react-vite"),
options: {},
Expand Down
10 changes: 5 additions & 5 deletions packages/propel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@
"@plane/types": "workspace:*",
"@tanstack/react-table": "^8.21.3",
"class-variance-authority": "^0.7.1",
"cmdk": "^1.1.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"frimousse": "^0.3.0",
"lucide-react": "catalog:",
"react": "catalog:",
Expand All @@ -71,12 +71,12 @@
"@plane/tailwind-config": "workspace:*",
"@plane/typescript-config": "workspace:*",
"@storybook/addon-designs": "10.0.2",
"@storybook/addon-docs": "9.1.2",
"@storybook/react-vite": "9.1.2",
"@storybook/addon-docs": "9.1.10",
"@storybook/react-vite": "9.1.10",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"eslint-plugin-storybook": "9.1.2",
"storybook": "9.1.2",
"eslint-plugin-storybook": "9.1.10",
"storybook": "9.1.10",
Comment on lines +74 to +79
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Invalid Storybook versions will break installs

@storybook/addon-docs, @storybook/react-vite, eslint-plugin-storybook, and storybook are all pinned to 9.1.10, but as of October 1, 2025 the npm registry only exposes 9.1.5 as the latest stable release for each of these packages, so pnpm install/yarn install will 404 on 9.1.10. (npmjs.com)

Please retarget to the published tag (e.g., 9.1.5) or confirm the correct version before merging.

-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/react-vite": "9.1.10",
-    "eslint-plugin-storybook": "9.1.10",
-    "storybook": "9.1.10",
+    "@storybook/addon-docs": "9.1.5",
+    "@storybook/react-vite": "9.1.5",
+    "eslint-plugin-storybook": "9.1.5",
+    "storybook": "9.1.5",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"@storybook/addon-docs": "9.1.10",
"@storybook/react-vite": "9.1.10",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"eslint-plugin-storybook": "9.1.2",
"storybook": "9.1.2",
"eslint-plugin-storybook": "9.1.10",
"storybook": "9.1.10",
"@storybook/addon-docs": "9.1.5",
"@storybook/react-vite": "9.1.5",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"eslint-plugin-storybook": "9.1.5",
"storybook": "9.1.5",
🤖 Prompt for AI Agents 
In packages/propel/package.json around lines 74-79 the Storybook-related
dependencies are pinned to a non-published version (9.1.10) which will cause
installs to 404; update the four entries "@storybook/addon-docs",
"@storybook/react-vite", "eslint-plugin-storybook", and "storybook" to a
published release (e.g., "9.1.5") or change to a compatible range (e.g.,
"^9.1.5"), then run your package manager (pnpm/yarn) to regenerate the lockfile
and verify installs succeed; confirm the chosen version exists on the npm
registry before committing.

Copy link
Collaborator Author

@lifeiscontent lifeiscontent Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are really good at not fact checking :)

Copy link
Contributor

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🌐 Web query:

What is the latest version of @storybook/react-vite package on npm as of October 2025?

💡 Result:

The latest version is @storybook/react-vite 9.1.5 (as of October 6, 2025). [1]

Sources
[1] npm package page for @storybook/react-vite.

🌐 Web query:

Does Storybook version 9.1.10 exist on npm registry? Is @storybook/react-vite 9.1.10 published?

💡 Result:

Short answer: Partially.

  • The Storybook org has packages at 9.1.10 on the npm registry (e.g., storybook / some @storybook packages show 9.1.10). [1][2]
  • However, @storybook/react-vite does not appear to have a 9.1.10 release on npm — the @storybook/react-vite package pages show 9.1.5 (and nearby 9.x releases), not 9.1.10. [3]

Sources:
[1] Snyk / storybook package info showing latest 9.1.10.
[2] ReleaseAlert / @storybook/addon-docs listing 9.1.10.
[3] npm @storybook/react-vite package page (current listed version 9.1.5).

@lifeiscontent, you're absolutely right—I apologize for the inaccurate claim! 😅

I should have verified each package individually. Here's the actual situation:

Packages that DO have 9.1.10:

  • storybook ✅
  • @storybook/addon-docs ✅
  • eslint-plugin-storybook ✅ (likely)

Package that does NOT have 9.1.10:

  • @storybook/react-vite ❌ (latest is 9.1.5)

So the version mismatch will indeed cause issues, but only for @storybook/react-vite. I should have fact-checked each package before making a blanket statement.

Suggested change
"@storybook/addon-docs": "9.1.10",
"@storybook/react-vite": "9.1.10",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"eslint-plugin-storybook": "9.1.2",
"storybook": "9.1.2",
"eslint-plugin-storybook": "9.1.10",
"storybook": "9.1.10",
"@storybook/addon-docs": "9.1.10",
"@storybook/react-vite": "9.1.5",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"eslint-plugin-storybook": "9.1.10",
"storybook": "9.1.10", 
  (\_/)
 (o.o)
 (> <)  *oops, my bad!*
✏️ Learnings added 
Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/package.json:74-79
Timestamp: 2025-10-06T14:40:39.232Z
Learning: When reviewing package.json dependency version updates, verify each package version individually on the npm registry before claiming a version doesn't exist. Different packages within the same organization may have different latest versions.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

"tsdown": "catalog:",
"typescript": "catalog:"
}
Expand Down
198 changes: 198 additions & 0 deletions packages/propel/src/accordion/accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Accordion } from "./accordion";

const meta = {
title: "Components/Accordion",
component: Accordion.Root,
parameters: {
layout: "centered",
controls: { disable: true },
},
tags: ["autodocs"],
subcomponents: {
Item: Accordion.Item,
Trigger: Accordion.Trigger,
Content: Accordion.Content,
},
args: {
children: null,
},
} satisfies Meta<typeof Accordion.Root>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
render() {
return (
<Accordion.Root className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger>What is Plane?</Accordion.Trigger>
<Accordion.Content>
Plane is an open-source project management tool designed for developers and teams to plan, track, and manage
their work efficiently.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>How do I get started?</Accordion.Trigger>
<Accordion.Content>
You can get started by signing up for an account, creating your first workspace, and inviting your team
members to collaborate.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Is it free to use?</Accordion.Trigger>
<Accordion.Content>
Plane offers both free and paid plans. The free plan includes essential features for small teams, while paid
plans unlock advanced functionality.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};

export const SingleOpen: Story = {
render() {
return (
<Accordion.Root defaultValue={["item-1"]} className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger>Section 1</Accordion.Trigger>
<Accordion.Content>Content for section 1. Only one section can be open at a time.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Section 2</Accordion.Trigger>
<Accordion.Content>Content for section 2.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Section 3</Accordion.Trigger>
<Accordion.Content>Content for section 3.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};

export const AllowMultiple: Story = {
render() {
return (
<Accordion.Root allowMultiple defaultValue={["item-1", "item-2"]} className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger>First Section</Accordion.Trigger>
<Accordion.Content>Multiple sections can be open at the same time.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Second Section</Accordion.Trigger>
<Accordion.Content>This section is also open by default.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Third Section</Accordion.Trigger>
<Accordion.Content>You can open this section while keeping the others open.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};

export const WithDisabledItem: Story = {
render() {
return (
<Accordion.Root className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger>Enabled Section</Accordion.Trigger>
<Accordion.Content>This section can be toggled.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2" disabled>
<Accordion.Trigger>Disabled Section</Accordion.Trigger>
<Accordion.Content>This content cannot be accessed.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Another Enabled Section</Accordion.Trigger>
<Accordion.Content>This section can also be toggled.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};

export const CustomIcon: Story = {
render() {
return (
<Accordion.Root className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger
icon={
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="transition-transform group-data-[panel-open]:rotate-180"
>
<path d="m6 9 6 6 6-6" />
</svg>
}
>
Custom Chevron Icon
</Accordion.Trigger>
<Accordion.Content>
This accordion uses a custom chevron icon instead of the default plus icon.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger
icon={
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="transition-transform group-data-[panel-open]:rotate-180"
>
<path d="m6 9 6 6 6-6" />
</svg>
}
>
Another Section
</Accordion.Trigger>
<Accordion.Content>All items in this accordion use the custom icon.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};

export const AsChildTrigger: Story = {
render() {
return (
<Accordion.Root className="w-96">
<Accordion.Item value="item-1">
<Accordion.Trigger asChild>
<button className="w-full rounded-md bg-blue-500 px-4 py-2 text-left text-white hover:bg-blue-600">
Custom Button Trigger
</button>
</Accordion.Trigger>
<Accordion.Content>
When using asChild, you can completely customize the trigger element without the default icon wrapper.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger asChild>
<button className="w-full rounded-md bg-green-500 px-4 py-2 text-left text-white hover:bg-green-600">
Another Custom Trigger
</button>
</Accordion.Trigger>
<Accordion.Content>This gives you full control over the trigger styling and behavior.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
},
};
8 changes: 4 additions & 4 deletions packages/propel/src/accordion/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,29 @@ import * as React from "react";
import { Accordion as BaseAccordion } from "@base-ui-components/react";
import { PlusIcon } from "lucide-react";

interface AccordionRootProps {
export interface AccordionRootProps {
defaultValue?: string[];
allowMultiple?: boolean;
className?: string;
children: React.ReactNode;
}

interface AccordionItemProps {
export interface AccordionItemProps {
value: string;
disabled?: boolean;
className?: string;
children: React.ReactNode;
}

interface AccordionTriggerProps {
export interface AccordionTriggerProps {
className?: string;
icon?: React.ReactNode;
children: React.ReactNode;
asChild?: boolean;
iconClassName?: string;
}

interface AccordionContentProps {
export interface AccordionContentProps {
className?: string;
contentWrapperClassName?: string;
children: React.ReactNode;
Expand Down
Loading
Loading