nova-design-model-testing 0.0.2 → 0.0.3

package/src/design-system/components/icon/Icon.jsx

@@ -0,0 +1,154 @@
+import primitiveColors from '../../tokens/primitives/colors.json'
+import semanticLight from '../../tokens/semantic/colors.light.json'
+import semanticDark from '../../tokens/semantic/colors.dark.json'
+import sizeTokens from '../../tokens/primitives/sizes.json'
+import { useTheme } from '../../theme/ThemeContext.jsx'
+
+import arrowCircleRightLine from '../../../assets/icons/line/arrow_circle_right.svg?raw'
+import chevronRightLine from '../../../assets/icons/line/chevron_right_ltr.svg?raw'
+import coinSwapLine from '../../../assets/icons/line/coin_swap.svg?raw'
+import creditCardEditLine from '../../../assets/icons/line/credit_card_edit.svg?raw'
+import devLine from '../../../assets/icons/line/dev.svg?raw'
+import expand01Line from '../../../assets/icons/line/expand_01.svg?raw'
+import expand02Line from '../../../assets/icons/line/expand_02.svg?raw'
+import home05Line from '../../../assets/icons/line/home_05.svg?raw'
+import infinityLine from '../../../assets/icons/line/infinity.svg?raw'
+import moon01Line from '../../../assets/icons/line/moon_01.svg?raw'
+import paintLine from '../../../assets/icons/line/paint.svg?raw'
+import plusCircleLine from '../../../assets/icons/line/plus_circle.svg?raw'
+import safeLine from '../../../assets/icons/line/safe_01.svg?raw'
+import searchLine from '../../../assets/icons/line/search.svg?raw'
+import shieldStarLine from '../../../assets/icons/line/shield_star.svg?raw'
+import sunLine from '../../../assets/icons/line/sun.svg?raw'
+
+import arrowCircleRightSolid from '../../../assets/icons/solid/arrow_circle_right.svg?raw'
+import coinSwapSolid from '../../../assets/icons/solid/coin_swap.svg?raw'
+import creditCardEditSolid from '../../../assets/icons/solid/credit_card_edit.svg?raw'
+import safeSolid from '../../../assets/icons/solid/safe_01.svg?raw'
+
+const ICON_SET = {
+  line: {
+    arrow_circle_right: arrowCircleRightLine,
+    chevron_right_ltr: chevronRightLine,
+    coin_swap: coinSwapLine,
+    credit_card_edit: creditCardEditLine,
+    dev: devLine,
+    expand_01: expand01Line,
+    expand_02: expand02Line,
+    home_05: home05Line,
+    infinity: infinityLine,
+    moon_01: moon01Line,
+    paint: paintLine,
+    plus_circle: plusCircleLine,
+    safe_01: safeLine,
+    search: searchLine,
+    shield_star: shieldStarLine,
+    sun: sunLine,
+  },
+  solid: {
+    arrow_circle_right: arrowCircleRightSolid,
+    coin_swap: coinSwapSolid,
+    credit_card_edit: creditCardEditSolid,
+    safe_01: safeSolid,
+  },
+}
+
+const SIZE_MAP = {
+  xxs: sizeTokens['size-xxs'],
+  xs: sizeTokens['size-xs'],
+  sm: sizeTokens['size-xs'],
+  md: sizeTokens['size-md'],
+  lg: sizeTokens['size-lg'],
+  xl: sizeTokens['size-xl'],
+  '2xl': sizeTokens['size-2xl'],
+  '3xl': sizeTokens['size-3xl'],
+  '4xl': sizeTokens['size-4xl'],
+}
+
+function resolveColorToken(color, themeTokens) {
+  if (!color || typeof color !== 'string') {
+    return getSemanticToken(themeTokens, 'text icon/neutral/primary')
+  }
+
+  if (color === 'currentColor' || color.startsWith('#') || color.startsWith('rgb')) {
+    return color
+  }
+
+  if (color.includes('/')) {
+    return getSemanticToken(themeTokens, color)
+  }
+
+  return getSemanticToken(themeTokens, 'text icon/neutral/primary')
+}
+
+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 Icon({
+  name = 'chevron_right_ltr',
+  variant = 'line',
+  size = 'xs',
+  color = 'text icon/neutral/primary',
+  className,
+  ...rest
+}) {
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const resolvedSize =
+    typeof size === 'number' ? size : SIZE_MAP[size] || sizeTokens['size-xs']
+  const resolvedColor = resolveColorToken(color, themeTokens)
+  const iconSvg = ICON_SET[variant]?.[name] || ICON_SET.line.chevron_right_ltr
+
+  const tintedSvg = iconSvg
+    .replace(/<svg[^>]*>/i, (match) => {
+      // Remove hardcoded width/height from svg tag, we set them on the container
+      return match
+        .replace(/width="[^"]*"/gi, 'width="100%"')
+        .replace(/height="[^"]*"/gi, 'height="100%"')
+        .replace(/fill="(?!none|transparent)[^"]*"/gi, 'fill="none"') // SVG tag should usually not have a fill
+    })
+    .replace(/fill="(?!none|transparent)[^"]*"/gi, 'fill="currentColor"')
+    .replace(/stroke="(?!none|transparent)[^"]*"/gi, 'stroke="currentColor"')
+    .replace(/style="[^"]*"/gi, '') 
+    .replace(/<path(?![^>]*fill=)/gi, '<path fill="none"')
+    .replace(/<rect(?![^>]*fill=)/gi, '<rect fill="none"')
+    .replace(/<circle(?![^>]*fill=)/gi, '<circle fill="none"')
+    .replace(/<ellipse(?![^>]*fill=)/gi, '<ellipse fill="none"')
+    .replace(/<polygon(?![^>]*fill=)/gi, '<polygon fill="none"')
+    .replace(/<polyline(?![^>]*fill=)/gi, '<polyline fill="none"')
+    .replace(/id="[^"]*"/gi, '') 
+
+  return (
+    <span
+      className={className}
+      style={{
+        width: resolvedSize,
+        height: resolvedSize,
+        color: resolvedColor,
+        display: 'inline-flex',
+      }}
+      dangerouslySetInnerHTML={{ __html: tintedSvg }}
+      {...rest}
+    />
+  )
+}

