@licklist/design 0.78.28 → 0.78.30

package/src/v2/components/FormField/FormField.scss

@@ -0,0 +1,87 @@
+@import '../../styles/index.scss';
+
+.form-field {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs, 4px);
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+  }
+
+  &__required {
+    color: var(--label-status-error, #ef4444);
+    margin-left: 2px;
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    padding: 8px 10px;
+    height: 40px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
+    color: var(--label-primary, #121e52);
+    background-color: var(--surface-secondary, #f8f8fa);
+    border: 2px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 4px);
+    transition: all 0.2s ease;
+    outline: none;
+    width: 100%;
+
+    &::placeholder {
+      color: var(--label-secondary, #626a90);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-primary-hover, #d1d3de);
+    }
+
+    &:focus {
+      border-color: var(--border-selected, #6200EE);
+      background-color: var(--surface-secondary, #f8f8fa);
+    }
+
+    &--error {
+      border-color: var(--borders-status-border-error, #ef4444);
+
+      &:focus {
+        border-color: var(--borders-status-border-error, #ef4444);
+      }
+    }
+
+    &:disabled {
+      background: var(--surface-status-disabled, #f8f8fa);
+      color: var(--label-secondary, #626a90);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  &__help-text {
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__error-text {
+    font-size: var(--text-xs-size, 11px);
+    line-height: var(--text-xs-line, 14px);
+    color: var(--label-status-error, #ef4444);
+  }
+}
+

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

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { FormField } from './FormField'
+
+export default {
+  title: 'v2/Components/FormField',
+  component: FormField,
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    helpText: { control: 'text' },
+    error: { control: 'text' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} as Meta<typeof FormField>
+
+type Story = StoryObj<typeof FormField>
+
+export const Default: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name',
+  },
+}
+
+export const WithHelpText: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name',
+    helpText: 'The name you will use for your waiver.',
+  },
+}
+
+export const Required: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name',
+    required: true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name',
+    error: 'This field is required',
+    required: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Name',
+    placeholder: 'Enter your name',
+    disabled: true,
+    value: 'Disabled value',
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '400px' }}>
+      <FormField label="Default" placeholder="Enter text..." />
+      <FormField label="With Help Text" placeholder="Enter text..." helpText="This is helpful information" />
+      <FormField label="Required Field" placeholder="Enter text..." required />
+      <FormField label="With Error" placeholder="Enter text..." error="This field is required" required />
+      <FormField label="Disabled" placeholder="Enter text..." disabled value="Cannot edit" />
+    </div>
+  ),
+}
+

package/src/v2/components/FormField/FormField.tsx

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes, forwardRef } from 'react'
+import './FormField.scss'
+
+export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helpText?: string
+  required?: boolean
+}
+
+export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  ({ label, error, helpText, required, className = '', ...props }, ref) => {
+    return (
+      <div className={`form-field ${className}`}>
+        {label && (
+          <label className="form-field__label">
+            {label}
+            {required && <span className="form-field__required">*</span>}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
+          {...props}
+        />
+        {helpText && !error && (
+          <span className="form-field__help-text">{helpText}</span>
+        )}
+        {error && <span className="form-field__error-text">{error}</span>}
+      </div>
+    )
+  }
+)
+
+FormField.displayName = 'FormField'
+
+

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

@@ -0,0 +1,3 @@
+export { FormField } from './FormField'
+export type { FormFieldProps } from './FormField'
+

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

@@ -0,0 +1,433 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NewInput } from './NewInput'
+import { useState } from 'react'
+
+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',
+  },
+}
+
+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',
+    placeholder: 'Search...',
+    icon: (
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM18 18l-4.35-4.35"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+}
+
+// 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',
+  },
+}