@oneplatformdev/react-native-uikit 0.0.0-stage → 1.1.0

package/src/theme/createTheme.ts

@@ -0,0 +1,66 @@
+import { createDefaultButtonTheme, createDefaultInputTheme, defaultTheme } from './defaultTheme';
+import type { UITheme, UIThemeOverride } from './types';
+
+const isTokenObject = (value: unknown): value is Record<string, unknown> => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+
+const mergeNestedTokens = (defaults: object, overrides: object | undefined): object => {
+    const defaultTokens = defaults as Record<string, unknown>;
+    const overrideTokens = (overrides ?? {}) as Record<string, unknown>;
+    const result: Record<string, unknown> = { ...defaultTokens };
+
+    Object.keys(overrideTokens).forEach(key => {
+        const defaultToken = defaultTokens[key];
+        const overrideToken = overrideTokens[key];
+
+        result[key] =
+            isTokenObject(defaultToken) && isTokenObject(overrideToken)
+                ? { ...defaultToken, ...overrideToken }
+                : overrideToken;
+    });
+
+    return result;
+};
+
+export const createTheme = (overrides: UIThemeOverride = {}): UITheme => {
+    const spacing = { ...defaultTheme.spacing, ...overrides.spacing };
+    const radius = { ...defaultTheme.radius, ...overrides.radius };
+    const buttonDefaults = createDefaultButtonTheme(spacing, radius);
+    const buttonOverrides = overrides.button;
+    const inputDefaults = createDefaultInputTheme(spacing, radius);
+    const theme = {
+        mode: overrides.mode ?? defaultTheme.mode,
+        colors: {
+            ...defaultTheme.colors,
+            ...overrides.colors,
+        },
+        fonts: mergeNestedTokens(defaultTheme.fonts, overrides.fonts),
+        spacing,
+        radius,
+        typography: mergeNestedTokens(defaultTheme.typography, overrides.typography),
+        button: {
+            variants: {
+                primary: { ...buttonDefaults.variants.primary, ...buttonOverrides?.variants?.primary },
+                secondary: { ...buttonDefaults.variants.secondary, ...buttonOverrides?.variants?.secondary },
+                outline: { ...buttonDefaults.variants.outline, ...buttonOverrides?.variants?.outline },
+                ghost: { ...buttonDefaults.variants.ghost, ...buttonOverrides?.variants?.ghost },
+            },
+            sizes: {
+                sm: { ...buttonDefaults.sizes.sm, ...buttonOverrides?.sizes?.sm },
+                md: { ...buttonDefaults.sizes.md, ...buttonOverrides?.sizes?.md },
+                lg: { ...buttonDefaults.sizes.lg, ...buttonOverrides?.sizes?.lg },
+            },
+            numberOfLines: buttonOverrides?.numberOfLines,
+        },
+        input: {
+            colors: { ...inputDefaults.colors, ...overrides.input?.colors },
+            geometry: { ...inputDefaults.geometry, ...overrides.input?.geometry },
+            typography: { ...inputDefaults.typography, ...overrides.input?.typography },
+        },
+    };
+
+    // Augmented token keys are compile-time declarations; this assertion bridges them
+    // to the dynamically merged runtime categories above.
+    return theme as UITheme;
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,215 @@
+import type { DefaultUIRadius, DefaultUISpacing, DefaultUITheme, UIButtonTheme, UIInputTheme } from './types';
+
+const defaultSpacing: DefaultUISpacing = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32,
+};
+
+const defaultRadius: DefaultUIRadius = {
+    sm: 6,
+    md: 10,
+    lg: 16,
+    full: 999,
+};
+
+export const createDefaultButtonTheme = (
+    spacing: DefaultUISpacing,
+    radius: DefaultUIRadius,
+): UIButtonTheme => ({
+    variants: {
+        primary: {
+            background: 'primary',
+            foreground: 'onPrimary',
+            border: 'primary',
+            disabledBackground: 'disabled',
+            disabledForeground: 'onDisabled',
+            disabledBorder: 'disabled',
+        },
+        secondary: {
+            background: 'surface',
+            foreground: 'text',
+            border: 'transparent',
+            disabledBackground: 'disabled',
+            disabledForeground: 'onDisabled',
+            disabledBorder: 'disabled',
+        },
+        outline: {
+            background: 'transparent',
+            foreground: 'primary',
+            border: 'primary',
+            disabledBackground: 'disabled',
+            disabledForeground: 'onDisabled',
+            disabledBorder: 'disabled',
+        },
+        ghost: {
+            background: 'transparent',
+            foreground: 'primary',
+            border: 'transparent',
+            disabledBackground: 'disabled',
+            disabledForeground: 'onDisabled',
+            disabledBorder: 'disabled',
+            borderWidth: 0,
+        },
+    },
+    sizes: {
+        sm: {
+            minHeight: spacing.xxl,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.xs,
+            radius: radius.sm,
+            borderWidth: 1,
+            gap: spacing.xs,
+            labelVariant: 'label',
+            labelWeight: 'semiBold',
+        },
+        md: {
+            minHeight: spacing.xxl + spacing.md,
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.sm,
+            radius: radius.md,
+            borderWidth: 1,
+            gap: spacing.sm,
+            labelVariant: 'label',
+            labelWeight: 'semiBold',
+        },
+        lg: {
+            minHeight: spacing.xxl + spacing.xl,
+            paddingHorizontal: spacing.xl,
+            paddingVertical: spacing.md,
+            radius: radius.lg,
+            borderWidth: 1,
+            gap: spacing.md,
+            labelVariant: 'body',
+            labelWeight: 'semiBold',
+        },
+    },
+});
+
+export const createDefaultInputTheme = (
+    spacing: DefaultUISpacing,
+    radius: DefaultUIRadius,
+): UIInputTheme => ({
+    colors: {
+        background: 'background',
+        border: 'border',
+        focusedBorder: 'primary',
+        errorBorder: 'error',
+        disabledBackground: 'disabled',
+        disabledBorder: 'disabled',
+        text: 'text',
+        disabledText: 'onDisabled',
+        placeholder: 'textMuted',
+        label: 'textMuted',
+        helper: 'textMuted',
+        error: 'error',
+    },
+    geometry: {
+        marginBottom: 0,
+        minHeight: 48,
+        textMinHeight: 46,
+        paddingHorizontal: spacing.md,
+        borderWidth: 1,
+        radius: radius.md,
+        labelGap: spacing.xs,
+        supportingGap: spacing.xs,
+        startAccessoryGap: spacing.sm,
+        endAccessoryGap: 0,
+        passwordToggleGap: spacing.sm,
+        multilinePaddingVertical: spacing.sm,
+    },
+    typography: {
+        inputFont: 'medium',
+        inputFontSize: 14,
+        includeFontPadding: false,
+        labelVariant: 'caption',
+        helperVariant: 'caption',
+        errorVariant: 'caption',
+    },
+});
+
+export const defaultTheme: DefaultUITheme = {
+    mode: 'light',
+    colors: {
+        primary: '#9CCC8B',
+        onPrimary: '#FFFFFF',
+        background: '#FFFFFF',
+        surface: '#F3F4F6',
+        border: '#D1D1D6',
+        text: '#111827',
+        textMuted: '#6B7280',
+        disabled: '#E5E7EB',
+        onDisabled: '#6B7280',
+        icon: '#6B7280',
+        error: '#D92D20',
+        success: '#15803D',
+        warning: '#B45309',
+        transparent: 'transparent',
+
+        card: '#BAC2BF',
+        text_light: '#6B7280',
+        text_inverted: '#FFFFFF',
+        activeButtonBackground: '#9CCC8B',
+        inactiveButtonBackground: '#E5E7EB',
+        activeButtonText: '#FFFFFF',
+        inactiveButtonText: '#6B7280',
+    },
+    fonts: {
+        regular: { fontWeight: '400' },
+        medium: { fontWeight: '500' },
+        semiBold: { fontWeight: '600' },
+        bold: { fontWeight: '700' },
+    },
+    spacing: defaultSpacing,
+    radius: defaultRadius,
+    typography: {
+        display: {
+            font: 'bold',
+            fontSize: 32,
+            lineHeight: 40,
+        },
+        h1: {
+            font: 'bold',
+            fontSize: 28,
+            lineHeight: 36,
+        },
+        h2: {
+            font: 'bold',
+            fontSize: 24,
+            lineHeight: 32,
+        },
+        h3: {
+            font: 'semiBold',
+            fontSize: 20,
+            lineHeight: 28,
+        },
+        title: {
+            font: 'semiBold',
+            fontSize: 18,
+            lineHeight: 24,
+        },
+        body: {
+            font: 'regular',
+            fontSize: 16,
+            lineHeight: 24,
+        },
+        label: {
+            font: 'medium',
+            fontSize: 14,
+            lineHeight: 20,
+        },
+        caption: {
+            font: 'regular',
+            fontSize: 12,
+            lineHeight: 16,
+        },
+    },
+    button: createDefaultButtonTheme(defaultSpacing, defaultRadius),
+    input: createDefaultInputTheme(defaultSpacing, defaultRadius),
+};
+
+/** @deprecated Use defaultTheme. */
+export const defaultLightTheme = defaultTheme;

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export * from './createTheme';
+export { defaultLightTheme, defaultTheme } from './defaultTheme';
+export * from './ThemeProvider';
+export * from './types';

