From 5c7f017b1c2cf78f1391028571a01770bf9c4645 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:58:56 +0000 Subject: [PATCH 1/2] feat: collapsible component --- package.json | 1 + pnpm-lock.yaml | 30 +++++++++++ .../Collapsible/Collapsible.stories.tsx | 42 +++++++++++++++ src/components/Collapsible/Collapsible.tsx | 53 +++++++++++++++++++ src/components/Collapsible/index.tsx | 1 + src/components/index.ts | 1 + 6 files changed, 128 insertions(+) create mode 100644 src/components/Collapsible/Collapsible.stories.tsx create mode 100644 src/components/Collapsible/Collapsible.tsx create mode 100644 src/components/Collapsible/index.tsx diff --git a/package.json b/package.json index 68ed299..39aec69 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ }, "dependencies": { "@radix-ui/react-avatar": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-table": "^8.15.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 507d6ff..f1a9b3f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ dependencies: '@radix-ui/react-avatar': specifier: ^1.0.4 version: 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collapsible': + specifier: ^1.0.3 + version: 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-dropdown-menu': specifier: ^2.0.6 version: 2.0.6(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) @@ -2224,6 +2227,33 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-collapsible@1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/src/components/Collapsible/Collapsible.stories.tsx b/src/components/Collapsible/Collapsible.stories.tsx new file mode 100644 index 0000000..e1e5140 --- /dev/null +++ b/src/components/Collapsible/Collapsible.stories.tsx @@ -0,0 +1,42 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { + Collapsible, + CollapsibleHeader, + CollapsibleContent, + CollapsibleTrigger, + CollapsiblePanel +} from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Collapsible", + component: Collapsible, + argTypes: {}, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Default", + render: () => ( + + + Click me to toggle + + +
    +
  • Item 1
    • +
  • Item 2
    • +
+ + + ) +}; diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx new file mode 100644 index 0000000..54b0c50 --- /dev/null +++ b/src/components/Collapsible/Collapsible.tsx @@ -0,0 +1,53 @@ +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"; +import { VariantProps, cva } from "class-variance-authority"; +import React, { ComponentPropsWithoutRef, ElementRef, HTMLAttributes, forwardRef } from "react"; +import { cn } from "../../utilities"; + +const Collapsible = CollapsiblePrimitive.Root; + +const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger; + +const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent; + +const CollapsiblePanel = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, ...props }, forwardedRef) => ( + +)); + +CollapsiblePanel.displayName = "Collapsible Panel"; + +const headerVairants = cva("px-5 py-3", { + variants: { + intent: { + primary: "bg-theme-surface-primary", + secondary: "bg-theme-surface-secondary" + } + }, + defaultVariants: { + intent: "primary" + } +}); + +export interface CollapsibleHeaderProps + extends HTMLAttributes, + VariantProps {} + +const CollapsibleHeader = forwardRef( + ({ className, children, intent, ...props }, ref) => { + return ( +
+ {children} +
+ ); + } +); + +CollapsibleHeader.displayName = "Collapsible Header"; + +export { Collapsible, CollapsibleContent, CollapsibleHeader, CollapsiblePanel, CollapsibleTrigger }; diff --git a/src/components/Collapsible/index.tsx b/src/components/Collapsible/index.tsx new file mode 100644 index 0000000..5764899 --- /dev/null +++ b/src/components/Collapsible/index.tsx @@ -0,0 +1 @@ +export * from "./Collapsible"; diff --git a/src/components/index.ts b/src/components/index.ts index bffbe7b..7a90d7a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -9,3 +9,4 @@ export * from "./Table"; export * from "./Tag"; export * from "./Badge"; export * from "./Spinner"; +export * from "./Collapsible"; From 398a887962c1f3d5e7537a1bc87bc10a8848642c Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Thu, 4 Apr 2024 07:59:38 +0000 Subject: [PATCH 2/2] chore: changeset --- .changeset/mighty-bees-rush.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mighty-bees-rush.md diff --git a/.changeset/mighty-bees-rush.md b/.changeset/mighty-bees-rush.md new file mode 100644 index 0000000..3987289 --- /dev/null +++ b/.changeset/mighty-bees-rush.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add collapsible component