@companix/uikit 0.0.1 → 0.0.3

package/src/DatePicker/index.tsx

@@ -1,177 +0,0 @@
-import { Popover } from '..'
-import { Form, FormProps } from '../Form'
-import { faChevronDown, faClose } from '@fortawesome/free-solid-svg-icons'
-import { Icon } from '../Icon'
-import { useRef, useState } from 'react'
-import { Calendar, CalendarProps } from './Calendar'
-import { useDayDisableCheker } from '../__libs/calendar'
-import { formatTime, getNum } from '@companix/utils-js'
-
-interface DatePickerProps
-  extends Omit<CalendarProps, 'onChange'>,
-    Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
-  onChange?: (value: Date | null) => void
-  placeholder?: string
-  clearButton?: boolean
-  clearButtonIcon?: boolean
-  children?: React.ReactNode
-  minimalOptions?: boolean
-}
-
-const createInputValue = (value: Date | null, char: string = '-'): string => {
-  if (value) {
-    const day = formatTime(value.getDate())
-    const month = formatTime(value.getMonth() + 1)
-    const year = value.getFullYear()
-
-    return [day, month, year].join(char)
-  }
-
-  return ''
-}
-
-const inputToDate = (input: string, char: string = '-'): Date | null => {
-  const values = input.split(char)
-
-  if (values.length === 3) {
-    const [day, month, year] = [getNum(values[0]), getNum(values[1]), getNum(values[2])]
-
-    if (day && month && year) {
-      const date = new Date(year, month - 1, day)
-
-      if (date.getFullYear() === year && date.getDate() === day && date.getMonth() === month - 1) {
-        return date
-      }
-    }
-  }
-
-  return null
-}
-
-export const DatePicker = (props: DatePickerProps) => {
-  const {
-    minimalOptions,
-    clearButton,
-    clearButtonIcon,
-    children,
-    disabled,
-    // calendar props
-    value,
-
-    enableTime,
-    disablePickers,
-    showNeighboringMonth,
-    onChange,
-    shouldDisableDate,
-    viewDate,
-    disablePast,
-    disableFuture,
-    minDateTime,
-    maxDateTime,
-    // input props
-    ...inputProps
-  } = props
-
-  const [inputValue, setInputValue] = useState(() => {
-    return createInputValue(value ?? null)
-  })
-
-  const popoverRef = useRef<HTMLDivElement>(null)
-
-  const isDayDisabled = useDayDisableCheker({
-    disableFuture,
-    disablePast,
-    shouldDisableDate,
-    minDateTime,
-    maxDateTime
-  })
-
-  const handleRootClick = (event: React.MouseEvent) => {
-    if (disabled) return
-
-    // Предотвращаем закрытие Popover при клике на форму
-    if (popoverRef.current && popoverRef.current.getAttribute('data-state') === 'open') {
-      event.preventDefault()
-    }
-  }
-
-  const handleClear = (e: React.MouseEvent) => {
-    e.stopPropagation()
-
-    setInputValue('')
-    onChange?.(null)
-  }
-
-  const handleInputChange = (value: string) => {
-    setInputValue(value)
-
-    const date = inputToDate(value)
-
-    if (date && !isDayDisabled(date)) {
-      onChange?.(date)
-    }
-  }
-
-  const handleInputBlur = () => {
-    const date = inputToDate(inputValue)
-
-    if (!date || isDayDisabled(date)) {
-      setInputValue(createInputValue(value ?? null))
-    }
-  }
-
-  const handleCalendarChange = (value: Date) => {
-    onChange?.(value)
-    setInputValue(createInputValue(value))
-  }
-
-  return (
-    <Popover
-      minimal
-      ref={popoverRef}
-      sideOffset={0}
-      onOpenAutoFocus={(e) => e.preventDefault()}
-      onCloseAutoFocus={(e) => e.preventDefault()}
-      disabled={disabled}
-      content={() => (
-        <Calendar
-          value={value}
-          disablePast={disablePast}
-          disableFuture={disableFuture}
-          enableTime={enableTime}
-          disablePickers={disablePickers}
-          showNeighboringMonth={showNeighboringMonth}
-          onChange={handleCalendarChange}
-          shouldDisableDate={shouldDisableDate}
-          viewDate={viewDate}
-          minDateTime={minDateTime}
-          maxDateTime={maxDateTime}
-        />
-      )}
-    >
-      <Form
-        {...inputProps}
-        value={inputValue}
-        disabled={disabled}
-        onClick={handleRootClick}
-        onValueChange={handleInputChange}
-        onBlur={handleInputBlur}
-        mask={'99-99-9999'}
-        rightElement={
-          <>
-            {clearButton && isInputDefined(inputValue) && (
-              <button className="select-close-button" onClick={handleClear}>
-                {clearButtonIcon ?? <Icon className="select-close-icon" icon={faClose} size="xxxs" />}
-              </button>
-            )}
-            <Icon className="expand-icon select-expand" icon={faChevronDown} size="xxxs" />
-          </>
-        }
-      />
-    </Popover>
-  )
-}
-
-const isInputDefined = (value: string) => {
-  return value.trim().replaceAll('-', '').replaceAll('_', '')
-}

