From 79551e60b2dc93701cb1959a4dd92ee7c37410d2 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 15 Apr 2024 09:15:02 +0000 Subject: [PATCH 1/2] feat: add switch --- package.json | 1 + pnpm-lock.yaml | 29 ++++++++++++++ src/components/Switch/Switch.stories.tsx | 51 ++++++++++++++++++++++++ src/components/Switch/Switch.tsx | 27 +++++++++++++ src/components/Switch/index.tsx | 1 + src/components/index.ts | 1 + 6 files changed, 110 insertions(+) create mode 100644 src/components/Switch/Switch.stories.tsx create mode 100644 src/components/Switch/Switch.tsx create mode 100644 src/components/Switch/index.tsx diff --git a/package.json b/package.json index 6429eab..a70e36a 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13cc951..893f993 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-switch': + 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-tabs': specifier: ^1.0.4 version: 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) @@ -2715,6 +2718,32 @@ packages: '@types/react': 18.2.28 react: 18.2.0 + /@radix-ui/react-switch@1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==} + 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-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-previous': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-use-size': 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-tabs@1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} peerDependencies: diff --git a/src/components/Switch/Switch.stories.tsx b/src/components/Switch/Switch.stories.tsx new file mode 100644 index 0000000..0573cd6 --- /dev/null +++ b/src/components/Switch/Switch.stories.tsx @@ -0,0 +1,51 @@ +import { Meta } from "@storybook/react"; +import { Switch } from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Switch", + component: Switch, + argTypes: { + disabled: { + control: "boolean", + defaultValue: false, + description: "if true, the switch is disabled" + }, + defaultChecked: { + control: "boolean", + defaultValue: false, + description: "if true, the switch is checked by default" + }, + half: { + control: "boolean", + defaultValue: false + } + }, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const defaultVariant: Story = { + name: "default", + args: { + defaultChecked: true, + half: false, + disabled: false + } +}; + +export const half: Story = { + name: "Half", + args: { + half: true, + defaultChecked: true, + disabled: false + } +}; diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx new file mode 100644 index 0000000..126b4bc --- /dev/null +++ b/src/components/Switch/Switch.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import * as SwitchPrimitives from "@radix-ui/react-switch"; +import { cn } from "../../utilities"; + +const Switch = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { half?: boolean } +>(({ className, half, ...props }, ref) => ( + + + +)); +Switch.displayName = SwitchPrimitives.Root.displayName; + +export { Switch }; diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx new file mode 100644 index 0000000..3b82ff0 --- /dev/null +++ b/src/components/Switch/index.tsx @@ -0,0 +1 @@ +export * from "./Switch"; diff --git a/src/components/index.ts b/src/components/index.ts index 6a63fab..00d4f17 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -18,3 +18,4 @@ export * from "./Toast"; export * from "./Dialog"; export * from "./Progress"; export * from "./Select"; +export * from "./Switch"; From 1762bea9325807f6e353864fd0226127037a1437 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 15 Apr 2024 09:15:53 +0000 Subject: [PATCH 2/2] feat: add changeset --- .changeset/neat-mangos-tickle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/neat-mangos-tickle.md diff --git a/.changeset/neat-mangos-tickle.md b/.changeset/neat-mangos-tickle.md new file mode 100644 index 0000000..59aaaf5 --- /dev/null +++ b/.changeset/neat-mangos-tickle.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add switch component