nova-design-model-testing 0.0.2 → 0.0.3

package/src/design-system/components/button/Button.jsx

@@ -0,0 +1,310 @@
+import { cloneElement, isValidElement, 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 BUTTON_TYPES = {
+  primary: 'button/primary',
+  secondary: 'button/secondary',
+  'primary-danger': 'button/danger primary',
+  'secondary-danger': 'button/danger secondary',
+}
+
+const SIZE_STYLES = {
+  small: {
+    height: 40,
+    fontSize: 14,
+    paddingX: 16,
+    paddingY: 8,
+  },
+  large: {
+    height: 56,
+    fontSize: 16,
+    paddingX: 20,
+    paddingY: 16,
+  },
+}
+
+const SIZE_ALIASES = {
+  Small: 'small',
+
+  Large: 'large',
+}
+
+const TYPE_ALIASES = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Tertiary: 'tertiary',
+  'Primary danger': 'primary-danger',
+  'Secondary danger': 'secondary-danger',
+}
+
+const STATE_ALIASES = {
+  Default: 'default',
+  Pressed: 'pressed',
+  Disabled: 'disabled',
+  Disable: 'disabled',
+}
+
+const ICON_BUTTON_SIZES = {
+  small: { size: 40, padding: 10, icon: 20 },
+  large: { size: 56, padding: 16, icon: 24 },
+}
+
+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 getButtonColors({ themeTokens, type, state, variant }) {
+  if (variant === 'text') {
+    const textTokens = {
+      primary: 'text icon/functional/link',
+      secondary: 'text icon/neutral/primary',
+      'primary-danger': 'text icon/functional/danger',
+    }
+    return {
+      background: 'transparent',
+      text: getSemanticToken(themeTokens, textTokens[type] || textTokens.primary),
+    }
+  }
+
+  if (variant === 'icon') {
+    const isPrimary = type === 'primary'
+    const isSecondary = type === 'secondary'
+    const isPressed = state === 'pressed'
+    const backgroundToken = isPrimary
+      ? isPressed
+        ? 'button/primary/bg-pressed'
+        : 'button/primary/bg-default'
+      : isPressed
+        ? 'background/neutral/tertiary'
+        : isSecondary
+          ? 'background/neutral/secondary'
+          : 'background/neutral/primary'
+    const iconToken = isPrimary ? 'button/primary/text-on' : 'text icon/neutral/primary'
+    return {
+      background: getSemanticToken(themeTokens, backgroundToken),
+      text: getSemanticToken(themeTokens, iconToken),
+    }
+  }
+
+  const typeKey = BUTTON_TYPES[type] || BUTTON_TYPES.primary
+  const backgroundToken =
+    state === 'pressed' ? `${typeKey}/bg-pressed` : `${typeKey}/bg-default`
+
+  return {
+    background: getSemanticToken(themeTokens, backgroundToken),
+    text: getSemanticToken(themeTokens, `${typeKey}/text-on`),
+  }
+}
+
+function DotsLoader({ color }) {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
+      }}
+    >
+      {[0, 1, 2].map((index) => (
+        <span
+          key={index}
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            backgroundColor: color,
+            opacity: 0.6 + index * 0.2,
+          }}
+        />
+      ))}
+    </span>
+  )
+}
+
+export default function Button({
+  label = 'Button',
+  labelText,
+  variant = 'default',
+  size = 'large',
+  type = 'primary',
+  state = 'default',
+  loading = false,
+  showLeadingIcon = true,
+  showTrailingIcon = true,
+  leadingIcon = null,
+  trailingIcon = null,
+  icon = null,
+  fullWidth = false,
+  style: customStyle = {},
+  disabled = false,
+  onClick,
+  ...rest
+}) {
+  const [isPressed, setIsPressed] = useState(false)
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const normalizedSize = SIZE_ALIASES[size] || size
+  const normalizedType = TYPE_ALIASES[type] || type
+  const normalizedState = STATE_ALIASES[state] || state
+  const buttonSize = SIZE_STYLES[normalizedSize] || SIZE_STYLES.large
+  const iconButtonSize = ICON_BUTTON_SIZES[normalizedSize] || ICON_BUTTON_SIZES.small
+  const resolvedState = disabled ? 'disabled' : normalizedState
+  const allowPress = resolvedState === 'default' && !loading
+  const interactiveState = allowPress && isPressed ? 'pressed' : resolvedState
+  const colors = getButtonColors({
+    themeTokens,
+    type: normalizedType,
+    state: interactiveState,
+    variant,
+  })
+  const isDisabled = resolvedState === 'disabled' || loading
+  const pressedScale = interactiveState === 'pressed' ? 0.97 : 1
+  const isFab = variant === 'fab'
+  const isIcon = variant === 'icon'
+  const isText = variant === 'text'
+  const allowFullWidth = fullWidth && !isFab && !isIcon
+  const fontSize =
+    interactiveState === 'pressed'
+      ? Number((buttonSize.fontSize * pressedScale).toFixed(2))
+      : buttonSize.fontSize
+  const resolvedLabel = labelText ?? label
+  const resolvedIcon = icon ?? leadingIcon
+  const iconSize = Number((iconButtonSize.icon * pressedScale).toFixed(2))
+  const iconProps = {
+    size: 20,
+    color: 'currentColor',
+  }
+  const iconContent =
+    (isIcon || isFab) && resolvedIcon && isValidElement(resolvedIcon)
+      ? cloneElement(resolvedIcon, {
+          size: resolvedIcon.props.size ?? (isIcon ? iconSize : 24),
+          color: resolvedIcon.props.color ?? 'currentColor',
+        })
+      : resolvedIcon
+
+  return (
+    <button
+      type="button"
+      onClick={isDisabled ? undefined : onClick}
+      disabled={isDisabled}
+      onMouseDown={() => {
+        if (allowPress) {
+          setIsPressed(true)
+        }
+      }}
+      onMouseUp={() => setIsPressed(false)}
+      onMouseLeave={() => setIsPressed(false)}
+      onKeyDown={(event) => {
+        if (allowPress && (event.key === 'Enter' || event.key === ' ')) {
+          setIsPressed(true)
+        }
+      }}
+      onKeyUp={() => setIsPressed(false)}
+      style={{
+        minHeight: isIcon
+          ? Number((iconButtonSize.size * pressedScale).toFixed(2))
+          : buttonSize.height,
+        minWidth: isIcon
+          ? Number((iconButtonSize.size * pressedScale).toFixed(2))
+          : undefined,
+        height: isIcon
+          ? Number((iconButtonSize.size * pressedScale).toFixed(2))
+          : undefined,
+        width: isIcon
+          ? Number((iconButtonSize.size * pressedScale).toFixed(2))
+          : allowFullWidth
+            ? '100%'
+            : undefined,
+        padding: isText
+          ? 0
+          : isIcon
+            ? `${(iconButtonSize.padding * pressedScale).toFixed(2)}px`
+            : `${(buttonSize.paddingY * pressedScale).toFixed(2)}px ${(
+                buttonSize.paddingX * pressedScale
+              ).toFixed(2)}px`,
+        borderRadius: isIcon
+          ? Number((iconButtonSize.size * pressedScale).toFixed(2))
+          : Number((32 * pressedScale).toFixed(2)),
+        backgroundColor: isText ? 'transparent' : colors.background,
+        color: colors.text,
+        fontSize,
+        fontWeight: 600,
+        lineHeight: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        border: 'none',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        opacity: isDisabled ? 0.2 : 1,
+        alignSelf: isFab || isIcon ? 'flex-start' : allowFullWidth ? 'stretch' : undefined,
+        ...customStyle,
+      }}
+      {...rest}
+    >
+      {loading ? (
+        <DotsLoader color={colors.text} />
+      ) : (
+        <>
+          {isFab || isIcon ? (
+            resolvedIcon ? (
+              <span
+                aria-hidden="true"
+                style={{
+                  width: isIcon ? iconSize : 24,
+                  height: isIcon ? iconSize : 24,
+                  display: 'inline-flex',
+                }}
+              >
+                {iconContent}
+              </span>
+            ) : null
+          ) : (
+            <>
+              {showLeadingIcon && leadingIcon ? (
+                <span
+                  aria-hidden="true"
+                  style={{ width: 20, height: 20, display: 'inline-flex' }}
+                >
+                  {isValidElement(leadingIcon) ? cloneElement(leadingIcon, iconProps) : leadingIcon}
+                </span>
+              ) : null}
+              <span>{resolvedLabel}</span>
+              {showTrailingIcon && trailingIcon ? (
+                <span
+                  aria-hidden="true"
+                  style={{ width: 20, height: 20, display: 'inline-flex' }}
+                >
+                  {isValidElement(trailingIcon) ? cloneElement(trailingIcon, iconProps) : trailingIcon}
+                </span>
+              ) : null}
+            </>
+          )}
+        </>
+      )}
+    </button>
+  )
+}

package/src/design-system/components/button-group/ButtonGroup.jsx

@@ -0,0 +1,150 @@
+import Button from '../button/Button.jsx'
+
+const LAYOUT_ALIASES = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+  'Horizontal Fill': 'horizontal-fill',
+}
+
+const DEFAULT_PRIMARY = {
+  variant: 'default',
+  size: 'large',
+  type: 'primary',
+  state: 'default',
+  labelText: 'Button',
+  showLeadingIcon: true,
+  showTrailingIcon: true,
+}
+
+const DEFAULT_SECONDARY = {
+  variant: 'default',
+  size: 'large',
+  type: 'secondary',
+  state: 'default',
+  labelText: 'Button',
+  showLeadingIcon: true,
+  showTrailingIcon: true,
+}
+
+const DEFAULT_TEXT = {
+  variant: 'text',
+  size: 'large',
+  type: 'secondary',
+  state: 'default',
+  labelText: 'Button',
+  showLeadingIcon: true,
+  showTrailingIcon: true,
+}
+
+export default function ButtonGroup({
+  layout = 'vertical',
+  showPrimaryButton = true,
+  showSecondaryButton1 = true,
+  showSecondaryButton2 = true,
+  showTextButton = true,
+  primaryButtonProps = {},
+  secondaryButton1Props = {},
+  secondaryButton2Props = {},
+  textButtonProps = {},
+}) {
+  const normalizedLayout = LAYOUT_ALIASES[layout] || layout
+  const isVertical = normalizedLayout === 'vertical'
+  const isHorizontalFill = normalizedLayout === 'horizontal-fill'
+  const direction = isVertical ? 'column' : 'row'
+  const gap = isVertical ? 16 : 12
+
+  const buttons = []
+  if (showPrimaryButton) {
+    buttons.push({
+      key: 'primary',
+      props: { ...DEFAULT_PRIMARY, ...primaryButtonProps },
+    })
+  }
+  if (showSecondaryButton1) {
+    buttons.push({
+      key: 'secondary-1',
+      props: { ...DEFAULT_SECONDARY, ...secondaryButton1Props },
+    })
+  }
+  if (showSecondaryButton2) {
+    buttons.push({
+      key: 'secondary-2',
+      props: { ...DEFAULT_SECONDARY, ...secondaryButton2Props },
+    })
+  }
+  if (showTextButton) {
+    buttons.push({
+      key: 'text',
+      props: { ...DEFAULT_TEXT, ...textButtonProps },
+    })
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: 8,
+      }}
+    >
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: direction,
+          gap,
+          alignItems: isVertical ? 'stretch' : 'center',
+          justifyContent: isVertical ? 'flex-start' : 'center',
+          padding: '8px 20px',
+        }}
+      >
+        {buttons.map((button) => {
+          const buttonElement = <Button {...button.props} />
+          const isText = button.props.variant === 'text'
+          const wrappedText =
+            isVertical && isText ? (
+              <div
+                style={{
+                  width: '100%',
+                  padding: '12px 20px',
+                  borderRadius: 32,
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                {buttonElement}
+              </div>
+            ) : (
+              buttonElement
+            )
+
+          if (isHorizontalFill) {
+            return (
+              <div key={button.key} style={{ flex: 1, display: 'flex' }}>
+                {isText ? (
+                  <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+                    {buttonElement}
+                  </div>
+                ) : (
+                  <Button {...button.props} fullWidth />
+                )}
+              </div>
+            )
+          }
+
+          if (isVertical && !isText) {
+            return (
+              <div key={button.key} style={{ width: '100%' }}>
+                <Button {...button.props} fullWidth />
+              </div>
+            )
+          }
+
+          return <div key={button.key}>{wrappedText}</div>
+        })}
+      </div>
+    </div>
+  )
+}

