clean up exports

Frontify · Jan 31, 2025 · bf2e9dc · bf2e9dc
1 parent ec38e9f
commit bf2e9dc
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 13 deletions.
diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
@@ -2,15 +2,16 @@
 import React, { ComponentType } from 'react';
 
 import '../src/styles.scss';
-import { ThemeProvider } from '@frontify/fondue-tokens/theme';
+import "@frontify/fondue-tokens/themeProvider/styles"
+import { ThemeProvider } from '@frontify/fondue-tokens/themeProvider';
 import type { Preview, Decorator } from '@storybook/react';
 
 import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 
 const ThemeProviderWrapper: Decorator = (Story: ComponentType) => {
     return (
-        <ThemeProvider theme='default'>
+        <ThemeProvider theme='light'>
             <Story />
         </ThemeProvider>
     );
@@ -65,7 +66,4 @@ const preview: Preview = {
     decorators: [ThemeProviderWrapper],
 };
 
-
-
-
 export default preview;
diff --git a/packages/fondue/package.json b/packages/fondue/package.json
@@ -43,6 +43,11 @@
         "./charts/styles": "./dist/packages/charts/style.css",
         "./tokens/styles": "./dist/packages/tokens/style.css",
         "./tokens/tailwind": "./dist/packages/tokens/tailwind.config.js",
+        "./tokens/themes": "./dist/packages/tokens/theme/ThemeProvider.css",
+        "./tokens": {
+            "types": "./dist/packages/tokens/theme/fondue-theme-provider.es.d.ts",
+            "import": "./dist/packages/tokens/theme/fondue-theme-provider.es.js"
+        },
         ".": {
             "types": "./dist/index.d.ts",
             "require": "./dist/index.umd.js",

diff --git a/packages/fondue/tokens.vite.config.ts b/packages/fondue/tokens.vite.config.ts
@@ -11,6 +11,10 @@ export default defineConfig({
                     src: 'node_modules/@frontify/fondue-tokens/dist/tailwind/tailwind.config.js',
                     dest: '',
                 },
+                {
+                    src: 'node_modules/@frontify/fondue-tokens/dist/theme',
+                    dest: '',
+                },
             ],
         }),
     ],

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
@@ -24,10 +24,11 @@
         "./tokens": "./dist/js/tokens.json",
         "./tailwind": "./dist/tailwind/tailwind.config.js",
         "./styles": "./dist/css/all.css",
-        "./theme": {
-            "types": "./dist/theme/fondue-theme.es.d.ts",
-            "import": "./dist/theme/fondue-theme.es.js"
+        "./themeProvider": {
+            "types": "./dist/theme/fondue-theme-provider.es.d.ts",
+            "import": "./dist/theme/fondue-theme-provider.es.js"
         },
+        "./themeProvider/styles": "./dist/theme/ThemeProvider.css",
         "./themes/*": "./dist/css/*"
     },
     "files": [
@@ -71,7 +72,6 @@
         "tsx": "^4.19.2",
         "typescript": "^5.7.3",
         "vite": "^5.4.14",
-        "vite-plugin-css-injected-by-js": "^3.3.0",
         "vite-plugin-dts": "^4.5.0"
     }
 }
diff --git a/packages/tokens/src/components/ThemeProvider/ThemeProvider.tsx b/packages/tokens/src/components/ThemeProvider/ThemeProvider.tsx
@@ -3,10 +3,16 @@
 import { type ReactNode } from 'react';
 
 import styles from './generated/themes.module.css';
+
 type ThemeProviderProps = {
     children: ReactNode;
+    /**
+     * The theme to apply
+     * @default light
+     * */
     theme: keyof typeof styles;
 };
+
 export const ThemeProvider = ({ children, theme = 'light' }: ThemeProviderProps) => {
     return <div className={styles[theme]}>{children}</div>;
 };
diff --git a/packages/tokens/src/utils/createCssModule.ts b/packages/tokens/src/utils/createCssModule.ts
@@ -38,6 +38,7 @@ const createTypes = () => {
     const dtsContent = `declare const styles: {
 ${themeClassDefinitions}
 };
+
 export default styles;`;
 
     writeFileSync(join(OUTPUT_DIRECTORY, 'themes.module.css.d.ts'), dtsContent, {

diff --git a/packages/tokens/vite.config.ts b/packages/tokens/vite.config.ts
@@ -4,13 +4,11 @@ import { resolve } from 'node:path';
 
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 import dts from 'vite-plugin-dts';
 
 export default defineConfig({
     plugins: [
         react(),
-        cssInjectedByJsPlugin(),
         dts({
             rollupTypes: true,
             include: ['src/components/ThemeProvider'],
@@ -21,9 +19,9 @@ export default defineConfig({
         outDir: resolve(__dirname, 'dist/theme'),
         lib: {
             entry: resolve(__dirname, 'src/components/ThemeProvider/ThemeProvider.tsx'), // Your entry file
-            name: 'FondueTheme', // Global variable name when used in browser
+            name: 'FondueThemeProvider', // Global variable name when used in browser
             formats: ['es'],
-            fileName: (format) => `fondue-theme.${format}.js`,
+            fileName: (format) => `fondue-theme-provider.${format}.js`,
         },
         rollupOptions: {
             external: ['react', 'react-dom'], // Don't bundle React