@licklist/design 0.78.5-dev.41 → 0.78.5-dev.45

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',
+  },
+}

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

@@ -0,0 +1,96 @@
+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;
+  required?: boolean;
+}
+
+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, as = 'input', required, className = '', ...props}, ref) => {
+    const isError = !!error;
+    const containerClasses = [
+      'new-form-input',
+      isError ? 'new-form-input--error' : '',
+      props.disabled ? 'new-form-input--disabled' : '',
+      className
+    ].filter(Boolean).join(' ');
+
+    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">
+            <input
+              ref={ref as React.Ref<HTMLInputElement>}
+              {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
+            />
+            <div className="icon">{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) && (
+          <div className="new-form-input__label-row">
+            {label && (
+              <label className="new-form-input__label">
+                {label}
+              </label>
+            )}
+            {optional && <span className="new-form-input__label-optional">Optional</span>}
+          </div>
+        )}
+
+        {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

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

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

@@ -0,0 +1,47 @@
+.new-page-header-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    align-self: stretch;
+    padding-left: 32px;
+    padding-right: 32px;
+
+    @media (max-width: 768px) {
+        padding-left: 16px;
+        padding-right: 16px;
+        gap: 16px;
+    }
+}
+
+.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: 16px;
+    }
+
+    &__title {
+        color: var(--label-primary);
+        font-family: 'Geist', sans-serif;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        margin: 0;
+    }
+}
+
+.new-page-header__divider {
+    width: 100%;
+    height: 1px;
+    border: none;
+    background-color: var(--border-primary, #e8e9ef);
+    margin: 0;
+}

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NewPageHeader } from './NewPageHeader'
+
+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'),
+  },
+}

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

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

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

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

package/src/v2/components/SectionHeader/SectionHeader.scss

@@ -0,0 +1,11 @@
+.section-header {
+  display: flex;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  margin: 0;
+  align-self: stretch;
+  color: var(--label-primary, #121E52);
+}

package/src/v2/components/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './SectionHeader.scss';
+
+export interface SectionHeaderProps {
+    title: string;
+    className?: string;
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => {
+    return (
+        <span className={`section-header ${className}`}>
+            {title}
+        </span>
+    );
+};

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

@@ -0,0 +1,2 @@
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps } from './SectionHeader';