package/src/design-system/components/card/Card.jsx

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

package/src/design-system/components/checkbox/Checkbox.jsx

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

package/src/design-system/components/chips/Chips.jsx

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

package/src/design-system/components/confirm-sheet/ConfirmSheet.jsx

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

package/src/design-system/components/date-picker/DatePicker.jsx

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

package/src/design-system/components/date-wheel/DateWheel.jsx

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

package/src/design-system/components/digit-field/DigitField.jsx

@@ -0,0 +1,191 @@
+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 getDigitFieldColors(themeTokens, state) {
+  if (state === 'error') {
+    return {
+      background: getSemanticToken(themeTokens, 'Input/error/bg'),
+      text: getSemanticToken(themeTokens, 'text icon/functional/danger'),
+    }
+  }
+
+  if (state === 'disabled') {
+    return {
+      background: getSemanticToken(themeTokens, 'background/neutral/disabled'),
+      text: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+    }
+  }
+
+  return {
+    background: getSemanticToken(themeTokens, 'background/neutral/secondary'),
+    text: getSemanticToken(themeTokens, 'text icon/functional/link'),
+  }
+}
+
+export default function DigitField({
+  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 inputRef = useRef(null)
+  const digitsValue = (isControlled ? value : internalValue) || ''
+  const sanitizedValue = String(digitsValue).replace(/\D/g, '').slice(0, length)
+  const digits = Array.from({ length }, (_, index) => sanitizedValue[index] || '')
+  const [isFocused, setIsFocused] = useState(false)
+  const typingActive =
+    enableInteraction && isFocused && !isDisabled
+      ? 'typing'
+      : normalizedTyping
+  const showCaret = typingActive === 'typing' && sanitizedValue.length < length
+  const caretIndex = Math.min(sanitizedValue.length, length - 1)
+  const colors = getDigitFieldColors(themeTokens, normalizedState)
+
+  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)
+    }
+  }
+
+  return (
+    <div
+      onClick={() => {
+        if (!enableInteraction || isDisabled) {
+          return
+        }
+        if (inputRef.current) {
+          inputRef.current.focus()
+        }
+      }}
+      style={{
+        display: 'flex',
+        gap: 8,
+        width: 352,
+        position: 'relative',
+      }}
+    >
+      {digits.map((digit, index) => (
+        <div
+          key={`digit-${index}`}
+          style={{
+            width: 52,
+            height: 64,
+            borderRadius: 24,
+            backgroundColor: colors.background,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 8,
+            position: 'relative',
+            overflow: 'hidden',
+            color: colors.text,
+            fontFamily: '"Space Grotesk", "Inter", system-ui, sans-serif',
+            fontWeight: 700,
+            fontSize: 32,
+            lineHeight: 1,
+          }}
+        >
+          {digit}
+          {showCaret && index === caretIndex ? (
+            <span
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                bottom: 14,
+                width: 10,
+                height: 2,
+                borderRadius: 2,
+                backgroundColor: colors.text,
+              }}
+            />
+          ) : null}
+        </div>
+      ))}
+      <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',
+          inset: 0,
+          opacity: 0,
+          pointerEvents: 'none',
+        }}
+        aria-label="Digit field"
+        disabled={isDisabled}
+      />
+    </div>
+  )
+}