fix(tokens): NO-JIRA move themes to tokens package

.github/pull_request_template.md

@@ -78,7 +78,7 @@ If new component:
   - [ ] from the index.js in the root (either `packages/dialtone-vue2` or `packages/dialtone-vue3`).
 - [ ] I have added the styles for the new component to the `packages/dialtone-css` package.
 - [ ] I have created a page for the new component on the documentation site in `apps/dialtone-documentation`.
-- [ ] I have added the new component to `common/components_list.cjs`
+- [ ] I have added the new component to `common/components_list.js`
 - [ ] I have created a component story in storybook
 - [ ] I have created story / stories for any relevant component variants in storybook
 - [ ] I have created a docs page for the component in storybook.

common/utils.js → common/utils.mjs

@@ -3,6 +3,13 @@ export function getUniqueString (prefix = 'dt') {
   return `${prefix}${UNIQUE_ID_COUNTER++}`;
 }
 
+const scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;
+export function flushPromises () {
+  return new Promise((resolve) => {
+    scheduler(resolve);
+  });
+}
+
 /**
  * Transform a string from kebab-case to PascalCase
  * @param string
@@ -15,13 +22,6 @@ export function kebabCaseToPascalCase (string) {
     .join('');
 }
 
-const scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;
-export function flushPromises () {
-  return new Promise((resolve) => {
-    scheduler(resolve);
-  });
-}
-
 export default {
   getUniqueString,
   kebabCaseToPascalCase,

package.json

@@ -2,7 +2,6 @@
   "name": "@dialpad/dialtone",
   "version": "9.69.1",
   "description": "Dialpad's Dialtone design system monorepo",
-  "type": "module",
   "scripts": {
     "test:all": "nx run-many --target=test",
     "build:all": "nx run-many --target=build",
@@ -93,9 +92,9 @@
       "require": "./dist/vue3/*.cjs"
     },
     "./themes/*": {
-      "types": "./dist/themes/types/*.d.ts",
-      "import": "./dist/themes/*.js",
-      "require": "./dist/themes/*.cjs"
+      "types": "./dist/tokens/themes/types/*.d.ts",
+      "import": "./dist/tokens/themes/*.js",
+      "require": "./dist/tokens/themes/*.cjs"
     },
     "./*": "./dist/*"
   },

packages/dialtone-tokens/build-sd-transforms.js

@@ -5,7 +5,7 @@
 import { register, getTransforms, expandTypesMap } from '@tokens-studio/sd-transforms';
 import StyleDictionary from 'style-dictionary';
 import { promises, readFileSync } from 'fs';
-import { kebabCaseToPascalCase } from '../../common/utils.js';
+import { kebabCaseToPascalCase } from '../../common/utils.mjs';
 
 import { registerDialtoneTransforms } from './dialtone-transforms.js';
 import { buildDocs } from './build-docs.js';

packages/dialtone-tokens/package.json

@@ -4,7 +4,7 @@
   "description": "Design tokens for Dialtone.",
   "type": "module",
   "scripts": {
-    "build": "node ./build.js",
+    "build": "node ./build.js && vite build",
     "publish:external-packages": "pnpm run publish:android-package && pnpm run publish:ios-package",
     "publish:android-package": "cp ./AndroidManifest.xml dist/android && ./gradlew publishToMavenLocal -Pversion=$npm_package_version",
     "publish:ios-package": "./build-ios.js",

packages/dialtone-tokens/tsconfig.json

@@ -1,20 +1,31 @@
 {
   "compilerOptions": {
-    "module": "esnext",
+    "module": "NodeNext",
     "target": "es2015",
+    "allowJs": true,
     "sourceMap": true,
-    "moduleResolution": "node16",
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+    "strict": true,
+    "moduleResolution": "NodeNext",
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
-    "strict": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "noUnusedParameters": true,
     "noEmitOnError": true,
     "removeComments": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
+  "include": [
+    "themes/*.js",
+  ],
   "exclude": ["node_modules"]
 }

vite.config.js → packages/dialtone-tokens/vite.config.js

@@ -12,26 +12,26 @@ export default defineConfig({
     emptyOutDir: false,
     lib: {
       entry: {
-        'themes/config': resolve(__dirname, './common/themes/config.js'),
-        'themes/dp-light': resolve(__dirname, './common/themes/dp-light.js'),
-        'themes/dp-dark': resolve(__dirname, './common/themes/dp-dark.js'),
+        'themes/config': resolve(__dirname, './themes/config.js'),
+        'themes/dp-light': resolve(__dirname, './themes/dp-light.js'),
+        'themes/dp-dark': resolve(__dirname, './themes/dp-dark.js'),
         'themes/expressive-light': resolve(
           __dirname,
-          './common/themes/expressive-light.js',
+          './themes/expressive-light.js',
         ),
         'themes/expressive-dark': resolve(
           __dirname,
-          './common/themes/expressive-dark.js',
+          './themes/expressive-dark.js',
         ),
-        'themes/tmo-light': resolve(__dirname, './common/themes/tmo-light.js'),
-        'themes/tmo-dark': resolve(__dirname, './common/themes/tmo-dark.js'),
+        'themes/tmo-light': resolve(__dirname, './themes/tmo-light.js'),
+        'themes/tmo-dark': resolve(__dirname, './themes/tmo-dark.js'),
         'themes/expressive-sm-light': resolve(
           __dirname,
-          './common/themes/expressive-sm-light.js',
+          './themes/expressive-sm-light.js',
         ),
         'themes/expressive-sm-dark': resolve(
           __dirname,
-          './common/themes/expressive-sm-dark.js',
+          './themes/expressive-sm-dark.js',
         ),
       },
       formats: ['es', 'cjs'],

packages/dialtone-vue2/.eslintrc.cjs

@@ -1,4 +1,4 @@
-const componentsList = require('../../common/components_list.cjs');
+const componentsList = require('../../common/components_list.js');
 componentsList.push('btn', 'select', 'validation-message', 'label', 'description', 'split-btn');
 const componentsNames = componentsList.map(name => name.replace('_', '-').replace('.vue', ''));
 

packages/dialtone-vue2/.storybook/preview.jsx

@@ -1,9 +1,9 @@
 import '../css/dialtone-globals.less';
 import '@dialpad/dialtone-css/lib/dist/dialtone.css';
 import { addons } from '@storybook/preview-api';
-import { setTheme } from '@/../../common/themes/config';
-import DpLight from '@/../../common/themes/dp-light.js';
-import DpDark from '@/../../common/themes/dp-dark.js';
+import { setTheme } from '@dialpad/dialtone-tokens/themes/config';
+import DpLight from '@dialpad/dialtone-tokens/themes/dp-light.js';
+import DpDark from '@dialpad/dialtone-tokens/themes/dp-dark.js';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { DocsContainer } from '@storybook/addon-docs';
 import { useDarkMode, DARK_MODE_EVENT_NAME } from "storybook-dark-mode";

packages/dialtone-vue3/.eslintrc.cjs

@@ -1,4 +1,4 @@
-const componentsList = require('../../common/components_list.cjs');
+const componentsList = require('../../common/components_list.js');
 componentsList.push('btn', 'select', 'validation-message', 'label', 'description', 'split-btn');
 const componentsNames = componentsList.map(name => name.replace('_', '-').replace('.vue', ''));
 

packages/dialtone-vue3/.storybook/preview.jsx

@@ -1,9 +1,9 @@
 import '../css/dialtone-globals.less';
 import '@dialpad/dialtone-css/lib/dist/dialtone.css';
 import { addons } from '@storybook/preview-api';
-import { setTheme } from '@/../../common/themes/config';
-import DpLight from '@/../../common/themes/dp-light.js';
-import DpDark from '@/../../common/themes/dp-dark.js';
+import { setTheme } from '@dialpad/dialtone-tokens/themes/config';
+import DpLight from '@dialpad/dialtone-tokens/themes/dp-light.js';
+import DpDark from '@dialpad/dialtone-tokens/themes/dp-dark.js';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { setup } from '@storybook/vue3';
 import React from 'react';

project.json

@@ -12,13 +12,10 @@
     "build": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "gulp && vite build"
+        "command": "gulp"
       },
       "inputs": [
-        "{projectRoot}/vite.config.js",
-        "{projectRoot}/common/themes/*.js",
-        "{projectRoot}/gulpfile.cjs",
-        "{projectRoot}/tsconfig.json"
+        "{projectRoot}/gulpfile.cjs"
       ],
       "outputs": [
         "{projectRoot}/dist/css",

scripts/build-dialtone-vue-docs.mjs

@@ -3,7 +3,7 @@ import path, { join } from 'path';
 import { fileURLToPath } from 'url';
 import { readdirSync, writeFile } from 'fs';
 
-import componentsList from '../common/components_list.cjs';
+import componentsList from '../common/components_list.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);