@licklist/design 0.78.28 → 0.78.30

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

@@ -0,0 +1,393 @@
+import React from 'react'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeThroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  BulletListIcon,
+  NumberedListIcon,
+  UndoIcon,
+  RedoIcon,
+  ParagraphIcon,
+  QuoteAltIcon,
+  DividerIcon,
+  ClearIcon,
+  HardBreakIcon,
+} from './Icons'
+import './WYSIWYGEditor.scss'
+
+export interface WYSIWYGEditorProps {
+  label?: string
+  error?: string
+  helpText?: string
+  value?: string
+  onChange?: (value: string) => void
+  onClear?: () => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
+  label,
+  error,
+  helpText,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+}) => {
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const isInternalChange = React.useRef(false)
+
+  // Only update innerHTML when value changes externally (not from user input)
+  React.useEffect(() => {
+    if (contentRef.current) {
+      if (isInternalChange.current) {
+        isInternalChange.current = false
+        return
+      }
+
+      const currentHTML = contentRef.current.innerHTML
+      if (currentHTML !== value) {
+        contentRef.current.innerHTML = value || ''
+      }
+    }
+  }, [value])
+
+  const handleInput = () => {
+    if (contentRef.current) {
+      isInternalChange.current = true
+      onChange?.(contentRef.current.innerHTML)
+    }
+  }
+
+  const execCommand = (command: string, value?: string) => {
+    // Ensure the command is only executed if the editor is focused or if we can force focus to it
+    const selection = window.getSelection()
+    if (!selection) return
+
+    let isWithinEditor = false
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      isWithinEditor = contentRef.current?.contains(range.commonAncestorContainer) || false
+    }
+
+    // If not within editor, we focus the editor first to ensure the command applies to it
+    if (!isWithinEditor && contentRef.current) {
+      contentRef.current.focus()
+
+      // We need to re-get the selection after focusing as it might have changed
+      const currentSelection = window.getSelection()
+      if (currentSelection) {
+        // If the editor is empty or we want to ensure cursor is inside, we set it
+        if (contentRef.current.innerHTML === '' || contentRef.current.innerHTML === '<p><br></p>') {
+          const newRange = document.createRange()
+          newRange.selectNodeContents(contentRef.current)
+          newRange.collapse(false)
+          currentSelection.removeAllRanges()
+          currentSelection.addRange(newRange)
+        }
+      }
+    }
+
+    if (command === 'clearFormatting') {
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+
+        // Check if selection is inside a list
+        let container = range.commonAncestorContainer as Node | null
+        if (container.nodeType === Node.TEXT_NODE) {
+          container = container.parentNode
+        }
+
+        let isInsideList = false
+        let tempNode = container
+        while (tempNode && tempNode !== contentRef.current) {
+          if (tempNode.nodeName === 'UL' || tempNode.nodeName === 'OL') {
+            isInsideList = true
+            break
+          }
+          tempNode = tempNode.parentNode
+        }
+
+        if (isInsideList) {
+          // If inside a list, we need to toggle off the list first
+          // We check which type of list it is and call the corresponding command
+          let listType = '';
+          let listNode = container;
+          while (listNode && listNode !== contentRef.current) {
+            if (listNode.nodeName === 'UL') {
+              listType = 'insertUnorderedList';
+              break;
+            } else if (listNode.nodeName === 'OL') {
+              listType = 'insertOrderedList';
+              break;
+            }
+            listNode = listNode.parentNode;
+          }
+
+          if (listType) {
+            document.execCommand(listType, false);
+          }
+        }
+
+        // If the selection is collapsed, just apply to current block
+        if (range.collapsed) {
+          document.execCommand('formatBlock', false, '<p>')
+          document.execCommand('removeFormat', false)
+        } else {
+          // If there's a selection, we check if it contains HR
+          const fragment = range.cloneContents()
+          const hasHR = fragment.querySelector('hr')
+
+          if (hasHR) {
+            // If it contains HR, we apply removeFormat but avoid formatBlock P
+            // which would replace the whole selection including HR with a single P
+            document.execCommand('removeFormat', false)
+          } else {
+            document.execCommand('formatBlock', false, '<p>')
+            document.execCommand('removeFormat', false)
+          }
+        }
+        handleInput()
+      }
+      return
+    }
+
+    if (command === 'insertHorizontalRule') {
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        // range.deleteContents() // Removed to avoid clearing highlighted text
+
+        const hr = document.createElement('hr')
+        const p = document.createElement('p')
+        p.innerHTML = '<br>' // Ensure the paragraph is "typeable"
+
+        // If something is selected, we collapse to end to insert HR AFTER selection
+        if (!range.collapsed) {
+          range.collapse(false)
+        }
+
+        // Insert HR and then the paragraph after it
+        range.insertNode(p)
+        range.insertNode(hr)
+
+        // Move cursor to the new paragraph
+        const newRange = document.createRange()
+        newRange.setStart(p, 0)
+        newRange.setEnd(p, 0)
+        newRange.collapse(true)
+        selection.removeAllRanges()
+        selection.addRange(newRange)
+
+        handleInput()
+        return
+      }
+    }
+
+    if (command === 'hardBreak') {
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        // range.deleteContents() // Removed to avoid clearing highlighted text
+
+        const spacer = document.createElement('div')
+        spacer.className = 'wysiwyg-editor__hard-break'
+        spacer.innerHTML = '<br>'
+
+        // If something is selected, we collapse to end to insert break AFTER selection
+        // or we can just insert it at current position.
+        // User says "it should just break to new line", usually that implies keeping the text.
+        if (!range.collapsed) {
+          range.collapse(false)
+        }
+
+        range.insertNode(spacer)
+
+        // Create a new paragraph after the spacer to continue typing
+        const p = document.createElement('p')
+        p.innerHTML = '<br>'
+        spacer.after(p)
+
+        // Move cursor to the new paragraph
+        const newRange = document.createRange()
+        newRange.setStart(p, 0)
+        newRange.setEnd(p, 0)
+        newRange.collapse(true)
+        selection.removeAllRanges()
+        selection.addRange(newRange)
+
+        handleInput()
+        return
+      }
+    }
+    document.execCommand(command, false, value)
+    handleInput()
+  }
+
+  return (
+    <div className="wysiwyg-editor">
+      {label && (
+        <label className="wysiwyg-editor__label">
+          {label}
+        </label>
+      )}
+      <div className={`wysiwyg-editor__wrapper ${error ? 'wysiwyg-editor__wrapper--error' : ''}`}>
+        <div className="wysiwyg-editor__toolbar">
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Bold"
+            onClick={() => execCommand('bold')}
+          >
+            <BoldIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Italic"
+            onClick={() => execCommand('italic')}
+          >
+            <ItalicIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Underline"
+            onClick={() => execCommand('underline')}
+          >
+            <UnderlineIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Strikethrough"
+            onClick={() => execCommand('strikeThrough')}
+          >
+            <StrikeThroughIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Heading 1"
+            onClick={() => execCommand('formatBlock', '<h1>')}
+          >
+            <Heading1Icon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Heading 2"
+            onClick={() => execCommand('formatBlock', '<h2>')}
+          >
+            <Heading2Icon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Paragraph"
+            onClick={() => execCommand('clearFormatting')}
+          >
+            <ParagraphIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Quote"
+            onClick={() => execCommand('formatBlock', '<blockquote>')}
+          >
+            <QuoteAltIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Bullet List"
+            onClick={() => execCommand('insertUnorderedList')}
+          >
+            <BulletListIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Numbered List"
+            onClick={() => execCommand('insertOrderedList')}
+          >
+            <NumberedListIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Divider"
+            onClick={() => execCommand('insertHorizontalRule')}
+          >
+            <DividerIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Hard Break"
+            onClick={() => execCommand('hardBreak')}
+          >
+            <HardBreakIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Undo"
+            onClick={() => {
+              const selection = window.getSelection()
+              if (selection && contentRef.current && !contentRef.current.contains(selection.anchorNode)) {
+                contentRef.current.focus()
+              }
+              if (document.queryCommandEnabled('undo')) {
+                document.execCommand('undo', false)
+                handleInput()
+              }
+            }}
+          >
+            <UndoIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Redo"
+            onClick={() => {
+              const selection = window.getSelection()
+              if (selection && contentRef.current && !contentRef.current.contains(selection.anchorNode)) {
+                contentRef.current.focus()
+              }
+              if (document.queryCommandEnabled('redo')) {
+                document.execCommand('redo', false)
+                handleInput()
+              }
+            }}
+          >
+            <RedoIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Clear Formatting"
+            onClick={() => execCommand('clearFormatting')}
+          >
+            <ClearIcon />
+          </button>
+        </div>
+        <div
+          ref={contentRef}
+          className={`wysiwyg-editor__content ${disabled ? 'wysiwyg-editor__content--disabled' : ''}`}
+          contentEditable={!disabled}
+          suppressContentEditableWarning
+          onInput={handleInput}
+          data-placeholder={placeholder}
+        />
+      </div>
+      {helpText && (
+        <span className="wysiwyg-editor__help-text">{helpText}</span>
+      )}
+      {error && <span className="wysiwyg-editor__error-text">{error}</span>}
+    </div>
+  )
+}
+

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

