ci: continuous integration and publish

Author: pczeglik-iohk

.eslintrc.js

@@ -26,6 +26,10 @@ module.exports = {
     // Fixes eslint not being able to detect react version
     react: { pragma: 'React', fragment: 'Fragment', version: 'detect' },
   },
+  env: {
+    browser: true,
+    node: true,
+  },
   rules: {
     'max-params': ['error', 3],
     'prettier/prettier': 'error',
@@ -87,5 +91,11 @@ module.exports = {
         'react/no-multi-comp': ['off'],
       },
     },
+    {
+      files: ['**/*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': ['off'],
+      },
+    },
   ],
 };

.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+name: 'Continuous Integration'
+
+on:
+  pull_request:
+
+permissions:
+  contents: write
+  packages: write
+  actions: read
+  pull-requests: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  verify:
+    name: Verify
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Collect Workflow Telemetry
+        uses: catchpoint/workflow-telemetry-action@v2
+        with:
+          comment_on_pr: false
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Node modules cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable --inline-builds
+
+      - name: Format
+        run: yarn format-check
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Typecheck
+        run: yarn type-check

.github/workflows/publish.yml

@@ -0,0 +1,63 @@
+name: 'Publish'
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  packages: write
+  actions: read
+  pull-requests: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    name: Publish
+    if: github.event_name == 'push' && !startsWith(github.event.head_commit.message, 'chore(release):')
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Collect Workflow Telemetry
+        uses: catchpoint/workflow-telemetry-action@v2
+        with:
+          comment_on_pr: false
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Node modules cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable --inline-builds
+
+      - name: Format
+        run: yarn format-check
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Typecheck
+        run: yarn type-check
+
+      - name: Build
+        run: yarn build
+
+      - name: Release npm package
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: npx semantic-release

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

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

.nvmrc

@@ -0,0 +1 @@
+v20.12.2

.prettierignore

@@ -2,3 +2,4 @@ dist
 node_modules
 .yarn
 src/icons/**
+CHANGELOG.md

.releaserc

@@ -0,0 +1,29 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/github",
+      {
+        "successComment": false,
+        "failComment": false,
+        "labels": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version}"
+      }
+    ]
+  ]
+}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

lint-staged.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  // Type check TypeScript files
+  '**/*.(ts|tsx)': () => 'yarn type-check',
+
+  // Lint then format TypeScript and JavaScript files
+  '**/*.(ts|tsx|js)': filenames => [
+    `yarn lint:fix ${filenames.join(' ')}`,
+    `yarn format ${filenames.join(' ')}`,
+  ],
+
+  // Format MarkDown and JSON
+  '**/*.(md|json)': filenames => `yarn format ${filenames.join(' ')}`,
+};

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@lace/ui",
+  "name": "@input-output-hk/lace-ui-toolkit",
   "version": "0.1.0",
   "description": "Lace UI Toolkit",
   "homepage": "https://github.com/input-output-hk/lace-ui-toolkit/blob/main/README.md",
@@ -10,6 +10,12 @@
     "type": "git",
     "url": "git+https://github.com/input-output-hk/lace-ui-toolkit.git"
   },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json"
+  ],
   "license": "Apache-2.0",
   "author": "IOHK",
   "main": "dist/index.js",
@@ -22,15 +28,18 @@
     "cleanup": "yarn exec rm -rf dist node_modules",
     "format": "yarn prettier --write .",
     "format-check": "yarn prettier --check .",
-    "lint": "yarn eslint --ext .ts,.tsx .",
-    "lint:fix": "yarn eslint --ext .ts,.tsx --fix .",
+    "lint": "yarn eslint --ext .ts,.tsx,.js,.jsx .",
+    "lint:fix": "yarn eslint --ext .ts,.tsx,.js,.jsx --fix .",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider; start-storybook -p 6006",
     "test": "echo \"@lace/ui: no test command specified\"",
     "test-storybook": "test-storybook",
     "test-storybook:ci": "NODE_OPTIONS=--openssl-legacy-provider; export STORYBOOK_TEST=1; concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && http-server storybook-static --port 6006\" \"wait-on http://127.0.0.1:6006/ && yarn test-storybook\"",
     "type-check": "tsc --noEmit",
     "watch": "yarn build --watch"
   },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-avatar": "^1.0.2",
