21114153287

Committed 18 Jan 2026 03:29PM UTC coverage: 13.095%. First build

Build # 21114153287

Build Type

Pull #31

github

Committed by

web-flow

Commit Message

Merge 0491eb3a5 into 5ee4c4536

Pull Request Pull Request #31: Feat(infra): Add CI/CD and Environment Management

Run Details

14 of 80 branches covered (17.5%)

Branch coverage included in aggregate %.

0 of 5 new or added lines in 3 files covered. (0.0%)

8 of 88 relevant lines covered (9.09%)

0.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/ui/ThemeProvider.tsx

/**
 * Theme Provider
 *
 * Provides design tokens to all child components
 * Programmatically loads from tokens.json
 */

import type { ReactNode } from 'react';
import { createContext, useContext, useMemo } from 'react';
import tokens from '../../../design-system/tokens.json';

interface ColorValue {
  [key: string]: string;
}

interface ThemeContextValue {
  tokens: typeof tokens;
  colors: Record<string, string | ColorValue>;
  spacing: Record<string, string>;
  typography: typeof tokens.typography;
}

const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

/**
 * Provides theme tokens, flattened color map, spacing, and typography to descendant components via ThemeContext.
 *
 * The provider loads design tokens and exposes `tokens`, `colors` (flat map with either hex strings or shade maps), `spacing`, and `typography` to all children.
 *
 * @returns A React element that supplies the theme context to its children.
 */
export function ThemeProvider({ children }: { children: ReactNode }) {
  const value = useMemo(() => {
    // Process colors into flat structure
    const colors: Record<string, string | ColorValue> = {};
    Object.entries(tokens.colors).forEach(([colorName, colorData]) => {
      if (typeof colorData === 'string') {
        colors[colorName] = colorData;
      } else if ('values' in colorData) {
        colors[colorName] = {};
        Object.entries(colorData.values).forEach(([shade, value]) => {
          colors[colorName][shade] = value.hex;
        });
      }
    });

    return {
      tokens,
      colors,
      spacing: tokens.spacing.values,
      typography: tokens.typography,
    };
  }, []);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

/**
 * Accesses the current theme context value.
 *
 * @returns The ThemeContextValue containing `tokens`, `colors`, `spacing`, and `typography`.
 * @throws Error if called outside of a ThemeProvider.
 */
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

/**
 * Retrieve a color value from the current theme by name and optional shade.
 *
 * @param colorName - The color name or color group key defined in the theme's colors.
 * @param shade - The shade key within a color group (defaults to `'500'`).
 * @returns The resolved color string (e.g., hex value). Returns `'#000000'` if the color or shade is not found.
 */
export function useColor(colorName: string, shade: string = '500'): string {
  const { colors } = useTheme();

  if (typeof colors[colorName] === 'string') {
    return colors[colorName];
  }

  return colors[colorName]?.[shade] || '#000000';
}

/**
 * Retrieve a spacing token value by key from the theme.
 *
 * @param key - The spacing token key (for example, `"sm"`, `"md"`, `"lg"`)
 * @returns The spacing value for the given key, or `'0px'` if the key is not present
 */
export function useSpacing(key: string): string {
  const { spacing } = useTheme();
  return spacing[key] || '0px';
}

1	/**
2	* Theme Provider
3	*
4	* Provides design tokens to all child components
5	* Programmatically loads from tokens.json
6	*/
7
8	import type { ReactNode } from 'react';
9	import { createContext, useContext, useMemo } from 'react';
10	import tokens from '../../../design-system/tokens.json';
11
12	interface ColorValue {
13	[key: string]: string;
14	}
15
16	interface ThemeContextValue {
17	tokens: typeof tokens;
18	colors: Record<string, string \| ColorValue>;
19	spacing: Record<string, string>;
20	typography: typeof tokens.typography;
21	}
22
23	const ThemeContext = createContext<ThemeContextValue \| undefined>(undefined);	×
24
25	/**
26	* Provides theme tokens, flattened color map, spacing, and typography to descendant components via ThemeContext.
27	*
28	* The provider loads design tokens and exposes `tokens`, `colors` (flat map with either hex strings or shade maps), `spacing`, and `typography` to all children.
29	*
30	* @returns A React element that supplies the theme context to its children.
31	*/
32	export function ThemeProvider({ children }: { children: ReactNode }) {
33	const value = useMemo(() => {	×
34	// Process colors into flat structure
NEW 35	const colors: Record<string, string \| ColorValue> = {};	×
36	Object.entries(tokens.colors).forEach(([colorName, colorData]) => {	×
37	if (typeof colorData === 'string') {	×
38	colors[colorName] = colorData;	×
39	} else if ('values' in colorData) {	×
40	colors[colorName] = {};	×
41	Object.entries(colorData.values).forEach(([shade, value]) => {	×
42	colors[colorName][shade] = value.hex;	×
43	});
44	}
45	});
46
47	return {	×
48	tokens,
49	colors,
50	spacing: tokens.spacing.values,
51	typography: tokens.typography,
52	};
53	}, []);
54
NEW 55	return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;	×
56	}
57
58	/**
59	* Accesses the current theme context value.
60	*
61	* @returns The ThemeContextValue containing `tokens`, `colors`, `spacing`, and `typography`.
62	* @throws Error if called outside of a ThemeProvider.
63	*/
64	export function useTheme() {
65	const context = useContext(ThemeContext);	×
66	if (!context) {	×
67	throw new Error('useTheme must be used within ThemeProvider');	×
68	}
69	return context;	×
70	}
71
72	/**
73	* Retrieve a color value from the current theme by name and optional shade.
74	*
75	* @param colorName - The color name or color group key defined in the theme's colors.
76	* @param shade - The shade key within a color group (defaults to `'500'`).
77	* @returns The resolved color string (e.g., hex value). Returns `'#000000'` if the color or shade is not found.
78	*/
79	export function useColor(colorName: string, shade: string = '500'): string {	×
80	const { colors } = useTheme();	×
81
82	if (typeof colors[colorName] === 'string') {	×
83	return colors[colorName];	×
84	}
85
86	return colors[colorName]?.[shade] \|\| '#000000';	×
87	}
88
89	/**
90	* Retrieve a spacing token value by key from the theme.
91	*
92	* @param key - The spacing token key (for example, `"sm"`, `"md"`, `"lg"`)
93	* @returns The spacing value for the given key, or `'0px'` if the key is not present
94	*/
95	export function useSpacing(key: string): string {
96	const { spacing } = useTheme();	×
97	return spacing[key] \|\| '0px';	×
98	}

agentic-dev-library / thumbcode / 21114153287

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous