Fix(variables-scss): Export in JS barrel file #DS-1503

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     '!.*.js',
     'packages/analytics',
     'packages/common',
+    'packages/design-tokens',
     'packages/web-react',
     'packages/web',
     'packages/form-validations',

exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts

@@ -46,15 +46,15 @@ export const grids = {
 
 const mockedRootThemeFile = fs.readFileSync(path.join(__dirname, '../__fixtures__/mockedRootThemeFile.scss'), 'utf-8');
 
-const mockedRootThemeJsFile = `import * as themeLight from './themes/theme-light';
-import * as themeLightInverted from './themes/theme-light-inverted';\n
+const mockedRootThemeJsFile = `import * as themeLight from './theme-light';
+import * as themeLightInverted from './theme-light-inverted';\n
 // The first theme is the default theme, as the left column in the Figma table.
 export const themes = {
   themeLight: {
-    colors: themeLight.colors
+    colors: themeLight.colors,
   },
   themeLightInverted: {
-    colors: themeLightInverted.colors
+    colors: themeLightInverted.colors,
   },
 };
 `;
@@ -98,7 +98,7 @@ describe('fileGenerator', () => {
         { path: './js/global/', fileName: 'index.ts', content: barrelJsFile },
         // Root barrel files
         { path: './scss/', fileName: '@global.scss', content: "@forward 'global';\n" },
-        { path: './js/', fileName: '@global.ts', content: "export * from './global';\n" },
+        { path: './js/', fileName: 'index.ts', content: "export * from './global';\nexport * from './themes';\n" },
         // Themes files
         { path: './scss/themes/theme-light/', fileName: '_colors.scss', content: emptyFile },
         { path: './js/themes/theme-light/', fileName: 'colors.ts', content: emptyFile },
@@ -110,7 +110,7 @@ describe('fileGenerator', () => {
         { path: './js/themes/theme-light-inverted/', fileName: 'index.ts', content: barrelJsColorFile },
         // Themes root barrel files
         { path: './scss/', fileName: '@themes.scss', content: mockedRootThemeFile },
-        { path: './js/', fileName: '@themes.ts', content: mockedRootThemeJsFile },
+        { path: './js/themes', fileName: 'index.ts', content: mockedRootThemeJsFile },
       ]);
     });
   });
@@ -201,7 +201,7 @@ describe('fileGenerator', () => {
 
       expect(content).toBe(
         // eslint-disable-next-line prettier/prettier, quotes -- special characters in the string
-        'themeLight: {\ncolors: themeLight.colors\n},\nthemeLightInverted: {\ncolors: themeLightInverted.colors\n},',
+        'themeLight: {\ncolors: themeLight.colors,\n},\nthemeLightInverted: {\ncolors: themeLightInverted.colors,\n},',
       );
     });
   });
@@ -219,7 +219,7 @@ describe('fileGenerator', () => {
       const content = generateRootThemesFileImports(themes as TokenTheme[], true);
 
       expect(content).toBe(
-        "import * as themeLight from './themes/theme-light';\nimport * as themeLightInverted from './themes/theme-light-inverted';",
+        "import * as themeLight from './theme-light';\nimport * as themeLightInverted from './theme-light-inverted';",
       );
     });
   });
@@ -228,7 +228,7 @@ describe('fileGenerator', () => {
     it('should generate js import statement', () => {
       const content = jsImportStatement('theme-light');
 
-      expect(content).toBe("import * as themeLight from './themes/theme-light';");
+      expect(content).toBe("import * as themeLight from './theme-light';");
     });
   });
 

exporters/variables-scss/src/generators/fileGenerator.ts

@@ -39,7 +39,7 @@ export const generateBarrelFile = (files: { fileName: string; content: string }[
     .join('\n')}\n`;
 };
 export const jsImportStatement = (name: string) => {
-  return `import * as ${toCamelCase(name)} from './${THEMES_DIRECTORY}/${name}';`;
+  return `import * as ${toCamelCase(name)} from './${name}';`;
 };
 
 export const scssImportStatement = (name: string) => `@use '${THEMES_DIRECTORY}/${name}';`;
