nova-design-model-testing 0.0.1 → 0.0.3

package/src/design-system/components/passcode/Passcode.jsx

@@ -0,0 +1,165 @@
+import { useEffect, useRef, useState } from 'react'
+import primitiveColors from '../../tokens/primitives/colors.json'
+import semanticLight from '../../tokens/semantic/colors.light.json'
+import semanticDark from '../../tokens/semantic/colors.dark.json'
+import { useTheme } from '../../theme/ThemeContext.jsx'
+
+const STATE_ALIASES = {
+  Enabled: 'enabled',
+  Error: 'error',
+  Disabled: 'disabled',
+}
+
+const TYPING_ALIASES = {
+  'To type': 'to-type',
+  Typing: 'typing',
+  Typed: 'typed',
+}
+
+function resolvePrimitiveReference(reference) {
+  if (typeof reference !== 'string' || !reference.startsWith('primitives.')) {
+    return reference
+  }
+
+  const path = reference.replace('primitives.', '').split('.')
+  let current = primitiveColors
+
+  for (const key of path) {
+    if (!current || typeof current !== 'object') {
+      return reference
+    }
+    current = current[key]
+  }
+
+  return current ?? reference
+}
+
+function getSemanticToken(themeTokens, token) {
+  const reference = themeTokens[token]
+  return resolvePrimitiveReference(reference)
+}
+
+function getPasscodeColors(themeTokens, state) {
+  if (state === 'error') {
+    return {
+      idle: getSemanticToken(themeTokens, 'Input/error/bg'),
+      active: getSemanticToken(themeTokens, 'text icon/functional/danger'),
+    }
+  }
+
+  if (state === 'disabled') {
+    return {
+      idle: getSemanticToken(themeTokens, 'background/neutral/disabled'),
+      active: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+    }
+  }
+
+  return {
+    idle: getSemanticToken(themeTokens, 'background/neutral/tertiary'),
+    active: getSemanticToken(themeTokens, 'text icon/functional/link'),
+  }
+}
+
+export default function Passcode({
+  length = 6,
+  value,
+  defaultValue = '',
+  onChange,
+  state = 'enabled',
+  typingState = 'to-type',
+  enableInteraction = true,
+}) {
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const normalizedState = STATE_ALIASES[state] || state
+  const normalizedTyping = TYPING_ALIASES[typingState] || typingState
+  const isDisabled = normalizedState === 'disabled'
+  const isControlled = value !== undefined && value !== null
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const [isFocused, setIsFocused] = useState(false)
+  const inputRef = useRef(null)
+  const digitsValue = (isControlled ? value : internalValue) || ''
+  const sanitizedValue = String(digitsValue).replace(/\D/g, '').slice(0, length)
+  const colors = getPasscodeColors(themeTokens, normalizedState)
+  const activeColor = colors.active
+  const idleColor = colors.idle
+
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalValue(sanitizedValue)
+    }
+  }, [sanitizedValue, isControlled])
+
+  const handleChange = (nextValue) => {
+    if (!enableInteraction || isDisabled) {
+      return
+    }
+    const next = String(nextValue).replace(/\D/g, '').slice(0, length)
+    if (!isControlled) {
+      setInternalValue(next)
+    }
+    if (onChange) {
+      onChange(next)
+    }
+  }
+
+  const showActive = enableInteraction && isFocused
+  const renderActiveDots = normalizedTyping !== 'to-type' || showActive
+
+  return (
+    <div
+      onClick={() => {
+        if (!enableInteraction || isDisabled) {
+          return
+        }
+        if (inputRef.current) {
+          inputRef.current.focus()
+        }
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 24,
+      }}
+    >
+      {Array.from({ length }).map((_, index) => {
+        const isFilled = renderActiveDots && index < sanitizedValue.length
+        return (
+          <span
+            key={`passcode-dot-${index}`}
+            style={{
+              width: 16,
+              height: 16,
+              borderRadius: 999,
+              backgroundColor: isFilled ? activeColor : idleColor,
+              display: 'inline-block',
+            }}
+          />
+        )
+      })}
+      <input
+        ref={inputRef}
+        inputMode="numeric"
+        autoComplete="one-time-code"
+        pattern="[0-9]*"
+        type="text"
+        value={sanitizedValue}
+        onChange={(event) => handleChange(event.target.value)}
+        onFocus={() => {
+          if (!enableInteraction || isDisabled) {
+            return
+          }
+          setIsFocused(true)
+        }}
+        onBlur={() => setIsFocused(false)}
+        style={{
+          position: 'absolute',
+          opacity: 0,
+          pointerEvents: 'none',
+        }}
+        aria-label="Passcode"
+        disabled={isDisabled}
+      />
+    </div>
+  )
+}

