@maestro-js/components 1.0.0-alpha.0

package/src/components/helpers/form-field.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react'
+import {
+  Button,
+  Collection,
+  Group,
+  Header,
+  Input,
+  ListBox,
+  ListBoxItem,
+  ListBoxSection,
+  type InputProps
+} from 'react-aria-components'
+import { composeTailwindRenderProps, tw } from '../../utils/tw'
+import { Icon } from '../icon'
+
+const colorClasses = { neutral: 'text-neutral-500', negative: 'text-negative-600', notice: 'text-notice-600' } as const
+
+type LabelProps = {
+  as?: React.ElementType<React.ComponentPropsWithRef<'label'>>
+} & React.ComponentPropsWithRef<'label'>
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ as = 'label', ...props }, ref) => {
+  return React.createElement(as, {
+    ...props,
+    ref,
+    className: tw('block text-sm font-medium text-neutral-700', props.className)
+  })
+})
+Label.displayName = 'Label'
+
+function FormFieldHelpText(props: {
+  id: string
+  isInvalid: boolean
+  validationMessage: React.ReactNode
+  hasWarning: boolean
+  warningMessage?: React.ReactNode
+  helpText?: React.ReactNode
+  UNSAFE_className?: string
+}) {
+  const text = props.isInvalid ? props.validationMessage : props.hasWarning ? props.warningMessage : props.helpText
+  const color = props.isInvalid ? 'negative' : props.hasWarning ? 'notice' : 'neutral'
+  return text === null ? null : (
+    <div
+      id={props.id}
+      className={tw('mt-1 text-sm', !text && 'h-5', colorClasses[color], 'text-wrap', props.UNSAFE_className)}
+    >
+      {text ?? ''}
+    </div>
+  )
+}
+
+function LabelRow(
+  props: { label?: React.ReactNode; cornerHint?: React.ReactNode } & ({ labelId: string } | { htmlFor: string })
+): React.JSX.Element | null {
+  if (!props.label) return null
+  return (
+    <div className="flex justify-between items-center mb-1">
+      {'labelId' in props ? (
+        <Label id={props.labelId}>{props.label}</Label>
+      ) : (
+        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+      )}
+      {props.cornerHint && <div className="text-sm text-neutral-500">{props.cornerHint}</div>}
+    </div>
+  )
+}
+
+type FieldGroupProps = {
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  hasWarning?: boolean
+  shape?: 'rectangle' | 'oval'
+  className?: string
+  children: React.ReactNode
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+}
+
+const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
+  ({ children, className, onClick, ...opts }, ref) => {
+    const disabled = opts.isDisabled || opts.isReadonly
+    const shape = opts.shape === 'oval' ? 'rounded-full' : 'rounded'
+
+    return (
+      <Group
+        ref={ref}
+        className={tw(
+          'relative overflow-hidden border transition-all duration-200 max-w-96',
+          'focus-within:ring-1',
+          shape,
+          disabled && 'border-neutral-100 bg-neutral-50 text-neutral-400 cursor-not-allowed',
+          opts.isInvalid && 'border-negative-200 bg-negative-50 focus-within:border-negative-500 focus-within:ring-negative-500/20',
+          opts.hasWarning &&
+            'border-notice-200 bg-notice-50 focus-within:border-notice-500 focus-within:ring-notice-500/20',
+          !opts.isInvalid &&
+            !opts.hasWarning &&
+            !disabled &&
+            'border-neutral-200 hover:border-neutral-300 focus-within:border-primary-500 focus-within:ring-primary-500/20',
+          className
+        )}
+        onClick={onClick}
+      >
+        {children}
+      </Group>
+    )
+  }
+)
+
+const FieldInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      className={composeTailwindRenderProps(
+        props.className,
+        tw(
+          'flex-1 bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
+          (props.disabled || props.readOnly) && 'cursor-not-allowed'
+        )
+      )}
+    />
+  )
+})
+
+function DropdownListBox<T extends object>(props: React.ComponentProps<typeof ListBox<T>>) {
+  return (
+    <ListBox<T>
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        'overflow-hidden rounded bg-white border border-neutral-200 shadow-lg text-sm w-full focus:outline-none max-h-60 overflow-y-auto'
+      )}
+    />
+  )
+}
+
+function DropdownItem(props: {
+  id: string
+  textValue: string
+  label: React.ReactNode
+  secondary?: React.ReactNode
+  isDisabled?: boolean
+  color?: string | null
+  showCheckIcon?: boolean
+  customValuePrefix?: string
+  className?: string
+}) {
+  const isCustom = Boolean(props.customValuePrefix)
+  const showCheck = props.showCheckIcon !== false && !isCustom
+
+  return (
+    <ListBoxItem
+      id={props.id}
+      textValue={props.textValue}
+      isDisabled={props.isDisabled}
+      className={({ isFocused, isSelected }) =>
+        tw(
+          isFocused ? 'bg-neutral-50 text-neutral-900' : 'text-neutral-900 bg-white',
+          'relative cursor-pointer text-sm transition-colors duration-150',
+          'pr-2 pl-3 py-1.5 outline-none',
+          props.isDisabled && 'opacity-50 cursor-not-allowed',
+          isSelected ? (isFocused ? 'bg-primary-100' : 'bg-primary-50') : '',
+          isCustom && 'italic',
+          props.className
+        )
+      }
+    >
+      {({ isSelected }) => (
+        <>
+          {props.color && !isCustom ? (
+            <div className="absolute left-0 top-0 w-[3px] h-full" style={{ backgroundColor: props.color }} />
+          ) : null}
+          <div className="flex items-center justify-between w-full">
+            <div className="flex-1 min-w-0">
+              <div className={tw(showCheck && isSelected ? 'font-medium' : 'font-normal', 'truncate')}>
+                {isCustom ? `${props.customValuePrefix} "${props.label}"` : props.label}
+              </div>
+              {props.secondary && !isCustom && (
+                <div className="text-xs mt-px truncate text-neutral-500">{props.secondary}</div>
+              )}
+            </div>
+            {showCheck && isSelected && (
+              <div className="ml-2 w-fit shrink-0 flex items-center text-primary-500">
+                <Icon name="check" className="h-4 w-4" />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </ListBoxItem>
+  )
+}
+
+function DropdownSection<T extends object>(props: {
+  title?: string
+  items?: Iterable<T>
+  children: React.ReactNode | ((item: T) => React.ReactNode)
+}) {
+  return (
+    <ListBoxSection>
+      {props.title && (
+        <Header className="sticky top-0 z-10 bg-white px-3 py-1.5 text-xs font-semibold text-neutral-500 border-b border-neutral-100">
+          {props.title}
+        </Header>
+      )}
+      <Collection items={props.items}>{props.children}</Collection>
+    </ListBoxSection>
+  )
+}
+
+function ChevronButton(props?: { className?: string }) {
+  return (
+    <Button className={tw('flex items-center px-2 py-2', props?.className)}>
+      <Icon name="chevron-up-down" className="h-4 w-4 text-neutral-400 transition-colors" />
+    </Button>
+  )
+}
+
+export const FormFieldComponents = {
+  Label,
+  FormFieldHelpText,
+  LabelRow,
+  FieldGroup,
+  FieldInput,
+  DropdownListBox,
+  DropdownSection,
+  DropdownItem,
+  ChevronButton
+}

package/src/components/helpers/get-button-classes.ts

@@ -0,0 +1,138 @@
+import { tw } from '../../utils/tw'
+
+export type ButtonVariant = 'contained' | 'outlined' | 'soft' | 'plain'
+export type ButtonColor = 'primary' | 'negative' | 'positive' | 'notice' | 'neutral'
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonShape = 'rectangle' | 'circle' | 'oval'
+
+const base =
+  'relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-all cursor-default select-none [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 data-[disabled]:cursor-not-allowed'
+
+const sizeClasses: Record<ButtonSize, string> = {
+  xs: 'h-7 min-w-14 px-2.5 text-xs',
+  sm: 'h-8 min-w-16 px-3 text-sm',
+  md: 'h-9 min-w-20 px-4 text-sm',
+  lg: 'h-10 min-w-24 px-5 text-base',
+  xl: 'h-12 min-w-28 px-6 text-base'
+}
+
+const shapeClasses: Record<ButtonShape, string> = {
+  rectangle: 'rounded',
+  circle: 'rounded-full aspect-square px-0',
+  oval: 'rounded-full'
+}
+
+const variantColorClasses: Record<ButtonVariant, Record<ButtonColor, string>> = {
+  contained: {
+    primary:
+      'bg-primary-600 text-white ring-1 ring-inset ring-primary-700 data-[hovered]:bg-primary-700 data-[hovered]:ring-primary-800 data-[pressed]:bg-primary-800 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent data-[disabled]:shadow-none',
+    negative:
+      'bg-negative-600 text-white ring-1 ring-inset ring-negative-700 data-[hovered]:bg-negative-700 data-[hovered]:ring-negative-800 data-[pressed]:bg-negative-800 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent data-[disabled]:shadow-none',
+    positive:
+      'bg-positive-600 text-white ring-1 ring-inset ring-positive-700 data-[hovered]:bg-positive-700 data-[hovered]:ring-positive-800 data-[pressed]:bg-positive-800 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent data-[disabled]:shadow-none',
+    notice:
+      'bg-notice-600 text-white ring-1 ring-inset ring-notice-700 data-[hovered]:bg-notice-700 data-[hovered]:ring-notice-800 data-[pressed]:bg-notice-800 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent data-[disabled]:shadow-none',
+    neutral:
+      'bg-neutral-800 text-white ring-1 ring-inset ring-neutral-900 data-[hovered]:bg-neutral-900 data-[pressed]:bg-neutral-950 data-[disabled]:bg-neutral-200 data-[disabled]:text-neutral-400 data-[disabled]:ring-transparent data-[disabled]:shadow-none'
+  },
+  outlined: {
+    primary:
+      'bg-white ring-1 ring-inset ring-primary-300 text-primary-700 data-[hovered]:bg-primary-50 data-[hovered]:ring-primary-400 data-[pressed]:bg-primary-100 data-[pressed]:ring-primary-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+    negative:
+      'bg-white ring-1 ring-inset ring-negative-300 text-negative-700 data-[hovered]:bg-negative-50 data-[hovered]:ring-negative-400 data-[pressed]:bg-negative-100 data-[pressed]:ring-negative-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+    positive:
+      'bg-white ring-1 ring-inset ring-positive-300 text-positive-700 data-[hovered]:bg-positive-50 data-[hovered]:ring-positive-400 data-[pressed]:bg-positive-100 data-[pressed]:ring-positive-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+    notice:
+      'bg-white ring-1 ring-inset ring-notice-300 text-notice-700 data-[hovered]:bg-notice-50 data-[hovered]:ring-notice-400 data-[pressed]:bg-notice-100 data-[pressed]:ring-notice-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none',
+    neutral:
+      'bg-white ring-1 ring-inset ring-neutral-300 text-neutral-700 data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400 data-[pressed]:bg-neutral-100 data-[pressed]:ring-neutral-500 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400 data-[disabled]:ring-neutral-200 data-[disabled]:shadow-none'
+  },
+  soft: {
+    primary:
+      'bg-primary-100 text-primary-800 data-[hovered]:bg-primary-200 data-[pressed]:bg-primary-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+    negative:
+      'bg-negative-100 text-negative-800 data-[hovered]:bg-negative-200 data-[pressed]:bg-negative-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+    positive:
+      'bg-positive-100 text-positive-800 data-[hovered]:bg-positive-200 data-[pressed]:bg-positive-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+    notice:
+      'bg-notice-100 text-notice-800 data-[hovered]:bg-notice-200 data-[pressed]:bg-notice-300 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400',
+    neutral:
+      'bg-neutral-200 text-neutral-800 data-[hovered]:bg-neutral-300 data-[pressed]:bg-neutral-400 data-[disabled]:bg-neutral-50 data-[disabled]:text-neutral-400'
+  },
+  plain: {
+    primary:
+      'bg-transparent text-primary-700 data-[hovered]:bg-primary-50 data-[pressed]:bg-primary-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+    negative:
+      'bg-transparent text-negative-700 data-[hovered]:bg-negative-50 data-[pressed]:bg-negative-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+    positive:
+      'bg-transparent text-positive-700 data-[hovered]:bg-positive-50 data-[pressed]:bg-positive-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+    notice:
+      'bg-transparent text-notice-700 data-[hovered]:bg-notice-50 data-[pressed]:bg-notice-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400',
+    neutral:
+      'bg-transparent text-neutral-700 data-[hovered]:bg-neutral-50 data-[pressed]:bg-neutral-100 data-[disabled]:bg-transparent data-[disabled]:text-neutral-400'
+  }
+}
+
+const toggledVariantColorClasses: Record<ButtonVariant, Record<ButtonColor, string>> = {
+  contained: {
+    primary: 'bg-primary-800 ring-primary-900',
+    negative: 'bg-negative-800 ring-negative-900',
+    positive: 'bg-positive-800 ring-positive-900',
+    notice: 'bg-notice-800 ring-notice-900',
+    neutral: 'bg-neutral-950'
+  },
+  outlined: {
+    primary: 'bg-primary-100 ring-primary-500',
+    negative: 'bg-negative-100 ring-negative-500',
+    positive: 'bg-positive-100 ring-positive-500',
+    notice: 'bg-notice-100 ring-notice-500',
+    neutral: 'bg-neutral-100 ring-neutral-500'
+  },
+  soft: {
+    primary: 'bg-primary-200',
+    negative: 'bg-negative-200',
+    positive: 'bg-positive-200',
+    notice: 'bg-notice-200',
+    neutral: 'bg-neutral-300'
+  },
+  plain: {
+    primary: 'bg-primary-100',
+    negative: 'bg-negative-100',
+    positive: 'bg-positive-100',
+    notice: 'bg-notice-100',
+    neutral: 'bg-neutral-100'
+  }
+}
+
+const focusClasses =
+  'data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-primary-600'
+
+export function getButtonClasses({
+  variant = 'contained',
+  color = 'primary',
+  size = 'md',
+  shape = 'oval',
+  showSpinner,
+  isToggled,
+  className
+}: {
+  variant?: ButtonVariant
+  color?: ButtonColor
+  size?: ButtonSize
+  shape?: ButtonShape
+  showSpinner?: boolean
+  isToggled?: boolean
+  className?: string
+} = {}) {
+  return tw(
+    base,
+    'data-[pressed]:scale-[.98]',
+    showSpinner ? '[&>:not([data-loader])]:opacity-0 !text-transparent' : '',
+    sizeClasses[size],
+    shapeClasses[shape],
+    variantColorClasses[variant][color],
+    isToggled && toggledVariantColorClasses[variant][color],
+    focusClasses,
+    className
+  )
+}

package/src/components/helpers/headless-button.tsx

@@ -0,0 +1,36 @@
+import { composeRefs } from '../../utils/compose-refs'
+import { type WithRenderProps, useRenderProps } from '../../utils/use-render-props'
+
+import React from 'react'
+import { usePress } from '@react-aria/interactions'
+import { mergeProps } from '@react-aria/utils'
+
+export const HeadlessButton = React.forwardRef<
+  HTMLButtonElement,
+  WithRenderProps<React.ComponentProps<'button'>, { isPressed: boolean }>
+>((rawProps, externalRef) => {
+  const myRef = React.useRef<HTMLButtonElement>(null)
+  const { isPressed, pressProps } = usePress({ ref: myRef, isDisabled: rawProps.disabled })
+  const renderProps = React.useMemo(
+    () => ({
+      isPressed
+    }),
+    [isPressed]
+  )
+
+  const props = useRenderProps(mergeProps(pressProps, rawProps), renderProps, ['children', 'style', 'className'])
+  const ref = React.useMemo(() => composeRefs(myRef, externalRef), [myRef, externalRef])
+
+  return (
+    <button
+      type="button"
+      {...props}
+      {...(props.disabled || props['data-disabled'] ? { ['data-disabled']: true } : {})}
+      {...((isPressed && !props.disabled) || props['data-pressed'] ? { ['data-pressed']: true } : {})}
+      aria-pressed={isPressed && !props.disabled}
+      ref={ref}
+    />
+  )
+})
+
+HeadlessButton.displayName = 'HeadlessButton'

package/src/components/helpers/pdf-dist.client.ts

@@ -0,0 +1,6 @@
+// @ts-ignore
+import pdfjs from '@bundled-es-modules/pdfjs-dist'
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
+
+export default pdfjs

package/src/components/icon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+// @ts-ignore
+import href from '../icons/sprite.svg'
+import type { IconName } from '~/icons/types'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface IconProps extends React.ComponentProps<'svg'> {
+  name: IconName
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const Icon = React.forwardRef<SVGSVGElement, IconProps>(({ className, name, ...props }, ref) => {
+  return (
+    <svg ref={ref} viewBox="0 0 24 24" className={className} {...props}>
+      <use href={`${href}#${name}`} />
+    </svg>
+  )
+})
+
+Icon.displayName = 'Icon'