@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/controls/rich-editor.tsx

@@ -1,372 +0,0 @@
-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
-} from '@tiptap/react'
-import type { Extension } from '@tiptap/core'
-import { StarterKit } from '@tiptap/starter-kit'
-import { Heading, type Level } from '@tiptap/extension-heading'
-// Import specific extension instead of full extensions bundle
-import { Placeholder } from '@tiptap/extension-placeholder'
-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/controls/search-input.tsx

@@ -1,154 +0,0 @@
-import { cva, cx } from '@xjur-ui/util'
-import { createContext, type ComponentProps } from 'react'
-import {
-  InputMask as InputMaskComponent,
-  type MaskOptions
-} from '@react-input/mask'
-import {
-  InputNumberFormat,
-  type InputNumberFormatProps
-} from '@react-input/number-format'
-import { Typography } from '../typography'
-import { inputMask, type InputMaskType } from '../../resources/input-mask'
-import { Button, type ButtonProps } from './button'
-
-export type SearchInputProps = {
-  variant?: 'outlined' | 'line' | 'action'
-}
-
-const SearchInputRootContext = createContext<SearchInputProps>({
-  variant: 'outlined'
-})
-
-export function SearchInputRoot({
-  className,
-  variant = 'outlined',
-  ...props
-}: ComponentProps<'div'> & SearchInputProps) {
-  return (
-    <SearchInputRootContext.Provider value={{ variant }}>
-      <div className={cx('relative flex', className)} {...props} />
-    </SearchInputRootContext.Provider>
-  )
-}
-
-export function SearchInputContent({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  const contentVarians = cva(
-    [
-      'gap-small py-small_1x-alt px-small flex items-center w-full',
-      'h-large-4x rounded-circle',
-      'border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal',
-      'group-hover:border-border-layer-3 transition-colors duration-200',
-      'disabled:opacity-60',
-      'focus-within:border-primary-idle'
-    ],
-    {
-      variants: {
-        variant: {
-          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'
-        }
-      }
-    }
-  )
-
-  return (
-    <SearchInputRootContext.Consumer>
-      {({ variant }) => (
-        <div
-          className={cx(className, contentVarians({ variant }))}
-          data-variant={variant}
-          {...props}
-        />
-      )}
-    </SearchInputRootContext.Consumer>
-  )
-}
-
-export function SearchInputLabel({
-  htmlFor,
-  ...props
-}: ComponentProps<'label'>) {
-  return (
-    <Typography
-      asChild={true}
-      className={cx('absolute -top-[22px] left-0')}
-      size="sm"
-      variant="label"
-      weight="medium"
-    >
-      <label htmlFor={htmlFor} {...props} />
-    </Typography>
-  )
-}
-
-export function SearchInputText({
-  className,
-  ...props
-}: ComponentProps<'input'>) {
-  return <input className={cx(className, 'flex-1 outline-none')} {...props} />
-}
-
-export function SearchInputMask({
-  className,
-  mask,
-  customMask,
-  ...props
-}: ComponentProps<'input'> & {
-  mask?: InputMaskType
-  customMask?: MaskOptions
-}) {
-  return (
-    <InputMaskComponent
-      {...(mask ? { ...inputMask(mask) } : customMask && { ...customMask })}
-      className={cx(className, 'flex-1 outline-none')}
-      {...props}
-    />
-  )
-}
-
-export function SearchInputNumber({
-  className,
-  locales = 'pt-BR',
-  groupDisplay = false,
-  ...props
-}: InputNumberFormatProps) {
-  return (
-    <InputNumberFormat
-      className={cx(className, 'flex-1 outline-none')}
-      groupDisplay={groupDisplay}
-      locales={locales}
-      {...props}
-    />
-  )
-}
-
-export function SearchInputSlot(props: ComponentProps<'div'>) {
-  return <div {...props} data-slot="search-input-slot" />
-}
-
-export function SearchInputAction({
-  className,
-  appearance = 'ghost',
-  variant = 'outlined',
-  ...props
-}: ButtonProps) {
-  return (
-    <Button
-      {...props}
-      appearance={appearance}
-      className={cx(
-        className,
-        'cursor-pointer',
-        'h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none',
-        'text-size-body-md text-neutral-dark gap-small-1x !border-l-0'
-      )}
-      data-slot="search-input-action"
-      variant={variant}
-    />
-  )
-}

package/src/components/controls/search-selector.tsx

@@ -1,98 +0,0 @@
-import { useMemo, useState, type ComponentProps } from 'react'
-import type { MaskOptions } from '@react-input/mask'
-import type { InputMaskType } from '../../resources/input-mask'
-import {
-  DropdownMenuRoot,
-  DropdownMenuList,
-  DropdownMenuItemText,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '../dropdown-menu'
-import { Icon } from '../icon'
-import {
-  SearchInputContent,
-  SearchInputRoot,
-  SearchInputSlot,
-  SearchInputAction,
-  SearchInputMask,
-  SearchInputText
-} from './search-input'
-
-interface SelectorOption {
-  label: string
-  value: string
-}
-
-interface SearchSelectorProps extends ComponentProps<'input'> {
-  options: SelectorOption[]
-  selectedSearchOption?: string
-  mask?: InputMaskType
-  customMask?: MaskOptions
-
-  onChangeSearchOption?: (option: string) => void
-}
-
-export function SearchSelector({
-  options,
-  mask,
-  customMask,
-  placeholder = 'Pesquisar',
-  onChangeSearchOption,
-  selectedSearchOption: initialSelectedSearchOption,
-  ...props
-}: SearchSelectorProps) {
-  const [selectedSearchOption, setSelectedSearchOption] = useState(
-    initialSelectedSearchOption
-  )
-
-  const selectedSearchLabel = useMemo(
-    () => options.find(option => option.value === selectedSearchOption)?.label,
-    [options, selectedSearchOption]
-  )
-
-  return (
-    <SearchInputRoot className="w-full" variant="action">
-      <SearchInputContent>
-        <SearchInputSlot>
-          <Icon className="text-icon-neutral-3" name="search" />
-        </SearchInputSlot>
-        {mask || customMask ? (
-          <SearchInputMask
-            customMask={customMask}
-            mask={mask}
-            placeholder={placeholder}
-            {...props}
-          />
-        ) : (
-          <SearchInputText placeholder={placeholder} {...props} />
-        )}
-      </SearchInputContent>
-
-      <DropdownMenuRoot>
-        <DropdownMenuTrigger asChild={true}>
-          <SearchInputAction>
-            {selectedSearchLabel}
-            <Icon className="text-icon-neutral-3" name="keyboard_arrow_down" />
-          </SearchInputAction>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuList>
-            {options.map(option => (
-              <DropdownMenuItem
-                isActive={selectedSearchOption === option.value}
-                key={option.value}
-                onClick={() => {
-                  setSelectedSearchOption(option.value)
-                  onChangeSearchOption?.(option.value)
-                }}
-              >
-                <DropdownMenuItemText>{option.label}</DropdownMenuItemText>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuList>
-        </DropdownMenuContent>
-      </DropdownMenuRoot>
-    </SearchInputRoot>
-  )
-}