@@ -64,10 +73,14 @@
   "devDependencies": {
     "@babel/cli": "^7.22.10",
     "@babel/core": "^7.21.0",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
     "@rollup/plugin-commonjs": "20.0.0",
     "@rollup/plugin-image": "2.1.1",
     "@rollup/plugin-node-resolve": "13.0.4",
     "@rollup/plugin-typescript": "^11.1.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -100,11 +113,14 @@
     "eslint-plugin-react": "7.31.8",
     "eslint-plugin-storybook": "^0.6.11",
     "http-server": "^14.1.1",
+    "husky": "^8.0.3",
     "jest-image-snapshot": "^6.1.0",
+    "lint-staged": "^13.2.2",
     "prettier": "3.2.5",
     "rollup": "2.56.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "semantic-release": "^21.0.2",
     "storybook": "7.6.7",
     "storybook-addon-pseudo-states": "^1.15.2",
     "typescript": "^4.9.5",

src/design-system/cards/create-card-variant-component.util.tsx

@@ -9,6 +9,5 @@ export type VariantCardProps = Omit<CardProps, 'scheme'>;
 
 export const createCardVariantComponent =
   <Props extends VariantCardProps>(scheme: Scheme) =>
+  // eslint-disable-next-line react/display-name
   (props: Readonly<Props>) => <BaseCard {...props} scheme={scheme} />;
-
-createCardVariantComponent.displayName = 'createCardVariantComponent';

src/design-system/index.ts

@@ -27,6 +27,7 @@ export { Metadata, MetadataLink } from './metadata';
 export { PasswordBox } from './password-box';
 export { TextLink } from './text-link';
 export * as ProfileDropdown from './profile-dropdown';
+export type { AccountData } from './profile-dropdown';
 export { TextBox } from './text-box';
 export { Variants, Section, colorSchemaDecorator } from './decorators';
 export * as EducationalCard from './educational-card';

src/design-system/select/select.stories.tsx

@@ -318,6 +318,7 @@ const getOptionTestId = ({
 }>): string =>
   `theme_${colorScheme}-select-${variant}-align_${align}-${optionValue}`;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Interactions: ComponentStory<any> = (): JSX.Element => {
   const { lightThemePortalContainer, darkThemePortalContainer } =
     usePortalContainer();

src/design-system/table/table-row.component.tsx

@@ -92,6 +92,7 @@ export const Row = <T extends object>({
           data-testid={`${dataTestId}-list-${cell}`}
         >
           <span className={cx.cellInner}>
+            {/* @ts-expect-error improve */}
             {(typeof cellRenderers?.[cell] === 'function'
               ? cellRenderers[cell]?.({ value: data[cell] })
               : data[cell]) ?? '-'}

src/design-system/text/create-text.util.tsx

@@ -47,6 +47,7 @@ export const createText = <
 }: Readonly<CreateTextArguments<T, W>>): ForwardRefExoticComponent<
   TextProps<W>
 > =>
+  // eslint-disable-next-line react/display-name
   forwardRef<typeof Tag, TextProps<W>>(
     (
       { weight = defaultWeight, color = 'primary', className, ...props },
@@ -65,5 +66,3 @@ export const createText = <
       />
     ),
   );
-
-createText.displayName = 'createText';

tsconfig.eslint.json

@@ -1,4 +1,11 @@
 {
   "extends": "./tsconfig.json",
-  "include": [".eslintrc.js", "src/**/*", "rollup.config.js", ".storybook/**/*"]
+  "include": [
+    ".eslintrc.js",
+    ".storybook/**/*",
+    "commitlint.config.js",
+    "lint-staged.config.js",
+    "rollup.config.js",
+    "src/**/*"
+  ]
 }