From e6acf0a5f38a2f4c492280e24d71a2a9646c9b6c Mon Sep 17 00:00:00 2001 From: an2n Date: Sat, 21 Sep 2024 08:41:02 +0200 Subject: [PATCH] feat(dropdown): add demo implementation for Dropdown component (#212) --- .../ui/dropdown/dropdown.stories.tsx | 108 ++++++++++++++++++ .../ui/dropdown/dropdown.stories.tsx | 108 ++++++++++++++++++ .../ui/dropdown/dropdown.stories.tsx | 108 ++++++++++++++++++ 3 files changed, 324 insertions(+) create mode 100644 apps/nextjs-app/src/components/ui/dropdown/dropdown.stories.tsx create mode 100644 apps/nextjs-pages/src/components/ui/dropdown/dropdown.stories.tsx create mode 100644 apps/react-vite/src/components/ui/dropdown/dropdown.stories.tsx diff --git a/apps/nextjs-app/src/components/ui/dropdown/dropdown.stories.tsx b/apps/nextjs-app/src/components/ui/dropdown/dropdown.stories.tsx new file mode 100644 index 00000000..bfd033e0 --- /dev/null +++ b/apps/nextjs-app/src/components/ui/dropdown/dropdown.stories.tsx @@ -0,0 +1,108 @@ +import type { Meta } from '@storybook/react'; +import React from 'react'; + +import { Button } from '@/components/ui/button'; + +import { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, + DropdownMenuRadioGroup, +} from './dropdown'; + +const meta: Meta = { + component: DropdownMenu, +}; + +export default meta; + +export const Default = () => ( + + + + + + Item One + Item Two + + Item Three + + +); + +export const WithCheckboxItems = () => { + const [checked, setChecked] = React.useState(true); + const [checked2, setChecked2] = React.useState(false); + + return ( + + + + + + + Option One + + + Option Two + + + + ); +}; + +export const WithRadioItems = () => { + const [value, setValue] = React.useState('one'); + + return ( + + + + + + Select an option + + + Option One + Option Two + + Option Three + + + + + ); +}; + +export const WithSubmenus = () => ( + + + + + + Item One + + More Options + + Sub Item One + Sub Item Two + + + Item Three + + +); diff --git a/apps/nextjs-pages/src/components/ui/dropdown/dropdown.stories.tsx b/apps/nextjs-pages/src/components/ui/dropdown/dropdown.stories.tsx new file mode 100644 index 00000000..bfd033e0 --- /dev/null +++ b/apps/nextjs-pages/src/components/ui/dropdown/dropdown.stories.tsx @@ -0,0 +1,108 @@ +import type { Meta } from '@storybook/react'; +import React from 'react'; + +import { Button } from '@/components/ui/button'; + +import { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, + DropdownMenuRadioGroup, +} from './dropdown'; + +const meta: Meta = { + component: DropdownMenu, +}; + +export default meta; + +export const Default = () => ( + + + + + + Item One + Item Two + + Item Three + + +); + +export const WithCheckboxItems = () => { + const [checked, setChecked] = React.useState(true); + const [checked2, setChecked2] = React.useState(false); + + return ( + + + + + + + Option One + + + Option Two + + + + ); +}; + +export const WithRadioItems = () => { + const [value, setValue] = React.useState('one'); + + return ( + + + + + + Select an option + + + Option One + Option Two + + Option Three + + + + + ); +}; + +export const WithSubmenus = () => ( + + + + + + Item One + + More Options + + Sub Item One + Sub Item Two + + + Item Three + + +); diff --git a/apps/react-vite/src/components/ui/dropdown/dropdown.stories.tsx b/apps/react-vite/src/components/ui/dropdown/dropdown.stories.tsx new file mode 100644 index 00000000..bfd033e0 --- /dev/null +++ b/apps/react-vite/src/components/ui/dropdown/dropdown.stories.tsx @@ -0,0 +1,108 @@ +import type { Meta } from '@storybook/react'; +import React from 'react'; + +import { Button } from '@/components/ui/button'; + +import { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, + DropdownMenuRadioGroup, +} from './dropdown'; + +const meta: Meta = { + component: DropdownMenu, +}; + +export default meta; + +export const Default = () => ( + + + + + + Item One + Item Two + + Item Three + + +); + +export const WithCheckboxItems = () => { + const [checked, setChecked] = React.useState(true); + const [checked2, setChecked2] = React.useState(false); + + return ( + + + + + + + Option One + + + Option Two + + + + ); +}; + +export const WithRadioItems = () => { + const [value, setValue] = React.useState('one'); + + return ( + + + + + + Select an option + + + Option One + Option Two + + Option Three + + + + + ); +}; + +export const WithSubmenus = () => ( + + + + + + Item One + + More Options + + Sub Item One + Sub Item Two + + + Item Three + + +);