[components] feat: Setup ThemeProvider (WIP)

packages/components/package.json

@@ -18,14 +18,18 @@
     "@layer5/sistent-svg": "0.6.6"
   },
   "devDependencies": {
+    "@emotion/react": "^11.11.1",
     "@mui/material": "^5.14.10",
+    "@types/ramda": "^0.29.3",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
+    "io-ts": "^2.2.20",
+    "ramda": "^0.29.0",
     "react-error-boundary": "^4.0.11",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

packages/components/src/theme/SistentProvider.tsx

@@ -0,0 +1,61 @@
+import { EmotionCache } from '@emotion/react';
+import { ThemeProvider } from '@mui/material';
+import { ReactNode, createContext, useContext } from 'react';
+import { DEFAULT_THEME } from './defaultTheme';
+import { SistentTheme, SistentThemeOverride } from './types/SistentTheme';
+import { mergeThemeWithFn } from './utils/mergeTheme';
+
+interface SistentProviderContextType {
+  theme: SistentTheme;
+  emotionCache?: EmotionCache;
+}
+
+const SistentProviderContext = createContext<SistentProviderContextType>({
+  theme: DEFAULT_THEME
+});
+
+export function useSistentTheme() {
+  return useContext(SistentProviderContext)?.theme || DEFAULT_THEME;
+}
+
+export function useSistentProviderStyles(component: string | string[]) {
+  const theme = useSistentTheme();
+
+  const getStyles = (name: string) => ({});
+
+  if (Array.isArray(component)) {
+    return component.map(getStyles);
+  }
+
+  return [getStyles(component)];
+}
+
+export function useSistentEmotionCache() {
+  return useContext(SistentProviderContext)?.emotionCache;
+}
+
+export interface SistentProviderProps {
+  theme?: SistentThemeOverride;
+  emotionCache?: EmotionCache;
+  children: ReactNode;
+  inherit?: boolean;
+}
+
+export function SistentProvider({
+  theme,
+  emotionCache,
+  children,
+  inherit = false
+}: SistentProviderProps) {
+  const ctx = useContext(SistentProviderContext);
+
+  const mergedTheme = mergeThemeWithFn(DEFAULT_THEME, inherit ? { ...ctx.theme, ...theme } : theme);
+
+  return (
+    <ThemeProvider theme={mergedTheme}>
+      <SistentProviderContext.Provider value={{ theme: mergedTheme, emotionCache }}>
+        {children}
+      </SistentProviderContext.Provider>
+    </ThemeProvider>
+  );
+}

packages/components/src/theme/defaultTheme.ts

@@ -0,0 +1,87 @@
+import { SistentThemeBase } from './types/SistentTheme';
+import { DEFAULT_COLORS } from './utils/defaultColors';
+
+export const DEFAULT_THEME: SistentThemeBase = {
+  dir: 'ltr',
+  colorScheme: 'light',
+  white: '#FFF',
+  black: '#000',
+  primaryColor: '#00B39F',
+  fontFamily: undefined,
+  lineHeight: undefined,
+  primaryShade: 0,
+  other: {},
+  components: {},
+  colors: DEFAULT_COLORS,
+  fontSizes: {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+  },
+  radius: {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+  },
+  spacing: {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+  },
+  breakpoints: {
+    xs: '0',
+    sm: '600',
+    md: '960',
+    lg: '1280',
+    xl: '1920'
+  },
+  shadows: {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+  },
+  headings: {
+    fontFamily: undefined,
+    fontWeight: undefined,
+    sizes: {
+      h1: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      },
+      h2: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      },
+      h3: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      },
+      h4: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      },
+      h5: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      },
+      h6: {
+        fontSize: '',
+        fontWeight: undefined,
+        lineHeight: undefined
+      }
+    }
+  }
+};

packages/components/src/theme/index.ts

@@ -0,0 +1,2 @@
+export { SistentProvider, useSistentTheme } from './SistentProvider';
+export type { SistentProviderProps } from './SistentProvider';

packages/components/src/theme/types/ColorTheme.ts

@@ -0,0 +1,4 @@
+import * as t from 'io-ts';
+
+export const ColorSchemeType = t.string;
+export type ColorScheme = 'ight' | 'dark';

packages/components/src/theme/types/DeepPartial.ts

@@ -0,0 +1,7 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends (...args: infer Args) => infer Return
+    ? (...args: Args) => DeepPartial<Return>
+    : T[P] extends object
+    ? DeepPartial<T[P]>
+    : T[P];
+};

packages/components/src/theme/types/SistentColor.ts

@@ -0,0 +1,35 @@
+import * as t from 'io-ts';
+import { TupleCodec } from './Tuple';
+
+const DefaultSistentColorType = t.union([
+  t.literal('dark'),
+  t.literal('gray'),
+  t.literal('red'),
+  t.literal('pink'),
+  t.literal('grape'),
+  t.literal('violet'),
+  t.literal('indigo'),
+  t.literal('blue'),
+  t.literal('cyan'),
+  t.literal('green'),
+  t.literal('lime'),
+  t.literal('yellow'),
+  t.literal('orange'),
+  t.literal('teal'),
+  t.string
+]);
+
+export type DefaultSistentColor = t.TypeOf<typeof DefaultSistentColorType>;
+
+const SistentThemeColorsOverrideType = t.record(t.string, TupleCodec(t.string, 10));
+
+export type SistentThemeColorsOverride = t.TypeOf<typeof SistentThemeColorsOverrideType>;
+
+export const SistentThemeColorsType = t.union([
+  SistentThemeColorsOverrideType,
+  t.record(DefaultSistentColorType, TupleCodec(t.string, 10))
+]);
+
+export type SistentThemeColors = t.TypeOf<typeof SistentThemeColorsType>;
+
+export type SistentColor = keyof SistentThemeColors;

