diff --git a/.github/workflows/storefront-preview.yml b/.github/workflows/storefront-preview.yml index ce00b0ecd1..aa024be36e 100644 --- a/.github/workflows/storefront-preview.yml +++ b/.github/workflows/storefront-preview.yml @@ -33,5 +33,5 @@ jobs: uses: peter-evans/create-or-update-comment@v3 with: issue-number: ${{ steps.findPr.outputs.pr }} - body: The preview deployment is available at ${{ steps.deploy.outputs.url }} + body: Storefront preview deployment is available at ${{ steps.deploy.outputs.url }} reactions: rocket, eyes diff --git a/README.md b/README.md index 37bd0ed5a6..b799320a01 100644 --- a/README.md +++ b/README.md @@ -1,114 +1,226 @@ +
+
+ + + + Designsystemet logo + +
+

- -

Felles Designsystem + Designsystemet

+
-

This monorepo contains NPM packages and documentation for the Common Designsystem.

+

This is a monorepo containing NPM packages and documentation for the Common design system.

+ + + + + + + + - - - +--- -
-
+### Table of contents + +[About the design system](#about-the-design-system-) + +[Get started with development](#get-started-with-development-) + +[How to contribute](#how-to-contribute-) + +[How to write and structure your code](#how-to-write-and-structure-your-code-) + +[Writing commit messages](#writing-commit-messages-) + +[Publishing NPM packages](#publishing-npm-packages-) + +[Storefront deployment](#storefront-deployment-) + +[Troubleshooting](#troubleshooting-) + +[Contributors](#contributors-) + +--- + +## About the design system πŸ“– + +The Common Designsystem is a collection of important design elements and building blocks that can be used when creating different services. It's like a toolbox that everyone can use to work together and create the best foundation for public services across the country. By using this Designsystem, we aim to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable. + +### NPM packages + +The project currently has 2 NPM packages in production: -See [Storybook](https://digdir.github.io/designsystem/) for overview of available components +#### React component library `@digdir/design-system-react` -## Get started with development ✨ +This is a collection of basic React components like buttons, checkboxes and textareas that can be used on their own, or built into more complex components by combining them. The designsystem will only provide the most basic and general components. Use them as building blocks in your own projects. -### 1. Install Node and Yarn +#### Design Tokens `@digdir/design-system-tokens` -Make sure `node` and `yarn` is installed. You can do this by running: +Design tokens contain UI data like colors, fonts and spacing for styling and building user interfaces on the web. -`node --version && yarn --version` +### Storefront (Coming soon!) + +Here you will find everything you need to start using the designsystem. + +--- + +## Get started with development πŸ’» + +### 1. Install Node 16+ and Yarn 3 + +Make sure `node` and `yarn` is installed by running: `node --version && yarn --version` + +Check installation instructions for your operating system to install them. ### 2. Install dependencies -_(run command from root of the project)_ `yarn install` -### 3. Run build +Run command from root of the project. -_(This is needed to make sure dependencies between local packages are available. You only need to run this once.)_ +### 3. Build packages `yarn build` -### 4. Start storybook +This is required to make sure dependencies between local packages are available. You only need to run this once. -Serve Storybook on localhost: +### 4. Start local development servers -`yarn storybook` +`yarn storybook | storefront` +You can now start developing for storybook or the storefront. _Problems? See [Troubleshooting](#troubleshooting-)._ --- -## Commit ✍️ +## How to contribute 🫢 + +If you have any feedback regarding the design system, please feel free to create an issue in this repository. + +Any feedback is greatly appreciated! πŸ™ + +Do you want to get more involved? Send us an email at `designsystem@digdir.no`. + +### Contribute code through pull requests + +The main branch of this repo is locked, so all code has to come through pull requests. + +To ensure that a pull request can be successfully merged, the following criteria must be met: + +- A code owner has to approve the pull request. +- Commit messages have to be in line with the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. +- There has to be no linting or formatting errors in your code. + +--- + +## How to write and structure your code πŸ“ + +To provide a pleasant and consistent developer experience for everyone involved in this project, we have established guidelines and coding standards for writing code. + +### Generel guidelines + +The general guidelines apply for all code that is contributed. + +#### Styling with CSS Modules + +Styling should primarily be implemented in CSS files using CSS variables. To create a CSS module that prevents class collisions with other modules, the CSS files should have a `.module.css` extension. This naming convention ensures encapsulation and maintains the scope of classes within the respective CSS module. The CSS class wil look something like this in the final HTML output: `Title__2C7KE`. + +For naming your CSS classes, camelCase is required. This naming convention involves starting each word with a lowercase letter and capitalizing the first letter of subsequent words, without any spaces or special characters. Using camelCase ensures consistency and readability in your CSS class names. Example: `.mainTitle`. + +As our design tool, we utilize Figma and extract tokens directly from it for code usage. These tokens are defined in the Design Tokens NPM package. It is encouraged to leverage as many tokens from this package as possible and minimize the creation of custom local variables. The tokens are intentionally designed to be highly generic and reusable, promoting consistency across the codebase. + +#### Code formatting with Prettier + +In this project, we employ [Prettier](https://prettier.io/) for code formatting. It is advisable to configure your code editor to automatically format files upon saving. This practice will prove beneficial when merging your changes into the main branch. It's worth noting that we enforce rigorous code checks in pull requests, emphasizing the importance of consistent code formatting. + +#### Linting with ESLint and Stylelint + +TypeScript and CSS files have been configured with linting, which means that the project will scan these files for potential problems or issues. Linting helps maintain code quality by detecting errors, enforcing coding conventions, and promoting best practices. You have to fix all errors and warnings before the code can be merged into the main branch. + +#### Use of TypeScript files + +In code contributions for this project, we do not permit JavaScript files. The use of TypeScript ensures the safety and testability of our code. + +--- + +## Writing commit messages ✍️ + This monoropo uses Lerna with the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) -specification in order to create nice and readable changelogs. +specification in order to create nice and readable changelogs. The [Semantic Versioning 2.0](https://semver.org/) specification is used for versioning. -In order for commits to show up in the changelog, you have to add the following keywords: -* Start the commit with `fix:` to trigger a patch (0.0.x) version. -* Start the commit with `feat:` to trigger a minor (0.x.0) version. -* Start the description / footer of a commit with `BREAKING-CHANGE:` to trigger a major (x.0.0) version. You also have to add either `fix:` or `feat:` to the main body of the commit when using `BREAKING-CHANGE:`. +To include commits in the changelog, please ensure that you include the following keywords: -Do this when the changes directly effect the built files / components used by the end user. -See the examples below to learn how to use the correct syntax. +- Start the commit with `fix:` to trigger a patch (0.0.x) version. +- Start the commit with `feat:` to trigger a minor (0.x.0) version. +- Start the description / footer of a commit with `BREAKING-CHANGE:` to trigger a major (x.0.0) version. You also have to add either `fix:` or `feat:` to the main body of the commit when using `BREAKING-CHANGE:`. Do this when the changes directly effect the built files / components used by the end user. + See the examples further below to learn how to use the correct syntax. ### Scope -You can scope your commits by adding a keyword in parentheses with what you are working on. -This makes the changelog and commit messages more specific and readable. + +To make commit messages and the changelog more specific and readable, you have the option to scope your commits by adding a keyword in parentheses that indicates the area or aspect you are working on. This practice helps provide clearer context and organization to the commit history. Examples: -* Adding a new component: `feat(button): added a new button component`. -* Adding a new icon: `feat(icons): added a new chevron icon`. -* Adding documentation for icons: `docs(icons): added new documentation for the icons package`. + +- Adding a new component: `feat(button): added a new button component`. +- Adding a new icon: `feat(icons): added a new chevron icon`. +- Adding documentation for icons: `docs(icons): added new documentation for the icons package`. #### Components -When you are committing changes to a component, try to ***always*** use scopes with the name of the component. -This allows us to show changelogs for each individual component in the designsystem. + +When you are committing changes to a component, try to **_always_** use scopes with the name of the component. This will make the changelogs very consistant and readable. ### When to use what keywords +It is crucial to understand the distinctions between the two sections mentioned below. If you wish for commit messages to be included in the changelog, please use `fix:`, `feat:`, or `BREAKING-CHANGE:` as keywords. These keywords indicate changes that impact the users of our NPM packages and are therefore significant to highlight. For any other types of changes that do not directly affect the end user, please utilize a different keyword. If you are uncertain about which keyword to use and the changes are non-user-facing, you can use `chore:` as a default keyword. + #### Added to changelog -* `fix:` Patches a bug in the codebase. Nothing new is introduced in terms of functionality. -* `feat:` Introduces a new feature to the codebase. A new component is an often use case. -* `BREAKING-CHANGE:` Introduces a breaking change to existing functionality. - * Examples: - * A component is removed from a package - * Functionality of a component is changed in a way that requires the end user to perform an action + +- `fix:` Patches a bug in the codebase. Nothing new is introduced in terms of functionality. +- `feat:` Introduces a new feature to the codebase. A new component is an often use case. +- `BREAKING-CHANGE:` Introduces a breaking change to existing functionality. + - **Examples:** + - A component is removed from a package + - Functionality of a component is changed in a way that requires the end user to perform an action #### Not added to changelog -* `build:` Changes that affect the build system or external dependencies (example scopes: rollup, stylelint, npm) -* `chore:` Other changes that don't modify src or test files -* `docs:` Documentation only changes -* `style:` Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) -* `test:` Adding missing tests or correcting existing tests -* `refactor:` A code change that neither fixes a bug nor adds a feature -* `revert:` Reverts a previous commit -* `perf:` A code change that improves performance + +- `build:` Changes that affect the build system or external dependencies (example scopes: rollup, stylelint, npm) +- `chore:` Other changes that don't modify src or test files +- `docs:` Documentation only changes +- `style:` Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) +- `test:` Adding missing tests or correcting existing tests +- `refactor:` A code change that neither fixes a bug nor adds a feature +- `revert:` Reverts a previous commit +- `perf:` A code change that improves performance ### Commit examples Added some new documentation: + ``` docs: added a new documentation file for developers ``` Fixed something related to the button component: + ``` fix(button): fixed an issue where the button component didn't show up correctly on mobile ``` -Fixed something related to the button component that also requires an action from the end user: +To indicate a fix related to the button component that requires action from the end user and is a breaking change: + ``` fix(button): changed name of font-size prop to size @@ -117,71 +229,86 @@ BREAKING CHANGE: changed the name of the font-size prop to size to make it more --- -## Setup NPM account πŸ‘· -To release new versions of the packages, you have to setup your NPM account. -If you want to be able to release new versions, follow these steps: +## Publishing NPM packages πŸš€ + +The following documentation outlines the process for releasing new versions of the NPM packages. Please note that in order to release, you must have an NPM account that is connected to the Digdir organization on NPM. Make sure you are in the `main` branch before proceeding further. Publishing from other branches may lead to issues with the changelog. + +### 1. Build distribution files + +`yarn build` -### 1. Create a new NPM account -If you haven't already created a NPM account, do so by going to [NPM.com](https://www.npmjs.com/). +Build distribution files for all the packages. Make sure they all run successfully before proceeding to next step. -### 2. Setup two factor authentication with an authenticator app -Follow [the steps on NPM.com to setup two factor authentication](https://docs.npmjs.com/about-two-factor-authentication). -When publishing, you will be asked to enter a one-time password. -You can get this using an authenticator app on your phone, which you can setup through your profile on [npmjs.com](https://www.npmjs.com/). +### 2. Prepare new version -### 3. Ask to be added to the Digdir organisation on NPM -Contact one of the people below to have your account added to the NPM Github organisation: -* Øyvind Thune (oyvind.thune@digdir.no, Teams, or Slack) +`yarn lerna:version` +This step does a few things: -### 4. Login to you account -In the terminal that you want to run the publish commands from, run the following command to login to NPM: +- Suggests a new version based on the latest commits. Make sure the version is correct before clicking enter. A user error with a commit message might suggest a version that is wrong. +- Creates a new tag with the latest version number. +- Commits the changes. +- Pushes the changes to github. -`npm login` +### 3. Publish to NPM +`yarn lerna:publish` -## Release a new version πŸš€ -Follow these steps if you want to release a new version of the packages with Lerna. -Make sure you are in the ***main*** branch when doing so, to ensure the changelogs are generated correctly. +Make sure you are logged in to your NPM account from the terminal you are trying to publish from. -### 1. Build distribution files -Build distribution files for all the packages. Make sure they all run successfully before proceeding to next step. +`npm whoami` wil check if you are logged in. -`yarn build` +Your account also has to be added to the Digdir organisation on NPM. +### 4. Paste the latest changelog entry into the design system Slack channel -### 2. Prepare new version -This suggests new versions (click enter), creates a new tag and commit with the changes and pushes them to git. -The new version-numbers for the packages are automatically created based on the commit messages. -Only non-private packages will be handled (package.json). +You can copy markdown from the changelog in storybook to get nice styling and commit links. -`yarn lerna:version` +Please ensure that the appearance closely matches the image below. Consistency plays a vital role when interacting with our end users. +![te](https://i.imgur.com/Uw0qA1O.png) -### 3. Publish -Publish the packages to NPM. Make sure you are logged in to your NPM account from the terminal you are trying to publish from. -Your account also has to be added to the Digdir organisation on NPM. +--- -`yarn lerna:publish` +## Storefront deployment πŸš€ + +The storefront is configured to deploy automatically upon merging changes into the main branch. +If any changes are detected in the `/storefront` folder, links to the preview deployments will be automatically added as comments in the pull requests. This convenient feature enables easy access to preview deployments for review and testing purposes directly within the pull request context. -## Styling 🎨 -Styling should primarily be done in scss files using css variables. The scss files should end with `.module.scss`, so unique classnames will be generated. This ensures we will not run into naming collision issues with classnames. +### Testing the storefront in the preview deployment -We are using Figma as our design tool, and we are extracting tokens directly from Figma that can be used in code. These tokens are defined in the [figma-design-tokens repository](https://github.com/Altinn/figma-design-tokens). New components should ideally be using design tokens from there to define their layout. Before work is started on the component, you should discuss with the UX group first, because they need to define the tokens for the components. +Open the 5 layout files to make sure they all work: +- Navigate to `/`. +- Navigate to `/grunnleggende`. +- Navigate to `/grunnleggende/introduksjon/om-designsystemet`. +- Navigate to `/god-praksis`. +- Navigate to `/god-praksis/brukerinnsikt/felles-innsiktsbase`. -## Testing πŸͺ› -`yarn test` +Also test the new content or functionalty that you introduced in your changes. +--- ## Troubleshooting πŸ” -### Yarn storybook doesn't work -If `yarn storybook` gives you an error message, try `yarn storybook:clean`. This will run Storybook without manager cache. -Storybook can sometimes fail if the node_modules folder has recently been deleted. +### Storybook doesn't work? + +If `yarn storybook` gives you an error message, try `yarn storybook:clean`. This will run Storybook without manager cache. +Storybook sometimes fails to launch if the node_modules folder have been deleted recently. + +### Storybook error in production? -### Error in production? -If the development and production environments get out of sync, you can build the storybook documentation locally to debug: +If the development and production environments get out of sync, you can build the storybook documentation locally for debugging purposes: `yarn build:docs` + +--- + +## Contributors πŸ’ͺ + +We are fortunate to have an awesome group of individuals who contribute to the design system. + + + + diff --git a/assets/img/logo-negative.svg b/assets/img/logo-negative.svg new file mode 100644 index 0000000000..2da7c94c67 --- /dev/null +++ b/assets/img/logo-negative.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/logo-positive.svg b/assets/img/logo-positive.svg index 80314c2689..d28fc04096 100644 --- a/assets/img/logo-positive.svg +++ b/assets/img/logo-positive.svg @@ -1,24 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/package.json b/package.json index 379c03f746..089c9a5a75 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,11 @@ "lint:all:fix": "yarn run lint:all --fix", "lint-style": "stylelint \"**/*.css\"", "lint-style:fix": "yarn run lint-style --fix", - "pack:react": "yarn workspace @digdir/design-system-react pack" + "pack:react": "yarn workspace @digdir/design-system-react pack", + "generate-component-storefront": "ts-node ./scripts/generate-component/storefront.ts", + "gcsf": "ts-node ./scripts/generate-component/storefront.ts", + "generate-component-react": "ts-node ./scripts/generate-component/react.ts", + "gcr": "ts-node ./scripts/generate-component/react.ts" }, "devDependencies": { "@altinn/figma-design-tokens": "^6.0.1", @@ -102,6 +106,7 @@ "stylelint-prettier": "^3.0.0", "terser": "^5.16.0", "ts-jest": "^29.1.0", + "ts-node": "^10.9.1", "tslib": "^2.4.1", "typescript": "^4.9.5", "typescript-plugin-css-modules": "^5.0.0" diff --git a/packages/tokens/package.json b/packages/tokens/package.json index dae358b529..2493538125 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -17,7 +17,6 @@ "devDependencies": { "@tokens-studio/sd-transforms": "^0.8.5", "change-case": "^4.1.2", - "style-dictionary": "^3.7.2", - "ts-node": "^10.9.1" + "style-dictionary": "^3.7.2" } } diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json index e3e26670fd..4082f16a5d 100644 --- a/packages/tokens/tsconfig.json +++ b/packages/tokens/tsconfig.json @@ -1,10 +1,3 @@ { - "extends": "../../tsconfig.json", - "ts-node": { - "transpileOnly": true, - "files": true, - "compilerOptions": { - "module": "CommonJS" - } - } + "extends": "../../tsconfig.json" } diff --git a/scripts/generate-component/fileTemplates.ts b/scripts/generate-component/fileTemplates.ts new file mode 100644 index 0000000000..ec4d0274b4 --- /dev/null +++ b/scripts/generate-component/fileTemplates.ts @@ -0,0 +1,134 @@ +// Content for export file +const exportContent = (componentName: string) => { + return `export { ${componentName} } from './${componentName}'; +export type { ${componentName}Props } from './${componentName}'; +`; +}; + +// Content for tsx file +const mainContent = ( + componentName: string, +) => `import type { HTMLAttributes } from 'react'; +import React, { forwardRef } from 'react'; +import cn from 'classnames'; + +import classes from './${componentName}.module.css'; + +export type ${componentName}Props = { + /** Description of what myProp does in the component */ + myProp?: boolean; +} & HTMLAttributes; + +export const ${componentName} = forwardRef( + ({ myProp = false, children, ...rest }, ref) => { + return ( +
+ {children} +
+ ); + }, +); +`; +const cssContent = () => `.myClass { + color: red; +} +`; + +const storyContent = (componentName: string) => { + return `import React from 'react'; +import type { Meta, StoryFn, StoryObj } from '@storybook/react'; + +import { ${componentName} } from '.'; + +type Story = StoryObj; + +export default { + title: 'Kjernekomponenter/${componentName}', + component: ${componentName}, + parameters: { + status: { + type: 'beta', + url: 'http://www.url.com/status', + }, + }, +} as Meta; + +// Simple story +// First story is the one displayed by and used for +export const Preview: Story = { + args: { + children: 'You created the ${componentName} component!', + myProp: false, // we set this so "boolean" is set in props table + }, +}; + +// Function story +// Use this story for listing our different variants, patterns with other components or examples usage with useState +export const Composed: StoryFn = () => ( + <> + <${componentName} myProp>I + <${componentName}>am + <${componentName} myProp>stacked + +); +`; +}; + +const mdxContent = (componentName: string) => { + return `import { Meta, Canvas, Story, Controls, Primary } from '@storybook/blocks'; +import { Information } from '../../../../../docs-components'; +import * as ${componentName}Stories from './${componentName}.stories'; + + + +# ${componentName} + + + +Description of the ${componentName} component. + + + + +## Bruk + + + +\`\`\`tsx +import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din. +import { ${componentName} } from '@digdir/design-system-react'; + +<${componentName}>You are using the ${componentName} component!; +\`\`\` + +## Composed + + +`; +}; + +const testContent = (componentName: string) => `import React from 'react'; +import { render, screen } from '@testing-library/react'; + +import { ${componentName} } from './${componentName}'; + +describe('${componentName}', () => { + test('myProp should add myClass', (): void => { + render(<${componentName} myProp>test text); + expect(screen.getByText('test text')).toHaveClass('myClass'); + }); +}); +`; + +export { + exportContent, + mainContent, + cssContent, + storyContent, + mdxContent, + testContent, +}; diff --git a/scripts/generate-component/message.ts b/scripts/generate-component/message.ts new file mode 100644 index 0000000000..cf2e688214 --- /dev/null +++ b/scripts/generate-component/message.ts @@ -0,0 +1,27 @@ +export const consoleMessage = (text: string) => { + console.log(' '); + console.log( + '======================================================================================', + ); + console.log( + '| |', + ); + console.log('| ' + text + generateSpaces(82 - text.length) + '|'); + console.log( + '| |', + ); + console.log( + '======================================================================================', + ); + console.log(' '); +}; + +const generateSpaces = (size: number) => { + if (typeof size !== 'number' || size < 0) { + throw new Error( + 'Invalid size argument. Please provide a non-negative number.', + ); + } + + return ' '.repeat(size); +}; diff --git a/scripts/generate-component/react.ts b/scripts/generate-component/react.ts new file mode 100644 index 0000000000..061fcdde97 --- /dev/null +++ b/scripts/generate-component/react.ts @@ -0,0 +1,67 @@ +const componentName = process.argv[2]; +const componentPath = './packages/react/src/components/'; +import { mkdir, writeFile } from 'fs/promises'; + +import { consoleMessage } from './message'; +import { + mainContent, + exportContent, + cssContent, + storyContent, + mdxContent, + testContent, +} from './fileTemplates'; + +(async () => { + if (componentName === undefined) { + consoleMessage('Missing argument: Name of component'); + return; + } + + // Creates the component folder + await mkdir(`${componentPath}/${componentName}`).catch(console.error); + + // Creates the main logic file + await writeFile( + `${componentPath}/${componentName}/${componentName}.tsx`, + mainContent(componentName), + ); + + // Creates the CSS file + await writeFile( + `${componentPath}/${componentName}/${componentName}.module.css`, + cssContent(), + ); + + // Creates the story file + await writeFile( + `${componentPath}/${componentName}/${componentName}.stories.tsx`, + storyContent(componentName), + ); + + // Creates the mdx file + await writeFile( + `${componentPath}/${componentName}/${componentName}.mdx`, + mdxContent(componentName), + ); + + // Creates the mdx file + await writeFile( + `${componentPath}/${componentName}/${componentName}.test.tsx`, + testContent(componentName), + ); + + // Creates the export file + await writeFile( + `${componentPath}/${componentName}/index.ts`, + exportContent(componentName), + ); + + consoleMessage( + 'The ' + + componentName + + ' component in @digdir/design-system-react was successfully created.', + ); +})().catch((e) => { + console.log(e); +}); diff --git a/scripts/generate-component/storefront.ts b/scripts/generate-component/storefront.ts new file mode 100644 index 0000000000..609c71e112 --- /dev/null +++ b/scripts/generate-component/storefront.ts @@ -0,0 +1,42 @@ +const componentName = process.argv[2]; +const componentPath = './storefront/components/'; +import { mkdir, writeFile } from 'fs/promises'; + +import { mainContent, exportContent, cssContent } from './fileTemplates'; +import { consoleMessage } from './message'; + +(async () => { + if (componentName === undefined) { + consoleMessage('Missing argument: Name of component'); + return; + } + + // Creates the component folder + await mkdir(`${componentPath}/${componentName}`).catch(console.error); + + // Creates the main logic file + await writeFile( + `${componentPath}/${componentName}/${componentName}.tsx`, + mainContent(componentName), + ); + + // Creates the CSS file + await writeFile( + `${componentPath}/${componentName}/${componentName}.module.css`, + cssContent(), + ); + + // Creates the export file + await writeFile( + `${componentPath}/${componentName}/index.ts`, + exportContent(componentName), + ); + + consoleMessage( + 'The ' + + componentName + + ' component for the Storefront was successfully created.', + ); +})().catch((e) => { + console.log(e); +}); diff --git a/tsconfig.json b/tsconfig.json index a6ae1f566b..358db46575 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,5 +25,12 @@ "resolveJsonModule": true, "target": "es2016", "plugins": [{ "name": "typescript-plugin-css-modules" }] + }, + "ts-node": { + "transpileOnly": true, + "files": true, + "compilerOptions": { + "module": "CommonJS" + } } } diff --git a/yarn.lock b/yarn.lock index 50204d9390..dbef9687fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2704,7 +2704,6 @@ __metadata: "@tokens-studio/sd-transforms": ^0.8.5 change-case: ^4.1.2 style-dictionary: ^3.7.2 - ts-node: ^10.9.1 languageName: unknown linkType: soft @@ -19793,6 +19792,7 @@ __metadata: stylelint-prettier: ^3.0.0 terser: ^5.16.0 ts-jest: ^29.1.0 + ts-node: ^10.9.1 tslib: ^2.4.1 typescript: ^4.9.5 typescript-plugin-css-modules: ^5.0.0