@ndlib/component-library 1.0.20 → 1.0.22

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, CSSProperties } from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
@@ -104,6 +104,95 @@ export declare const theme: {
     };
 };
 export type Theme = typeof theme;
+export declare const themeV2: {
+    colors: {
+        text: string;
+        lightText: string;
+        background: string;
+        transparent: string;
+        primary: string;
+        textOnPrimary: string;
+        primaryHighlight: string;
+        secondary: string;
+        textOnSecondary: string;
+        secondaryHighlight: string;
+        white: string;
+        warmWhite: string;
+        warmWhiteDark: string;
+        black: string;
+        darkGray: string;
+        gray: string;
+        lightGray: string;
+        extraLightGray: string;
+        extraExtraLightGray: string;
+        ndTertiary1: string;
+        ndBlue: string;
+        ndBlueDark: string;
+        ndBlueLight: string;
+        ndBlueBright: string;
+        ndGold: string;
+        ndGoldLight: string;
+        ndGoldDark: string;
+        ndGreem: string;
+        ndGreenLight: string;
+        ndSkyBlue: string;
+        ndSkyBlueDark: string;
+        ndSkyBlueLight: string;
+        ndMetallicGold: string;
+        ndMetallicGoldLight: string;
+        ndProvostBlue: string;
+        ndSecondary1: string;
+        ndSecondary2: string;
+        ndSecondary3: string;
+        ndSecondary4: string;
+        ndSecondary5: string;
+        ndSecondary6: string;
+        ndTertiary2: string;
+        ndTertiary3: string;
+        ndTertiary4: string;
+        ndTertiary5: string;
+        ndTertiary6: string;
+        alertInformationalBg: string;
+        alertInformationalBorder: string;
+        alertInformationalYellowBg: string;
+        alertInformationalYellowBorder: string;
+        alertWarningBg: string;
+        alertWarningBorder: string;
+        alertSuccessBg: string;
+    };
+    space: string[];
+    boxShadow: typeof BOX_SHADOW;
+    breakpoints: string[];
+    zIndex: typeof Z_INDEX;
+    fonts: {
+        branded: string;
+        branded2: string;
+        serif: string;
+        normal: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        ms: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    lineHeights: {
+        normal: number;
+        condensed: number;
+        extraCondensed: number;
+    };
+    fontWeights: {
+        normal: number;
+        heading: number;
+        bold: number;
+    };
+};
+export type ThemeV2 = typeof themeV2;
 export type StylesProp = Omit<ThemeUICSSObject, 'color' | 'bg' | 'borderColor' | 'fontSize' | 'font' | 'fontWeight' | 'lineHeight' | 'boxShadow'> & {
     color?: COLOR | COLOR[];
     bg?: COLOR | COLOR[];
@@ -114,12 +203,46 @@ export type StylesProp = Omit<ThemeUICSSObject, 'color' | 'bg' | 'borderColor' |
     lineHeight?: LINE_HEIGHT | number | (LINE_HEIGHT | number)[];
     boxShadow?: BOX_SHADOW | BOX_SHADOW[];
 };
+type ShorthandProperties = {
+    p?: CSSProperties['padding'] | CSSProperties['padding'][];
+    pt?: CSSProperties['paddingTop'] | CSSProperties['paddingTop'][];
+    pr?: CSSProperties['paddingRight'] | CSSProperties['paddingRight'][];
+    pb?: CSSProperties['paddingBottom'] | CSSProperties['paddingBottom'][];
+    pl?: CSSProperties['paddingLeft'] | CSSProperties['paddingLeft'][];
+    px?: CSSProperties['paddingLeft'] | CSSProperties['paddingLeft'][];
+    py?: CSSProperties['paddingTop'] | CSSProperties['paddingTop'][];
+    m?: CSSProperties['margin'] | CSSProperties['margin'][];
+    mt?: CSSProperties['marginTop'] | CSSProperties['marginTop'][];
+    mr?: CSSProperties['marginRight'] | CSSProperties['marginRight'][];
+    mb?: CSSProperties['marginBottom'] | CSSProperties['marginBottom'][];
+    ml?: CSSProperties['marginLeft'] | CSSProperties['marginLeft'][];
+    mx?: CSSProperties['marginLeft'] | CSSProperties['marginLeft'][];
+    my?: CSSProperties['marginTop'] | CSSProperties['marginTop'][];
+    bg?: COLOR | string | COLOR[];
+    flexDirection?: string | string[];
+};
+export type StylesPropV2 = Omit<CSSProperties, 'color' | 'backgroundColor' | 'borderColor' | 'fontSize' | 'fontFamily' | 'fontWeight' | 'lineHeight' | 'boxShadow' | 'flexDirection'> & ShorthandProperties & {
+    color?: COLOR | COLOR[];
+    backgroundColor?: COLOR | string | COLOR[];
+    borderColor?: COLOR | COLOR[];
+    fontSize?: FONT_SIZE | FONT_SIZE[];
+    fontFamily?: FONT | FONT[];
+    fontWeight?: FONT_WEIGHT | FONT_WEIGHT[];
+    lineHeight?: LINE_HEIGHT | number | (LINE_HEIGHT | number)[];
+    boxShadow?: BOX_SHADOW | BOX_SHADOW[];
+};
 export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
     children?: Children;
 } & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps & {
     htmlFor?: string;
 };