@@ -56,7 +56,7 @@ export const generateRootThemesFileContent = (themes: TokenTheme[], hasJsOutput:
   return themes
     .map((theme) => {
       return hasJsOutput
-        ? `${toCamelCase(theme.name)}: {\n${COLOR_KEY}: ${toCamelCase(theme.name)}.${COLOR_KEY}\n},`
+        ? `${toCamelCase(theme.name)}: {\n${COLOR_KEY}: ${toCamelCase(theme.name)}.${COLOR_KEY},\n},`
         : `${theme.name}: (\n${COLOR_KEY}: ${theme.name}.$${COLOR_KEY},\n),`;
     })
     .join('\n');
@@ -115,8 +115,8 @@ export const generateOutputFilesByThemes = async (
   });
   outputFiles.push({
     path: `./${JS_DIRECTORY}/`,
-    fileName: '@global.ts',
-    content: `export * from './${GLOBAL_DIRECTORY}';\n`,
+    fileName: 'index.ts',
+    content: `export * from './${GLOBAL_DIRECTORY}';\nexport * from './${THEMES_DIRECTORY}';\n`,
   });
 
   // Compute themed tokens for all themes in parallel
@@ -162,7 +162,11 @@ export const generateOutputFilesByThemes = async (
   const rootThemesFileContent = generateThemesRootFile(themes);
   const rootTsThemesFileContent = generateThemesRootFile(themes, true);
   outputFiles.push({ path: `./${SCSS_DIRECTORY}/`, fileName: '@themes.scss', content: rootThemesFileContent });
-  outputFiles.push({ path: `./${JS_DIRECTORY}/`, fileName: '@themes.ts', content: rootTsThemesFileContent });
+  outputFiles.push({
+    path: `./${JS_DIRECTORY}/${THEMES_DIRECTORY}`,
+    fileName: 'index.ts',
+    content: rootTsThemesFileContent,
+  });
 
   return outputFiles;
 };

packages/design-tokens/.eslintignore

@@ -0,0 +1,18 @@
+# .eslintignore
+
+node_modules
+
+# NOTE:
+# The following directives are only relevant when linting the whole
+# project directory, ie. running `eslint .` ⚠️
+
+# If you compile JavaScript into some output folder, exclude it here
+dist
+build
+
+# Highly recommended to re-include JavaScript dotfiles to lint them
+# (This will cause .eslintrc.js to be linted by ESLint 🤘)
+!.*.js
+
+# Some tools use this pattern for their configuration files. Lint them!
+!*.config.js

packages/design-tokens/.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: ['../../.eslintrc', '@lmc-eu/eslint-config-typescript', '@lmc-eu/eslint-config-jest'],
+
+  parserOptions: {
+    ecmaVersion: 'latest',
+    project: './tsconfig.eslint.json',
+  },
+
+  rules: {
+    'prettier/prettier': 'off',
+  },
+};

packages/design-tokens/.stylelintrc.mjs

@@ -1,3 +1,9 @@
 import stylelintConfig from 'stylelint-config-spirit';
 
-export default stylelintConfig;
+export default {
+  ...stylelintConfig,
+
+  rules: {
+    'prettier/prettier': null,
+  },
+};

packages/design-tokens/package.json

@@ -30,7 +30,9 @@
     "build:js": "vite build",
     "build:scss": "shx mkdir -p scss && shx cp -r src/scss/generated/* src/scss/@tokens.scss scss/",
     "clean": "rimraf esm cjs umd scss types",
-    "lint": "stylelint ./src/**/*.scss",
+    "lint": "npm-run-all --serial lint:scripts lint:styles",
+    "lint:scripts": "eslint ./src/**/*.ts",
+    "lint:styles": "stylelint ./src/**/*.scss",
     "test": "yarn lint",
     "types": "tsc"
   },

packages/design-tokens/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./", "./.eslintrc.cjs"]
+}