package/src/Dialog/Dialog.scss

@@ -1,25 +0,0 @@
-@use '../mixins.scss';
-
-.dialog {
-  &-container {
-    @include mixins.use-styles(dialog, container);
-  }
-
-  &-overlay {
-    @include mixins.use-styles(dialog, overlay);
-  }
-
-  @include mixins.use-styles(dialog);
-}
-
-.dialog-container {
-  @each $size, $v in (xxs, xs, s, m, l, xl, xxl, full) {
-    &[data-size='#{$size}'] {
-      @include mixins.use-styles(dialog, size, $size, container);
-
-      .dialog {
-        @include mixins.use-styles(dialog, size, $size);
-      }
-    }
-  }
-}

package/src/Dialog/Popup.scss

@@ -1,55 +0,0 @@
-@use '../mixins.scss';
-
-.popup {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  z-index: 1000;
-  outline: none;
-  pointer-events: auto;
-  position: relative;
-  width: 100%;
-
-  @include mixins.use-styles(popup);
-
-  &-overlay {
-    inset: 0;
-    overflow: auto;
-    position: fixed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    outline: none;
-    z-index: 9999;
-
-    @include mixins.use-styles(popup, overlay);
-
-    &[data-state='open'] {
-      @include mixins.use-styles(popup, overlay, in);
-    }
-
-    &[data-state='closed'] {
-      @include mixins.use-styles(popup, overlay, out);
-    }
-  }
-
-  &-container {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none !important;
-    outline: none;
-
-    &[data-state='open'] {
-      @include mixins.use-styles(popup, in);
-    }
-
-    &[data-state='closed'] {
-      @include mixins.use-styles(popup, out);
-    }
-  }
-}

package/src/Dialog/index.tsx

@@ -1,31 +0,0 @@
-import cn from 'classnames'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-
-export interface DialogProps {
-  open: boolean
-  onOpenChange: (value: boolean) => void
-  children: React.ReactNode
-  size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'full'
-  className?: string
-}
-
-export const Dialog = ({ size = 's', open, onOpenChange, children, className }: DialogProps) => {
-  return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="popup-overlay dialog-overlay" />
-        <DialogPrimitive.Content className="popup-container dialog-container" data-size={size}>
-          <div className={cn('popup dialog', className)}>
-            <VisuallyHidden>
-              <DialogPrimitive.Title />
-            </VisuallyHidden>
-            {children}
-          </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  )
-}
-
-Dialog.Close = DialogPrimitive.Close

package/src/DialogAlert/Alert.scss

@@ -1,52 +0,0 @@
-@use '../mixins.scss';
-
-.alert {
-  max-height: max-content;
-
-  @include mixins.use-styles(alert);
-
-  &-container {
-    @include mixins.use-styles(alert, container);
-  }
-
-  &-overlay {
-    @include mixins.use-styles(alert, overlay);
-  }
-
-  &-body {
-    display: flex;
-    flex-direction: row;
-
-    @include mixins.use-styles(alert, body);
-  }
-
-  &-title {
-    @include mixins.use-styles(alert, title);
-  }
-
-  &-description {
-    @include mixins.use-styles(alert, description);
-  }
-
-  &-icon {
-    @include mixins.use-styles(alert, icon);
-
-    svg {
-      @include mixins.use-size(alert, icon, size);
-    }
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-
-    @include mixins.use-styles(alert, content);
-  }
-
-  &-footer {
-    display: flex;
-    justify-content: end;
-
-    @include mixins.use-styles(alert, footer);
-  }
-}

package/src/DialogAlert/Alert.tsx

