@companix/uikit 0.0.1

package/src/DialogAlert/Alert.scss

@@ -0,0 +1,52 @@
+@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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,112 @@
+@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

@@ -0,0 +1,46 @@
+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

package/src/File/index.tsx

@@ -0,0 +1,60 @@
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { useRef } from 'react'
+
+export interface FileOverlayProps {
+  multiple?: true
+  onChange?: (file: File[]) => void
+  children: React.ReactNode
+  mimes?: string[]
+  disabled?: boolean
+  className?: string
+}
+
+const FileOverlay = ({
+  onChange,
+  disabled,
+  mimes,
+  children,
+  multiple,
+  className
+}: FileOverlayProps) => {
+  const ref = useRef<HTMLInputElement>(null)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return
+    }
+
+    if (e.target.files) {
+      onChange?.(Array.from(e.target.files))
+    }
+
+    if (ref.current) {
+      ref.current.value = ''
+    }
+  }
+
+  return (
+    <label className={className}>
+      {children}
+      <VisuallyHidden asChild>
+        <input
+          ref={ref}
+          hidden
+          type="file"
+          autoComplete="off"
+          autoCapitalize="none"
+          autoCorrect="off"
+          spellCheck="false"
+          aria-autocomplete="none"
+          multiple={multiple}
+          accept={(mimes ?? []).join(', ')}
+          onChange={handleChange}
+          disabled={disabled}
+        />
+      </VisuallyHidden>
+    </label>
+  )
+}
+
+export { FileOverlay }

package/src/Form/Form.scss

@@ -0,0 +1,70 @@
+@use '../mixins.scss';
+
+@mixin use-size($size) {
+  &[data-size='#{$size}'] {
+    .form-input {
+      @include mixins.use-styles(form, size, $size);
+    }
+  }
+}
+
+.form {
+  position: relative;
+
+  @include mixins.use-styles(form);
+
+  @include use-size(sm);
+  @include use-size(md);
+  @include use-size(lg);
+
+  &-space-margin {
+    margin: 0px var(--form_space, 0);
+  }
+
+  &:hover {
+    @include mixins.use-styles(form, hover);
+  }
+
+  &:active {
+    @include mixins.use-styles(form, active);
+  }
+
+  &[data-fill] {
+    width: 100%;
+
+    .form-input {
+      width: 100%;
+    }
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(form, required);
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(form, disabled);
+
+    .form-input {
+      cursor: inherit;
+    }
+  }
+
+  &:focus-within {
+    @include mixins.use-styles(form, focus);
+  }
+}
+
+.form-input {
+  outline: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &::placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+}

package/src/Form/Input.scss

@@ -0,0 +1,24 @@
+.form-input-base {
+  padding: 0px var(--form_space, 0);
+  border-radius: var(--form_border-radius);
+
+  &-left-element {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+
+  &-right-element {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+}

package/src/Form/index.tsx

@@ -0,0 +1,131 @@
+import cn from 'classnames'
+import InputMask from 'react-input-mask'
+
+import { useLayoutAndUpdate } from '../__hooks/use-update'
+import { attr } from '@companix/utils-browser'
+import { forwardRef, useCallback, useRef } from 'react'
+import { mergeRefs } from 'react-merge-refs'
+
+export interface FormProps extends React.HTMLAttributes<HTMLDivElement> {
+  required?: boolean
+  disabled?: boolean
+  leftElement?: React.ReactNode
+  rightElement?: React.ReactNode
+  placeholder?: string
+  value?: string | number
+  readOnly?: boolean
+  onValueChange?: (value: string, targetElement: HTMLInputElement) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  inputRef?: React.RefObject<HTMLInputElement>
+  size?: 'sm' | 'md' | 'lg'
+  fill?: boolean
+  mask?: string
+  maskChar?: string
+}
+
+export const Form = forwardRef<HTMLDivElement, FormProps>(
+  (
+    {
+      required,
+      size,
+      fill,
+      leftElement,
+      rightElement,
+      onChange,
+      onValueChange,
+      readOnly,
+      className,
+      value,
+      placeholder,
+      disabled,
+      mask,
+      maskChar,
+      inputRef: clientInputRef,
+      ...containerProps
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const rightRef = useRef<HTMLSpanElement>(null)
+    const leftRef = useRef<HTMLSpanElement>(null)
+
+    const elements = { Right: rightRef, Left: leftRef }
+
+    const updateInputWidth = useCallback((side: 'Left' | 'Right') => {
+      if (inputRef.current) {
+        const input = inputRef.current.style
+        const element = elements[side]
+
+        if (element.current && element.current.clientWidth) {
+          if (input[`padding${side}`] !== `${element.current.clientWidth}px`) {
+            input[`padding${side}`] = `${element.current.clientWidth}px`
+          }
+        } else {
+          if (input[`padding${side}`]) {
+            input[`padding${side}`] = ''
+          }
+        }
+      }
+    }, [])
+
+    useLayoutAndUpdate(() => {
+      updateInputWidth('Left')
+      updateInputWidth('Right')
+    }, [rightElement, leftElement])
+
+    const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event)
+      onValueChange?.(event.target.value, event.target)
+    }, [])
+
+    return (
+      <div
+        ref={ref}
+        className={cn('form', className)}
+        data-size={size ?? 'md'}
+        data-fill={attr(fill)}
+        data-required={attr(required)}
+        data-disabled={attr(disabled)}
+        {...containerProps}
+      >
+        {leftElement && (
+          <span ref={leftRef} className="form-input-base-left-element">
+            {leftElement}
+          </span>
+        )}
+        <Input
+          type="text"
+          ref={mergeRefs([inputRef, clientInputRef])}
+          className="form-input form-input-base"
+          aria-disabled={disabled}
+          onChange={handleInputChange}
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          maskChar={maskChar}
+          mask={mask}
+        />
+        {rightElement && (
+          <span ref={rightRef} className="form-input-base-right-element">
+            {rightElement}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children'> {
+  mask?: string
+  maskChar?: string
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(({ mask, maskChar, ...inputProps }, ref) => {
+  if (mask) {
+    return <InputMask inputRef={ref} mask={mask} maskChar={maskChar} {...inputProps} />
+  }
+
+  return <input ref={ref} {...inputProps} />
+})

package/src/Icon/icon.scss

@@ -0,0 +1,18 @@
+@use '../mixins.scss';
+
+$icon-sizes: xxxs, xxs, xs, s, m, l, xl, xxl, xxxl;
+
+@each $size in $icon-sizes {
+  .icon-size-#{$size} {
+    @include mixins.use-size(icon, size, $size);
+  }
+}
+
+:where(svg:not([fill])) {
+  fill: currentcolor;
+}
+
+.icon {
+  // display: inline-block;
+  flex-shrink: 0;
+}