Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbeyens
zbeyens authored Nov 1, 2024
1 parent 83ebb10 commit 05c11b2
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions apps/www/public/r/styles/default/color-dropdown-menu.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@
"type": "registry:ui"
},
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n <DropdownMenuGroup label=\"Color picker\">\n <ColorCustom\n color={color}\n className=\"p-2\"\n colors={colors}\n customColors={customColors}\n updateColor={updateColor}\n updateCustomColor={updateCustomColor}\n />\n </DropdownMenuGroup>\n <DropdownMenuGroup>\n <ColorDropdownMenuItems\n color={color}\n className=\"p-2\"\n colors={colors}\n updateColor={updateColor}\n />\n </DropdownMenuGroup>\n {color && (\n <DropdownMenuGroup>\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: false,\n size: 'sm',\n variant: 'ghost',\n }),\n 'w-full justify-start'\n )}\n onClick={clearColor}\n >\n <Icons.colorClear />\n <span>Clear</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n )}\n </div>\n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('flex flex-col', className)} {...props}>\n <DropdownMenuGroup label=\"Color picker\">\n <ColorCustom\n color={color}\n className=\"p-2\"\n colors={colors}\n customColors={customColors}\n updateColor={updateColor}\n updateCustomColor={updateCustomColor}\n />\n </DropdownMenuGroup>\n <DropdownMenuGroup>\n <ColorDropdownMenuItems\n color={color}\n className=\"p-2\"\n colors={colors}\n updateColor={updateColor}\n />\n </DropdownMenuGroup>\n {color && (\n <DropdownMenuGroup>\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: false,\n size: 'sm',\n variant: 'ghost',\n }),\n 'w-full justify-start'\n )}\n onClick={clearColor}\n >\n <EraserIcon />\n <span>Clear</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n )}\n </div>\n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n",
"path": "plate-ui/color-picker.tsx",
"target": "components/plate-ui/color-picker.tsx",
"type": "registry:ui"
},
{
"content": "'use client';\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useColorsCustom,\n useColorsCustomState,\n} from '@udecode/plate-font/react';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\n\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport function ColorCustom({\n className,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n}: ColorCustomProps) {\n const state = useColorsCustomState({\n color,\n colors,\n customColors,\n updateCustomColor,\n });\n const { inputProps, menuItemProps } = useColorsCustom(state);\n\n return (\n <div className={cn('relative flex flex-col gap-4', className)} {...props}>\n <ColorDropdownMenuItems\n color={color}\n colors={state.computedColors}\n updateColor={updateColor}\n >\n <ColorInput {...inputProps}>\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n size: 'icon',\n variant: 'outline',\n }),\n 'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'\n )}\n {...menuItemProps}\n >\n <span className=\"sr-only\">Custom</span>\n <Icons.add />\n </DropdownMenuItem>\n </ColorInput>\n </ColorDropdownMenuItems>\n </div>\n );\n}\n",
"content": "'use client';\n\nimport React, { type ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n useColorsCustom,\n useColorsCustomState,\n} from '@udecode/plate-font/react';\nimport { PlusIcon } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorInput } from './color-input';\n\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport function ColorCustom({\n className,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n}: ColorCustomProps) {\n const state = useColorsCustomState({\n color,\n colors,\n customColors,\n updateCustomColor,\n });\n const { inputProps, menuItemProps } = useColorsCustom(state);\n\n return (\n <div className={cn('relative flex flex-col gap-4', className)} {...props}>\n <ColorDropdownMenuItems\n color={color}\n colors={state.computedColors}\n updateColor={updateColor}\n >\n <ColorInput {...inputProps}>\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n size: 'icon',\n variant: 'outline',\n }),\n 'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'\n )}\n {...menuItemProps}\n >\n <span className=\"sr-only\">Custom</span>\n <PlusIcon />\n </DropdownMenuItem>\n </ColorInput>\n </ColorDropdownMenuItems>\n </div>\n );\n}\n",
"path": "plate-ui/colors-custom.tsx",
"target": "components/plate-ui/colors-custom.tsx",
"type": "registry:ui"
Expand Down

0 comments on commit 05c11b2

Please sign in to comment.