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

package/src/v2/components/Select/Select.scss

@@ -69,7 +69,7 @@
 
   &--error {
     background-color: var(--surface-status-error);
-    border-color: var(--border-status-error);
+    border-color: var(--borders-status-border-error);
 
     &:hover:not(:disabled) {
       background-color: var(--errors-lighter);
@@ -77,7 +77,7 @@
     }
 
     &:focus {
-      border-color: var(--errors-dark);
+      border-color: var(--borders-status-border-error);
       background-color: var(--surface-status-error);
     }
   }
@@ -141,7 +141,7 @@
   height: 6px;
   stroke: var(--label-secondary);
   transition: all 0.2s ease-in-out;
-  
+
   .select:focus + & {
     transform: translateY(-50%) rotate(180deg);
   }
@@ -164,7 +164,7 @@
     opacity: 0.8;
     transform: scale(0.98);
     border-color: var(--cyan-700);
-    
+
     &:focus {
       transform: scale(0.98) translateY(-1px);
     }
@@ -185,4 +185,4 @@
 
 .select--filter-active {
   animation: filterPulse 0.6s ease-out;
-}
+}

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

@@ -0,0 +1,81 @@
+
+export const BoldIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none">
+    <path d="M9 11.25H12.375C13.4105 11.25 14.25 10.4105 14.25 9.375C14.25 8.33947 13.4105 7.5 12.375 7.5H9V11.25ZM16.5 14.625C16.5 16.489 14.989 18 13.125 18H7.5V6H12.375C14.239 6 15.75 7.51104 15.75 9.375C15.75 10.2782 15.3952 11.0986 14.8173 11.7043C15.8234 12.2885 16.5 13.3777 16.5 14.625ZM9 12.75V16.5H13.125C14.1605 16.5 15 15.6605 15 14.625C15 13.5895 14.1605 12.75 13.125 12.75H9Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ItalicIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 18H8.25V16.5H10.445L12.0319 7.5H9.75V6H15.75V7.5H13.555L11.9681 16.5H14.25V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const UnderlineIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 5.25V12C9 13.6568 10.3431 15 12 15C13.6568 15 15 13.6568 15 12V5.25H16.5V12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12V5.25H9ZM6 18H18V19.5H6V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const StrikeThroughIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M15.8653 13.5C16.0384 13.8871 16.125 14.317 16.125 14.7897C16.125 15.7969 15.7322 16.5837 14.9465 17.1503C14.1607 17.7167 13.0751 18 11.6896 18C10.4601 18 9.24251 17.7139 8.03694 17.1416V15.4507C9.17653 16.1087 10.3431 16.4377 11.5367 16.4377C13.45 16.4377 14.4096 15.8884 14.4156 14.7897C14.4156 14.3204 14.2537 13.9198 13.9298 13.588C13.9004 13.5579 13.8704 13.5286 13.8398 13.5H5.25V12H18.75V13.5H15.8653ZM12.807 11.25H8.72181C8.59245 11.1325 8.47212 11.0019 8.36082 10.8584C8.03694 10.4406 7.875 9.93419 7.875 9.33905C7.875 8.41202 8.22437 7.62375 8.92312 6.97425C9.62187 6.32474 10.703 6 12.1664 6C13.2701 6 14.3257 6.24606 15.3333 6.7382V8.35193C14.4336 7.83691 13.447 7.5794 12.3734 7.5794C10.514 7.5794 9.58438 8.16595 9.58438 9.33905C9.58438 9.65379 9.74782 9.92847 10.0747 10.1631C10.4016 10.3977 10.8049 10.5851 11.2847 10.7253C11.7499 10.8612 12.2573 11.0361 12.807 11.25Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading1Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.54 12H12.9717V7.96191H11.5654V6.85254H12.1152C12.9535 6.85254 13.2871 6.54609 13.2871 5.59961H14.54V12Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading2Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="12" viewBox="0 0 17 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.3154 5.45605C15.8385 5.4562 16.7217 6.24039 16.7217 7.41211C16.7216 8.41248 16.2352 8.84564 15.0635 9.47656C14.0813 9.99919 13.6486 10.4133 13.6123 10.7197H16.7217V12H11.7549C11.7549 10.2603 12.3864 9.36835 13.9639 8.53906C14.8381 8.0794 15.1172 7.86234 15.1172 7.42969C15.1171 7.02416 14.8377 6.73535 14.333 6.73535C13.7651 6.73536 13.4225 7.10543 13.3594 7.77246L11.7549 7.68262C11.8631 6.27643 12.783 5.45605 14.3154 5.45605Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ParagraphIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12 7.5V18.75H10.5V15C8.01472 15 6 12.9853 6 10.5C6 8.01472 8.01472 6 10.5 6H18V7.5H15.75V18.75H14.25V7.5H12ZM10.5 7.5C8.84314 7.5 7.5 8.84314 7.5 10.5C7.5 12.1568 8.84314 13.5 10.5 13.5V7.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const BulletListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 6H18.75V7.5H9V6ZM6.375 7.875C5.75368 7.875 5.25 7.37132 5.25 6.75C5.25 6.12868 5.75368 5.625 6.375 5.625C6.99632 5.625 7.5 6.12868 7.5 6.75C7.5 7.37132 6.99632 7.875 6.375 7.875ZM6.375 13.125C5.75368 13.125 5.25 12.6213 5.25 12C5.25 11.3787 5.75368 10.875 6.375 10.875C6.99632 10.875 7.5 11.3787 7.5 12C7.5 12.6213 6.99632 13.125 6.375 13.125ZM6.375 18.3C5.75368 18.3 5.25 17.7963 5.25 17.175C5.25 16.5537 5.75368 16.05 6.375 16.05C6.99632 16.05 7.5 16.5537 7.5 17.175C7.5 17.7963 6.99632 18.3 6.375 18.3ZM9 11.25H18.75V12.75H9V11.25ZM9 16.5H18.75V18H9V16.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const NumberedListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M7.31268 5.625H6.538L5.4375 5.91988V7.08436L6.18752 6.88337L6.18763 9.375H5.25V10.5H8.25V9.375H7.31268V5.625ZM10.5 6H18.75V7.5H10.5V6ZM10.5 11.25H18.75V12.75H10.5V11.25ZM10.5 16.5H18.75V18H10.5V16.5ZM5.15625 14.7188C5.15625 13.8385 5.86979 13.125 6.75 13.125C7.63021 13.125 8.34375 13.8385 8.34375 14.7188C8.34375 15.0829 8.22137 15.419 8.0156 15.6875L8.01203 15.6922L6.9869 16.875H8.25V18H5.25009L5.24969 17.1589L7.10378 15.0262C7.17548 14.9439 7.21875 14.8366 7.21875 14.7188C7.21875 14.4599 7.00889 14.25 6.75 14.25C6.50533 14.25 6.3043 14.4376 6.2831 14.6766L6.27382 14.9062H5.15625V14.7188Z" fill="#626A90"/>
+  </svg>
+);
+
+export const QuoteAltIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.43756 15.9909C5.66487 15.1706 5.25 14.25 5.25 12.7578C5.25 10.1332 7.09238 7.78029 9.77294 6.61743L10.4425 7.65064C7.94103 9.00409 7.45214 10.7595 7.25673 11.8665C7.65947 11.6583 8.18669 11.585 8.70353 11.6329C10.0568 11.7584 11.1234 12.8693 11.1234 14.25C11.1234 15.6998 9.94812 16.875 8.49837 16.875C7.69357 16.875 6.92397 16.5072 6.43756 15.9909ZM13.9375 15.9909C13.1649 15.1706 12.75 14.25 12.75 12.7578C12.75 10.1332 14.5924 7.78029 17.2729 6.61743L17.9425 7.65064C15.441 9.00409 14.9522 10.7595 14.7567 11.8665C15.1594 11.6583 15.6867 11.585 16.2035 11.6329C17.5568 11.7584 18.6234 12.8693 18.6234 14.25C18.6234 15.6998 17.4481 16.875 15.9984 16.875C15.1936 16.875 14.424 16.5072 13.9375 15.9909Z" fill="#626A90"/>
+  </svg>
+);
+
+export const DividerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <rect x="5.25" y="11.25" width="13.5" height="1.5" fill="#626A90"/>
+    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+  </svg>
+);
+
+export const UndoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 16.5H15.375C16.4105 16.5 17.25 15.6605 17.25 14.625C17.25 13.5895 16.4105 12.75 15.375 12.75H5.25V11.25H15.375C17.239 11.25 18.75 12.761 18.75 14.625C18.75 16.489 17.239 18 15.375 18H14.25V19.5L11.25 17.25L14.25 15V16.5ZM5.25 6H18.75V7.5H5.25V6ZM9.75 16.5V18H5.25V16.5H9.75Z" fill="#626A90"/>
+  </svg>
+);
+
+export const RedoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.06131 6.69136C7.57508 5.61718 9.42169 5.01103 11.2847 5.00012C13.6826 4.98606 15.9892 5.92634 17.705 7.61633C19.4208 9.30632 20.4039 11.6033 20.4411 14.0084C20.4784 16.4135 19.5668 18.7239 17.9042 20.4371C16.2415 22.1504 13.9686 23.123 11.5794 23.1437C9.19013 23.1643 6.87707 22.2312 5.14341 20.5472L6.18225 19.4716C7.62779 20.8757 9.55655 21.6538 11.5488 21.6366C13.5411 21.6193 15.4363 20.8083 16.8227 19.3798C18.2091 17.9513 18.9692 16.0248 18.9381 14.0194C18.9071 12.014 18.0873 10.0987 16.6567 8.68961C15.2261 7.28052 13.3028 6.49646 11.3033 6.50818C9.75051 6.51728 8.21142 7.02243 6.94998 7.91782L10.25 11.25H5.25V6.25L6.06131 6.69136Z" fill="#626A90"/>
+  </svg>
+);
+

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

