@licklist/design 0.78.28 → 0.78.30

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.scss

@@ -0,0 +1,310 @@
+@import '../../styles/index.scss';
+
+.wysiwyg-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: stretch;
+  gap: var(--spacing-reg);
+  width: 100%;
+
+  &__label {
+    @include typography('text.regular');
+    font-weight: 600;
+    color: var(--label-primary);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  &__required {
+    color: var(--label-status-error, #ef4444);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 4px);
+    overflow: hidden;
+    background-color: var(--surface-secondary, #f8f8fa);
+    transition: border-color 0.2s ease;
+
+    &:focus-within {
+      border-color: var(--border-selected, #6200EE);
+    }
+
+    &--error {
+      border-color: var(--borders-status-border-error, #ef4444);
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 4px;
+    align-items: center;
+    gap: 0;
+    align-self: stretch;
+    border-radius: 2px 2px 0 0;
+    background: var(--surface-tertiary);
+    border-bottom: 2px solid var(--border-primary);
+  }
+
+  &__toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--label-secondary);
+    transition: all 0.2s ease;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+
+    &[title="Heading 1"] svg,
+    &[title="Heading 2"] svg {
+      transform: scale(0.8);
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary);
+      color: var(--label-primary);
+    }
+
+    &--active {
+      background-color: var(--surface-action-soft, #efeffe);
+      color: var(--label-action, #5d5bf4);
+    }
+  }
+
+  &__toolbar-divider {
+    width: 1px;
+    height: 18px;
+    background-color: var(--border-primary, #e8e9ef);
+    margin: 0 8px;
+    display: block;
+  }
+
+  &__content {
+    min-height: 200px;
+    padding: 12px;
+    outline: none;
+    @include typography('text.regular');
+    background-color: var(--surface-secondary, #f8f8fa);
+    overflow-y: auto;
+    text-align: left;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+
+    &--disabled {
+      background-color: var(--surface-status-disabled, #f8f8fa);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &:empty:before {
+      content: attr(data-placeholder);
+      color: var(--label-secondary, #626a90);
+      pointer-events: none;
+    }
+
+    // Styles for content elements
+    h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr, .wysiwyg-editor__hard-break {
+      @include typography('text.regular');
+      text-align: left;
+      word-break: break-word;
+      overflow-wrap: break-word;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      @include responsive-heading('heading.h1', 'heading.h1.mobile');
+      margin: 16px 0 12px;
+    }
+
+    h2 {
+      @include responsive-heading('heading.h2', 'heading.h2.mobile');
+      margin: 14px 0 10px;
+    }
+
+    h3 {
+      @include responsive-heading('heading.h3', 'heading.h3.mobile');
+      margin: 12px 0 8px;
+    }
+
+    h4 {
+      @include responsive-heading('heading.h4', 'heading.h4.mobile');
+      margin: 10px 0 6px;
+    }
+
+    h5 {
+      @include responsive-heading('heading.h5', 'heading.h5.mobile');
+      margin: 8px 0 4px;
+    }
+
+    h6 {
+      @include responsive-heading('heading.h6', 'heading.h6.mobile');
+      margin: 6px 0 2px;
+    }
+
+    p {
+      @include typography('text.regular');
+      margin: 8px 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul, ol {
+      @include typography('text.regular');
+      margin: 8px 0;
+      padding-left: 24px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    li {
+      @include typography('text.regular');
+      margin: 4px 0;
+    }
+
+    blockquote {
+      @include typography('text.regular');
+      margin: 12px 0;
+      padding: 8px 16px;
+      border-left: 4px solid var(--border-selected, #121e52);
+      background-color: var(--surface-tertiary, #efefef);
+      font-style: italic;
+      color: var(--label-secondary, #626a90);
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    hr {
+      display: block;
+      margin: 20px 0;
+      border: none;
+      border-top: 2px solid var(--border-primary, #e8e9ef);
+      height: 0;
+      box-sizing: content-box;
+      opacity: 1;
+      visibility: visible;
+
+      &:first-of-type {
+        margin-top: 20px;
+      }
+    }
+
+    strong, b {
+      font-weight: 600;
+      color: var(--label-primary, #121e52);
+    }
+
+    em, i {
+      font-style: italic;
+    }
+
+    u {
+      text-decoration: underline;
+    }
+
+    s, strike {
+      text-decoration: line-through;
+    }
+
+    code {
+      font-family: 'Monaco', 'Courier New', monospace;
+      font-size: 12px;
+      background-color: var(--surface-tertiary, #efefef);
+      padding: 2px 4px;
+      border-radius: 3px;
+      color: var(--label-primary, #121e52);
+    }
+
+    pre {
+      margin: 12px 0;
+      padding: 12px;
+      background-color: var(--surface-tertiary, #efefef);
+      border-radius: var(--radius-sm, 4px);
+      overflow-x: auto;
+
+      code {
+        background-color: transparent;
+        padding: 0;
+      }
+    }
+
+    a {
+      color: var(--label-action, #5d5bf4);
+      text-decoration: underline;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--label-action-hover, #4a48d1);
+      }
+    }
+  }
+
+  &__placeholder {
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__help-text {
+    @include typography('text.regular');
+    margin-top: -5px;
+    color: var(--label-secondary);
+    min-width: max-content;
+    white-space: nowrap;
+
+
+    @media (max-width: 768px) {
+      min-width: unset;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+  }
+
+  &__error-text {
+    font-size: var(--text-xs-size, 11px);
+    color: var(--label-status-error, #ef4444);
+    margin-top: 2px;
+  }
+
+  &__hard-break {
+    height: 16px;
+    width: 100%;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+}

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

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WYSIWYGEditor } from './WYSIWYGEditor'
+import { useState } from 'react'
+
+const meta: Meta<typeof WYSIWYGEditor> = {
+  title: 'V2/Components/WYSIWYGEditor',
+  component: WYSIWYGEditor,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WYSIWYGEditor>
+
+export const Default: Story = {
+  args: {
+    label: 'Waiver Text',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithHelpText: Story = {
+  args: {
+    label: 'Waiver Text',
+    helpText: 'Enter the legal text for your waiver. You can use the toolbar to format the text.',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Waiver Text',
+    error: 'This field is required',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithInitialValue: Story = {
+  args: {
+    label: 'Waiver Text',
+    value: '<p><strong>Waiver Agreement</strong></p><p>By signing this document, you agree to the following terms and conditions...</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Waiver Text',
+    disabled: true,
+    value: '<p>This editor is disabled and cannot be edited.</p>',
+  },
+}
+
+// Controlled editor with state management
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('<p>Start typing here...</p>')
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        <WYSIWYGEditor
+          label="Controlled Editor"
+          helpText="The content below updates as you type"
+          value={value}
+          onChange={setValue}
+        />
+        <div style={{ padding: '16px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <strong>Current HTML Value:</strong>
+          <pre style={{
+            marginTop: '8px',
+            padding: '12px',
+            background: 'white',
+            borderRadius: '4px',
+            fontSize: '12px',
+            overflow: 'auto'
+          }}>
+            {value}
+          </pre>
+          <div style={{ marginTop: '12px' }}>
+            <strong>Character Count:</strong> {value.length}
+          </div>
+        </div>
+        <button
+          onClick={() => setValue('<p>Content has been reset!</p>')}
+          style={{
+            padding: '8px 16px',
+            background: '#269B36',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Reset Content
+        </button>
+      </div>
+    )
+  },
+}
+
+// Real-world waiver form example
+export const WaiverFormExample: Story = {
+  render: () => {
+    const [waiverText, setWaiverText] = useState(`<p><strong>WAIVER AND RELEASE OF LIABILITY</strong></p>
+<p>In consideration of being allowed to participate in any way in the activities and events of [Company Name], the undersigned:</p>
+<ol>
+  <li>Agrees that prior to participating, they will inspect the facilities and equipment to be used, and if they believe anything is unsafe, they will immediately advise their supervisor of such condition(s) and refuse to participate.</li>
+  <li>Acknowledges and fully understands that each participant will be engaging in activities that involve risk of serious injury, including permanent disability and death, and severe social and economic losses which might result not only from their own actions, inactions or negligence but the action, inaction or negligence of others, the rules of play, or the condition of the premises or of any equipment used.</li>
+  <li>Assumes all risks and accepts responsibility for the damages following such injury, permanent disability or death, even if caused, in whole or in part, by the action, inaction or negligence of the releasees named below.</li>
+</ol>
+<p><strong>I HAVE READ THIS RELEASE OF LIABILITY AND ASSUMPTION OF RISK AGREEMENT, FULLY UNDERSTAND ITS TERMS, UNDERSTAND THAT I HAVE GIVEN UP SUBSTANTIAL RIGHTS BY SIGNING IT, AND SIGN IT FREELY AND VOLUNTARILY WITHOUT ANY INDUCEMENT.</strong></p>`)
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px' }}>
+        <h3>Waiver Template Form</h3>
+
+        <div>
+          <label style={{ display: 'block', marginBottom: '8px', fontWeight: 500 }}>
+            Template Name
+          </label>
+          <input
+            type="text"
+            defaultValue="General Liability Waiver"
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+            }}
+          />
+        </div>
+
+        <WYSIWYGEditor
+          label="Waiver Text"
+          helpText="Enter the legal text for your waiver. Use the toolbar to format as needed."
+          value={waiverText}
+          onChange={setWaiverText}
+        />
+
+        <div style={{
+          padding: '16px',
+          background: '#f8f9fa',
+          borderRadius: '8px',
+          fontSize: '14px'
+        }}>
+          <strong>Preview:</strong>
+          <div
+            style={{
+              marginTop: '12px',
+              padding: '16px',
+              background: 'white',
+              borderRadius: '4px',
+              border: '1px solid #e0e0e0'
+            }}
+            dangerouslySetInnerHTML={{ __html: waiverText }}
+          />
+        </div>
+
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            style={{
+              padding: '10px 20px',
+              background: '#269B36',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontWeight: 500,
+            }}
+          >
+            Save Waiver Template
+          </button>
+          <button
+            style={{
+              padding: '10px 20px',
+              background: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Demonstrates all formatting options
+export const FormattingShowcase: Story = {
+  args: {
+    label: 'Formatting Options',
+    helpText: 'Try using the toolbar buttons to format your text',
+    value: `<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<p>This is <strong>bold text</strong>, <em>italic text</em>, <u>underlined text</u>, and <del>strikethrough text</del>.</p>
+<blockquote>This is a blockquote</blockquote>
+<p>Unordered list:</p>
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ul>
+<p>Ordered list:</p>
+<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+<hr>
+<p>Normal text after a divider</p>`,
+  },
+}
+
+// Maximum length validation example
+export const WithMaxLength: Story = {
+  render: () => {
+    const MAX_LENGTH = 25500
+    const [value, setValue] = useState('<p>Start typing...</p>')
+    const remaining = MAX_LENGTH - value.length
+    const isOverLimit = remaining < 0
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <WYSIWYGEditor
+          label="Waiver Text"
+          helpText={`Maximum 25,500 characters`}
+          error={isOverLimit ? `Exceeds maximum length by ${Math.abs(remaining)} characters` : undefined}
+          value={value}
+          onChange={setValue}
+        />
+        <div style={{
+          padding: '12px',
+          background: isOverLimit ? '#fee' : '#f8f9fa',
+          borderRadius: '4px',
+          fontSize: '14px'
+        }}>
+          <strong>Characters:</strong> {value.length.toLocaleString()} / {MAX_LENGTH.toLocaleString()}
+          <div style={{ marginTop: '4px', color: isOverLimit ? '#dc3545' : '#28a745' }}>
+            {isOverLimit
+              ? `❌ ${Math.abs(remaining).toLocaleString()} over limit`
+              : `✓ ${remaining.toLocaleString()} remaining`
+            }
+          </div>
+        </div>
+      </div>
+    )
+  },
+}