package/src/design-system/components/inline-notification/InlineNotification.jsx

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

package/src/design-system/components/list/List.jsx

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

package/src/design-system/components/list-item/ListItem.jsx

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

package/src/design-system/components/loading-indicator/LoadingIndicator.jsx

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

package/src/design-system/components/logo/AppLogo.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export const AppLogo = ({ size = 40, className = '' }) => {
+  return (
+    <div 
+      className={`overflow-hidden relative rounded-[22%] ${className}`} 
+      style={{ 
+        width: `${size}px`, 
+        height: `${size}px`,
+        backgroundImage: "linear-gradient(120.8deg, #000000 9.76%, #011FE5 90.24%)" 
+      }}
+    >
+      <div className="absolute inset-0 bg-[#011FE5]" />
+      {/* SVG Icon implementation based on Figma paths */}
+      <svg 
+        viewBox="0 0 240 240" 
+        className="absolute inset-0 w-full h-full p-[24%]" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path 
+          d="M117.8 181.4C152.9 181.4 181.4 152.9 181.4 117.8C181.4 82.7 152.9 54.2 117.8 54.2C82.7 54.2 54.2 82.7 54.2 117.8C54.2 152.9 82.7 181.4 117.8 181.4Z" 
+          fill="white" 
+        />
+        <path 
+          d="M117.8 117.8L117.8 54.2C100.8 54.2 84.5 60.9 72.5 72.9C60.5 84.9 53.8 101.2 53.8 118.2L117.8 117.8Z" 
+          fill="white" 
+        />
+        <circle cx="117.8" cy="117.8" r="15" fill="#011FE5" />
+      </svg>
+    </div>
+  );
+};
+
+export default AppLogo;

