Skip to content

Commit 32718ba

Browse files
zbeyenszbeyens
committed
shadcn
1 parent e5b9dd3 commit 32718ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+517
-121
lines changed

‎.prettierignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
**/*.mdx
77
**/__tests__/**/*.html
88
**/.contentlayer
9-
**/__registry__
9+
**/__registry__
10+
**/og

apps/www/public/og.png renamed to apps/www/public/_og.png

File renamed without changes.

‎apps/www/public/r/styles/default/block-discussion.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎apps/www/public/r/styles/default/column-element.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"files": [
2121
{
2222
"path": "plate-ui/column-element.tsx",
23-
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, useComposedRef, withRef } from '@udecode/cn';\nimport { PathApi } from '@udecode/plate';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport { PlateElement, usePluginOption, useReadOnly , withHOC } from '@udecode/plate/react';\nimport { GripHorizontal } from 'lucide-react';\n\nimport { Button } from './button';\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n const { width } = props.element as TColumnElement;\n const readOnly = useReadOnly();\n const isSelectionAreaVisible = usePluginOption(\n BlockSelectionPlugin,\n 'isSelectionAreaVisible'\n );\n\n const { isDragging, previewRef, handleRef } = useDraggable({\n element: props.element,\n orientation: 'horizontal',\n type: 'column',\n canDropNode: ({ dragEntry, dropEntry }) =>\n PathApi.equals(\n PathApi.parent(dragEntry[1]),\n PathApi.parent(dropEntry[1])\n ),\n });\n\n return (\n <div className=\"group/column relative\" style={{ width: width ?? '100%' }}>\n {!readOnly && !isSelectionAreaVisible && (\n <div\n ref={handleRef}\n className={cn(\n 'absolute top-2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n 'pointer-events-auto flex items-center',\n 'opacity-0 transition-opacity group-hover/column:opacity-100'\n )}\n >\n <ColumnDragHandle />\n </div>\n )}\n\n <PlateElement\n ref={useComposedRef(ref, previewRef)}\n className={cn(\n className,\n 'h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0'\n )}\n {...props}\n >\n <div\n className={cn(\n 'relative h-full border border-transparent p-1.5',\n !readOnly && 'rounded-lg border-dashed border-border',\n isDragging && 'opacity-50'\n )}\n >\n {children}\n\n {!readOnly && !isSelectionAreaVisible && <DropLine />}\n </div>\n </PlateElement>\n </div>\n );\n })\n);\n\nconst ColumnDragHandle = React.memo(() => {\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"none\" variant=\"ghost\" className=\"h-5 px-1\">\n <GripHorizontal\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n />\n </Button>\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move column</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { dropLine } = useDropLine({ orientation: 'horizontal' });\n\n if (!dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n 'slate-dropLine',\n 'absolute bg-brand/50',\n dropLine === 'left' &&\n 'inset-y-0 left-[-10.5px] w-1 group-first/column:-left-1',\n dropLine === 'right' &&\n 'inset-y-0 right-[-11px] w-1 group-last/column:-right-1',\n className\n )}\n />\n );\n});\n",
23+
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, useComposedRef, withRef } from '@udecode/cn';\nimport { PathApi } from '@udecode/plate';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport {\n PlateElement,\n usePluginOption,\n useReadOnly,\n withHOC,\n} from '@udecode/plate/react';\nimport { GripHorizontal } from 'lucide-react';\n\nimport { Button } from './button';\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n const { width } = props.element as TColumnElement;\n const readOnly = useReadOnly();\n const isSelectionAreaVisible = usePluginOption(\n BlockSelectionPlugin,\n 'isSelectionAreaVisible'\n );\n\n const { isDragging, previewRef, handleRef } = useDraggable({\n element: props.element,\n orientation: 'horizontal',\n type: 'column',\n canDropNode: ({ dragEntry, dropEntry }) =>\n PathApi.equals(\n PathApi.parent(dragEntry[1]),\n PathApi.parent(dropEntry[1])\n ),\n });\n\n return (\n <div className=\"group/column relative\" style={{ width: width ?? '100%' }}>\n {!readOnly && !isSelectionAreaVisible && (\n <div\n ref={handleRef}\n className={cn(\n 'absolute top-2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n 'pointer-events-auto flex items-center',\n 'opacity-0 transition-opacity group-hover/column:opacity-100'\n )}\n >\n <ColumnDragHandle />\n </div>\n )}\n\n <PlateElement\n ref={useComposedRef(ref, previewRef)}\n className={cn(\n className,\n 'h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0'\n )}\n {...props}\n >\n <div\n className={cn(\n 'relative h-full border border-transparent p-1.5',\n !readOnly && 'rounded-lg border-dashed border-border',\n isDragging && 'opacity-50'\n )}\n >\n {children}\n\n {!readOnly && !isSelectionAreaVisible && <DropLine />}\n </div>\n </PlateElement>\n </div>\n );\n })\n);\n\nconst ColumnDragHandle = React.memo(() => {\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"none\" variant=\"ghost\" className=\"h-5 px-1\">\n <GripHorizontal\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n />\n </Button>\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move column</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { dropLine } = useDropLine({ orientation: 'horizontal' });\n\n if (!dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n 'slate-dropLine',\n 'absolute bg-brand/50',\n dropLine === 'left' &&\n 'inset-y-0 left-[-10.5px] w-1 group-first/column:-left-1',\n dropLine === 'right' &&\n 'inset-y-0 right-[-11px] w-1 group-last/column:-right-1',\n className\n )}\n />\n );\n});\n",
2424
"type": "registry:ui",
2525
"target": "components/plate-ui/column-element.tsx"
2626
},

‎apps/www/public/r/styles/default/column-group-element.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"files": [
2020
{
2121
"path": "plate-ui/column-group-element.tsx",
22-
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { type TColumnElement, setColumns } from '@udecode/plate-layout';\nimport { useDebouncePopoverOpen } from '@udecode/plate-layout/react';\nimport {\n PlateElement,\n useEditorRef,\n useElement,\n useReadOnly,\n useRemoveNodeButton } from '@udecode/plate/react';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const editor = useEditorRef();\n const readOnly = useReadOnly();\n const element = useElement<TColumnElement>();\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n const onColumnChange = (widths: string[]) => {\n setColumns(editor, {\n at: element,\n widths,\n });\n };\n\n if (readOnly) return <>{children}</>;\n\n return (\n <Popover open={isOpen} modal={false}>\n <PopoverAnchor>{children}</PopoverAnchor>\n <PopoverContent\n className=\"w-auto p-1\"\n onOpenAutoFocus={(e) => e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['50%', '50%'])}\n >\n <DoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['33%', '33%', '33%'])}\n >\n <ThreeColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['70%', '30%'])}\n >\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['30%', '70%'])}\n >\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['25%', '50%', '25%'])}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n <Trash2Icon />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n fill=\"#4C5161\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n",
22+
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { type TColumnElement, setColumns } from '@udecode/plate-layout';\nimport { useDebouncePopoverOpen } from '@udecode/plate-layout/react';\nimport {\n PlateElement,\n useEditorRef,\n useElement,\n useReadOnly,\n useRemoveNodeButton,\n} from '@udecode/plate/react';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\n\nimport { Button } from './button';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const editor = useEditorRef();\n const readOnly = useReadOnly();\n const element = useElement<TColumnElement>();\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n const onColumnChange = (widths: string[]) => {\n setColumns(editor, {\n at: element,\n widths,\n });\n };\n\n if (readOnly) return <>{children}</>;\n\n return (\n <Popover open={isOpen} modal={false}>\n <PopoverAnchor>{children}</PopoverAnchor>\n <PopoverContent\n className=\"w-auto p-1\"\n onOpenAutoFocus={(e) => e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['50%', '50%'])}\n >\n <DoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['33%', '33%', '33%'])}\n >\n <ThreeColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['70%', '30%'])}\n >\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['30%', '70%'])}\n >\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['25%', '50%', '25%'])}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n <Trash2Icon />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n fill=\"#4C5161\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n",
2323
"type": "registry:ui",
2424
"target": "components/plate-ui/column-group-element.tsx"
2525
},

0 commit comments

Comments
 (0)