From 047e6aa0c8f717ce780784bee492c68c728b1184 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 19 Jul 2024 14:26:50 +0000 Subject: [PATCH 1/3] feat: initialize radio group --- package.json | 1 + pnpm-lock.yaml | 120 ++++++++++++++++++ .../RadioGroup/RadioGroup.stories.tsx | 42 ++++++ src/components/RadioGroup/RadioGroup.tsx | 40 ++++++ src/components/RadioGroup/index.tsx | 1 + src/components/client.ts | 1 + 6 files changed, 205 insertions(+) create mode 100644 src/components/RadioGroup/RadioGroup.stories.tsx create mode 100644 src/components/RadioGroup/RadioGroup.tsx create mode 100644 src/components/RadioGroup/index.tsx diff --git a/package.json b/package.json index 0fdce2a..d7fe0db 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-scroll-area": "^1.1.0", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d26ec1..2268ed3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: '@radix-ui/react-progress': specifier: ^1.0.3 version: 1.0.3(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-radio-group': + specifier: ^1.2.0 + version: 1.2.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@radix-ui/react-scroll-area': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -1272,6 +1275,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-collection@1.1.0': + resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-compose-refs@1.0.1': resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: @@ -1422,6 +1438,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-id@1.1.0': + resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-menu@2.0.6': resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==} peerDependencies: @@ -1552,6 +1577,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-radio-group@1.2.0': + resolution: {integrity: sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-roving-focus@1.0.4': resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} peerDependencies: @@ -1565,6 +1603,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-roving-focus@1.1.0': + resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-scroll-area@1.1.0': resolution: {integrity: sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==} peerDependencies: @@ -1742,6 +1793,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-previous@1.1.0': + resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-rect@1.0.1': resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==} peerDependencies: @@ -7024,6 +7084,18 @@ snapshots: '@types/react': 18.2.28 '@types/react-dom': 18.2.13 + '@radix-ui/react-collection@1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-context': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-slot': 1.1.0(@types/react@18.2.28)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.28 + '@types/react-dom': 18.2.13 + '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: '@babel/runtime': 7.24.0 @@ -7173,6 +7245,13 @@ snapshots: optionalDependencies: '@types/react': 18.2.28 + '@radix-ui/react-id@1.1.0(@types/react@18.2.28)(react@18.2.0)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.28)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.28 + '@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.24.0 @@ -7308,6 +7387,24 @@ snapshots: '@types/react': 18.2.28 '@types/react-dom': 18.2.13 + '@radix-ui/react-radio-group@1.2.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-context': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-direction': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.28)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.28 + '@types/react-dom': 18.2.13 + '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.24.0 @@ -7326,6 +7423,23 @@ snapshots: '@types/react': 18.2.28 '@types/react-dom': 18.2.13 + '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-context': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-direction': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-id': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.28)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.28 + '@types/react-dom': 18.2.13 + '@radix-ui/react-scroll-area@1.1.0(@types/react-dom@18.2.13)(@types/react@18.2.28)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/number': 1.1.0 @@ -7526,6 +7640,12 @@ snapshots: optionalDependencies: '@types/react': 18.2.28 + '@radix-ui/react-use-previous@1.1.0(@types/react@18.2.28)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.28 + '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.28)(react@18.2.0)': dependencies: '@babel/runtime': 7.24.0 diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx new file mode 100644 index 0000000..844315f --- /dev/null +++ b/src/components/RadioGroup/RadioGroup.stories.tsx @@ -0,0 +1,42 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { RadioGroup, RadioGroupItem } from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Radio Group", + component: RadioGroup, + argTypes: {}, + decorators: [ + (Story) => ( +
+ +
+ ) + ], + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Default", + render: () => ( + +
+ + +
+
+ + +
+ + ) +}; diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx new file mode 100644 index 0000000..e551439 --- /dev/null +++ b/src/components/RadioGroup/RadioGroup.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; +import { cn } from "../../utilities"; + +const RadioGroup = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ; +}); +RadioGroup.displayName = RadioGroupPrimitive.Root.displayName; + +const RadioGroupItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + + + + ); +}); +RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName; + +export { RadioGroup, RadioGroupItem }; diff --git a/src/components/RadioGroup/index.tsx b/src/components/RadioGroup/index.tsx new file mode 100644 index 0000000..da254de --- /dev/null +++ b/src/components/RadioGroup/index.tsx @@ -0,0 +1 @@ +export * from "./RadioGroup"; diff --git a/src/components/client.ts b/src/components/client.ts index e30a543..4d55176 100644 --- a/src/components/client.ts +++ b/src/components/client.ts @@ -16,3 +16,4 @@ export * from "./Switch"; export * from "./AlertDialog"; export * from "./ScrollArea"; export * from "./HoverCard"; +export * from "./RadioGroup"; From 8f69fbdb355fe6b2442f91d6a24c768240189b29 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 19 Jul 2024 14:42:53 +0000 Subject: [PATCH 2/3] style: adjustments --- src/components/RadioGroup/RadioGroup.stories.tsx | 7 +++++-- src/components/RadioGroup/RadioGroup.tsx | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx index 844315f..3d7349e 100644 --- a/src/components/RadioGroup/RadioGroup.stories.tsx +++ b/src/components/RadioGroup/RadioGroup.stories.tsx @@ -6,7 +6,6 @@ import { StoryObj } from "@storybook/react"; const meta = { title: "Elements/Radio Group", component: RadioGroup, - argTypes: {}, decorators: [ (Story) => (
@@ -29,7 +28,7 @@ export const DefaultVariant: Story = { name: "Default", render: () => ( -
+
@@ -37,6 +36,10 @@ export const DefaultVariant: Story = {
+
+ + +
) }; diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx index e551439..4cfef88 100644 --- a/src/components/RadioGroup/RadioGroup.tsx +++ b/src/components/RadioGroup/RadioGroup.tsx @@ -18,12 +18,12 @@ const RadioGroupItem = React.forwardRef< - + Date: Fri, 19 Jul 2024 14:43:15 +0000 Subject: [PATCH 3/3] chore: add changeset --- .changeset/happy-goats-itch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/happy-goats-itch.md diff --git a/.changeset/happy-goats-itch.md b/.changeset/happy-goats-itch.md new file mode 100644 index 0000000..1cf8edf --- /dev/null +++ b/.changeset/happy-goats-itch.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add radio group