@@ -0,0 +1,3 @@
+export { WYSIWYGEditor } from './WYSIWYGEditor'
+export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
+

package/src/v2/components/index.ts

@@ -0,0 +1,37 @@
+// Form Components
+export { FormField } from './FormField'
+export type { FormFieldProps } from './FormField'
+
+export { NewInput } from './NewInput'
+export type { NewInputProps } from './NewInput'
+
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'
+
+export { WYSIWYGEditor } from './WYSIWYGEditor'
+export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
+
+export { NewPageHeader } from './NewPageHeader'
+export type { NewPageHeaderProps } from './NewPageHeader'
+
+export { SectionHeader } from './SectionHeader'
+export type { SectionHeaderProps } from './SectionHeader'
+
+// Existing Components
+export { Button, ButtonText } from './Button'
+export type { ButtonProps, ButtonTextProps } from './Button'
+
+export { Select } from './Select'
+
+export { Tooltip } from './Tooltip'
+
+export { UserAvatar } from './UserAvatar'
+
+export { UserPanel } from './UserPanel'
+
+export { EntityHeader } from './EntityHeader'
+
+export { Alert } from './Alert'
+
+export { NPSScore } from './NPSScore'
+

package/src/v2/index.ts

@@ -107,8 +107,8 @@ export type {
 // Navigation Configuration
 export { NAVIGATION_ITEMS } from './navigation/config'
 
-// Navigation Icons
-export * from './navigation/icons'
+// Icons
+export * from './icons'
 
 // ============================================================================
 // Hooks
@@ -122,6 +122,14 @@ export { useAuth, useCanAccess } from './hooks/useAuth'
 
 export type { AuthCredentials } from './types/navigation'
 
+// ============================================================================
+// Pages
+// ============================================================================
+
+// Settings Page
+export { SettingsPage, SettingsTabs, SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './pages/Settings'
+export type { SettingsPageProps, SettingsTabsProps, SettingsTab, SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './pages/Settings'
+
 // ============================================================================
 // Design Tokens
 // ============================================================================

package/src/v2/navigation/DashboardLayout/TopNavigation.scss

@@ -91,6 +91,7 @@
 
         @media (min-width: 640px) {
             display: block;
+            width: 116px;
         }
     }
 

package/src/v2/pages/Settings/SettingsContentPlaceholder.scss

@@ -0,0 +1,24 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.settings-content-placeholder {
+  padding: 24px 0;
+  width: 100%;
+  font-family: var(--font-family-sans);
+
+  &__title {
+    @include typography('heading.h2');
+    margin: 0 0 16px 0;
+  }
+
+  &__description {
+    @include typography('text.regular');
+    color: var(--label-secondary);
+    margin: 0;
+  }
+}
+
+.settings-tabs-standalone {
+  border-bottom: 1px solid var(--border-primary);
+  padding-bottom: 0;
+}

package/src/v2/pages/Settings/SettingsPage.scss

@@ -0,0 +1,52 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.settings-page {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  &__title-row {
+    display: flex;
+    height: 72px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    padding: 24px 0 8px 8px;
+
+    @media (max-width: $bp-mobile-max) {
+      height: auto;
+      padding: 16px 0 8px 8px;
+    }
+  }
+
+  &__title {
+    @include typography('heading.h1');
+    margin: 0;
+
+    @media (max-width: $bp-mobile-max) {
+      @include typography('heading.h1.mobile');
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+    align-self: stretch;
+    width: 100%;
+    padding: 0 8px;
+  }
+}

package/src/v2/pages/Settings/SettingsPage.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import './SettingsPage.scss'
+import { SettingsTabs, SettingsTab } from './SettingsTabs'
+
+export interface SettingsPageProps {
+  title?: string
+  tabs: SettingsTab[]
+  defaultTab?: string
+  onTabChange?: (tabId: string) => void
+  children?: React.ReactNode
+}
+
+export const SettingsPage: React.FC<SettingsPageProps> = ({
+  title = 'Settings',
+  tabs,
+  defaultTab,
+  onTabChange,
+  children,
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id || '')
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId)
+    onTabChange?.(tabId)
+  }
+
+  return (
+    <div className="settings-page">
+      <header className="settings-page__header">
+        <div className="settings-page__title-row">
+          <h1 className="settings-page__title">{title}</h1>
+        </div>
+        <SettingsTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+        />
+      </header>
+      <div className="settings-page__content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default SettingsPage

package/src/v2/pages/Settings/SettingsTabs.scss

@@ -0,0 +1,44 @@
+@import '../../styles/tokens/typography';
+@import '../../styles/tokens/colors';
+
+.settings-tabs {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  font-family: var(--font-family-sans);
+
+  &__tab {
+    display: flex;
+    padding: 12px 0;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      .settings-tabs__tab-label {
+        color: var(--label-primary);
+      }
+    }
+
+    &--active {
+      border-bottom-color: var(--fill-primary);
+
+      .settings-tabs__tab-label {
+        color: var(--label-primary);
+        font-weight: 600;
+      }
+    }
+  }
+
+  &__tab-label {
+    @include typography('text.regular');
+    color: var(--label-secondary);
+    transition: color 0.2s ease;
+  }
+}

package/src/v2/pages/Settings/SettingsTabs.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import './SettingsTabs.scss'
+
+export interface SettingsTab {
+  id: string
+  label: string
+}
+
+export interface SettingsTabsProps {
+  tabs: SettingsTab[]
+  activeTab: string
+  onTabChange: (tabId: string) => void
+}
+
+export const SettingsTabs: React.FC<SettingsTabsProps> = ({
+  tabs,
+  activeTab,
+  onTabChange,
+}) => {
+  return (
+    <nav className="settings-tabs">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          onClick={() => onTabChange(tab.id)}
+          className={`settings-tabs__tab ${activeTab === tab.id ? 'settings-tabs__tab--active' : ''}`}
+        >
+          <span className="settings-tabs__label">{tab.label}</span>
+          <div className="settings-tabs__indicator" />
+        </button>
+      ))}
+    </nav>
+  )
+}
+
+export default SettingsTabs