Merge pull request #838 from gympass/DS-876

🚀 feat(yoga): add types to theme
gympass · Jul 17, 2024 · 7162a04 · 7162a04
2 parents 47591f3 + 0671419
commit 7162a04
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 33 deletions.
diff --git a/packages/common/src/merge.ts b/packages/common/src/merge.ts
@@ -1,5 +1,7 @@
-const merge = (target, source) => {
-  const newTarget = { ...target };
+type UnknownObject = Record<string, unknown>;
+
+const merge = <TargetType extends UnknownObject, SourceType extends UnknownObject>(target: TargetType, source: SourceType): TargetType & SourceType => {
+  const newTarget: UnknownObject = { ...target };
 
   Object.keys(source).forEach(key => {
     newTarget[key] = source[key];
@@ -9,11 +11,11 @@ const merge = (target, source) => {
       typeof source[key] === 'object' &&
       !Array.isArray(source[key])
     ) {
-      newTarget[key] = merge(target[key] || {}, newTarget[key]);
+      newTarget[key] = merge(target[key] as UnknownObject || {}, newTarget[key] as UnknownObject);
     }
   });
 
-  return newTarget;
+  return newTarget as TargetType & SourceType;
 };
 
 export default merge;
diff --git a/packages/yoga/src/Theme/index.js → packages/yoga/src/Theme/index.ts b/packages/yoga/src/Theme/index.js → packages/yoga/src/Theme/index.ts
@@ -1,8 +1,8 @@
 import { ThemeProvider, FontLoader } from './Provider';
-import yogaTheme, { v3theme } from './theme';
+import yogaTheme, { v3theme, type Theme } from './theme';
 import theme from './helpers/themeReader';
 import createTheme from './helpers/themeGenerator';
 
-export { ThemeProvider, FontLoader, yogaTheme, theme, createTheme, v3theme };
+export { ThemeProvider, FontLoader, yogaTheme, theme, createTheme, v3theme, Theme };
 
 export default ThemeProvider;
diff --git a/packages/yoga/src/Theme/theme/index.js b/packages/yoga/src/Theme/theme/index.js
diff --git a/packages/yoga/src/Theme/theme/index.ts b/packages/yoga/src/Theme/theme/index.ts
@@ -0,0 +1,7 @@
+import theme, { type Theme } from './theme';
+
+export { v3theme } from './v3theme';
+
+export { Theme };
+
+export default theme;
diff --git a/packages/yoga/src/Theme/theme/theme.js → packages/yoga/src/Theme/theme/theme.ts b/packages/yoga/src/Theme/theme/theme.js → packages/yoga/src/Theme/theme/theme.ts
@@ -1,30 +1,42 @@
 /* eslint-disable prefer-destructuring */
 import { merge } from '@gympass/yoga-common';
+import yogaTokens from '@gympass/yoga-tokens';
 import componentThemes from './componentThemes';
 
-const getComponentThemes = tokens => {
-  const { colors, baseFont, baseFontSize } = tokens;
+type themeTypes = ReturnType<typeof theme>;
+
+export type Theme = ReturnType<typeof composeTheme>;
+
+const getComponentThemes = (theme: themeTypes) => {
+  type ComponentThemesType = typeof componentThemes;
+  type OutputObject = {
+    [K in keyof ComponentThemesType as `${Lowercase<string & K>}`]: ReturnType<
+      ComponentThemesType[K]
+    >;
+  };
+
+  const { colors, baseFont, baseFontSize } = theme;
   const components = Object.entries(componentThemes).reduce(
     (componentsStyles, [names, themed]) => {
       const name = names.toLowerCase();
 
       return {
         ...componentsStyles,
         [name]: themed({
-          ...tokens,
+          ...theme,
           colors,
           baseFont,
           baseFontSize,
         }),
       };
     },
     {},
-  );
+  ) as OutputObject;
 
   return { components };
 };
 
-const theme = tokens => {
+const theme = (tokens: typeof yogaTokens) => {
   const baseFont = tokens.fonts.rubik;
   const baseFontSize = tokens.fontSizes.medium;
 
@@ -33,10 +45,22 @@ const theme = tokens => {
     primary: tokens.colors.vibin,
     secondary: tokens.colors.stamina,
     feedback: {
-      success: [tokens.colors.success, tokens.colors.hope],
-      informative: [tokens.colors.neutral, tokens.colors.relax],
-      attention: [tokens.colors.attention, tokens.colors.verve],
-      neutral: [tokens.colors.light, tokens.colors.medium],
+      success: Object.assign([tokens.colors.success, tokens.colors.hope], {
+        light: tokens.colors.success,
+        dark: tokens.colors.hope,
+      }),
+      informative: Object.assign([tokens.colors.neutral, tokens.colors.relax], {
+        light: tokens.colors.neutral,
+        dark: tokens.colors.relax,
+      }),
+      attention: Object.assign([tokens.colors.attention, tokens.colors.verve], {
+        light: tokens.colors.attention,
+        dark: tokens.colors.verve,
+      }),
+      neutral: Object.assign([tokens.colors.light, tokens.colors.medium], {
+        light: tokens.colors.light,
+        dark: tokens.colors.medium,
+      }),
     },
     text: {
       primary: tokens.colors.stamina,
@@ -50,18 +74,6 @@ const theme = tokens => {
     },
   };
 
-  [colors.feedback.success.light, colors.feedback.success.dark] =
-    colors.feedback.success;
-
-  [colors.feedback.informative.light, colors.feedback.informative.dark] =
-    colors.feedback.informative;
-
-  [colors.feedback.attention.light, colors.feedback.attention.dark] =
-    colors.feedback.attention;
-
-  [colors.feedback.neutral.light, colors.feedback.neutral.dark] =
-    colors.feedback.neutral;
-
   return {
     ...tokens,
     colors,
@@ -71,7 +83,7 @@ const theme = tokens => {
   };
 };
 
-const composeTheme = (tokens, customTheming = {}) => {
+const composeTheme = (tokens: typeof yogaTokens, customTheming = {}) => {
   const baseTheme = theme(tokens);
   const customTheme = merge(baseTheme, customTheming);
   const componentTheming = getComponentThemes(customTheme);

diff --git a/packages/yoga/src/index.ts b/packages/yoga/src/index.ts
@@ -4,6 +4,7 @@ import ThemeProvider, {
   theme,
   createTheme,
   v3theme,
+  type Theme,
 } from './Theme';
 import Accordion from './Accordion';
 import Button from './Button';
@@ -92,4 +93,5 @@ export {
   Popover,
   Spinner,
   NavigationMenu,
+  Theme,
 };