package/src/theme/types.ts

@@ -0,0 +1,265 @@
+import type { TextStyle } from 'react-native';
+import type { ButtonSize, ButtonVariant } from '../components/Button/types/types';
+
+export type ThemeMode = 'light' | 'dark';
+
+/** Add project color tokens through module augmentation. */
+export interface UIColorsExtension {}
+
+/** Add project font tokens through module augmentation. */
+export interface UIFontsExtension {}
+
+/** Add project spacing tokens through module augmentation. */
+export interface UISpacingExtension {}
+
+/** Add project radius tokens through module augmentation. */
+export interface UIRadiusExtension {}
+
+/** Add project typography tokens through module augmentation. */
+export interface UITypographyExtension {}
+
+type ValidatedExtensions<TExtensions, TValue> = {
+    [K in keyof TExtensions]: TExtensions[K] extends TValue ? TExtensions[K] : never;
+};
+
+export type DefaultUIColors = {
+    primary: string;
+    onPrimary: string;
+    background: string;
+    surface: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    disabled: string;
+    onDisabled: string;
+    icon: string;
+    error: string;
+    success: string;
+    warning: string;
+    transparent: string;
+
+    /** @deprecated Use surface. */
+    card: string;
+    /** @deprecated Use textMuted. */
+    text_light: string;
+    /** @deprecated Use onPrimary. */
+    text_inverted: string;
+    /** @deprecated Use primary. */
+    activeButtonBackground: string;
+    /** @deprecated Use disabled. */
+    inactiveButtonBackground: string;
+    /** @deprecated Use onPrimary. */
+    activeButtonText: string;
+    /** @deprecated Use onDisabled. */
+    inactiveButtonText: string;
+};
+
+type ExtendedUIColors = ValidatedExtensions<UIColorsExtension, string>;
+
+export type UIColors = DefaultUIColors & ExtendedUIColors;
+
+export type UIColorKey = keyof UIColors;
+
+export type UIFontToken = Pick<TextStyle, 'fontFamily' | 'fontStyle' | 'fontWeight'>;
+
+export type DefaultUIFonts = {
+    regular: UIFontToken;
+    medium: UIFontToken;
+    semiBold: UIFontToken;
+    bold: UIFontToken;
+};
+
+type ExtendedUIFonts = ValidatedExtensions<UIFontsExtension, UIFontToken>;
+
+export type UIFonts = DefaultUIFonts & ExtendedUIFonts;
+
+export type UIFontKey = keyof UIFonts;
+
+export type DefaultUISpacing = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+
+type ExtendedUISpacing = ValidatedExtensions<UISpacingExtension, number>;
+
+export type UISpacing = DefaultUISpacing & ExtendedUISpacing;
+
+export type DefaultUIRadius = {
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+};
+
+type ExtendedUIRadius = ValidatedExtensions<UIRadiusExtension, number>;
+
+export type UIRadius = DefaultUIRadius & ExtendedUIRadius;
+
+export type UITypographyToken = {
+    font: UIFontKey;
+    fontSize: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    includeFontPadding?: TextStyle['includeFontPadding'];
+    flexShrink?: TextStyle['flexShrink'];
+};
+
+export type DefaultTypographyVariant =
+    | 'display'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'title'
+    | 'body'
+    | 'label'
+    | 'caption';
+
+export type DefaultUITypography = Record<DefaultTypographyVariant, UITypographyToken>;
+
+type ExtendedUITypography = ValidatedExtensions<UITypographyExtension, UITypographyToken>;
+
+export type UITypography = DefaultUITypography & ExtendedUITypography;
+
+export type TypographyVariant = keyof UITypography;
+
+export type UIButtonVariantTheme = {
+    background: UIColorKey;
+    foreground: UIColorKey;
+    border: UIColorKey;
+    disabledBackground: UIColorKey;
+    disabledForeground: UIColorKey;
+    disabledBorder: UIColorKey;
+    borderWidth?: number;
+};
+
+export type UIButtonSizeTheme = {
+    minHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    radius: number;
+    borderWidth: number;
+    gap: number;
+    labelVariant: TypographyVariant;
+    labelWeight: UIFontKey;
+};
+
+export type UIButtonTheme = {
+    variants: Record<ButtonVariant, UIButtonVariantTheme>;
+    sizes: Record<ButtonSize, UIButtonSizeTheme>;
+    numberOfLines?: number;
+};
+
+export type UIButtonThemeOverride = {
+    variants?: { [K in ButtonVariant]?: Partial<UIButtonVariantTheme> };
+    sizes?: { [K in ButtonSize]?: Partial<UIButtonSizeTheme> };
+    numberOfLines?: number;
+};
+
+export interface UIInputTheme {
+    colors: {
+        background: UIColorKey;
+        border: UIColorKey;
+        focusedBorder: UIColorKey;
+        errorBorder: UIColorKey;
+        disabledBackground: UIColorKey;
+        disabledBorder: UIColorKey;
+        text: UIColorKey;
+        disabledText: UIColorKey;
+        placeholder: UIColorKey;
+        label: UIColorKey;
+        helper: UIColorKey;
+        error: UIColorKey;
+    };
+    geometry: {
+        marginBottom: number;
+        minHeight: number;
+        textMinHeight: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        radius: number;
+        labelGap: number;
+        supportingGap: number;
+        startAccessoryGap: number;
+        endAccessoryGap: number;
+        passwordToggleGap: number;
+        multilinePaddingVertical: number;
+    };
+    typography: {
+        inputFont: UIFontKey;
+        inputFontSize: number;
+        includeFontPadding: boolean;
+        labelVariant: TypographyVariant;
+        helperVariant: TypographyVariant;
+        errorVariant: TypographyVariant;
+    };
+}
+
+export type UIInputThemeOverride = {
+    colors?: Partial<UIInputTheme['colors']>;
+    geometry?: Partial<UIInputTheme['geometry']>;
+    typography?: Partial<UIInputTheme['typography']>;
+};
+
+export type DefaultUITheme = {
+    mode: ThemeMode;
+    colors: DefaultUIColors;
+    fonts: DefaultUIFonts;
+    spacing: DefaultUISpacing;
+    radius: DefaultUIRadius;
+    typography: DefaultUITypography;
+    button: UIButtonTheme;
+    input: UIInputTheme;
+};
+
+export type UITheme = {
+    mode: ThemeMode;
+    colors: UIColors;
+    fonts: UIFonts;
+    spacing: UISpacing;
+    radius: UIRadius;
+    typography: UITypography;
+    button: UIButtonTheme;
+    input: UIInputTheme;
+};
+
+type NestedTokenOverrides<TTokens> = {
+    [K in keyof TTokens]?: TTokens[K] extends object ? Partial<TTokens[K]> : TTokens[K];
+};
+
+export type UIThemeOverride = {
+    mode?: ThemeMode;
+    colors?: Partial<DefaultUIColors> & Partial<ExtendedUIColors>;
+    fonts?: NestedTokenOverrides<DefaultUIFonts> & Partial<ExtendedUIFonts>;
+    spacing?: Partial<DefaultUISpacing> & Partial<ExtendedUISpacing>;
+    radius?: Partial<DefaultUIRadius> & Partial<ExtendedUIRadius>;
+    typography?: NestedTokenOverrides<DefaultUITypography> & Partial<ExtendedUITypography>;
+    button?: UIButtonThemeOverride;
+    input?: UIInputThemeOverride;
+};
+
+/** @deprecated Use UIColors. */
+export type UIKitColors = Pick<
+    UIColors,
+    | 'primary'
+    | 'background'
+    | 'border'
+    | 'card'
+    | 'text'
+    | 'text_inverted'
+    | 'activeButtonBackground'
+    | 'inactiveButtonBackground'
+    | 'activeButtonText'
+    | 'inactiveButtonText'
+    | 'icon'
+    | 'error'
+>;
+
+/** @deprecated Use UITheme. */
+export type UIKitTheme = {
+    mode: ThemeMode;
+    colors: UIKitColors;
+};

