@licklist/design 0.78.5-dev.88 → 0.78.5-dev.9

package/src/v2/components/NewInput/NewInput.stories.tsx

@@ -1,418 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { NewInput } from './NewInput'
-import { useState } from 'react'
-import { SearchIcon, CalendarSmallIcon } from '../../icons'
-
-const meta: Meta<typeof NewInput> = {
-  title: 'V2/Components/NewInput',
-  component: NewInput,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    as: {
-      control: 'radio',
-      options: ['input', 'textarea'],
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date', 'time'],
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof NewInput>
-
-// Basic Input Stories
-export const Default: Story = {
-  args: {
-    placeholder: 'Enter text...',
-  },
-}
-
-export const WithLabel: Story = {
-  args: {
-    label: 'Full Name',
-    placeholder: 'John Doe',
-  },
-}
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Email Address',
-    placeholder: 'example@email.com',
-    helperText: 'We will never share your email with anyone else.',
-  },
-}
-
-export const OptionalField: Story = {
-  args: {
-    label: 'Middle Name',
-    optional: true,
-    placeholder: 'Optional middle name',
-  },
-}
-
-export const WithError: Story = {
-  args: {
-    label: 'Username',
-    placeholder: 'Enter username',
-    error: 'This field is required',
-  },
-}
-
-export const WithValue: Story = {
-  args: {
-    label: 'Waiver Template Name',
-    value: 'Standard Waiver Template',
-    helperText: 'The name of your waiver template',
-  },
-}
-
-// Input Types
-export const EmailInput: Story = {
-  args: {
-    label: 'Email',
-    type: 'email',
-    placeholder: 'your.email@example.com',
-    helperText: 'Enter a valid email address',
-  },
-}
-
-export const PasswordInput: Story = {
-  args: {
-    label: 'Password',
-    type: 'password',
-    placeholder: 'Enter your password',
-    helperText: 'Must be at least 8 characters',
-  },
-}
-
-export const NumberInput: Story = {
-  args: {
-    label: 'Expires In',
-    type: 'number',
-    placeholder: '12',
-    helperText: 'Number of months',
-    min: 1,
-    max: 120,
-  },
-}
-
-export const PhoneInput: Story = {
-  args: {
-    label: 'Phone Number',
-    type: 'tel',
-    placeholder: '+1 (555) 123-4567',
-  },
-}
-
-export const URLInput: Story = {
-  args: {
-    label: 'Website',
-    type: 'url',
-    placeholder: 'https://example.com',
-    helperText: 'Enter a valid URL',
-  },
-}
-
-export const DateInput: Story = {
-  args: {
-    label: 'Date of Birth',
-    type: 'date',
-    icon: <CalendarSmallIcon />,
-  },
-}
-
-export const SearchInput: Story = {
-  args: {
-    label: 'Search',
-    type: 'search',
-    placeholder: 'Search for waivers...',
-  },
-}
-
-// Textarea
-export const TextareaBasic: Story = {
-  args: {
-    label: 'Description',
-    as: 'textarea',
-    placeholder: 'Enter a detailed description...',
-  } as any,
-  render: (args) => <NewInput {...(args as any)} rows={5} />,
-}
-
-export const TextareaWithHelperText: Story = {
-  args: {
-    label: 'Waiver Text',
-    as: 'textarea',
-    placeholder: 'Enter the waiver content...',
-    helperText: 'This will be displayed to users when signing the waiver',
-  } as any,
-  render: (args) => <NewInput {...(args as any)} rows={8} />,
-}
-
-export const TextareaWithError: Story = {
-  args: {
-    label: 'Comments',
-    as: 'textarea',
-    placeholder: 'Enter your comments...',
-    error: 'Comments are required',
-  } as any,
-  render: (args) => <NewInput {...(args as any)} rows={4} />,
-}
-
-// States
-export const DisabledInput: Story = {
-  args: {
-    label: 'Disabled Field',
-    placeholder: 'Cannot edit this',
-    disabled: true,
-    helperText: 'This field is disabled',
-  },
-}
-
-export const DisabledWithValue: Story = {
-  args: {
-    label: 'Read-only Field',
-    value: 'This value cannot be changed',
-    disabled: true,
-  },
-}
-
-export const ReadOnlyInput: Story = {
-  args: {
-    label: 'Read Only',
-    value: 'Read-only value',
-    readOnly: true,
-    helperText: 'This field is read-only',
-  },
-}
-
-export const RequiredField: Story = {
-  args: {
-    label: 'Required Field',
-    required: true,
-    placeholder: 'This field is required',
-    helperText: 'You must fill out this field',
-  },
-}
-
-// With Icon
-export const WithIcon: Story = {
-  args: {
-    label: 'Search',
-    icon: <SearchIcon />,
-  },
-}
-
-// Controlled Input Example
-export const Controlled: Story = {
-  render: () => {
-    const ControlledExample = () => {
-      const [value, setValue] = useState('')
-      const [error, setError] = useState('')
-
-      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = e.target.value
-        setValue(newValue)
-
-        // Validation
-        if (newValue.length > 0 && newValue.length < 3) {
-          setError('Must be at least 3 characters')
-        } else {
-          setError('')
-        }
-      }
-
-      return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', minWidth: '400px' }}>
-          <NewInput
-            label="Controlled Input"
-            placeholder="Type at least 3 characters..."
-            value={value}
-            onChange={handleChange}
-            error={error}
-            helperText={!error ? `Character count: ${value.length}` : undefined}
-          />
-          <div style={{ padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}>
-            <strong>Current value:</strong>
-            <pre>{JSON.stringify(value, null, 2)}</pre>
-          </div>
-        </div>
-      )
-    }
-
-    return <ControlledExample />
-  },
-}
-
-// Form Example
-export const FormExample: Story = {
-  render: () => {
-    const FormExampleComponent = () => {
-      const [formData, setFormData] = useState({
-        name: '',
-        email: '',
-        expiresIn: '',
-        description: '',
-      })
-      const [errors, setErrors] = useState<Record<string, string>>({})
-
-      const handleChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setFormData({ ...formData, [field]: e.target.value })
-        // Clear error when user starts typing
-        if (errors[field]) {
-          setErrors({ ...errors, [field]: '' })
-        }
-      }
-
-      const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault()
-        const newErrors: Record<string, string> = {}
-
-        if (!formData.name) newErrors.name = 'Name is required'
-        if (!formData.email) newErrors.email = 'Email is required'
-        else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Email is invalid'
-        if (!formData.expiresIn) newErrors.expiresIn = 'Expiration period is required'
-
-        setErrors(newErrors)
-
-        if (Object.keys(newErrors).length === 0) {
-          alert('Form submitted successfully!')
-        }
-      }
-
-      return (
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px', minWidth: '500px' }}>
-          <h3>Waiver Template Form (Example)</h3>
-
-          <NewInput
-            label="Template Name"
-            placeholder="Enter template name"
-            value={formData.name}
-            onChange={handleChange('name')}
-            error={errors.name}
-            helperText="A descriptive name for your waiver template"
-          />
-
-          <NewInput
-            label="Contact Email"
-            type="email"
-            placeholder="contact@example.com"
-            value={formData.email}
-            onChange={handleChange('email')}
-            error={errors.email}
-            helperText="Email for waiver-related notifications"
-          />
-
-          <NewInput
-            label="Expires In (months)"
-            type="number"
-            placeholder="12"
-            value={formData.expiresIn}
-            onChange={handleChange('expiresIn')}
-            error={errors.expiresIn}
-            helperText="How many months until the waiver expires"
-            min={1}
-            max={120}
-          />
-
-          <NewInput
-            label="Description"
-            optional={true}
-            as="textarea"
-            placeholder="Optional description..."
-            value={formData.description}
-            onChange={handleChange('description') as any}
-            rows={4}
-            helperText="Additional notes about this template"
-          />
-
-          <button
-            type="submit"
-            style={{
-              padding: '10px 20px',
-              background: '#14215A',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '14px',
-              fontWeight: 500,
-            }}
-          >
-            Submit Form
-          </button>
-
-          <div style={{ padding: '10px', background: '#f0f0f0', borderRadius: '4px' }}>
-            <strong>Form Data:</strong>
-            <pre>{JSON.stringify(formData, null, 2)}</pre>
-          </div>
-        </form>
-      )
-    }
-
-    return <FormExampleComponent />
-  },
-}
-
-// Size Variations
-export const SmallWidth: Story = {
-  args: {
-    label: 'Small Input',
-    placeholder: 'Small width',
-    style: { width: '200px' },
-  },
-}
-
-export const MediumWidth: Story = {
-  args: {
-    label: 'Medium Input',
-    placeholder: 'Medium width',
-    style: { width: '400px' },
-  },
-}
-
-export const FullWidth: Story = {
-  args: {
-    label: 'Full Width Input',
-    placeholder: 'Full width',
-    style: { width: '100%' },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ width: '600px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-// Edge Cases
-export const LongLabel: Story = {
-  args: {
-    label: 'This is a very long label that might wrap to multiple lines depending on the container width',
-    placeholder: 'Enter value',
-    helperText: 'This is also a very long helper text that provides detailed information about what should be entered in this field',
-  },
-}
-
-export const LongError: Story = {
-  args: {
-    label: 'Field with long error',
-    placeholder: 'Enter value',
-    error: 'This is a very long error message that explains in detail what went wrong and how to fix it. It should wrap properly.',
-  },
-}
-
-export const MaxLengthInput: Story = {
-  args: {
-    label: 'Limited Characters',
-    placeholder: 'Max 50 characters',
-    maxLength: 50,
-    helperText: 'You can only enter up to 50 characters',
-  },
-}

package/src/v2/components/NewInput/NewInput.tsx

@@ -1,122 +0,0 @@
-import React, {InputHTMLAttributes, TextareaHTMLAttributes, forwardRef, ReactNode} from 'react';
-import '../../styles/form/NewInput.scss';
-
-type CommonInputProps = {
-  label?: string;
-  optional?: boolean;
-  helperText?: string;
-  error?: string;
-  icon?: ReactNode;
-  iconPosition?: 'left' | 'right';
-  required?: boolean;
-  onIconClick?: () => void;
-  variant?: 'default' | 'on-surface';
-}
-
-type InputProps = CommonInputProps & {
-  as?: 'input';
-} & InputHTMLAttributes<HTMLInputElement>
-
-type TextareaProps = CommonInputProps & {
-  as: 'textarea';
-} & TextareaHTMLAttributes<HTMLTextAreaElement>
-
-export type NewInputProps = InputProps | TextareaProps
-
-export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewInputProps>(
-  ({label, optional, helperText, error, icon, iconPosition = 'left', as = 'input', required, variant, className = '', onIconClick, ...props}, ref) => {
-    const inputRef = React.useRef<HTMLInputElement>(null);
-    const isError = !!error;
-    const containerClasses = [
-      'new-form-input',
-      isError ? 'new-form-input--error' : '',
-      props.disabled ? 'new-form-input--disabled' : '',
-      variant === 'on-surface' ? 'new-form-input--on-surface' : '',
-      className
-    ].filter(Boolean).join(' ');
-
-    // Merge refs
-    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
-
-    const handleIconClick = () => {
-      if (onIconClick) {
-        onIconClick();
-      } else if (inputRef.current && (props as any).type === 'date') {
-        inputRef.current.showPicker?.();
-      }
-    };
-
-    const renderInput = () => {
-      if (as === 'textarea') {
-        return (
-          <textarea
-            ref={ref as React.Ref<HTMLTextAreaElement>}
-            className="new-form-input__textarea"
-            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
-          />
-        );
-      }
-
-      if (icon) {
-        return (
-          <div className={`new-form-input__input-with-icon new-form-input__input-with-icon--${iconPosition}`}>
-            <input
-              ref={inputRef}
-              {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
-            />
-            <div
-              className="icon"
-              role="button"
-              tabIndex={0}
-              onClick={handleIconClick}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  handleIconClick();
-                }
-              }}
-              style={{ cursor: (onIconClick || (props as any).type === 'date') ? 'pointer' : 'default' }}
-            >
-              {icon}
-            </div>
-          </div>
-        );
-      }
-
-      return (
-        <input
-          ref={ref as React.Ref<HTMLInputElement>}
-          className="new-form-input__input"
-          {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
-        />
-      );
-    };
-
-    return (
-      <div className={containerClasses}>
-        {(label || optional) && (
-          <label className="new-form-input__label">
-            <span>{label}</span>
-            {optional && <span className="new-form-input__label-optional">(optional)</span>}
-          </label>
-        )}
-
-        {renderInput()}
-
-        {helperText && (
-          <p className="new-form-input__helper-text">
-            {helperText}
-          </p>
-        )}
-
-        {error && error !== ' ' && (
-          <p className="new-form-input__error-text">
-            {error}
-          </p>
-        )}
-      </div>
-    );
-  }
-);
-
-NewInput.displayName = 'NewInput';

package/src/v2/components/NewInput/index.ts

@@ -1 +0,0 @@
-export * from './NewInput';

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -1,50 +0,0 @@
-.new-page-header-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
-    margin: 20px 0 20px 0;
-    align-self: stretch;
-    @media (max-width: 768px) {
-        gap: 0;
-    }
-}
-
-.new-page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    width: 100%;
-    gap: 16px;
-
-    @media (max-width: 768px) {
-        gap: 8px;
-        padding-top: 0;
-    }
-
-    &__title {
-        color: var(--label-primary);
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 28px;
-        margin: 0;
-        padding: 0;
-    }
-
-    &__actions {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        flex-shrink: 0;
-    }
-}
-
-.new-page-header__divider {
-    width: 100%;
-    height: 1px;
-    border: none;
-    background-color: var(--border-primary, #e8e9ef);
-}

package/src/v2/components/NewPageHeader/NewPageHeader.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { NewPageHeader } from './NewPageHeader'
-import { Button, ButtonText } from '../Button'
-
-const meta: Meta<typeof NewPageHeader> = {
-  title: 'V2/Components/NewPageHeader',
-  component: NewPageHeader,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-}
-
-export default meta
-type Story = StoryObj<typeof NewPageHeader>
-
-export const Default: Story = {
-  args: {
-    title: 'New waiver',
-    cancelLabel: 'Cancel',
-    onCancel: () => alert('Cancel clicked'),
-  },
-}
-
-export const WithoutCancelButton: Story = {
-  args: {
-    title: 'View Only Page',
-  },
-}
-
-export const LongTitle: Story = {
-  args: {
-    title: 'This is a very long page title that might wrap on smaller screens',
-    cancelLabel: 'Cancel',
-    onCancel: () => alert('Cancel clicked'),
-  },
-}
-
-export const CustomCancelLabel: Story = {
-  args: {
-    title: 'Edit Waiver Template',
-    cancelLabel: 'Go Back',
-    onCancel: () => alert('Go Back clicked'),
-  },
-}
-
-export const WithAction: Story = {
-  args: {
-    title: 'Zones & Resources',
-    renderRight: () => (
-      <Button variant="primary" onClick={() => alert('Add Zone clicked')}>
-        <ButtonText color="white">+ Add Zone</ButtonText>
-      </Button>
-    ),
-  },
-}
-
-export const WithMultipleActions: Story = {
-  args: {
-    title: 'Zones & Resources',
-    renderRight: () => (
-      <>
-        <Button variant="secondary" onClick={() => alert('Export clicked')}>
-          <ButtonText color="action">Export</ButtonText>
-        </Button>
-        <Button variant="primary" onClick={() => alert('Add Zone clicked')}>
-          <ButtonText color="white">+ Add Zone</ButtonText>
-        </Button>
-      </>
-    ),
-  },
-}

package/src/v2/components/NewPageHeader/NewPageHeader.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Button, ButtonText } from '../Button';
-import './NewPageHeader.scss';
-
-export interface NewPageHeaderProps {
-    title: string;
-    cancelLabel?: string;
-    onCancel?: () => void;
-    renderRight?: () => React.ReactNode;
-    className?: string;
-    showDivider?: boolean;
-    dividerClassName?: string;
-}
-
-export const NewPageHeader = ({
-    title,
-    cancelLabel = 'Cancel',
-    onCancel,
-    renderRight,
-    className = '',
-    showDivider = true,
-    dividerClassName = ''
-}: NewPageHeaderProps) => (
-    <div className={`new-page-header-container ${className}`}>
-        <div className="new-page-header">
-            <h1 className="new-page-header__title">{title}</h1>
-            <div className="new-page-header__actions">
-                {renderRight && renderRight()}
-                {onCancel && (
-                    <Button
-                        type="button"
-                        variant="destructive-soft"
-                        onClick={onCancel}
-                    >
-                        <ButtonText color="danger">{cancelLabel}</ButtonText>
-                    </Button>
-                )}
-            </div>
-        </div>
-        {showDivider && <hr className={`new-page-header__divider ${dividerClassName}`} />}
-    </div>
-);

package/src/v2/components/NewPageHeader/index.ts

@@ -1 +0,0 @@
-export * from './NewPageHeader';