Add components package

Author: ivy-lli

.gitignore

@@ -5,6 +5,9 @@ node_modules
 lib
 dist
 src-gen
+storybook-static
+eslint.xml
+stats.html
 
 # misc
 .DS_Store
@@ -14,7 +17,5 @@ src-gen
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 tsconfig.*tsbuildinfo

.prettierrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "endOfLine": "lf",
+  "printWidth": 140,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": ["*.spec.ts", "*.spec.tsx"],
+      "options": {
+        "printWidth": 180
+      }
+    },
+    {
+      "files": ["*.json", "*.yml"],
+      "options": {
+        "printWidth": 100
+      }
+    }
+  ]
+}

build/Jenkinsfile

@@ -10,17 +10,25 @@ pipeline {
   }
 
   stages {
-    stage('Icons') {
+    stage('Build') {
       steps {
         script {
           catchError(buildResult: 'UNSTABLE', stageResult: 'UNSTABLE') {
             docker.build('node', '-f build/Dockerfile .').inside {
-              sh 'npm install'
-              sh 'npm run build'
+              sh 'npm run ci'
             }
           }
           archiveArtifacts artifacts: '**/src-gen/**', allowEmptyArchive: true
-          currentBuild.description = "<a href=${BUILD_URL}artifact/packages/icons/src-gen/ivy-icons.html>&raquo; Icons</a>"
+          archiveArtifacts artifacts: '**/storybook-static/**', allowEmptyArchive: true
+          currentBuild.description = "<a href=${BUILD_URL}artifact/packages/icons/src-gen/ivy-icons.html>&raquo; Icons</a><br>" + 
+            "<a href=${BUILD_URL}artifact/packages/components/storybook-static/index.html>&raquo; Components</a>"
+
+          withChecks('ESLint') {
+            recordIssues enabledForFailure: true, publishAllIssues: true, aggregatingResults: true, tools: [esLint(pattern: 'packages/**/eslint.xml,integration/**/eslint.xml', skipSymbolicLinks: true)], qualityGates: [[threshold: 1, type: 'TOTAL', unstable: true]]
+          }
+          withChecks('Tests') {
+            junit testDataPublishers: [[$class: 'StabilityTestDataPublisher']], testResults: 'packages/**/report.xml'
+          }
         }
       }
     }

build/unpublish-npm.sh

@@ -2,4 +2,5 @@
 
 REGISTRY="https://npmjs-registry.ivyteam.ch/"
 
-npm unpublish "@axonivy/client-icons@${1}" --registry $REGISTRY
+npm unpublish "@axonivy/ui-icons@${1}" --registry $REGISTRY
+npm unpublish "@axonivy/ui-components@${1}" --registry $REGISTRY

client-components.code-workspace

@@ -0,0 +1,61 @@
+{
+  "extensions": {
+    "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "zixuanchen.vitest-explorer", "ms-playwright.playwright"]
+  },
+  "folders": [
+    {
+      "name": "root",
+      "path": "."
+    },
+    {
+      "name": "package/components",
+      "path": "./packages/components"
+    },
+    {
+      "name": "package/icons",
+      "path": "./packages/icons"
+    },
+  ],
+  "settings": {
+    "task.autoDetect": "off",
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "vitest.commandLine": "npm run test",
+    "vitest.disabledWorkspaceFolders": ["root", "packages/icons"],
+    "vitest.include": ["packages/components/src/**/*.test.{ts,tsx}"],
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+    "editor.insertSpaces": true,
+    "eslint.validate": ["javascript", "typescript"],
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/lib": true
+    },
+    "[css]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[markdown]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[yaml]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "testing.automaticallyOpenPeekView": "never"
+  }
+}

config/base.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint", "import"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
+  ],
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2022": true
+  },
+  "ignorePatterns": ["node_modules", "lib", "*.d.ts", ".eslintrc.*js"],
+  "rules": {
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-namespace": "off",
+    "react/display-name": "off"
+  }
+}

config/tsconfig.base.json

@@ -17,12 +17,13 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "sourceMap": true
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "sourceMap": true,
+    "verbatimModuleSyntax": true
   }
 }