package/src/utils/index.ts

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { Dimensions, useWindowDimensions } from 'react-native';
+
+export type DesignBaseline = Readonly<{
+    width: number;
+    height: number;
+}>;
+
+export type ScalingFunctions = {
+    scaleHorizontal: (value?: number) => number;
+    scaleVertical: (value?: number) => number;
+    scaleFontSize: (value?: number) => number;
+    scaleLineHeight: (value?: number) => number;
+};
+
+export const defaultDesignBaseline: DesignBaseline = {
+    width: 390,
+    height: 844,
+};
+
+let configuredDesignBaseline: DesignBaseline = defaultDesignBaseline;
+
+/**
+ * Configures the process-wide design baseline. Call this before rendering the application.
+ */
+export const configureScaling = ({ width, height }: DesignBaseline): void => {
+    if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+        throw new RangeError('Scaling baseline width and height must be finite positive numbers.');
+    }
+
+    configuredDesignBaseline = { width, height };
+};
+
+type ScalingRatios = {
+    horizontal: number;
+    vertical: number;
+};
+
+const getScalingRatios = (width: number, height: number, baseline: DesignBaseline): ScalingRatios => {
+    const horizontal = width / baseline.width;
+    const vertical = height / baseline.height;
+
+    return {
+        horizontal,
+        vertical,
+    };
+};
+
+const createScalingFunctions = (width: number, height: number, baseline: DesignBaseline): ScalingFunctions => {
+    const ratios = getScalingRatios(width, height, baseline);
+
+    return {
+        scaleHorizontal: (value: number = 1): number => value * ratios.horizontal,
+        scaleVertical: (value: number = 1): number => value * ratios.vertical,
+        scaleFontSize: (value: number = 1): number => value * ratios.horizontal,
+        scaleLineHeight: (value: number = 1): number => value * ratios.horizontal,
+    };
+};
+
+const getCurrentScalingRatios = (): ScalingRatios => {
+    const { width, height } = Dimensions.get('window');
+    return getScalingRatios(width, height, configuredDesignBaseline);
+};
+
+export const scaleHorizontal = (value: number = 1): number => {
+    return value * getCurrentScalingRatios().horizontal;
+};
+
+export const scaleVertical = (value: number = 1): number => {
+    return value * getCurrentScalingRatios().vertical;
+};
+
+export const scaleFontSize = (value: number = 1): number => {
+    return value * getCurrentScalingRatios().horizontal;
+};
+
+export const scaleLineHeight = (value: number = 1): number => {
+    return value * getCurrentScalingRatios().horizontal;
+};
+
+export const useScaling = (): ScalingFunctions => {
+    const { width, height } = useWindowDimensions();
+    const { width: baselineWidth, height: baselineHeight } = configuredDesignBaseline;
+
+    return useMemo(
+        () => createScalingFunctions(width, height, { width: baselineWidth, height: baselineHeight }),
+        [width, height, baselineWidth, baselineHeight],
+    );
+};
+
+/**
+ * @deprecated This is a module-load snapshot. Use useWindowDimensions or Dimensions.get('window').
+ */
+export const size: { width: number; height: number } = Dimensions.get('window');