package/src/design-system/components/logo/BrandingLogo.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTheme } from '../../theme/ThemeContext';
+
+import botimMainLight from '../../../assets/logos/botim_main_light.svg';
+import botimMainDark from '../../../assets/logos/botim_main_dark.svg';
+import botimPayLight from '../../../assets/logos/botim_pay_light.svg';
+import botimPayDark from '../../../assets/logos/botim_pay_dark.svg';
+import botimMoneyLight from '../../../assets/logos/botim_money_light.svg';
+import botimMoneyDark from '../../../assets/logos/botim_money_dark.svg';
+import botimInvestLight from '../../../assets/logos/botim_invest_light.svg';
+import botimInvestDark from '../../../assets/logos/botim_invest_dark.svg';
+import botimCreditLight from '../../../assets/logos/botim_credit_light.svg';
+import botimCreditDark from '../../../assets/logos/botim_credit_dark.svg';
+
+const LOGO_MAP = {
+  'Botim Main': { light: botimMainLight, dark: botimMainDark },
+  'Botim Pay': { light: botimPayLight, dark: botimPayDark },
+  'Botim Money': { light: botimMoneyLight, dark: botimMoneyDark },
+  'Botim Invest': { light: botimInvestLight, dark: botimInvestDark },
+  'Botim Credit': { light: botimCreditLight, dark: botimCreditDark },
+};
+
+export const BrandingLogo = ({ type = 'Botim Main', height = 24, className = '' }) => {
+  const theme = useTheme();
+  const isDark = theme === 'dark';
+  const logo = LOGO_MAP[type] || LOGO_MAP['Botim Main'];
+  const src = isDark ? logo.dark : logo.light;
+
+  return (
+    <img 
+      src={src} 
+      alt={`${type} logo`} 
+      style={{ height: `${height}px` }} 
+      className={className} 
+    />
+  );
+};
+
+export default BrandingLogo;

package/src/design-system/components/logo/Logo.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTheme } from '../../theme/ThemeContext';
+
+import botimMainLight from '../../../assets/logos/botim_main_light.svg';
+import botimMainDark from '../../../assets/logos/botim_main_dark.svg';
+import botimPayLight from '../../../assets/logos/botim_pay_light.svg';
+import botimPayDark from '../../../assets/logos/botim_pay_dark.svg';
+import botimMoneyLight from '../../../assets/logos/botim_money_light.svg';
+import botimMoneyDark from '../../../assets/logos/botim_money_dark.svg';
+import botimInvestLight from '../../../assets/logos/botim_invest_light.svg';
+import botimInvestDark from '../../../assets/logos/botim_invest_dark.svg';
+import botimCreditLight from '../../../assets/logos/botim_credit_light.svg';
+import botimCreditDark from '../../../assets/logos/botim_credit_dark.svg';
+
+const LOGO_MAP = {
+  main: { light: botimMainLight, dark: botimMainDark },
+  pay: { light: botimPayLight, dark: botimPayDark },
+  money: { light: botimMoneyLight, dark: botimMoneyDark },
+  invest: { light: botimInvestLight, dark: botimInvestDark },
+  credit: { light: botimCreditLight, dark: botimCreditDark },
+};
+
+export const Logo = ({ type = 'main', height = 24, className = '' }) => {
+  const theme = useTheme();
+  const isDark = theme === 'dark';
+  const logo = LOGO_MAP[type] || LOGO_MAP.main;
+  const src = isDark ? logo.dark : logo.light;
+
+  return (
+    <img 
+      src={src} 
+      alt={`Botim ${type} logo`} 
+      style={{ height: `${height}px` }} 
+      className={className} 
+    />
+  );
+};
+
+export default Logo;

package/src/design-system/components/menu/Menu.jsx

