@xjur-ui/react 1.0.3 → 1.0.4

package/src/components/rich-editor.tsx

@@ -0,0 +1,371 @@
+import { cx } from '@xjur-ui/util'
+import { useCallback, useMemo, useState, type ComponentProps } from 'react'
+import {
+  EditorContent,
+  EditorContext,
+  useCurrentEditor as useRichTextEditor,
+  useEditorState as useRichTextEditorState,
+  useEditor,
+  type EditorOptions,
+  Extension
+} from '@tiptap/react'
+import { StarterKit } from '@tiptap/starter-kit'
+import { Heading, type Level } from '@tiptap/extension-heading'
+import { Placeholder } from '@tiptap/extensions'
+import { useOS } from '../hooks'
+import { Icon, type IconType } from './icon'
+import { Button, type ButtonProps } from './button'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemText,
+  DropdownMenuList,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from './dropdown-menu'
+import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip'
+import { Typography } from './typography'
+
+const headingClasses: Partial<Record<Level, string>> = {
+  1: 'text-size-body-md',
+  2: 'text-size-title-lg',
+  3: 'text-size-headline-lg'
+}
+
+export function RichEditorRoot({
+  className,
+  editorOptions,
+  ...props
+}: ComponentProps<'div'> & {
+  editorOptions?: Partial<
+    Omit<EditorOptions, 'extensions'> & {
+      extensions?: Extension[]
+    }
+  >
+}) {
+  const editor = useEditor({
+    ...editorOptions,
+    extensions: [
+      StarterKit.configure({
+        bulletList: {
+          HTMLAttributes: {
+            class: 'list-disc list-outside pl-large-1x'
+          }
+        },
+        orderedList: {
+          HTMLAttributes: {
+            class: 'list-decimal list-outside pl-large-1x'
+          }
+        },
+        heading: false
+      }),
+      Placeholder.configure({
+        placeholder: ({ node, editor }) =>
+          node.type.name === 'paragraph' && editor.isEmpty
+            ? 'Digite aqui…'
+            : '',
+        showOnlyWhenEditable: true,
+        includeChildren: false,
+        emptyNodeClass:
+          'before:content-[attr(data-placeholder)] before:absolute before:top-0 before:left-0 before:text-neutral-placeholder first:before:float-left first:before:content-[attr(data-placeholder)] first:before:pointer-events-none'
+      }),
+      Heading.configure({
+        levels: [1, 2, 3]
+      }).extend({
+        renderHTML({ node, HTMLAttributes }) {
+          const level: Level = node.attrs.level ?? 1
+
+          return [
+            'h',
+            {
+              ...HTMLAttributes,
+              class: headingClasses[level]
+            },
+            0
+          ]
+        }
+      }),
+      ...(editorOptions?.extensions ?? [])
+    ]
+  })
+
+  const value = useMemo(() => ({ editor }), [editor])
+
+  return (
+    <EditorContext.Provider value={value}>
+      <div
+        className={cx('gap-small flex w-full flex-col', className)}
+        data-slot="text-area-root"
+        {...props}
+      />
+    </EditorContext.Provider>
+  )
+}
+
+export function RichEditorContent({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'bg-layer-2-hover py-small_1x-alt px-small rounded-small-1x min-h-[116px] w-full border border-transparent',
+        'hover:border-border-layer-2 transition-colors duration-200',
+        '[&_ul_ul]:list-[circle]',
+        '[&_ul_ul_ul]:list-[square]',
+        '[&_ol_ol]:list-[lower-alpha]',
+        '[&_ol_ol_ol]:list-[lower-roman]',
+        'gap-small flex flex-col overflow-x-hidden overflow-y-auto',
+        className
+      )}
+      data-slot="text-area-content"
+      {...props}
+    />
+  )
+}
+
+export function RichEditorCaption({
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  return (
+    <p
+      {...props}
+      className={cx(
+        'text-size-body-sm text-neutral-dark font-normal',
+        className
+      )}
+      data-slot="text-area-caption"
+    />
+  )
+}
+
+export function RichEditorAreaText({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof EditorContent>, 'editor'>) {
+  const { editor } = useRichTextEditor()
+
+  return (
+    <EditorContent
+      className={cx(
+        'text-size-body-md text-neutral-dark max-h-[116px] *:h-full *:w-full *:outline-0',
+        className
+      )}
+      editor={editor}
+      {...props}
+    />
+  )
+}
+
+export function RichEditorToolbar({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'h-large-4x gap-small-1x h-large-6px scrollbar-hide flex flex-nowrap items-center overflow-x-auto overflow-y-hidden',
+        className
+      )}
+      data-slot="text-area-toolbar"
+      {...props}
+    />
+  )
+}
+
+export function ToolbarButton({
+  appearance = 'ghost',
+  variant = 'secondary',
+  onMouseDown,
+  onPointerDown,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      appearance={appearance}
+      size="icon_md"
+      tabIndex={-1}
+      type="button"
+      variant={variant}
+      onMouseDown={e => {
+        e.preventDefault()
+        onMouseDown?.(e)
+      }}
+      onPointerDown={e => {
+        e.preventDefault()
+        onPointerDown?.(e)
+      }}
+      {...props}
+    />
+  )
+}
+
+type ToggleButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'strike'
+  | 'bulletList'
+  | 'orderedList'
+  | 'undo'
+  | 'redo'
+
+export function ToggleButton({
+  name,
+  ...props
+}: ButtonProps & { name: ToggleButtonName }) {
+  const { editor } = useRichTextEditor()
+  const { shortcut } = useOS()
+
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive(name) ?? false
+  })
+
+  const icon = useMemo(() => {
+    const iconsMap = new Map<ToggleButtonName, IconType>([
+      ['bold', 'format_bold'],
+      ['italic', 'format_italic'],
+      ['underline', 'format_underlined'],
+      ['strike', 'format_strikethrough'],
+      ['bulletList', 'format_list_bulleted'],
+      ['orderedList', 'format_list_numbered'],
+      ['undo', 'undo'],
+      ['redo', 'redo']
+    ])
+
+    return iconsMap.get(name)
+  }, [name])
+
+  const description = useMemo(() => {
+    const descriptionsMap = new Map<ToggleButtonName, string>([
+      ['bold', `Negrito (${shortcut} + B)`],
+      ['italic', `Itálico (${shortcut} + I)`],
+      ['underline', `Sublinhado (${shortcut} + U)`],
+      ['strike', `Tachado (${shortcut} + S)`],
+      ['bulletList', `Lista (${shortcut} + Shift + 7)`],
+      ['orderedList', `Lista numerada (${shortcut} + Shift + 8)`],
+      ['undo', `Desfazer (${shortcut} + Z)`],
+      ['redo', `Refazer (${shortcut} + Y)`]
+    ])
+
+    return descriptionsMap.get(name)
+  }, [name, shortcut])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) throw new Error('Editor not found')
+
+    const commandsMap = new Map<ToggleButtonName, () => void>([
+      ['bold', () => editor.chain().focus().toggleBold().run()],
+      ['italic', () => editor.chain().focus().toggleItalic().run()],
+      ['underline', () => editor.chain().focus().toggleUnderline().run()],
+      ['strike', () => editor.chain().focus().toggleStrike().run()],
+      ['bulletList', () => editor.chain().focus().toggleBulletList().run()],
+      ['orderedList', () => editor.chain().focus().toggleOrderedList().run()],
+      ['undo', () => editor.chain().focus().undo().run()],
+      ['redo', () => editor.chain().focus().redo().run()]
+    ])
+
+    commandsMap.get(name)?.()
+  }, [editor, name])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={true}>
+        <ToolbarButton
+          onClick={handleToggle}
+          {...(isActive && { appearance: 'solid' })}
+          {...props}
+        >
+          {icon && <Icon className="text-icon-neutral-3" name={icon} />}
+        </ToolbarButton>
+      </TooltipTrigger>
+
+      <TooltipContent>
+        {description && <Typography size="sm">{description}</Typography>}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function HeadingButton({
+  appearance = 'ghost',
+  variant = 'secondary',
+  ...props
+}: ButtonProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const { editor } = useRichTextEditor()
+
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading') ?? false
+  })
+
+  const isLevelActive = useCallback(
+    (level: Level) => {
+      if (!editor) throw new Error('Editor not found')
+      return editor.isActive('heading', { level })
+    },
+    [editor]
+  )
+
+  const toggleHeading = useCallback(
+    (level: Level) => {
+      if (!editor) throw new Error('Editor not found')
+      setIsOpen(false)
+      setTimeout(() => {
+        editor.chain().focus().toggleHeading({ level }).run()
+      }, 0)
+    },
+    [editor]
+  )
+
+  const levels: { level: Level; label: string; className?: string }[] = [
+    { level: 1, label: 'Normal', className: headingClasses[1] },
+    { level: 2, label: 'Grande', className: headingClasses[2] },
+    { level: 3, label: 'Enorme', className: headingClasses[3] }
+  ]
+
+  return (
+    <DropdownMenuRoot open={isOpen} onOpenChange={open => setIsOpen(open)}>
+      <DropdownMenuTrigger asChild={true}>
+        <Button
+          appearance={isActive ? 'solid' : appearance}
+          size="icon_md"
+          tabIndex={-1}
+          type="button"
+          variant={variant}
+          {...props}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild={true}>
+              <Icon className="text-icon-neutral-3" name="format_size" />
+            </TooltipTrigger>
+
+            <TooltipContent>
+              <Typography size="sm">Tamanho</Typography>
+            </TooltipContent>
+          </Tooltip>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuList>
+          {levels.map(level => (
+            <DropdownMenuItem
+              isActive={isLevelActive(level.level)}
+              key={level.level}
+              onPointerDown={() => toggleHeading(level.level)}
+            >
+              <DropdownMenuItemText className={level.className}>
+                {level.label}
+              </DropdownMenuItemText>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuList>
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  )
+}
+
+export { useRichTextEditorState, useRichTextEditor }

package/src/components/search-input.tsx

@@ -39,8 +39,7 @@ export function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined:
-            'rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary',
+          outlined: 'rounded-circle focus-within:border-primary-idle ',
           line: 'rounded-none border-t-0 border-b-1 border-x-0',
           action: 'rounded-tr-none rounded-br-none border-r-0'
         }

package/src/components/select.tsx

@@ -31,7 +31,7 @@ export function SelectTrigger({
         className,
         'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
         'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary',
+        'data-[state=open]:border-primary-idle',
         'has-[input:not(:placeholder-shown)]:text-primary-idle',
         'has-[input:not(:placeholder-shown)]:border-primary-idle'
       )}

package/src/components/skeleton.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react'
+import { cx } from '@xjur-ui/util'
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx('bg-layer-skeleton animate-pulse', className)}
+      data-slot="skeleton"
+      {...props}
+    />
+  )
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,63 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cx } from '@xjur-ui/util'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 1,
+  variant = 'simple',
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  variant?: 'simple' | 'rich'
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        className={cx(
+          'text-size-body-sm text-balance',
+          'data-[variant=simple]:bg-alt-2 data-[variant=simple]:text-neutral-label data-[variant=simple]:rounded-small-1x data-[variant=simple]:px-small data-[variant=simple]:py-small-1x',
+          'data-[variant=rich]:bg-layer-2-idle data-[variant=rich]:text-neutral-dark data-[variant=rich]:rounded-small data-[variant=rich]:border-border-layer-2 data-[variant=rich]:p-large data-[variant=rich]:border',
+          'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin)',
+          className
+        )}
+        data-slot="tooltip-content"
+        data-variant={variant}
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useOS } from './use-os'

package/src/hooks/use-os.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+
+export type OS = 'ios' | 'macos' | 'windows' | 'android' | 'linux' | 'unknown'
+
+export function useOS() {
+  const [os, setOs] = useState<OS>('unknown')
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const userAgent = window.navigator.userAgent
+
+    if (/iPad|iPhone|iPod/.test(userAgent)) {
+      setOs('ios')
+    } else if (/Mac/.test(userAgent)) {
+      setOs('macos')
+    } else if (/Win/.test(userAgent)) {
+      setOs('windows')
+    } else if (/Android/.test(userAgent)) {
+      setOs('android')
+    } else if (/Linux/.test(userAgent)) {
+      setOs('linux')
+    } else {
+      setOs('unknown')
+    }
+  }, [])
+
+  return {
+    os,
+    shortcut: ['macos', 'ios'].includes(os) ? '⌘' : 'Ctrl'
+  }
+}

package/src/resources/icons.ts

@@ -140,7 +140,11 @@ export const icons = [
   'history',
   'security',
   'bar_chart',
-  'category'
+  'category',
+  'format_underlined',
+  'format_list_bulleted',
+  'format_list_numbered',
+  'redo'
 ] as const
 
 export type IconType = (typeof icons)[number]