feat: added prettier and eslint support (#25)

Author: artembelik

.commitlintrc.cjs .commitlintrc.js

@@ -1,4 +1,9 @@
-module.exports = {
+// @ts-check
+
+/**
+ * @type {import('@commitlint/types').UserConfig}
+ */
+const config = {
     extends: ['@commitlint/config-conventional'],
     rules: {
         'type-enum': [
@@ -7,4 +12,6 @@ module.exports = {
             ['feat', 'feature', 'fix', 'refactor', 'docs', 'build', 'test', 'ci', 'chore', 'fonts']
         ]
     }
-};
+};
+
+module.exports = config;

.eslintrc.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+const config = {
+    root: true,
+    env: {
+        es2022: true
+    },
+    ignorePatterns: ['dist', 'node_modules'],
+    extends: ['plugin:prettier/recommended']
+};
+
+module.exports = config;

.github/workflows/actions/build-packages/action.yml

@@ -3,7 +3,6 @@ description: Common setup steps used by our workflows
 runs:
   using: composite
   steps:
-
     - name: Build packages
       shell: bash
       run: .github/workflows/actions/build-packages/entrypoint.sh

.github/workflows/actions/setup-yarn/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version-file: .node-version
+        node-version-file: .nvmrc
 
     - uses: actions/setup-node@v4
       with:

.github/workflows/ci.yml

@@ -17,3 +17,8 @@ jobs:
 
       - name: Build packages
         uses: ./.github/workflows/actions/build-packages
+
+      - name: Linters
+        run: |
+          yarn run prettier:lint
+          yarn run eslint

.gitignore

@@ -7,11 +7,6 @@
 *.launch
 .settings/
 *.sublime-workspace
-/.vscode
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
 /.awcache
 /.angular
 

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn commitlint --config .commitlintrc.cjs --edit ${1}
+yarn commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

.lintstagedrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    '*.{md,yml,json,js}': 'prettier --write',
+    '*.js': 'eslint'
+};

.node-version .nvmrc

@@ -0,0 +1,3 @@
+node_modules/
+/dist
+CHANGELOG.md

.prettierignore

@@ -0,0 +1,22 @@
+// @ts-check
+
+/**
+ * @type {import('prettier').Options}
+ */
+const config = {
+    printWidth: 120,
+    tabWidth: 4,
+    useTabs: false,
+    singleQuote: true,
+    trailingComma: 'none',
+    overrides: [
+        {
+            files: ['*.yml'],
+            options: {
+                tabWidth: 2
+            }
+        }
+    ]
+};
+
+module.exports = config;

.prettierrc.js

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

.vscode/settings.json

@@ -14,14 +14,14 @@ helpful.
 
 Before you submit your pull request (PR) consider the following guidelines:
 
-- Fork Design-tokens into your namespace by using the fork button on github.
-- Make your changes in a new git branch: `git checkout -b my-fix-branch master`
-- Create your bugfix/feature including appropriate tests.
-- Test your changes with our supported browsers.
-- Run unit tests and ensure that all tests pass.
-- Push your branch to GitHub.
-- Create a new pull request from your branch against the angular-components:master
-  branch.
+-   Fork Design-tokens into your namespace by using the fork button on github.
+-   Make your changes in a new git branch: `git checkout -b my-fix-branch master`
+-   Create your bugfix/feature including appropriate tests.
+-   Test your changes with our supported browsers.
+-   Run unit tests and ensure that all tests pass.
+-   Push your branch to GitHub.
+-   Create a new pull request from your branch against the angular-components:master
+    branch.
 
 ## Commit message guidelines
 
@@ -34,10 +34,11 @@ Before you submit your pull request (PR) consider the following guidelines:
   │                          elements|forms|http|language-service|localize|platform-browser|
   │                          platform-browser-dynamic|platform-server|router|service-worker|
   │                          upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|
-  │                          
+  │
   │
   └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
 ```
+
 Each commit message consists of a `type`, `scope` and `subject` (message).  
 The `type` and `subject` are mandatory, the `scope` is optional in some specific
 cases. Format: `<type>(<scope>): <subject>`
@@ -46,17 +47,17 @@ cases. Format: `<type>(<scope>): <subject>`
 
 Must be one of the following:
 
-- **feat**: A new feature
-- **fix**: A bug fix
-- **docs**: Documentation only changes
-- **style**: Changes that do not affect the meaning of the code (white-space,
-  formatting, missing semi-colons, etc)
-- **refactor**: A code change that neither fixes a bug nor adds a feature
-- **test**: Adding missing tests or correcting existing tests
-- **ci**: Changes that affect the CI
-- **build**: Changes that affect the build system like npm scripts or
-  angular-cli related changes
-- **chore**: Other changes that don't modify src or test files
+-   **feat**: A new feature
+-   **fix**: A bug fix
+-   **docs**: Documentation only changes
+-   **style**: Changes that do not affect the meaning of the code (white-space,
+    formatting, missing semi-colons, etc)
+-   **refactor**: A code change that neither fixes a bug nor adds a feature
+-   **test**: Adding missing tests or correcting existing tests
+-   **ci**: Changes that affect the CI
+-   **build**: Changes that affect the build system like npm scripts or
+    angular-cli related changes
+-   **chore**: Other changes that don't modify src or test files
 
 ### Scope
 
@@ -100,7 +101,7 @@ BREAKING CHANGE: The method has been removed.
 Describe reasons.
 ```
 
-##  Code reviews and PRs
+## Code reviews and PRs
 
 ### Open PR
 

CONTRIBUTING.md

@@ -6,7 +6,7 @@
 
 ## How to build a distribution with tokens
 
-- **Clone** this repository;
-- **Install** the packages using: `yarn install`
-- You can **build it** with this command: `yarn run build`
-- Then **find your distribution** in the following folder: `/dist`
+-   **Clone** this repository;
+-   **Install** the packages using: `yarn install`
+-   You can **build it** with this command: `yarn run build`
+-   Then **find your distribution** in the following folder: `/dist`

README.md

@@ -5,10 +5,6 @@
     "author": "",
     "license": "MIT",
     "packageManager": "[email protected]",
-    "engines": {
-        "yarn": "^4.0.0",
-        "node": ">=18.0.0"
-    },
     "keywords": [
         "design-system",
         "design-tokens",
@@ -17,13 +13,17 @@
         "koobiq"
     ],
     "scripts": {
-        "prepare": "husky",
         "prebuild": "rimraf dist/",
         "build:index-common": "yarn run rollup dist/design-tokens/web/js/index.mjs --file dist/design-tokens/web/js/index.cjs --format cjs",
         "build": "node tools/build.js && yarn run build:index-common",
         "stage:commit": "koobiq-cli stage-commit -c \"Design Tokens\"",
         "release:publish:ci-github": "koobiq-cli publish-ci-github",
-        "release:publish:ci-gitlab": "koobiq-cli publish-ci-gitlab"
+        "release:publish:ci-gitlab": "koobiq-cli publish-ci-gitlab",
+        "prettier": "prettier '**/*.{md,yml,json,js}'",
+        "prettier:lint": "yarn run prettier --check",
+        "prettier:fix": "yarn run prettier --list-different --write",
+        "eslint": "eslint .",
+        "eslint:fix": "yarn run eslint --fix"
     },
     "publishConfig": {
         "access": "public"
@@ -40,8 +40,13 @@
         "@koobiq/cli": "17.0.0-rc.5",
         "@types/fs-extra": "^11.0.4",
         "@types/node": "^18.19.31",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
         "fs-extra": "^11.2.0",
         "husky": "^9.0.11",
+        "lint-staged": "^15.2.7",
+        "prettier": "^3.3.3",
         "rimraf": "^5.0.5",
         "rollup": "^4.17.2",
         "style-dictionary": "^3.9.2"

package.json

@@ -7,14 +7,13 @@ visual system for UI development and brand consistency.
 Koobiq design tokens store the visual design attributes that define the
 visual language, including color, typography, and spacing we use.
 
-
 Design tokens are key-value pairs. For example:
+
 ```
 Key: value;
 $card-dark-success-background: #276211;
 ```
-- The key name defines the usage or how to apply the value to a specific context, such as using text on a light background
-- The key stores visual design attributes
-- The key replaces hard-coded values, such as hex values for color or pixel values for spacing
-
 
+-   The key name defines the usage or how to apply the value to a specific context, such as using text on a light background
+-   The key stores visual design attributes
+-   The key replaces hard-coded values, such as hex values for color or pixel values for spacing

packages/design-tokens/README.md

@@ -1,11 +1,11 @@
 # Tokens Builder
 
 ## Overview
+
 Tokens builder is a configuration script that utilizes Style Dictionary,
-a design-token platform for creating and maintaining consistent design tokens across various platforms. 
+a design-token platform for creating and maintaining consistent design tokens across various platforms.
 
 Overall, this script orchestrates the generation of design tokens by applying custom transformations,
 filters, and formats to the specified theme configuration for multiple platforms,
 facilitating a streamlined design token workflow compatible with
 various output formats like SCSS, CSS, and TypeScript.
-

packages/tokens-builder/README.md

@@ -30,7 +30,6 @@ require('./formats/variables')(StyleDictionary);
 console.log('Build started...');
 console.log('==============================================');
 
-
 module.exports = (themeConfig) => {
     StyleDictionary.registerFileHeader({
         name: 'customHeader',
@@ -40,14 +39,14 @@ module.exports = (themeConfig) => {
 
     if (!themeConfig || themeConfig.length === 0) {
         console.error('Build Failed. Please set ThemeConfig, for example: ', {
-                name: 'default-theme',
-                buildPath: [
-                    `design-tokens/tokens/properties/**/*.json5`,
-                    `design-tokens/tokens/components/**/*.json5`
-                ],
-                outputPath: 'design-tokens/'
-            }
-        )
+            name: 'default-theme',
+            // prettier-ignore
+            buildPath: [
+                `design-tokens/tokens/properties/**/*.json5`,
+                `design-tokens/tokens/components/**/*.json5`
+            ],
+            outputPath: 'design-tokens/'
+        });
         process.exit(0);
     }
 
@@ -63,4 +62,4 @@ module.exports = (themeConfig) => {
 
     console.log('\n==============================================');
     console.log('\nBuild completed!');
-}
+};

packages/tokens-builder/build.js

@@ -13,14 +13,14 @@ const filterObj = {
 function filterOptions(platforms) {
     const platformObj = {};
 
-    platforms.map(p => Object.assign(platformObj, p));
+    platforms.map((p) => Object.assign(platformObj, p));
 
     Object.keys(platformObj).forEach((p) => {
-        platformObj[p].files = platformObj[p].files.map(f => ({
+        platformObj[p].files = platformObj[p].files.map((f) => ({
             ...f,
             ...filterObj,
             options: {
-                ...f.options ?? {},
+                ...(f.options ?? {}),
                 ...filterObj.options
             }
         }));
@@ -30,7 +30,7 @@ function filterOptions(platforms) {
 }
 
 function getSources(theme) {
-    return theme.buildPath.map(pathName => {
+    return theme.buildPath.map((pathName) => {
         if (pathName.startsWith('@')) {
             return join('node_modules', pathName);
         }
@@ -48,7 +48,6 @@ function getConfigs(theme) {
 }
 
 module.exports = (theme) => {
-
     return {
         source: [...getSources(theme)],
         platforms: getConfigs(theme)

packages/tokens-builder/configs/index.js

@@ -13,4 +13,3 @@ module.exports = {
         ]
     }
 };
-

packages/tokens-builder/configs/js.js

@@ -1,9 +1,6 @@
 module.exports = (StyleDictionary) => {
-
     StyleDictionary.registerFilter({
         name: 'color',
-        matcher: (prop) => !prop.attributes.palette && 
-            !prop.attributes.typography && 
-            !prop.attributes['md-typography']
-    })
-}
+        matcher: (prop) => !prop.attributes.palette && !prop.attributes.typography && !prop.attributes['md-typography']
+    });
+};