Update readme file

GreenTeaCake · Apr 10, 2024 · fafe212 · fafe212
1 parent bd52ca7
commit fafe212
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 54 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -10,7 +10,7 @@ module.exports = {
     'plugin:storybook/recommended',
     'prettier',
   ],
-  ignorePatterns: ['!.storybook', 'dist', 'loader', 'www', '.eslintrc.cjs'],
+  ignorePatterns: ['!.storybook', 'dist', 'loader', 'www', '.eslintrc.cjs', 'stencil.config.ts'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',

diff --git a/README.md b/README.md
@@ -1 +1,41 @@
 # Web Components Library
+
+List of components:
+
+- [switch](/src/components/switch/readme.md)
+
+## Build Flow
+
+### Pre-requisites
+
+- [Node 20 'Iron' (LTS)](https://nodejs.org/en/download) is installed
+
+> There is `.nvmrc` so you can go like this:
+>
+> ```shell
+> # in workspace root
+> $ nvm use
+> ```
+
+### Build and Check Code
+
+```shell
+# go to workspace root
+$ cd <workspace_root>
+# install dependencies
+$ npm install
+# (optional) lint code
+$ npm run lint
+# (optional) format code
+$ npm run format
+# (optional) run tests
+$ npm run test
+# build the code
+$ pnpm run build
+# start development environment at http://localhost:3333/
+# ! code should be pre-built for that
+$ pnpm run build && pnpm run start
+# start storybook to access it at http://localhost:6006/
+# ! code should be pre-built for that
+$ pnpm run build && pnpm run storybook
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "build": "stencil build",
+    "clean": "npx rimraf -g **/.DS_Store .stencil dist docs loader node_modules storybook-static www",
     "lint": "eslint . --ext js,jsx,ts,tsx --fix --ignore-path .gitignore --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write --ignore-unknown .",
     "start": "stencil build --dev --watch --serve",
@@ -23,7 +24,6 @@
     "test:unit:watch": "stencil test --spec --watchAll",
     "test:e2e": "stencil test --e2e",
     "test:e2e:watch": "stencil test --e2e --watchAll",
-    "generate": "stencil generate",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
@@ -61,6 +61,7 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "puppeteer": "^21.11.0",
+    "rimraf": "^5.0.5",
     "serve": "^14.2.1",
     "storybook": "^8.0.6"
   },
@@ -86,7 +87,7 @@
   ],
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
-      "eslint --fix --ignore-path .gitignore --report-unused-disable-directives --max-warnings 0"
+      "eslint --fix --ignore-path .gitignore --report-unused-disable-directives"
     ],
     "*": [
       "prettier --write --ignore-unknown"

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,8 @@
     <script type="module" src="/build/gtc-components.esm.js"></script>
     <script nomodule src="/build/gtc-components.js"></script>
   </head>
+
   <body>
-    <gtc-switch />
+    <gtc-switch checked="false" />
   </body>
 </html>
diff --git a/stencil.config.ts b/stencil.config.ts
@@ -4,14 +4,18 @@ import { sass } from '@stencil/sass';
 export const config: Config = {
   namespace: 'gtc-components',
   plugins: [sass()],
+  extras: {
+    enableImportInjection: true,
+  },
   outputTargets: [
     {
       type: 'dist',
       esmLoaderPath: '../loader',
     },
     {
       type: 'dist-custom-elements',
-      customElementsExportBehavior: 'auto-define-custom-elements',
+      // customElementsExportBehavior: 'auto-define-custom-elements',
+      customElementsExportBehavior: 'single-export-module',
       externalRuntime: false,
     },
     {

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,13 +3,11 @@
     "target": "es2017",
     "lib": ["dom", "es2017"],
     "module": "esnext",
-
     /* Bundler mode */
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "jsx": "react",
     "jsxFactory": "h",
-
     /* Linting */
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
@@ -33,6 +31,12 @@
     "strictPropertyInitialization": false,
     "useUnknownInCatchVariables": true
   },
-  "include": [".storybook/main.js", ".storybook/preview.js", "src", "stencil.config.ts"],
-  "exclude": ["node_modules"]
+  "include": ["src"],
+  "exclude": [
+    ".storybook",
+    "node_modules",
+    "src/stories",
+    "src/**/*.stories.ts",
+    "stencil.config.ts"
+  ]
 }