From 7f9bc772530faec46d2c9608100574bc4f2b43fd Mon Sep 17 00:00:00 2001 From: akhilmhdh Date: Sun, 22 Jan 2023 22:09:58 +0530 Subject: [PATCH] feat(ui): added checkbox component --- frontend/package-lock.json | 37 ++++++++++++++ frontend/package.json | 1 + .../v2/Checkbox/Checkbox.stories.tsx | 34 +++++++++++++ .../src/components/v2/Checkbox/Checkbox.tsx | 51 +++++++++++++++++++ frontend/src/components/v2/Checkbox/index.tsx | 2 + frontend/src/components/v2/index.tsx | 1 + 6 files changed, 126 insertions(+) create mode 100644 frontend/src/components/v2/Checkbox/Checkbox.stories.tsx create mode 100644 frontend/src/components/v2/Checkbox/Checkbox.tsx create mode 100644 frontend/src/components/v2/Checkbox/index.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 042c69576..a7ebe41f0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "@headlessui/react": "^1.6.6", "@radix-ui/react-accordion": "^1.1.0", "@radix-ui/react-alert-dialog": "^1.0.2", + "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-popover": "^1.0.3", @@ -3660,6 +3661,26 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz", + "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-collapsible": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz", @@ -24635,6 +24656,22 @@ "@radix-ui/react-primitive": "1.0.1" } }, + "@radix-ui/react-checkbox": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz", + "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + } + }, "@radix-ui/react-collapsible": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 43fa01a8b..dc5a8072e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "@headlessui/react": "^1.6.6", "@radix-ui/react-accordion": "^1.1.0", "@radix-ui/react-alert-dialog": "^1.0.2", + "@radix-ui/react-checkbox": "^1.0.1", "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-label": "^2.0.0", "@radix-ui/react-popover": "^1.0.3", diff --git a/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx b/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx new file mode 100644 index 000000000..0dfe1b4a1 --- /dev/null +++ b/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Checkbox } from './Checkbox'; + +const meta: Meta = { + title: 'Components/Checkbox', + component: Checkbox, + tags: ['v2'], + argTypes: {} +}; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Simple: Story = { + args: { + children: 'Accept the condition' + } +}; + +export const Disabled: Story = { + args: { + children: 'Accept the condition', + isDisabled: true + } +}; + +export const Required: Story = { + args: { + children: 'Accept the condition', + isRequired: true + } +}; diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx new file mode 100644 index 000000000..392aeca0f --- /dev/null +++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx @@ -0,0 +1,51 @@ +import { ReactNode } from 'react'; +import { faCheck } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { twMerge } from 'tailwind-merge'; + +export type CheckboxProps = Omit< + CheckboxPrimitive.CheckboxProps, + 'checked' | 'disabled' | 'required' +> & { + children: ReactNode; + id: string; + isDisabled?: boolean; + isChecked?: boolean; + isRequired?: boolean; +}; + +export const Checkbox = ({ + children, + className, + id, + isChecked, + isDisabled, + isRequired, + ...props +}: CheckboxProps): JSX.Element => { + return ( +
+ + + + + + +
+ ); +}; diff --git a/frontend/src/components/v2/Checkbox/index.tsx b/frontend/src/components/v2/Checkbox/index.tsx new file mode 100644 index 000000000..fcd016662 --- /dev/null +++ b/frontend/src/components/v2/Checkbox/index.tsx @@ -0,0 +1,2 @@ +export type { CheckboxProps } from './Checkbox'; +export { Checkbox } from './Checkbox'; diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx index 0fbed1e22..cd8dbf47d 100644 --- a/frontend/src/components/v2/index.tsx +++ b/frontend/src/components/v2/index.tsx @@ -1,5 +1,6 @@ export * from './Button'; export * from './Card'; +export * from './Checkbox'; export * from './FormControl'; export * from './IconButton'; export * from './Input';