@@ -0,0 +1,100 @@
+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 MenuItem from './MenuItem.jsx'
+
+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 Menu({
+  items = [],
+  count,
+  itemProps = {},
+  style: customStyle = {},
+  ...rest
+}) {
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const background = getSemanticToken(themeTokens, 'background/neutral/action sheet')
+  const divider = getSemanticToken(themeTokens, 'background/neutral/secondary')
+  const shadowColor = theme === 'dark' ? 'rgba(5, 5, 5, 0.4)' : 'rgba(157, 173, 197, 0.5)'
+  const resolvedCount = count === undefined || count === null ? items.length : Number(count)
+  const normalizedCount = Number.isFinite(resolvedCount) ? resolvedCount : items.length
+  const safeCount = Math.max(0, normalizedCount)
+  const menuItems = items.slice(0, safeCount)
+  if (menuItems.length < safeCount) {
+    const placeholders = Array.from({ length: safeCount - menuItems.length }).map((_, index) => ({
+      id: `menu-placeholder-${index}`,
+      labelText: 'Label',
+      showTrailingIcon: true,
+    }))
+    menuItems.push(...placeholders)
+  }
+
+  return (
+    <div
+      style={{
+        width: 260,
+        display: 'flex',
+        flexDirection: 'column',
+        boxShadow: `0 8px 22px 0 ${shadowColor}`,
+        backgroundColor: background,
+        borderRadius: 12,
+        padding: 8,
+        overflow: 'hidden',
+        ...customStyle,
+      }}
+      {...rest}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        {menuItems.map((item, index) => (
+          <div key={item.id || `${item.labelText}-${index}`}>
+            <MenuItem {...itemProps} {...item} />
+            {index < menuItems.length - 1 ? (
+              <div
+                style={{
+                  padding: '0 16px',
+                }}
+              >
+                <div
+                  style={{
+                    height: 1,
+                    width: '100%',
+                    backgroundColor: divider,
+                  }}
+                />
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/design-system/components/menu/MenuItem.jsx

@@ -0,0 +1,184 @@
+import { 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 = {
+  Default: 'default',
+  Pressed: 'pressed',
+  Error: 'error',
+  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)
+}
+
+function getMenuItemColors(themeTokens, state, pressedActive) {
+  if (state === 'disabled') {
+    return {
+      background: getSemanticToken(themeTokens, 'button/secondary/bg-disabled'),
+      text: getSemanticToken(themeTokens, 'text icon/neutral/disabled'),
+    }
+  }
+
+  if (pressedActive) {
+    return {
+      background: getSemanticToken(themeTokens, 'background/neutral/secondary'),
+      text:
+        state === 'error'
+          ? getSemanticToken(themeTokens, 'text icon/functional/danger')
+          : getSemanticToken(themeTokens, 'text icon/neutral/primary'),
+    }
+  }
+
+  if (state === 'error') {
+    return {
+      background: 'transparent',
+      text: getSemanticToken(themeTokens, 'text icon/functional/danger'),
+    }
+  }
+
+  return {
+    background: 'transparent',
+    text: getSemanticToken(themeTokens, 'text icon/neutral/primary'),
+  }
+}
+
+function DotsIcon({ color }) {
+  return (
+    <svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="4"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+      />
+      <circle cx="9" cy="12" r="1" fill={color} />
+      <circle cx="12" cy="12" r="1" fill={color} />
+      <circle cx="15" cy="12" r="1" fill={color} />
+    </svg>
+  )
+}
+
+export default function MenuItem({
+  labelText = 'Label',
+  showTrailingIcon = true,
+  trailingIcon = null,
+  count = '',
+  state = 'default',
+  pressed = false,
+  enableInteraction = true,
+  ...rest
+}) {
+  const [isPressed, setIsPressed] = useState(false)
+  const theme = useTheme()
+  const themeTokens = theme === 'dark' ? semanticDark : semanticLight
+  const normalizedState = STATE_ALIASES[state] || state
+  const allowPress = enableInteraction && normalizedState !== 'disabled'
+  const pressedActive =
+    allowPress &&
+    (normalizedState === 'default' || normalizedState === 'error') &&
+    (pressed || isPressed)
+  const colors = getMenuItemColors(themeTokens, normalizedState, pressedActive)
+  const resolvedTrailing =
+    trailingIcon || <DotsIcon color={colors.text} />
+  const hasCount = count !== undefined && count !== null && String(count).length > 0
+
+  return (
+    <div
+      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)}
+      role="button"
+      tabIndex={0}
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: 16,
+        borderRadius: 16,
+        backgroundColor: colors.background,
+        cursor: normalizedState === 'disabled' ? 'not-allowed' : 'pointer',
+      }}
+      {...rest}
+    >
+      <span
+        style={{
+          flex: 1,
+          fontSize: 16,
+          fontWeight: 600,
+          lineHeight: 1,
+          color: colors.text,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {labelText}
+      </span>
+      {hasCount ? (
+        <span
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            lineHeight: 1,
+            color: colors.text,
+          }}
+        >
+          {count}
+        </span>
+      ) : null}
+      {showTrailingIcon ? (
+        <span
+          aria-hidden="true"
+          style={{
+            width: 24,
+            height: 24,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: colors.text,
+          }}
+        >
+          {resolvedTrailing}
+        </span>
+      ) : null}
+    </div>
+  )
+}