@@ -1,78 +0,0 @@
-import * as AlertPrimitive from '@radix-ui/react-alert-dialog'
-import { Button } from '..'
-import { InternButtonProps } from '../Button'
-import { RemoveListener } from '../Toaster/RemoveListener'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-
-interface ActionProps extends Omit<InternButtonProps, 'children'> {
-  onClick?: () => void
-}
-
-export interface AlertDialogProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (value: boolean) => void
-  onUnMounted?: () => void
-  icon?: React.ReactNode
-  title?: string
-  description?: string
-  confirm?: ActionProps
-  cancel?: ActionProps
-  cancelDefaultText?: string
-  disableCancel?: boolean
-}
-
-export const AlertDialog = ({
-  open,
-  defaultOpen,
-  onOpenChange,
-  onUnMounted,
-  icon,
-  title,
-  description,
-  cancelDefaultText,
-  cancel,
-  disableCancel,
-  confirm
-}: AlertDialogProps) => {
-  return (
-    <AlertPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      <RemoveListener callback={onUnMounted} />
-      <AlertPrimitive.Portal>
-        <AlertPrimitive.Overlay className="popup-overlay dialog-overlay" />
-        <AlertPrimitive.Content className="popup-container dialog-container">
-          <div className="popup alert">
-            <div className="alert-body">
-              {icon && <span className="alert-icon">{icon}</span>}
-              <div className="alert-content">
-                {title && <AlertPrimitive.Title className="alert-title">{title}</AlertPrimitive.Title>}
-                {!title && (
-                  <VisuallyHidden>
-                    <AlertPrimitive.Title />
-                  </VisuallyHidden>
-                )}
-                {description && (
-                  <AlertPrimitive.Description className="alert-description">
-                    {description}
-                  </AlertPrimitive.Description>
-                )}
-              </div>
-            </div>
-            <div className="alert-footer">
-              {!disableCancel && (cancel?.text || cancelDefaultText) && (
-                <AlertPrimitive.Cancel asChild>
-                  <Button appearance="neutral" {...cancel} text={cancel?.text ?? cancelDefaultText} />
-                </AlertPrimitive.Cancel>
-              )}
-              {confirm?.text && (
-                <AlertPrimitive.Action asChild>
-                  <Button appearance="negative" {...confirm} />
-                </AlertPrimitive.Action>
-              )}
-            </div>
-          </div>
-        </AlertPrimitive.Content>
-      </AlertPrimitive.Portal>
-    </AlertPrimitive.Root>
-  )
-}

package/src/DialogAlert/Viewport.tsx

@@ -1,52 +0,0 @@
-import { forwardRef, useImperativeHandle, useState } from 'react'
-import { InnerAlert } from '.'
-import { AlertDialog, AlertDialogProps } from './Alert'
-
-export interface ViewportRef {
-  showAlert: (alert: InnerAlert) => void
-}
-
-export interface AlertBaseProps extends Pick<AlertDialogProps, 'cancelDefaultText'> {}
-
-export const Viewport = forwardRef<ViewportRef, AlertBaseProps>((props, ref) => {
-  const [alerts, setAlerts] = useState<InnerAlert[]>([])
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        showAlert: (alert) => {
-          setAlerts((state) => [...state, alert])
-        }
-      }
-    },
-    []
-  )
-
-  const handleClose = (id: string) => {
-    setAlerts((state) => {
-      const nextState = [...state]
-      const index = nextState.findIndex((item) => item.id === id)
-
-      if (index !== -1) {
-        nextState.splice(index, 1)
-      }
-
-      return nextState
-    })
-  }
-
-  return (
-    <>
-      {alerts.map(({ id, ...alert }) => (
-        <AlertDialog
-          defaultOpen
-          onUnMounted={() => handleClose(id)}
-          key={`alert-${id}`}
-          {...props}
-          {...alert}
-        />
-      ))}
-    </>
-  )
-})

package/src/DialogAlert/index.tsx

@@ -1,37 +0,0 @@
-import { hash } from '@companix/utils-js'
-import { useMemo, useRef } from 'react'
-import { AlertDialogProps } from './Alert'
-import { AlertBaseProps, Viewport, ViewportRef } from './Viewport'
-
-export interface AlertOptions extends Omit<AlertDialogProps, 'open' | 'onOpenChange'> {}
-
-export interface InnerAlert extends AlertOptions {
-  id: string
-}
-
-export const createAlertAgent = (options: AlertBaseProps = {}) => {
-  const store = {
-    emit: (alert: InnerAlert) => {
-      console.error('uninitialized', alert)
-    }
-  }
-
-  return {
-    show: (value: Omit<InnerAlert, 'id'>) => {
-      store.emit({ ...value, id: hash() })
-    },
-    Viewport: () => {
-      const ref = useRef<ViewportRef>(null)
-
-      useMemo(() => {
-        store.emit = (value) => {
-          if (ref.current) {
-            ref.current.showAlert(value)
-          }
-        }
-      }, [])
-
-      return <Viewport ref={ref} {...options} />
-    }
-  }
-}

