Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Aug 26, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60931af
fix(tokens): NO-JIRA move themes to tokens package
braddialpad Aug 26, 2024
8c0a992
migrate storybook import
braddialpad Aug 26, 2024
8129390
vue 3
braddialpad Aug 26, 2024
c5b2d2c
change common to mjs/js since it is not type module
braddialpad Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions common/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,6 @@ export function getUniqueString (prefix = 'dt') {
return `${prefix}${UNIQUE_ID_COUNTER++}`;
}

/**
* Transform a string from kebab-case to PascalCase
* @param string
* @returns {string}
*/
export function kebabCaseToPascalCase (string) {
return string?.toLowerCase()
.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join('');
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think your linter did this, right? this is being used on icon component IIRC

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get this...

import { kebabCaseToPascalCase } from '../../common/utils.js';
         ^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'kebabCaseToPascalCase' not found. The requested module '../../common/utils.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '../../common/utils.js';
const { kebabCaseToPascalCase } = pkg;

Do we need to rename this to utils.mjs since package.json is not type: "module" anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed this as I mentioned above, seems to have fixed it.

const scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;
export function flushPromises () {
return new Promise((resolve) => {
Expand All @@ -24,6 +12,5 @@ export function flushPromises () {

export default {
getUniqueString,
kebabCaseToPascalCase,
flushPromises,
};
7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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/*"
},
Expand Down
13 changes: 12 additions & 1 deletion packages/dialtone-tokens/build-sd-transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
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 { registerDialtoneTransforms } from './dialtone-transforms.js';
import { buildDocs } from './build-docs.js';
Expand All @@ -16,6 +15,18 @@ register(StyleDictionary);

registerDialtoneTransforms(StyleDictionary);

/**
* Transform a string from kebab-case to PascalCase
* @param string
* @returns {string}
*/
function kebabCaseToPascalCase (string) {
return string?.toLowerCase()
.split('-')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join('');
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why moving it to this file? I think that utility it's more general than just for build-sd-transforms, don't you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved back with .mjs change mentioned above.

StyleDictionary.registerAction({
name: 'buildDocJson',
do: function (dictionary, config) {
Expand Down
2 changes: 1 addition & 1 deletion packages/dialtone-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
0 common/themes/config.js → packages/dialtone-tokens/themes/config.js
View file
Open in desktop
File renamed without changes.
0 common/themes/dp-dark.js → packages/dialtone-tokens/themes/dp-dark.js
View file
Open in desktop
File renamed without changes.
0 common/themes/dp-light.js → packages/dialtone-tokens/themes/dp-light.js
View file
Open in desktop
File renamed without changes.
0 common/themes/expressive-dark.js → ...dialtone-tokens/themes/expressive-dark.js
View file
Open in desktop
File renamed without changes.
0 common/themes/expressive-light.js → ...ialtone-tokens/themes/expressive-light.js
View file
Open in desktop
File renamed without changes.
0 common/themes/expressive-sm-dark.js → ...ltone-tokens/themes/expressive-sm-dark.js
View file
Open in desktop
File renamed without changes.
0 common/themes/expressive-sm-light.js → ...tone-tokens/themes/expressive-sm-light.js
View file
Open in desktop
File renamed without changes.
0 common/themes/tmo-dark.js → packages/dialtone-tokens/themes/tmo-dark.js
View file
Open in desktop
File renamed without changes.
0 common/themes/tmo-light.js → packages/dialtone-tokens/themes/tmo-light.js
View file
Open in desktop
File renamed without changes.
19 changes: 15 additions & 4 deletions packages/dialtone-tokens/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"]
}
18 changes: 9 additions & 9 deletions vite.config.js → packages/dialtone-tokens/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
6 changes: 3 additions & 3 deletions packages/dialtone-vue2/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
6 changes: 3 additions & 3 deletions packages/dialtone-vue3/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
7 changes: 2 additions & 5 deletions project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 0 additions & 16 deletions tsconfig.json
View file
Open in desktop

This file was deleted.

Loading