chore(*): clean up and documentating contributing.md

Author: clukhei

Diff for: .eslintrc.json

@@ -21,5 +21,5 @@
     "lit/binding-positions": 0
     // "jsx-quotes": [2, "prefer-single"],
   },
-  "ignorePatterns": ["**/*.js", "mocks"]
+  "ignorePatterns": ["**/*.js", "mocks", "**/*.mjs"]
 }

Diff for: .storybook/preview-head.html

@@ -13,4 +13,3 @@
   id="dev-console-gateway"
   src="https://assets.developer.tech.gov.sg/bundled-scripts/dev-console-gateway.bundle.js"
 ></script>
-<script src="../lib/index.js"></script>

Diff for: CODE_CONVENTIONS.md

@@ -3,31 +3,31 @@
 ## Table of contents
 
 - [sgds-web-components coding style guide](#typescript-coding-style-guide)
-  - [Naming](#naming)
-  - [Naming Conventions](#naming-conventions)
-  - [Naming Booleans](#naming-booleans)
-  - [Brackets](#brackets)
-  - [Spaces](#spaces)
-  - [Semicolons](#semicolons)
-  - [Code Comments](#code-comments)
-  - [Barrels](#barrels)
-- [Angular coding style guide](#angular-coding-style-guide)
 
-  - [Organize imports](#organize-imports)
-  - [Use typescript aliases](#use-typescript-aliases)
-  - [Specify component member accessor explicitly](#specify-component-member-accessor-explicitly)
-  - [Component structure](#component-structure)
-  - [private Subject, public Observable pattern](#private-subject,-public-observable-pattern)
-  - [Services inside HTML templates](#services-inside-HTML-templates)
-  - [Manage Subscriptions Declaratively](#manage-subscriptions-declaratively)
+  - [Events](#events)
+  - [Typescript](#typescript)
+  - [Jsdocs](#jsdoc)
 
-  ### Naming
+  ### Events
 
-  ### Typescript
+  1. Events should be named with an action word , prefix with `sgds-`
 
-  All variables, properties and functions should be typed. The Tscompiler can infer the type of properties when a default value is assigned but not when none is defined. If a variable does not need to have a default variable, assign a type to it.
+  Bad: `hide`, `show`
+  Good: `sgds-hide, sgds-show, sgds-after-show, sgds-toggle`
 
-  Bad:
+  2. Before creating a new event name, check if there are existing names for the same purposed.
+   
+  3. Use the `emit` method of SgdsElement class to emit a custom event 
+
+#### variable
+
+Variables should be
+
+### Typescript
+
+All variables, properties and functions should be typed. The Tscompiler can infer the type of properties when a default value is assigned but not when none is defined. If a variable does not need to have a default variable, assign a type to it.
+
+Bad:
 
 ```typescript
     @property({ type: Boolean, reflect: true }) isLight;
@@ -90,8 +90,8 @@ export class SgdsAccordionItem extends SgdsElement {
 
 4. Annotate public methods with jsdocs comments. Any methods that is meant expose for users should be marked with the "public" access modifier
 
-```typescript 
+```typescript
 /** Shows the accordion. */
   public async show() {
   }
-```
+```

Diff for: CONTRIBUTING.md

@@ -30,7 +30,7 @@ To run single test file, run the output javascript test file instead of the type
 
 ## Storybook 
 
-Write documentation in storybook in MDX format. Include API argstable, import instructions, at least a basic example and custom css properties table (if present)
+The basic storybook documentation is auto-generated from the cem metadata. Write your template examples inside `stories/templates/<Component>` folder 
 
 ## Markdown files and README.md
 

Diff for: index.html

@@ -9,6 +9,7 @@
     <script type="module" id="dev-console-gateway"
         src="https://assets.developer.tech.gov.sg/bundled-scripts/dev-console-gateway.bundle.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
+    <style>
         * {
             font-family: "bootstrap-icons", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         }

Diff for: package.json

@@ -6,20 +6,20 @@
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
-    "build:dev": "rm -rf lib && rollup --config rollup.dev.config.js",
-    "build:prod": "rm -rf lib && rollup --config rollup.config.js",
+    "build:dev": "rm -rf lib && rollup --config rollup.config.js --environment NODE_ENV:development",
+    "build:prod": "rm -rf lib && rollup --config rollup.config.js --environment NODE_ENV:production",
     "build:react": "npm run cem && node ./scripts/makeReact.mjs",
     "build:readme": "gulp build-readme",
-    "build:stories": "npm run cem && node ./scripts/generateStories.mjs && npm run concat:stories",
+    "write:stories": "npm run cem && node ./scripts/generateStories.mjs && npm run concat:stories",
     "build:lib": "npm run build:react && npm run build:prod && npm run post:build",
     "build:watch": "npm run build:dev -- --watch",
     "post:build": "node ./scripts/frankBuild.js",
     "dev": "npm run build:watch & npm run serve",
     "serve": "wds --watch --open",
     "test": "rm -rf test-outdir && rollup --config rollup.test.config.js && web-test-runner",
     "test:scripts": "wtr scripts/__tests__/**/*.test.js --node-resolve",
-    "storybook": "npm run build:stories && npm run build:dev && start-storybook -p 6006",
-    "build-storybook": "rm -rf lib && npm run build:dev && npm run build:stories && build-storybook",
+    "storybook": "npm run write:stories && npm run build:dev && start-storybook -p 6006",
+    "build-storybook": "rm -rf lib && npm run build:dev && npm run write:stories && build-storybook",
     "prepare": "husky install",
     "concat:stories": "gulp concat-storybook-mdx",
     "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\"",

Diff for: rollup.config.js

@@ -12,7 +12,7 @@ const wcPlugins = [
     browser: true
   }),
   replace({
-    "process.env.NODE_ENV": JSON.stringify("production"),
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
     preventAssignment: true
   }),
   postcss({
@@ -92,25 +92,7 @@ const reactFolderBuilds = getFolders("src/react").map(folder => {
     plugins: reactSubFolderBuildPlugins(folder)
   };
 });
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true
-      },
-      {
-        file: packageJson.main,
-        format: "umd",
-        sourcemap: true,
-        name: "index"
-      }
-    ],
-    plugins: wcPlugins
-  },
-  ...wcfolderBuilds,
+const reactPackage = [
   {
     input: "src/react/index.ts",
     output: [
@@ -150,3 +132,29 @@ export default [
   },
   ...reactFolderBuilds
 ];
+const buildSgdsPackage = () => {
+  const sgdsWcPackage = [
+    {
+      input: "src/index.ts",
+      output: [
+        {
+          file: packageJson.module,
+          format: "esm",
+          sourcemap: true
+        },
+        {
+          file: packageJson.main,
+          format: "umd",
+          sourcemap: true,
+          name: "index"
+        }
+      ],
+      plugins: wcPlugins
+    },
+    ...wcfolderBuilds
+  ];
+  if (process.env.NODE_ENV === "production") return sgdsWcPackage.concat(reactPackage);
+  return sgdsWcPackage;
+};
+
+export default buildSgdsPackage;

Diff for: rollup.dev.config.js

@@ -1,15 +1,13 @@
-import commandLineArgs from 'command-line-args';
+import { deleteSync } from 'del';
 import fs from 'fs';
+import groupBy from 'lodash/groupBy.js';
 import path from 'path';
-import chalk from 'chalk';
-import { deleteSync } from 'del';
 import prettier from 'prettier';
-import prettierConfig from '../prettier.config.js';
-import { getAllComponents, getSgdsComponents } from './shared.mjs';
 import { makeArgTypes } from './makeArgTypes.mjs';
-import groupBy from 'lodash/groupBy.js';
-const storiesDir = path.join('stories/components');
 import { methodsTable } from './methodsTable.mjs';
+import { getAllComponents, getSgdsComponents } from './shared.mjs';
+
+const storiesDir = path.join('stories/components');
 
 // Clear build directory
 deleteSync(storiesDir);

Diff for: scripts/generateStories.mjs

@@ -34,7 +34,6 @@ export class SgdsAccordionItem extends SgdsElement {
   @property({ type: Boolean, reflect: true }) open = false;
   /** Title of the accordion */
   @property() summary: string;
-  //TODO: disabled feature is not a supposed feature in accordion?
   /** Disables the accordion-item. When true, accordion-item cannot open */
   @property({ type: Boolean, reflect: true }) disabled = false;
   /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */

Diff for: src/Accordion/sgds-accordion-item.ts

@@ -21,7 +21,6 @@ export class SgdsAccordion extends SgdsElement {
   @queryAssignedNodes()
   private defaultNodes!: NodeListOf<SgdsAccordionItem>;
 
-  //TODO: confirm if this is a public method or for internal usage only
   /** @internal */
   get items(): SgdsAccordionItem[] {
     return [...(this.defaultNodes || [])].filter(

Diff for: src/Accordion/sgds-accordion.ts

@@ -1,29 +1,28 @@
-export const TemplateType = (args) =>
+export const TemplateType = args =>
   html`
-  <div class="col">
-    <sgds-action-card
-      type="radio"
-    >
-      <span slot="card-subtitle">${args.cardSubtitleSlot}</span>
-      <span slot="card-title">${args.cardTitleSlot}</span>
-      <span slot="card-text">${args.cardTextSlot}</span>
-    </sgds-action-card>
-  <div>
-  <div class="col">
-    <sgds-action-card
-      type="checkbox"
-    >
-      <span slot="card-subtitle">${args.cardSubtitleSlot}</span>
-      <span slot="card-title">${args.cardTitleSlot}</span>
-      <span slot="card-text">${args.cardTextSlot}</span>
-    </sgds-action-card>
-  <div>
-`;
+    <div class="col">
+      <sgds-action-card type="radio">
+        <span slot="card-subtitle">Laptop</span>
+        <span slot="card-title">Apple</span>
+        <span slot="card-text">Macbook Pro M1</span>
+      </sgds-action-card>
+      <div>
+        <div class="col">
+          <sgds-action-card type="checkbox">
+            <span slot="card-subtitle">Laptop</span>
+            <span slot="card-title">Apple</span>
+            <span slot="card-text">Macbook Pro M1</span>
+          </sgds-action-card>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  `;
 
 ## Type
 
 Use `type` prop : `radio` / `checkbox` to change the selectable card input type
 
 <Canvas>
-  <Story name='Type'>{TemplateType.bind({})}</Story>
+  <Story name="Type">{TemplateType.bind({})}</Story>
 </Canvas>

Diff for: stories/templates/ActionCard/additional.mdx

@@ -4,8 +4,8 @@
     "module": "es2015",
     "moduleResolution": "node",
     "lib": ["es2017", "dom", "dom.iterable"],
-    // "declaration": true,
-    // "declarationDir": "lib",
+    "declaration": true,
+    "declarationDir": "lib",
     "sourceMap": true,
     "inlineSources": true,
     "experimentalDecorators": true,