package/src/design-system/components/radio/Radio.jsx

@@ -0,0 +1,135 @@
+import { useEffect, useMemo, useState } from 'react'
+import primitiveColors from '../../tokens/primitives/colors.json'
+import semanticLight from '../../tokens/semantic/colors.light.json'
+import semanticDark from '../../tokens/semantic/colors.dark.json'
+import { useTheme } from '../../theme/ThemeContext.jsx'
+
+const STATE_ALIASES = {
+  Enabled: 'enabled',
+  Disabled: 'disabled',
+}
+
+function resolvePrimitiveReference(reference) {
+  if (typeof reference !== 'string' || !reference.startsWith('primitives.')) {
+    return reference
+  }
+
+  const path = reference.replace('primitives.', '').split('.')
+  let current = primitiveColors
+
+  for (const key of path) {
+    if (!current || typeof current !== 'object') {
+      return reference
+    }
+    current = current[key]
+  }
+
+  return current ?? reference
+}
+
+function getSemanticToken(themeTokens, token) {
+  const reference = themeTokens[token]
+  return resolvePrimitiveReference(reference)
+}
+
+export default function Radio({
+  selected,
+  defaultSelected = false,
+  onChange,
+  state = 'enabled',
+  size = 24,
+  enableInteraction = true,
+  ariaLabel = 'Radio',
+}) {
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const normalizedState = STATE_ALIASES[state] || state
+  const isDisabled = normalizedState === 'disabled'
+  const isControlled = selected !== undefined && selected !== null
+  const [internalSelected, setInternalSelected] = useState(defaultSelected)
+  const isSelected = isControlled ? selected : internalSelected
+
+  useEffect(() => {
+    if (!isControlled) {
+      setInternalSelected(defaultSelected)
+    }
+  }, [defaultSelected, isControlled])
+
+  const tokenSet = useMemo(() => {
+    if (isDisabled) {
+      return {
+        selected: 'radio/disabled/selected',
+        unselected: 'radio/disabled/unselected',
+      }
+    }
+    return {
+      selected: 'radio/active/selected',
+      unselected: 'radio/active/unselected',
+    }
+  }, [isDisabled])
+
+  const borderColor = getSemanticToken(
+    themeTokens,
+    isSelected ? tokenSet.selected : tokenSet.unselected,
+  )
+  const dotColor = getSemanticToken(themeTokens, tokenSet.selected)
+  const indicatorSize = Math.max(0, size - 4)
+  const dotSize = Math.round(indicatorSize * 0.5)
+
+  return (
+    <button
+      aria-checked={Boolean(isSelected)}
+      aria-disabled={isDisabled || !enableInteraction}
+      aria-label={ariaLabel}
+      onClick={() => {
+        if (!enableInteraction || isDisabled || isSelected) {
+          return
+        }
+        if (!isControlled) {
+          setInternalSelected(true)
+        }
+        if (onChange) {
+          onChange(true)
+        }
+      }}
+      role="radio"
+      style={{
+        width: size,
+        height: size,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: enableInteraction && !isDisabled ? 'pointer' : 'default',
+      }}
+      type="button"
+    >
+      <span
+        style={{
+          width: indicatorSize,
+          height: indicatorSize,
+          borderRadius: 999,
+          border: `2px solid ${borderColor}`,
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxSizing: 'border-box',
+        }}
+      >
+        {isSelected && (
+          <span
+            style={{
+              width: dotSize,
+              height: dotSize,
+              borderRadius: 999,
+              backgroundColor: dotColor,
+              display: 'inline-block',
+            }}
+          />
+        )}
+      </span>
+    </button>
+  )
+}

package/src/design-system/components/section-header-footer/SectionHeaderFooter.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const SectionHeaderFooter = () => {
+  return null;
+};
+
+export default SectionHeaderFooter;

package/src/design-system/components/tabs/Tabs.jsx

@@ -0,0 +1,3 @@
+export const Tabs = () => {
+  return null;
+};

package/src/design-system/components/text-field/TextField.jsx

