@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/Form.tsx

@@ -0,0 +1,409 @@
+import clsx from 'clsx'
+import React from 'react'
+
+// Form Context for managing form state
+interface FormContextValue {
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  values: Record<string, any>;
+  setFieldValue: (name: string, value: any) => void;
+  setFieldTouched: (name: string, touched: boolean) => void;
+  setFieldError: (name: string, error: string) => void;
+}
+
+const FormContext = React.createContext<FormContextValue | null>(null)
+
+export const useFormContext = () => {
+  const context = React.useContext(FormContext)
+  if (!context) {
+    throw new Error('Form components must be used within a Form component')
+  }
+  return context
+}
+
+// Main Form Component
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  children: React.ReactNode;
+  onSubmit: (values: Record<string, any>) => void | Promise<void>;
+  initialValues?: Record<string, any>;
+  validate?: (values: Record<string, any>) => Record<string, string>;
+}
+
+export const Form = ({
+  children,
+  onSubmit,
+  initialValues = {},
+  validate,
+  className,
+  ...props
+}: FormProps) => {
+  const [values, setValues] = React.useState<Record<string, any>>(initialValues)
+  const [errors, setErrors] = React.useState<Record<string, string>>({})
+  const [touched, setTouched] = React.useState<Record<string, boolean>>({})
+
+  const setFieldValue = React.useCallback((name: string, value: any) => {
+    setValues(prev => ({ ...prev, [name]: value }))
+  }, [])
+
+  const setFieldTouched = React.useCallback((name: string, isTouched: boolean) => {
+    setTouched(prev => ({ ...prev, [name]: isTouched }))
+  }, [])
+
+  const setFieldError = React.useCallback((name: string, error: string) => {
+    setErrors(prev => ({ ...prev, [name]: error }))
+  }, [])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Validate all fields
+    const validationErrors = validate?.(values) ?? {}
+    setErrors(validationErrors)
+
+    // Mark all fields as touched
+    const allTouched = Object.keys(values).reduce((acc, key) => {
+      acc[key] = true
+      return acc
+    }, {} as Record<string, boolean>)
+    setTouched(allTouched)
+
+    // If no errors, submit
+    if (Object.keys(validationErrors).length === 0) {
+      try {
+        await onSubmit(values)
+      } catch (error) {
+        console.error('Form submission error:', error)
+      }
+    }
+  }
+
+  const contextValue: FormContextValue = {
+    errors,
+    touched,
+    values,
+    setFieldValue,
+    setFieldTouched,
+    setFieldError,
+  }
+
+  return (
+    <FormContext.Provider value={contextValue}>
+      <form onSubmit={handleSubmit} className={clsx('space-y-4', className)} {...props}>
+        {children}
+      </form>
+    </FormContext.Provider>
+  )
+}
+
+Form.displayName = 'Form'
+
+// FormField Component
+export interface FormFieldProps {
+  name: string;
+  label?: string;
+  children: (props: {
+    value: any;
+    onChange: (value: any) => void;
+    onBlur: () => void;
+    error?: string;
+    touched: boolean;
+  }) => React.ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+export const FormField = ({ name, label, children, required, className }: FormFieldProps) => {
+  const { values, errors, touched, setFieldValue, setFieldTouched } = useFormContext()
+
+  const value = values[name] ?? ''
+  const error = touched[name] ? errors[name] : undefined
+  const isTouched = touched[name] ?? false
+
+  const handleChange = (newValue: any) => {
+    setFieldValue(name, newValue)
+  }
+
+  const handleBlur = () => {
+    setFieldTouched(name, true)
+  }
+
+  return (
+    <div className={clsx('flex flex-col gap-1.5', className)}>
+      {label && (
+        <label htmlFor={name} className="text-[14px] font-semibold text-(--text-primary)">
+          {label}
+          {required && <span className="text-(--danger) ml-1">*</span>}
+        </label>
+      )}
+      {children({ value, onChange: handleChange, onBlur: handleBlur, error, touched: isTouched })}
+    </div>
+  )
+}
+
+FormField.displayName = 'FormField'
+
+// FormInput Component - Wrapper around Input
+export interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'onChange'> {
+  name: string;
+  label?: string;
+  required?: boolean;
+  fullWidth?: boolean;
+}
+
+export const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(
+  ({ name, label, required, fullWidth, className, ...props }, ref) => {
+    const { values, errors, touched, setFieldValue, setFieldTouched } = useFormContext()
+
+    const value = values[name] ?? ''
+    const error = touched[name] ? errors[name] : undefined
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFieldValue(name, e.target.value)
+    }
+
+    const handleBlur = () => {
+      setFieldTouched(name, true)
+    }
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
+        {label && (
+          <label htmlFor={name} className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="text-(--danger) ml-1">*</span>}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={name}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={clsx(
+            'appearance-none block w-full rounded-md border text-[15px] leading-[1.4] shadow-sm',
+            'px-3 py-2 bg-(--bg-primary) text-(--text-primary) placeholder-(--text-muted)',
+            'transition-[border-color,box-shadow,background-color] focus:outline-none',
+            'focus:border-(--accent)/70',
+            'disabled:bg-(--bg-primary) disabled:text-(--text-muted) disabled:cursor-not-allowed',
+            error
+              ? 'border-(--danger) focus:border-(--danger) focus:shadow-[0_0_0_2px_var(--danger)]'
+              : 'border-(--border-light) hover:border-(--text-primary)/30',
+            className,
+          )}
+          {...props}
+        />
+        {error && (
+          <span className="text-[12px] font-medium text-(--danger) flex items-center gap-1 leading-tight">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+FormInput.displayName = 'FormInput'
+
+// FormTextarea Component
+export interface FormTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name' | 'value' | 'onChange'> {
+  name: string;
+  label?: string;
+  required?: boolean;
+  fullWidth?: boolean;
+}
+
+export const FormTextarea = React.forwardRef<HTMLTextAreaElement, FormTextareaProps>(
+  ({ name, label, required, fullWidth, className, ...props }, ref) => {
+    const { values, errors, touched, setFieldValue, setFieldTouched } = useFormContext()
+
+    const value = values[name] ?? ''
+    const error = touched[name] ? errors[name] : undefined
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setFieldValue(name, e.target.value)
+    }
+
+    const handleBlur = () => {
+      setFieldTouched(name, true)
+    }
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
+        {label && (
+          <label htmlFor={name} className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="text-(--danger) ml-1">*</span>}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={name}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={clsx(
+            'appearance-none block w-full rounded-md border text-[15px] leading-[1.4] shadow-sm',
+            'px-3 py-2 bg-(--bg-primary) text-(--text-primary) placeholder-(--text-muted)',
+            'transition-[border-color,box-shadow,background-color] focus:outline-none',
+            'focus:border-(--accent)/70',
+            'disabled:bg-(--bg-primary) disabled:text-(--text-muted) disabled:cursor-not-allowed',
+            'resize-y min-h-20',
+            error
+              ? 'border-(--danger) focus:border-(--danger) focus:shadow-[0_0_0_2px_var(--danger)]'
+              : 'border-(--border-light) hover:border-(--text-primary)/30',
+            className,
+          )}
+          {...props}
+        />
+        {error && (
+          <span className="text-[12px] font-medium text-(--danger) flex items-center gap-1 leading-tight">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+FormTextarea.displayName = 'FormTextarea'
+
+// FormSelect Component
+export interface FormSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'value' | 'onChange'> {
+  name: string;
+  label?: string;
+  required?: boolean;
+  fullWidth?: boolean;
+  options: Array<{ value: string; label: string }>;
+}
+
+export const FormSelect = React.forwardRef<HTMLSelectElement, FormSelectProps>(
+  ({ name, label, required, fullWidth, options, className, ...props }, ref) => {
+    const { values, errors, touched, setFieldValue, setFieldTouched } = useFormContext()
+
+    const value = values[name] ?? ''
+    const error = touched[name] ? errors[name] : undefined
+
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setFieldValue(name, e.target.value)
+    }
+
+    const handleBlur = () => {
+      setFieldTouched(name, true)
+    }
+
+    return (
+      <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
+        {label && (
+          <label htmlFor={name} className="text-[14px] font-semibold text-(--text-primary)">
+            {label}
+            {required && <span className="text-(--danger) ml-1">*</span>}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={name}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={clsx(
+            'appearance-none block w-full rounded-md border text-[15px] leading-[1.4] shadow-sm',
+            'px-3 py-2 bg-(--bg-primary) text-(--text-primary)',
+            'transition-[border-color,box-shadow,background-color] focus:outline-none',
+            'focus:border-(--accent)/70',
+            'disabled:bg-(--bg-primary) disabled:text-(--text-muted) disabled:cursor-not-allowed',
+            'cursor-pointer',
+            error
+              ? 'border-(--danger) focus:border-(--danger) focus:shadow-[0_0_0_2px_var(--danger)]'
+              : 'border-(--border-light) hover:border-(--text-primary)/30',
+            className,
+          )}
+          {...props}
+        >
+          <option value="">Select an option</option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && (
+          <span className="text-[12px] font-medium text-(--danger) flex items-center gap-1 leading-tight">
+            ⚠️ {error}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+FormSelect.displayName = 'FormSelect'
+
+// FormCheckbox Component
+export interface FormCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'type' | 'checked' | 'onChange'> {
+  name: string;
+  label: string;
+}
+
+export const FormCheckbox = React.forwardRef<HTMLInputElement, FormCheckboxProps>(
+  ({ name, label, className, ...props }, ref) => {
+    const { values, setFieldValue } = useFormContext()
+
+    const checked = values[name] ?? false
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFieldValue(name, e.target.checked)
+    }
+
+    return (
+      <div className="flex items-center gap-2">
+        <input
+          ref={ref}
+          id={name}
+          name={name}
+          type="checkbox"
+          checked={checked}
+          onChange={handleChange}
+          className={clsx(
+            'w-4 h-4 rounded border-(--border-light) bg-(--bg-primary)',
+            'text-(--slack-blue) focus:ring-2 focus:ring-(--slack-blue) focus:ring-offset-1',
+            'cursor-pointer transition-colors',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            className,
+          )}
+          {...props}
+        />
+        <label
+          htmlFor={name}
+          className="text-[15px] text-(--text-primary) cursor-pointer select-none"
+        >
+          {label}
+        </label>
+      </div>
+    )
+  }
+)
+
+FormCheckbox.displayName = 'FormCheckbox'
+
+// FormActions Component - For submit and cancel buttons
+export interface FormActionsProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const FormActions = ({ children, className }: FormActionsProps) => {
+  return (
+    <div className={clsx('flex items-center justify-end gap-3 pt-4', className)}>
+      {children}
+    </div>
+  )
+}
+
+FormActions.displayName = 'FormActions'
+
+
+
+

package/src/components/IconButton.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx'
+import { Button as BaseButton } from '@base-ui/react'
+import type { ButtonProps as BaseButtonProps } from '@base-ui/react'
+import React from 'react'
+
+export interface IconButtonProps extends BaseButtonProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'ghost' | 'filled';
+  active?: boolean;
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, size = 'md', variant = 'ghost', active, children, ...props }, ref) => {
+
+    // Icon Button Styles (usually meant for tooltips or toolbar actions)
+    const baseStyles = 'inline-flex items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) disabled:opacity-50'
+
+    const variants = {
+      ghost: 'bg-transparent text-(--text-secondary) hover:bg-(--bg-hover) hover:text-(--text-primary)',
+      filled: 'bg-(--bg-secondary) text-(--text-primary) hover:bg-(--bg-hover)',
+    }
+
+    const activeStyles = active ? 'bg-(--bg-hover) text-(--accent)' : ''
+
+    const sizes = {
+      sm: 'h-7 w-7 p-1',
+      md: 'h-9 w-9 p-1.5',
+      lg: 'h-11 w-11 p-2',
+    }
+
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          activeStyles,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </BaseButton>
+    )
+  },
+)
+
+IconButton.displayName = 'IconButton'

package/src/components/Input.tsx

@@ -0,0 +1,56 @@
+import clsx from 'clsx'
+import { Input as BaseInput } from '@base-ui/react'
+import React from 'react'
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  fullWidth?: boolean;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, label, error, fullWidth, id, ...props }, ref) => {
+      const generatedId = React.useId()
+      const inputId = id ?? generatedId
+
+      return (
+          <div className={clsx('flex flex-col gap-1.5', fullWidth && 'w-full')}>
+            {label && (
+                <label
+                    htmlFor={inputId}
+                    className="text-[14px] font-semibold text-(--text-primary)"
+                >
+                  {label}
+                </label>
+            )}
+
+            <div className="relative">
+              <BaseInput
+                  ref={ref}
+                  id={inputId}
+                  className={clsx(
+                      'appearance-none block w-full rounded-md border text-[15px] leading-[1.4] shadow-sm',
+                      'px-3 py-2 bg-(--bg-primary) text-(--text-primary) placeholder-(--text-muted)',
+                      'transition-[border-color,box-shadow,background-color] focus:outline-none',
+                      'focus:border-(--accent)/70',
+                      'disabled:bg-(--bg-primary) disabled:text-(--text-muted) disabled:cursor-not-allowed',
+                      error
+                          ? 'border-(--danger) focus:border-(--danger) focus:shadow-[0_0_0_2px_var(--danger)]'
+                          : 'border-(--border-light) hover:border-(--text-primary)/30',
+                      className,
+                  )}
+                  {...props}
+              />
+            </div>
+
+            {error && (
+                <span className="text-[12px] font-medium text-(--danger) flex items-center gap-1 leading-tight">
+            ⚠️ {error}
+          </span>
+            )}
+          </div>
+      )
+    },
+)
+
+Input.displayName = 'Input'

package/src/components/Loading.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export type LoadingVariant = 'spinner' | 'dots' | 'bar'
+export type LoadingSize = 'sm' | 'md' | 'lg'
+
+export interface LoadingProps {
+  variant?: LoadingVariant
+  size?: LoadingSize
+  /** Optional label shown next to the indicator */
+  label?: string
+  /** Center within its container */
+  centered?: boolean
+  className?: string
+  /** Override color via Tailwind / CSS class */
+  color?: string
+}
+
+const spinnerSize: Record<LoadingSize, string> = {
+  sm: 'w-4 h-4 border-2',
+  md: 'w-6 h-6 border-2',
+  lg: 'w-9 h-9 border-[3px]',
+}
+
+const dotSize: Record<LoadingSize, string> = {
+  sm: 'w-1.5 h-1.5',
+  md: 'w-2.5 h-2.5',
+  lg: 'w-3.5 h-3.5',
+}
+
+const labelSize: Record<LoadingSize, string> = {
+  sm: 'text-[12px]',
+  md: 'text-[14px]',
+  lg: 'text-[16px]',
+}
+
+const barHeight: Record<LoadingSize, string> = {
+  sm: 'h-0.5',
+  md: 'h-1',
+  lg: 'h-1.5',
+}
+
+// Spinner variant ─────────────────────────────────────────────────────────────
+const Spinner: React.FC<{ size: LoadingSize; color?: string }> = ({ size, color }) => (
+  <span
+    role="status"
+    aria-label="Loading"
+    className={clsx(
+      'inline-block rounded-full animate-spin',
+      'border-current border-t-transparent',
+      spinnerSize[size],
+      color ?? 'text-(--accent)',
+    )}
+  />
+)
+
+// Dots variant ────────────────────────────────────────────────────────────────
+const Dots: React.FC<{ size: LoadingSize; color?: string }> = ({ size, color }) => (
+  <span role="status" aria-label="Loading" className="inline-flex items-center gap-1">
+    {[0, 1, 2].map((i) => (
+      <span
+        key={i}
+        className={clsx(
+          'inline-block rounded-full animate-bounce',
+          dotSize[size],
+          color ?? 'bg-(--accent)',
+        )}
+        style={{ animationDelay: `${i * 0.15}s` }}
+      />
+    ))}
+  </span>
+)
+
+// Bar variant ─────────────────────────────────────────────────────────────────
+const Bar: React.FC<{ size: LoadingSize; color?: string }> = ({ size, color }) => (
+  <span
+    role="status"
+    aria-label="Loading"
+    className={clsx('relative block w-full overflow-hidden rounded-full bg-(--bg-hover)', barHeight[size])}
+  >
+    <span
+      className={clsx(
+        'absolute inset-y-0 w-1/3 rounded-full',
+        'animate-[loading-bar_1.4s_ease-in-out_infinite]',
+        color ?? 'bg-(--accent)',
+      )}
+    />
+  </span>
+)
+
+// Main component ──────────────────────────────────────────────────────────────
+export const Loading = React.forwardRef<HTMLDivElement, LoadingProps>(
+  ({ variant = 'spinner', size = 'md', label, centered, className, color }, ref) => {
+    const indicator =
+      variant === 'dots' ? (
+        <Dots size={size} color={color} />
+      ) : variant === 'bar' ? (
+        <Bar size={size} color={color} />
+      ) : (
+        <Spinner size={size} color={color} />
+      )
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          'inline-flex items-center gap-2',
+          centered && 'w-full justify-center',
+          variant === 'bar' && 'w-full flex-col items-stretch gap-1.5',
+          className,
+        )}
+      >
+        {indicator}
+        {label && (
+          <span className={clsx('text-(--text-secondary)', labelSize[size])}>{label}</span>
+        )}
+      </div>
+    )
+  },
+)
+
+Loading.displayName = 'Loading'
+