Skip to content

Commit 3df78e6

Browse files
LenghakLenghak
committed
docs(emoji&color-picker): updated registry
1 parent a7e58ea commit 3df78e6

File tree

2 files changed

+5
-5
lines changed

2 files changed

+5
-5
lines changed

‎apps/www/public/r/styles/default/color-dropdown-menu.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"type": "registry:ui"
2727
},
2828
{
29-
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n isBrightColor: boolean;\n name: string;\n value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n variant: 'outline',\n }),\n 'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0',\n !isBrightColor && 'border-transparent text-white hover:!text-white',\n className\n )}\n style={{ backgroundColor: value }}\n onSelect={(e) => {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? <Icons.check className=\"size-3\" /> : null}\n </DropdownMenuItem>\n );\n\n return name ? (\n <Tooltip>\n <TooltipTrigger>{content}</TooltipTrigger>\n <TooltipContent className=\"capitalize\">{name}</TooltipContent>\n </Tooltip>\n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n <div\n className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}\n {...props}\n >\n <TooltipProvider>\n {colors.map(({ isBrightColor, name, value }) => (\n <ColorDropdownMenuItem\n name={name}\n key={name ?? value}\n value={value}\n isBrightColor={isBrightColor}\n isSelected={color === value}\n updateColor={updateColor}\n />\n ))}\n {props.children}\n </TooltipProvider>\n </div>\n );\n}\n",
29+
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@udecode/cn';\nimport { Check } from 'lucide-react';\n\nimport { buttonVariants } from './button';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport type TColor = {\n isBrightColor: boolean;\n name: string;\n value: string;\n};\n\ntype ColorDropdownMenuItemProps = {\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n value: string;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n className,\n isBrightColor,\n isSelected,\n name,\n updateColor,\n value,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n <DropdownMenuItem\n className={cn(\n buttonVariants({\n isMenu: true,\n variant: 'outline',\n }),\n 'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',\n !isBrightColor && 'border-transparent text-white hover:!text-white',\n className\n )}\n style={{ backgroundColor: value }}\n onSelect={(e) => {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? <Check className=\"size-3\" /> : null}\n </DropdownMenuItem>\n );\n\n return name ? (\n <Tooltip>\n <TooltipTrigger>{content}</TooltipTrigger>\n <TooltipContent className=\"mb-1 capitalize\">{name}</TooltipContent>\n </Tooltip>\n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n colors: TColor[];\n updateColor: (color: string) => void;\n color?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport function ColorDropdownMenuItems({\n className,\n color,\n colors,\n updateColor,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n <div\n className={cn(\n 'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',\n className\n )}\n {...props}\n >\n <TooltipProvider>\n {colors.map(({ isBrightColor, name, value }) => (\n <ColorDropdownMenuItem\n name={name}\n key={name ?? value}\n value={value}\n isBrightColor={isBrightColor}\n isSelected={color === value}\n updateColor={updateColor}\n />\n ))}\n {props.children}\n </TooltipProvider>\n </div>\n );\n}\n",
3030
"path": "plate-ui/color-dropdown-menu-items.tsx",
3131
"target": "components/plate-ui/color-dropdown-menu-items.tsx",
3232
"type": "registry:ui"
@@ -44,13 +44,13 @@
4444
"type": "registry:ui"
4545
},
4646
{
47-
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { Separator } from './separator';\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\n ref={ref}\n className={cn('flex flex-col gap-4 p-2', className)}\n {...props}\n >\n\n <ColorDropdownMenuItems\n color={color}\n colors={colors}\n updateColor={updateColor}\n />\n\n <Separator />\n {/* {color && (\n <DropdownMenuItem\n className={buttonVariants({\n isMenu: true,\n variant: 'outline',\n })}\n onClick={clearColor}\n >\n Clear\n </DropdownMenuItem>\n )} */}\n <ColorCustom\n color={color}\n colors={colors}\n customColors={customColors}\n updateColor={updateColor}\n updateCustomColor={updateCustomColor}\n clearColor={clearColor}\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",
47+
"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 {\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n} 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 <DropdownMenuLabel>Color Picker</DropdownMenuLabel>\n <DropdownMenuGroup>\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 <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <ColorDropdownMenuItems\n color={color}\n className=\"p-2\"\n colors={colors}\n updateColor={updateColor}\n />\n </DropdownMenuGroup>\n {color && (\n <React.Fragment>\n <DropdownMenuSeparator />\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 className=\"mr-2\" />\n <span>Clear</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </React.Fragment>\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",
4848
"path": "plate-ui/color-picker.tsx",
4949
"target": "components/plate-ui/color-picker.tsx",
5050
"type": "registry:ui"
5151
},
5252
{
53-
"content": "'use client';\n\nimport React 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';\n// import { ColorInput } from './color-input';\nimport { DropdownMenuItem } from './dropdown-menu';\n\ntype ColorCustomProps = {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n};\n\nexport function ColorCustom({\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\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=\"flex flex-col gap-4\">\n {/* <ColorInput {...inputProps}>\n <DropdownMenuItem\n className={buttonVariants({\n isMenu: true,\n variant: 'outline',\n })}\n {...menuItemProps}\n >\n CUSTOM\n </DropdownMenuItem>\n </ColorInput> */}\n\n <ColorDropdownMenuItems\n color={color}\n colors={state.computedColors}\n updateColor={updateColor}\n >\n <DropdownMenuItem\n className={cn(\n buttonVariants({ size: 'icon', variant: 'outline' }),\n 'size-6 rounded-full'\n )}\n onClick={clearColor}\n >\n <Icons.colorClear />\n </DropdownMenuItem>\n </ColorDropdownMenuItems>\n </div>\n );\n}\n",
53+
"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",
5454
"path": "plate-ui/colors-custom.tsx",
5555
"target": "components/plate-ui/colors-custom.tsx",
5656
"type": "registry:ui"

0 commit comments

Comments
 (0)