@@ -0,0 +1,308 @@
+import { useEffect, useRef, useState } from 'react'
+import primitiveColors from '../../tokens/primitives/colors.json'
+import semanticLight from '../../tokens/semantic/colors.light.json'
+import semanticDark from '../../tokens/semantic/colors.dark.json'
+import { useTheme } from '../../theme/ThemeContext.jsx'
+import Icon from '../icon/Icon.jsx'
+
+const STATE_ALIASES = {
+  Enabled: 'enabled',
+  Error: 'error',
+  Disabled: 'disabled',
+}
+
+const TYPING_ALIASES = {
+  'To type': 'to-type',
+  Typing: 'typing',
+  Typed: 'typed',
+}
+
+function resolvePrimitiveReference(reference) {
+  if (typeof reference !== 'string' || !reference.startsWith('primitives.')) {
+    return reference
+  }
+
+  const path = reference.replace('primitives.', '').split('.')
+  let current = primitiveColors
+
+  for (const key of path) {
+    if (!current || typeof current !== 'object') {
+      return reference
+    }
+    current = current[key]
+  }
+
+  return current ?? reference
+}
+
+function getSemanticToken(themeTokens, token) {
+  const reference = themeTokens[token]
+  return resolvePrimitiveReference(reference)
+}
+
+function getBaseColors(themeTokens, state, typingState) {
+  if (state === 'disabled') {
+    return {
+      background: getSemanticToken(themeTokens, 'background/neutral/disabled'),
+      text: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+      placeholder: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+      supporting: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+    }
+  }
+
+  if (state === 'error') {
+    return {
+      background: getSemanticToken(themeTokens, 'Input/error/bg'),
+      text: getSemanticToken(themeTokens, 'text icon/neutral/primary'),
+      placeholder: getSemanticToken(themeTokens, 'text icon/neutral/placeholder'),
+      supporting: getSemanticToken(themeTokens, 'text icon/functional/danger'),
+    }
+  }
+
+  return {
+    background:
+      typingState === 'typing'
+        ? getSemanticToken(themeTokens, 'background/neutral/tertiary')
+        : getSemanticToken(themeTokens, 'background/neutral/secondary'),
+    text: getSemanticToken(themeTokens, 'text icon/neutral/primary'),
+    placeholder: getSemanticToken(themeTokens, 'text icon/neutral/placeholder'),
+    supporting: getSemanticToken(themeTokens, 'text icon/neutral/secondary'),
+  }
+}
+
+export default function TextField({
+  labelText = 'Label',
+  showOptional = true,
+  showLabelArea = true,
+  supportingText = 'Supporting text',
+  showSupportingTextArea = true,
+  state = 'enabled',
+  typingState = 'to-type',
+  prefixText = 'Prefix',
+  hintText = 'Hint text',
+  valueText = 'Entered text',
+  showLeadingIcon = true,
+  leadingIcon = null,
+  showTrailingIcon = true,
+  trailingIcon = null,
+  showActionButton = true,
+  actionLabel = 'Button',
+  showActionTrailingIcon = true,
+  actionTrailingIcon = null,
+  showClearButton = true,
+  enableInteraction = true,
+}) {
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const normalizedState = STATE_ALIASES[state] || state
+  const normalizedTyping = TYPING_ALIASES[typingState] || typingState
+  const isDisabled = normalizedState === 'disabled'
+  const [isFocused, setIsFocused] = useState(false)
+  const [currentTyping, setCurrentTyping] = useState(normalizedTyping)
+  const [inputValue, setInputValue] = useState(
+    normalizedTyping === 'typed' ? valueText || '' : '',
+  )
+  const inputRef = useRef(null)
+  const colors = getBaseColors(themeTokens, normalizedState, currentTyping)
+  const showClear = showClearButton && !isDisabled && isFocused && inputValue.length > 0
+
+  const resolvedLeading =
+    leadingIcon || <Icon name="chevron_right_ltr" variant="line" size={20} color={colors.text} />
+  const resolvedTrailing =
+    trailingIcon || <Icon name="chevron_right_ltr" variant="line" size={20} color={colors.text} />
+  const resolvedActionTrailing =
+    actionTrailingIcon || <Icon name="chevron_right_ltr" variant="line" size={20} color={colors.text} />
+
+  useEffect(() => {
+    if (!enableInteraction) {
+      setCurrentTyping(normalizedTyping)
+      setInputValue(normalizedTyping === 'typed' ? valueText || '' : '')
+    }
+  }, [enableInteraction, normalizedTyping, valueText])
+
+  return (
+    <div style={{ width: 353, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {showLabelArea ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1 }}>
+            <span
+              style={{
+                fontSize: 16,
+                fontWeight: 500,
+                color:
+                  normalizedState === 'disabled'
+                    ? getSemanticToken(themeTokens, 'text icon/neutral/disabled')
+                    : getSemanticToken(themeTokens, 'text icon/neutral/primary'),
+              }}
+            >
+              {labelText}
+            </span>
+            {showOptional ? (
+              <span
+                style={{
+                  fontSize: 16,
+                  fontWeight: 400,
+                  color:
+                    normalizedState === 'disabled'
+                      ? getSemanticToken(themeTokens, 'text icon/neutral/disabled')
+                      : getSemanticToken(themeTokens, 'text icon/neutral/secondary'),
+                }}
+              >
+                (optional)
+              </span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          minHeight: 48,
+          padding: '12px 16px',
+          borderRadius: 24,
+          backgroundColor: colors.background,
+          overflow: 'hidden',
+        }}
+      >
+        {showLeadingIcon ? (
+          <span style={{ width: 20, height: 20, display: 'inline-flex' }}>{resolvedLeading}</span>
+        ) : null}
+        {showActionButton ? (
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 4,
+              borderRadius: 32,
+              opacity: isDisabled ? 0.2 : 1,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 600,
+                color: isDisabled ? colors.supporting : colors.text,
+              }}
+            >
+              {actionLabel}
+            </span>
+            {showActionTrailingIcon ? (
+              <span style={{ width: 20, height: 20, display: 'inline-flex' }}>
+                {resolvedActionTrailing}
+              </span>
+            ) : null}
+          </div>
+        ) : null}
+        <div
+          style={{
+            flex: 1,
+            minWidth: 0,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            paddingRight: 4,
+          }}
+        >
+          <span
+            style={{
+              fontSize: 14,
+              fontWeight: 400,
+              color: isDisabled ? colors.placeholder : colors.text,
+            }}
+          >
+            {prefixText}
+          </span>
+          <input
+            ref={inputRef}
+            disabled={isDisabled}
+            onBlur={() => {
+              setIsFocused(false)
+              if (enableInteraction && !isDisabled) {
+                setCurrentTyping(inputValue.length > 0 ? 'typed' : 'to-type')
+              }
+            }}
+            onChange={(event) => {
+              if (!enableInteraction || isDisabled) {
+                return
+              }
+              setInputValue(event.target.value)
+              setCurrentTyping('typing')
+            }}
+            onFocus={() => {
+              setIsFocused(true)
+              if (enableInteraction && !isDisabled) {
+                setCurrentTyping('typing')
+              }
+            }}
+            placeholder={hintText}
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: 'none',
+              outline: 'none',
+              backgroundColor: 'transparent',
+              color: colors.text,
+              fontSize: 14,
+              fontWeight: 400,
+              lineHeight: 1.4,
+            }}
+            type="text"
+            value={inputValue}
+          />
+          {showClear ? (
+            <span
+              aria-hidden="true"
+              style={{
+                width: 20,
+                height: 20,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: colors.text,
+                cursor: 'pointer',
+              }}
+              onMouseDown={(event) => {
+                event.preventDefault()
+                if (inputRef.current) {
+                  inputRef.current.focus()
+                }
+              }}
+              onClick={() => {
+                if (!enableInteraction || isDisabled) {
+                  return
+                }
+                setInputValue('')
+                setCurrentTyping('typing')
+                if (inputRef.current) {
+                  inputRef.current.focus()
+                }
+              }}
+            >
+              ×
+            </span>
+          ) : null}
+        </div>
+        {showTrailingIcon ? (
+          <span style={{ width: 20, height: 20, display: 'inline-flex' }}>{resolvedTrailing}</span>
+        ) : null}
+      </div>
+
+      {showSupportingTextArea ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <span
+            style={{
+              fontSize: 12,
+              fontWeight: 400,
+              color: colors.supporting,
+            }}
+          >
+            {supportingText}
+          </span>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/design-system/components/toast/Toast.jsx

@@ -0,0 +1,3 @@
+export const Toast = () => {
+  return null;
+};

package/src/design-system/components/toggle/Toggle.jsx

@@ -0,0 +1,3 @@
+export const Toggle = () => {
+  return null;
+};

package/src/design-system/components/top-navigation/TopNavigation.jsx

@@ -0,0 +1,3 @@
+export const TopNavigation = () => {
+  return null;
+};

package/src/design-system/theme/ThemeContext.jsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+
+const ThemeContext = createContext('light')
+
+export function ThemeProvider({ value, children }) {
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}