fix(dt-icon): NO-JIRA change icon import json to js (#468)

dialpad · Aug 22, 2024 · 356e836 · 356e836
1 parent 9258087
commit 356e836
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 21 deletions.
diff --git a/packages/dialtone-css/project.json b/packages/dialtone-css/project.json
@@ -1,6 +1,17 @@
 {
   "name": "dialtone-css",
   "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "options": { "script": "build" },
+      "inputs": [
+        "{projectRoot}/lib/build/less/**/*",
+        "{projectRoot}/gulpfile.cjs"
+      ],
+      "outputs": [
+        "{projectRoot}/lib/dist"
+      ]
+    },
     "publish": {
       "executor": "nx:run-commands",
       "options": {

diff --git a/packages/dialtone-icons/.github/CONTRIBUTING.md b/packages/dialtone-icons/.github/CONTRIBUTING.md
@@ -49,8 +49,8 @@ Generated Vue icons are output to the `src/icons/` folder when you do `nx build
 - `src/illustrations/svg`: All the source SVG icon files.
 - `keywords-icons.json`: Contains the categories on which icons are going to be included and the keywords to make the icons more discoverable while searching on [Dialtone icons documentation](https://dialpad.design/components/icon.html).
 - `keywords-illustrations.json`: Contains the categories on which illustrations are going to be included and the keywords to make the illustrations more discoverable.
-- `icons.json`: This file is auto generated and used to list all the icons in Storybook.
-- `illustrations.json`: This file is auto generated and used to list all the illustrations in Storybook.
+- `icons.js`: This file is auto generated and used to list all the icons in Storybook.
+- `illustrations.js`: This file is auto generated and used to list all the illustrations in Storybook.
 
 [Dialtone-vue icon]: https://vue.dialpad.design/?path=/story/components-icon--default
 [Icons Figma file]: https://www.figma.com/file/zz40wi0uW9MvaJ5RuhcRZR/DT9-Icon-Library?type=design&node-id=10023-2864&mode=design&t=MvRnRubYryeiG1az-0
diff --git a/packages/dialtone-icons/README.md b/packages/dialtone-icons/README.md
@@ -48,14 +48,14 @@ import { illustrations } from '@dialpad/dialtone-icons/vue3'; // Vue 3+
 
 ```js
 import keywords from '@dialpad/dialtone-icons/keywords-icons.json';
-import iconsList from '@dialpad/dialtone-icons/icons.json';
+import iconsList from '@dialpad/dialtone-icons/icons.js';
 ```
 
 - Importing illustration related data
 
 ```js
 import keywords from '@dialpad/dialtone-icons/keywords-illustrations.json';
-import illustrationsList from '@dialpad/dialtone-icons/illustrations.json';
+import illustrationsList from '@dialpad/dialtone-icons/illustrations.js';
 ```
 
 ## Committing

diff --git a/packages/dialtone-icons/gulpfile.cjs b/packages/dialtone-icons/gulpfile.cjs
@@ -49,8 +49,8 @@ const paths = {
   exports: {
     keywordsIcons: './src/keywords-icons.json',
     keywordsIllustrations: './src/keywords-illustrations.json',
-    illustrationsList: './dist/illustrations.json',
-    iconsList: './dist/icons.json',
+    illustrationsList: './dist/illustrations.js',
+    iconsList: './dist/icons.js',
     index: './index.js',
   },
 };
@@ -196,9 +196,9 @@ const updateIconsJSON = function (done) {
   iconsList.sort();
 
   fs.writeFileSync(paths.exports.keywordsIcons, JSON.stringify({ categories: { ...updatedKeywords } }));
-  fs.writeFileSync(paths.exports.iconsList, JSON.stringify(iconsList));
+  fs.writeFileSync(paths.exports.iconsList, `export default ${JSON.stringify(iconsList)}`);
 
-  // Copies the icons.json and keywords-icons.json to dist/
+  // Copies the icons.js and keywords-icons.json to dist/
   src([paths.exports.keywordsIcons, paths.exports.iconsList])
     .pipe(dest('./dist/'));
 
@@ -229,9 +229,9 @@ const updateIllustrationsJSON = function (done) {
   illustrationsList.sort();
 
   fs.writeFileSync(paths.exports.keywordsIllustrations, JSON.stringify({ categories: { ...updatedKeywords } }));
-  fs.writeFileSync(paths.exports.illustrationsList, JSON.stringify(illustrationsList));
+  fs.writeFileSync(paths.exports.illustrationsList, `export default ${JSON.stringify(illustrationsList)}`);
 
-  // Copies the illustrations.json and keywords-illustrations.json to dist/
+  // Copies the illustrations.js and keywords-illustrations.json to dist/
   src([paths.exports.keywordsIllustrations, paths.exports.illustrationsList])
     .pipe(dest('./dist/'));
 

diff --git a/packages/dialtone-icons/package.json b/packages/dialtone-icons/package.json
@@ -34,8 +34,8 @@
       "import": "./vue3/dist/components/*.js",
       "require": "./vue3/dist/components/*.cjs"
     },
-    "./icons.json": "./dist/icons.json",
-    "./illustrations.json": "./dist/illustrations.json",
+    "./icons.js": "./dist/icons.js",
+    "./illustrations.js": "./dist/illustrations.js",
     "./keywords-icons.json": "./dist/keywords-icons.json",
     "./keywords-illustrations.json": "./dist/keywords-illustrations.json",
     "./*": "./dist/svg/*"

diff --git a/packages/dialtone-vue2/common/storybook_utils.js b/packages/dialtone-vue2/common/storybook_utils.js
@@ -1,5 +1,5 @@
-import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };
-import illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: 'json' };
+import iconNames from '@dialpad/dialtone-icons/icons.js';
+import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';
 
 /**
  * Will use a Vue SFC to render the template rather than a template string.

diff --git a/packages/dialtone-vue2/components/icon/icon_constants.js b/packages/dialtone-vue2/components/icon/icon_constants.js
@@ -1,4 +1,4 @@
-import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };
+import iconNames from '@dialpad/dialtone-icons/icons.js'
 export const ICON_SIZE_MODIFIERS = {
   100: 'd-icon--size-100',
   200: 'd-icon--size-200',

diff --git a/packages/dialtone-vue2/components/illustration/illustration_constants.js b/packages/dialtone-vue2/components/illustration/illustration_constants.js
@@ -1,4 +1,4 @@
-import illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: 'json' };
+import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';
 
 export const ILLUSTRATION_NAMES = illustrationNames;
 

diff --git a/packages/dialtone-vue3/common/storybook_utils.js b/packages/dialtone-vue3/common/storybook_utils.js
@@ -1,5 +1,5 @@
-import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };
-import illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: 'json' };
+import iconNames from '@dialpad/dialtone-icons/icons.js';
+import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';
 
 /**
  * Will use a Vue SFC to render the template rather than a template string.

diff --git a/packages/dialtone-vue3/components/icon/icon_constants.js b/packages/dialtone-vue3/components/icon/icon_constants.js
@@ -1,4 +1,4 @@
-import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };
+import iconNames from '@dialpad/dialtone-icons/icons.js';
 export const ICON_SIZE_MODIFIERS = {
   100: 'd-icon--size-100',
   200: 'd-icon--size-200',

diff --git a/packages/dialtone-vue3/components/illustration/illustration_constants.js b/packages/dialtone-vue3/components/illustration/illustration_constants.js
@@ -1,4 +1,4 @@
-import illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: 'json' };
+import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';
 
 export const ILLUSTRATION_NAMES = illustrationNames;
 

diff --git a/project.json b/project.json
@@ -21,7 +21,11 @@
         "{projectRoot}/tsconfig.json"
       ],
       "outputs": [
-        "{projectRoot}/dist/*"
+        "{projectRoot}/dist/css",
+        "{projectRoot}/dist/themes",
+        "{projectRoot}/dist/tokens",
+        "{projectRoot}/dist/vue2",
+        "{projectRoot}/dist/vue3"
       ]
     },
     "publish": {