packages/components/src/theme/types/SistentSizes.ts

@@ -0,0 +1,30 @@
+import * as t from 'io-ts';
+
+export const SistentSizeType = t.union([
+  t.literal('xs'),
+  t.literal('sm'),
+  t.literal('md'),
+  t.literal('lg'),
+  t.literal('xl'),
+  t.string
+]);
+
+export type SistentSize = t.TypeOf<typeof SistentSizeType>;
+
+export const SistentNumberSizeType = t.union([SistentSizeType, t.number]);
+
+export type SistentNumberSize = t.TypeOf<typeof SistentNumberSizeType>;
+
+// Create a Keyof codec for known keys
+const knownSizes = t.keyof({
+  xs: null,
+  sm: null,
+  md: null,
+  lg: null,
+  xl: null
+});
+
+// Create the SistentSizesType using the known keys
+export const SistentSizesType = t.record(knownSizes, t.string);
+
+export type SistentSizes = t.TypeOf<typeof SistentSizesType>;

packages/components/src/theme/types/SistentTheme.ts

@@ -0,0 +1,102 @@
+import * as t from 'io-ts';
+import { ColorSchemeType } from './ColorTheme';
+import { DeepPartial } from './DeepPartial';
+import { SistentThemeColorsType } from './SistentColor';
+import { SistentSizesType } from './SistentSizes';
+
+const SISTENT_SIZES = {
+  xs: null,
+  sm: null,
+  md: null,
+  lg: null,
+  xl: null
+};
+
+interface ThemeComponent {}
+
+export type SistentThemeOther = Record<string, any>;
+export type SistentThemeComponents = Record<string, ThemeComponent>;
+
+/*
+export type HeadingStyle = {
+    fontSize: string;
+    fontWeight: CSSProperties['fontWeight'];
+    lineHeight: CSSProperties['lineHeight'];
+}
+*/
+
+const HeadingStyleType = t.type({
+  fontSize: t.string,
+  fontWeight: t.string,
+  lineHeight: t.string
+});
+
+const HeadingsType = t.type({
+  fontFamily: t.string,
+  fontWeight: t.string,
+  sizes: t.type({
+    h1: HeadingStyleType,
+    h2: HeadingStyleType,
+    h3: HeadingStyleType,
+    h4: HeadingStyleType,
+    h5: HeadingStyleType,
+    h6: HeadingStyleType
+  })
+});
+
+export const ShadeType = t.keyof({
+  '0': null,
+  '1': null,
+  '2': null,
+  '3': null,
+  '4': null,
+  '5': null,
+  '6': null,
+  '7': null,
+  '8': null,
+  '9': null
+});
+
+type Shade = t.TypeOf<typeof ShadeType>;
+/**
+ * type Shade = keyof typeof allowedShades;
+const allowedShades = {
+    0: true, 1: true, 2: true, 3: true, 4: true,
+    5: true, 6: true, 7: true, 8: true, 9: true,
+};
+
+type FontFamilyType = CSSProperties['fontFamily'];
+type LineHeightType = CSSProperties['lineHeight'];
+*/
+
+const SistentPrimaryShade = t.type({
+  light: ShadeType,
+  dark: ShadeType
+});
+
+const SistentThemeType = t.type({
+  dir: t.union([t.literal('ltr'), t.literal('rtl')]),
+  fontFamily: t.string,
+  lineHeight: t.string,
+  primaryShade: t.union([ShadeType, SistentPrimaryShade]),
+  other: t.record(t.string, t.any),
+  white: t.string,
+  black: t.string,
+  components: t.record(t.string, t.unknown),
+  colors: t.record(t.string, t.tuple([t.string, t.number])),
+  primaryColor: t.keyof(SistentThemeColorsType),
+  colorScheme: ColorSchemeType,
+  fontSizes: SistentSizesType,
+  radius: SistentSizesType,
+  spacing: SistentSizesType,
+  breakpoints: SistentSizesType,
+  shadows: t.record(t.keyof(SISTENT_SIZES), t.string),
+  headings: HeadingsType
+});
+
+export type SistentTheme = t.TypeOf<typeof SistentThemeType>;
+
+export type SistentThemeBase = Omit<SistentTheme, 'fn'>;
+
+export type SistentThemeOverride = DeepPartial<Omit<SistentThemeBase, 'other' | 'components'>> &
+  Partial<Pick<SistentThemeBase, 'other' | 'components'>>;

packages/components/src/theme/types/Tuple.ts

@@ -0,0 +1,20 @@
+import * as t from 'io-ts';
+
+export function TupleCodec<T extends t.Mixed>(itemCodec: T, length: number): t.Type<T[]> {
+  return new t.Type(
+    `Tuple<${itemCodec.name}, ${length}>`,
+    (input: unknown): input is T[] => {
+      if (Array.isArray(input) && input.length === length) {
+        return input.every((item) => itemCodec.is(item));
+      }
+      return false;
+    },
+    (input, context) => {
+      if (Array.isArray(input) && input.length === length) {
+        return t.success(input);
+      }
+      return t.failure(input, context);
+    },
+    t.identity
+  );
+}

packages/components/src/theme/utils/attachFunctions.ts

@@ -0,0 +1,7 @@
+import { SistentTheme, SistentThemeBase } from '../types/SistentTheme';
+
+export function attachFns(themeBase: SistentThemeBase): SistentTheme {
+  return {
+    ...themeBase
+  };
+}

packages/components/src/theme/utils/defaultColors.ts

@@ -0,0 +1,3 @@
+import { Tuple } from '../types/Tuple';
+
+export const DEFAULT_COLORS = {} as Record<string, Tuple<string, 10>>;