@@ -0,0 +1,318 @@
+@import '../../styles/index.scss';
+
+.wysiwyg-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: stretch;
+  gap: var(--spacing-reg);
+  width: 100%;
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    color: var(--label-primary);
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    margin: 0;
+  }
+
+  &__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;
+    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);
+    overflow-y: auto;
+    text-align: left;
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+
+    &--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, p, ul, ol, blockquote, hr {
+      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);
+      overflow-y: auto;
+      text-align: left;
+
+      @media (max-width: 768px) {
+        font-size: 16px;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      font-size: 22px;
+    }
+
+    h2 {
+      font-size: 20px;
+    }
+
+    h3 {
+      font-size: 18px;
+    }
+
+    h4 {
+      font-size: 16px;
+    }
+
+    h5 {
+      font-size: 14px;
+    }
+
+    h6 {
+      font-size: 13px;
+    }
+
+    p {
+      margin: 8px 0;
+      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);
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul, ol {
+      margin: 8px 0;
+      padding-left: 24px;
+      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);
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    li {
+      margin: 4px 0;
+      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);
+    }
+
+    blockquote {
+      margin: 12px 0;
+      padding: 8px 16px;
+      border-left: 4px solid var(--border-selected, #121e52);
+      background-color: var(--surface-tertiary, #efefef);
+      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-secondary, #626a90);
+      font-style: italic;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    hr {
+      display: block;
+      margin: 16px 0;
+      border: none;
+      border-top: 2px solid var(--border-primary, #e8e9ef);
+      height: 0;
+      box-sizing: content-box;
+      opacity: 1;
+      visibility: visible;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    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 {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: var(--text-regular-size, 15px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--text-regular-line, 20px);
+    margin-top: -5px;
+    color: var(--label-secondary);
+  }
+
+  &__error-text {
+    font-size: var(--text-xs-size, 11px);
+    color: var(--label-status-error, #ef4444);
+    margin-top: 2px;
+  }
+
+}

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