+export type StyledElementPropsV2<E extends Element, CustomProps = object, Children = React.ReactNode> = {
+    sx?: StylesPropV2;
+    children?: Children;
+} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps & {
+    htmlFor?: string;
+};
 export declare const useTheme: () => {
     colors: {
         text: string;
@@ -209,3 +332,6 @@ export declare const useTheme: () => {
     };
 };
 export declare const ThemeProvider: React.FC<PropsWithChildren>;
+export declare const useThemeV2: () => ThemeV2;
+export declare const ThemeProviderV2: React.FC<PropsWithChildren>;
+export {};

package/dist/theme/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from 'react';
 import { ThemeUIProvider, useThemeUI } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
@@ -28,6 +29,7 @@ export const SPACING = [
     '4rem',
 ];
 export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS, zIndex: Z_INDEX });
+export const themeV2 = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS, zIndex: Z_INDEX });
 export const useTheme = () => {
     const { theme } = useThemeUI();
     return theme;
@@ -35,3 +37,15 @@ export const useTheme = () => {
 export const ThemeProvider = ({ children }) => {
     return _jsx(ThemeUIProvider, Object.assign({ theme: theme }, { children: children }));
 };
+const ThemeV2Context = createContext(themeV2);
+export const useThemeV2 = () => {
+    const context = useContext(ThemeV2Context);
+    if (!context) {
+        throw new Error('useThemeV2 must be used within a ThemeProviderV2');
+    }
+    return context;
+};
+export const ThemeProviderV2 = ({ children }) => {
+    const value = useMemo(() => themeV2, []);
+    return (_jsx(ThemeV2Context.Provider, Object.assign({ value: value }, { children: children })));
+};

package/dist/theme/typography.js

@@ -57,8 +57,8 @@ export const fontStyles = {
     fonts: {
         [FONT.BRANDED]: 'GPMed, sans-serif',
         [FONT.BRANDED2]: 'GPCMed, sans-serif',
-        [FONT.SERIF]: '"Sumana", Georgia, "Times New Roman", Times, serif;',
-        [FONT.NORMAL]: '"Libre Franklin", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;',
+        [FONT.SERIF]: '"Sumana", Georgia, "Times New Roman", Times, serif',
+        [FONT.NORMAL]: '"Libre Franklin", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif',
     },
     fontSizes: fontSizeMap,
     lineHeights: {

package/dist/utils/decorators/UIVersion1.d.ts

@@ -0,0 +1,2 @@
+import { StoryFn } from '@storybook/react';
+export declare const UIVersion1: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/decorators/UIVersion1.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontLoader } from '../../FontLoader';
+import { GlobalStyles } from '../../theme/GlobalStyles';
+import { UiProvider } from '../../components/providers/ui';
+export const UIVersion1 = (Story) => {
+    return (_jsxs(UiProvider, { children: [_jsx(GlobalStyles, {}), _jsx(FontLoader, {}), _jsx(Story, {})] }));
+};

package/dist/utils/decorators/UIVersion2.d.ts

@@ -0,0 +1,2 @@
+import { StoryFn } from '@storybook/react';
+export declare const UIVersion2: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/decorators/UIVersion2.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontLoader } from '../../FontLoader';
+import { GlobalStylesV2 } from '../../theme/GlobalStylesV2';
+import { UiProviderV2 } from '../../components/providers/uiV2';
+export const UIVersion2 = (Story) => {
+    return (_jsxs(UiProviderV2, { children: [_jsx(GlobalStylesV2, {}), _jsx(FontLoader, {}), _jsx(Story, {})] }));
+};

package/dist/utils/hooks/useFocus.d.ts

@@ -0,0 +1,7 @@
+export declare const useFocus: () => {
+    isFocused: boolean;
+    anchorElementProps: {
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};

package/dist/utils/hooks/useFocus.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const useFocus = () => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const anchorElementProps = {
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+    };
+    return {
+        isFocused,
+        anchorElementProps,
+    };
+};

package/dist/utils/processSx.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+import { StylesPropV2 } from '../theme';
+export declare const processSx: (sx: StylesPropV2 | undefined) => CSSProperties & Record<string, any>;

package/dist/utils/processSx.js

@@ -0,0 +1,135 @@
+import { colors, COLOR } from '../theme/colors';
+import { fontStyles, FONT, FONT_SIZE, TYPOGRAPHY_TYPE, FONT_WEIGHT, LINE_HEIGHT, } from '../theme/typography';
+import { getTypographyStyles } from '../theme/typography';
+const breakpoints = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px',
+    xl: '1400px',
+};
+const resolveMappedValue = (key, value) => {
+    if (Object.values(COLOR).includes(value)) {
+        return colors[value];
+    }
+    if (key === 'fontFamily' && Object.values(FONT).includes(value)) {
+        return fontStyles.fonts[value];
+    }
+    if (Object.values(FONT_SIZE).includes(value)) {
+        return fontStyles.fontSizes[value];
+    }
+    if (key === 'fontWeight' && Object.values(FONT_WEIGHT).includes(value)) {
+        return fontStyles.fontWeights[value];
+    }
+    if (key === 'lineHeight' && Object.values(LINE_HEIGHT).includes(value)) {
+        return fontStyles.lineHeights[value];
+    }
+    if (Object.values(TYPOGRAPHY_TYPE).includes(value)) {
+        return getTypographyStyles(value);
+    }
+    return value;
+};
+const scaleRemValue = (value) => {
+    return `${value * 0.25}rem`;
+};
+const expandShorthandProperties = (key, value) => {
+    const expanded = {};
+    const scaledValue = typeof value === 'number' ? scaleRemValue(value) : value;
+    switch (key) {
+        case 'p':
+            expanded.padding = scaledValue;
+            break;
+        case 'pt':
+            expanded.paddingTop = scaledValue;
+            break;
+        case 'pb':
+            expanded.paddingBottom = scaledValue;
+            break;
+        case 'pl':
+            expanded.paddingLeft = scaledValue;
+            break;
+        case 'pr':
+            expanded.paddingRight = scaledValue;
+            break;
+        case 'px':
+            expanded.paddingLeft = scaledValue;
+            expanded.paddingRight = scaledValue;
+            break;
+        case 'py':
+            expanded.paddingTop = scaledValue;
+            expanded.paddingBottom = scaledValue;
+            break;
+        case 'm':
+            expanded.margin = scaledValue;
+            break;
+        case 'mt':
+            expanded.marginTop = scaledValue;
+            break;
+        case 'mb':
+            expanded.marginBottom = scaledValue;
+            break;
+        case 'ml':
+            expanded.marginLeft = scaledValue;
+            break;
+        case 'mr':
+            expanded.marginRight = scaledValue;
+            break;
+        case 'mx':
+            expanded.marginLeft = scaledValue;
+            expanded.marginRight = scaledValue;
+            break;
+        case 'my':
+            expanded.marginTop = scaledValue;
+            expanded.marginBottom = scaledValue;
+            break;
+        case 'bg':
+            expanded.backgroundColor = value;
+            break;
+        default:
+            expanded[key] = value;
+    }
+    return expanded;
+};
+export const processSx = (sx) => {
+    if (!sx)
+        return {};
+    const styles = {};
+    for (const key in sx) {
+        let value = sx[key];
+        value = resolveMappedValue(key, value);
+        if (Array.isArray(value)) {
+            styles[key] = value[0];
+            if (value[1]) {
+                styles[`@media (min-width: ${breakpoints.xs})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.xs})`]), { [key]: value[1] });
+            }
+            if (value[2]) {
+                styles[`@media (min-width: ${breakpoints.sm})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.sm})`]), { [key]: value[2] });
+            }
+            if (value[3]) {
+                styles[`@media (min-width: ${breakpoints.md})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.md})`]), { [key]: value[3] });
+            }
+            if (value[4]) {
+                styles[`@media (min-width: ${breakpoints.lg})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.lg})`]), { [key]: value[4] });
+            }
+            if (value[5]) {
+                styles[`@media (min-width: ${breakpoints.xl})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.xl})`]), { [key]: value[5] });
+            }
+        }
+        else {
+            Object.assign(styles, expandShorthandProperties(key, value));
+        }
+    }
+    const flattenedStyles = {};
+    for (const key in styles) {
+        if (typeof styles[key] === 'object' && key.startsWith('@media')) {
+            const mediaStyles = styles[key];
+            for (const mediaKey in mediaStyles) {
+                flattenedStyles[key] = Object.assign(Object.assign({}, flattenedStyles[key]), { [mediaKey]: mediaStyles[mediaKey] });
+            }
+        }
+        else {
+            flattenedStyles[key] = styles[key];
+        }
+    }
+    return flattenedStyles;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -22,12 +22,14 @@
     "test-build": "echo '\n\nTesting Build...' && tsc --noEmit",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives && yarn prettier && yarn test-build",
     "lint:fix": "eslint src --ext ts,tsx --report-unused-disable-directives --fix && yarn prettify && yarn test-build",
-    "test": "vitest",
+    "build:colors": "tsc --build tsconfig.colors.json",
+    "test": "yarn build:colors && yarn generate-css-vars && vitest",
     "prettier": "prettier --check \"src/**/*.{ts,tsx}\"",
     "prettify": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "start": "storybook dev -p 6006",
+    "start": "yarn generate-css-vars && storybook dev -p 6006",
+    "generate-css-vars": "node generate-css-vars.js",
     "build-storybook": "storybook build -o storybook && touch storybook/.nojekyll",
-    "build": "tsc",
+    "build": "vite build && tsc && node move-css.js && yarn generate-css-vars",
     "debug": "echo src/**/*.tsx"
   },
   "peerDependencies": {
@@ -80,6 +82,7 @@
     "theme-ui": "^0.16.1",
     "typescript": "^5.0.2",
     "vite": "^4.5.3",
+    "vite-plugin-static-copy": "^2.3.0",
     "vitest": "^1.6.0"
   },
   "prettier": {