package/src/Drawer/Drawer.scss

@@ -1,112 +0,0 @@
-@use '../mixins.scss';
-
-.drawer {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  z-index: 1000;
-  outline: none;
-  pointer-events: auto;
-  position: fixed;
-  z-index: 9999;
-
-  @include mixins.use-styles(drawer);
-
-  &-overlay {
-    inset: 0;
-    overflow: auto;
-    position: fixed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    outline: none;
-    z-index: 9999;
-
-    @include mixins.use-styles(drawer, overlay);
-
-    &[data-state='open'] {
-      @include mixins.use-styles(drawer, overlay, in);
-    }
-
-    &[data-state='closed'] {
-      @include mixins.use-styles(drawer, overlay, out);
-    }
-  }
-
-  // animations
-
-  &[data-state='open'] {
-    &[data-direction='left'] {
-      @include mixins.use-styles(drawer, in, left);
-    }
-
-    &[data-direction='right'] {
-      @include mixins.use-styles(drawer, in, right);
-    }
-
-    &[data-direction='top'] {
-      @include mixins.use-styles(drawer, in, top);
-    }
-
-    &[data-direction='bottom'] {
-      @include mixins.use-styles(drawer, in, bottom);
-    }
-  }
-
-  &[data-state='closed'] {
-    &[data-direction='left'] {
-      @include mixins.use-styles(drawer, out, left);
-    }
-
-    &[data-direction='right'] {
-      @include mixins.use-styles(drawer, out, right);
-    }
-
-    &[data-direction='top'] {
-      @include mixins.use-styles(drawer, out, top);
-    }
-
-    &[data-direction='bottom'] {
-      @include mixins.use-styles(drawer, out, bottom);
-    }
-  }
-
-  // placement
-
-  &[data-direction='left'] {
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: var(--drawer-size, 50%);
-    border-top-right-radius: var(--drawer_radius, 0);
-    border-bottom-right-radius: var(--drawer_radius, 0);
-  }
-
-  &[data-direction='right'] {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: var(--drawer-size, 50%);
-    border-top-left-radius: var(--drawer_radius, 0);
-    border-bottom-left-radius: var(--drawer_radius, 0);
-  }
-
-  &[data-direction='bottom'] {
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: var(--drawer-size, 50%);
-    border-top-right-radius: var(--drawer_radius, 0);
-    border-top-left-radius: var(--drawer_radius, 0);
-  }
-
-  &[data-direction='top'] {
-    left: 0;
-    right: 0;
-    top: 0;
-    height: var(--drawer-size, 50%);
-    border-bottom-right-radius: var(--drawer_radius, 0);
-    border-bottom-left-radius: var(--drawer_radius, 0);
-  }
-}

package/src/Drawer/index.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { varToStyle } from '@companix/utils-browser'
-
-export interface DrawerProps {
-  open: boolean
-  onOpenChange: (value: boolean) => void
-  children: React.ReactNode
-  direction?: 'bottom' | 'top' | 'left' | 'right'
-  className?: string
-  /**
-   * CSS size of the drawer. This sets `width` if horizontal position (default)
-   * and `height` otherwise.
-   *
-   * Constants are available for common sizes:
-   * - `DrawerSize.SMALL = 360px`
-   * - `DrawerSize.STANDARD = 50%`
-   * - `DrawerSize.LARGE = 90%`
-   *
-   * @default DrawerSize.STANDARD = "50%"
-   */
-  size?: string
-}
-
-export const Drawer = ({ open, onOpenChange, children, size, direction, className }: DrawerProps) => {
-  return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="drawer-overlay" />
-        <DialogPrimitive.Content
-          style={varToStyle({ '--drawer-size': size ?? '50%' })}
-          className={classNames('drawer', className)}
-          data-direction={direction}
-        >
-          <VisuallyHidden>
-            <DialogPrimitive.Title />
-          </VisuallyHidden>
-          {children}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  )
-}
-
-Drawer.Close = DialogPrimitive.Close