feat(design-system): Initial setup of input

.prettierrc

@@ -11,5 +11,5 @@
   "arrowParens": "avoid",
   "endOfLine": "crlf",
   "insertFinalNewline": false,
-  "tailwindConfig": "./design-system/components/tailwind.config.js"
+  "tailwindConfig": "./tailwind.config.js"
 }

.storybook/main.ts

@@ -9,7 +9,11 @@ import { filterByLoaderName } from "./utils/webpack-module-rules";
  * @see https://github.com/storybookjs/storybook/blob/main/docs/configure/overview.md#using-storybook-api
  */
 export const config: StorybookConfig = {
-  addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@storybook/addon-postcss",
+  ],
   core: {
     builder: {
       name: "webpack5",

apps/web/shell/src/index.html

@@ -5,7 +5,7 @@
     <title>Open System</title>
     <base href="/" />
 
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#2B2347" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
@@ -14,4 +14,3 @@
     <div id="root"></div>
   </body>
 </html>
-

apps/web/shell/src/styles.css

@@ -3,9 +3,3 @@
 @tailwind components;
 @tailwind base;
 @tailwind utilities;
-
-@layer components {
-  .grid-align {
-    @apply grid;
-  }
-}

apps/web/shell/tsconfig.app.json

@@ -19,5 +19,5 @@
     "**/*.spec.jsx",
     "**/*.test.jsx"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "../../../tailwind.config.js"]
 }

design-system/components/project.json

@@ -33,54 +33,72 @@
     "build": {
       "executor": "@open-system/executors-typescript:design-components-build",
       "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
       "options": {
         "projectType": "library",
         "tsConfig": "design-system/components/tsconfig.lib.json",
         "configPath": "design-system/components/stencil.config.ts",
-        "outputPath": "dist/design-system/components"
+        "outputPath": "dist/design-system/components",
+        "baseBuildTarget": "build-base"
       },
       "configurations": {
+        "development": {
+          "dev": true,
+          "prod": false,
+          "clean": true,
+          "verbose": false
+        },
         "production": {
           "dev": false,
           "prod": true,
-          "baseBuildTarget": "build-base",
           "clean": true
-        },
-        "developer": {
-          "dev": true,
-          "prod": false,
-          "baseBuildTarget": "build-base",
-          "clean": true,
-          "verbose": true
         }
       }
     },
     "build-base": {
       "executor": "@nxext/stencil:build",
       "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
       "options": {
         "projectType": "library",
         "tsConfig": "design-system/components/tsconfig.lib.json",
         "configPath": "design-system/components/stencil.config.ts",
-        "outputPath": "dist/design-system/components",
-        "postcssConfig": "postcss.config.js"
+        "outputPath": "dist/design-system/components"
       },
       "configurations": {
+        "development": {
+          "dev": true,
+          "prod": false,
+          "verbose": true
+        },
         "production": {
           "dev": false,
           "prod": true,
-          "verbose": true
+          "verbose": false
         }
       }
     },
     "serve": {
       "executor": "@nxext/stencil:serve",
       "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
       "options": {
         "projectType": "library",
         "tsConfig": "design-system/components/tsconfig.lib.json",
         "configPath": "design-system/components/stencil.config.ts",
         "outputPath": "dist/design-system/components"
+      },
+      "configurations": {
+        "development": {
+          "dev": true,
+          "debug": true,
+          "verbose": true
+        },
+        "production": {
+          "dev": false,
+          "debug": false,
+          "verbose": false
+        }
       }
     },
     "e2e": {

design-system/components/src/components.d.ts

@@ -26,17 +26,41 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Decides if input has an error
+          * An info message displayed under the input
          */
-        "error": boolean;
+        "info"?: string;
         /**
           * The text label displayed above the input field
          */
         "label": string;
+        /**
+          * The maximum input value allowed
+         */
+        "max"?: number;
+        /**
+          * The maximum allowed input length value of the field
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum input value allowed
+         */
+        "min"?: number;
+        /**
+          * The minimum allowed input length value of the field
+         */
+        "minLength"?: number;
         /**
           * The name of the input field
          */
         "name": string;
+        /**
+          * A regular expression pattern, such as [A-Z]+ for one or more uppercase characters
+         */
+        "pattern"?: string;
+        /**
+          * Placeholder text when the field value is empty
+         */
+        "placeholder"?: string;
         /**
           * Decides if input field required
          */
@@ -49,18 +73,10 @@ export namespace Components {
           * Input focus method
          */
         "setFocus": () => Promise<void>;
-        /**
-          * Show if input is touched
-         */
-        "touched": boolean;
         /**
           * Type of input
          */
         "type": string;
-        /**
-          * Decides if input has an error
-         */
-        "warning": boolean;
     }
 }
 export interface OsInputCustomEvent<T> extends CustomEvent<T> {
@@ -106,37 +122,61 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Decides if input has an error
+          * An info message displayed under the input
          */
-        "error"?: boolean;
+        "info"?: string;
         /**
           * The text label displayed above the input field
          */
         "label"?: string;
+        /**
+          * The maximum input value allowed
+         */
+        "max"?: number;
+        /**
+          * The maximum allowed input length value of the field
+         */
+        "maxLength"?: number;
+        /**
+          * The minimum input value allowed
+         */
+        "min"?: number;
+        /**
+          * The minimum allowed input length value of the field
+         */
+        "minLength"?: number;
         /**
           * The name of the input field
          */
         "name"?: string;
+        /**
+          * Event emitted when the user clicks out of the input field
+         */
+        "onOsBlur"?: (event: OsInputCustomEvent<CustomEvent<void>>) => void;
         /**
           * Event emitted during a value in change the input field
          */
         "onOsChange"?: (event: OsInputCustomEvent<CustomEvent<string>>) => void;
         /**
-          * Decides if input field required
+          * Event emitted when the user clicks into the input field
          */
-        "required"?: boolean;
+        "onOsFocus"?: (event: OsInputCustomEvent<CustomEvent<void>>) => void;
         /**
-          * Show if input is touched
+          * A regular expression pattern, such as [A-Z]+ for one or more uppercase characters
          */
-        "touched"?: boolean;
+        "pattern"?: string;
         /**
-          * Type of input
+          * Placeholder text when the field value is empty
          */
-        "type"?: string;
+        "placeholder"?: string;
         /**
-          * Decides if input has an error
+          * Decides if input field required
          */
-        "warning"?: boolean;
+        "required"?: boolean;
+        /**
+          * Type of input
+         */
+        "type"?: string;
     }
     interface IntrinsicElements {
         "os-button": OsButton;

design-system/components/src/components/os-button/os-button.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from "@stencil/core";
+import { Component, h, Host, Prop } from "@stencil/core";
 
 @Component({
   tag: "os-button",
@@ -21,15 +21,11 @@ export class OsButton {
    */
   @Prop() last: string;
 
-  private getText(): string {
+  render() {
     return (
-      (this.first || "") +
-      (this.middle ? ` ${this.middle}` : "") +
-      (this.last ? ` ${this.last}` : "")
+      <Host>
+        <button class="text-teal-400">Don't Press Me</button>
+      </Host>
     );
   }
-
-  render() {
-    return <div>Hello, World! I'm {this.getText()}</div>;
-  }
 }

design-system/components/src/components/os-input/os-input.stories.tsx

@@ -15,4 +15,45 @@ const Template = args => <os-input {...args}></os-input>;
 export const Primary = Template.bind({});
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = { label: "Sample Label", name: "sample1" };
+Primary.args = {
+  label: "Sample Label",
+  name: "sample1",
+  placeholder: "Placeholder",
+};
+
+/**
+ * Information
+ */
+export const Information = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Information.args = {
+  label: "Sample Label",
+  name: "sample2",
+  placeholder: "Placeholder",
+  info: "This is an information message",
+};
+
+/**
+ * Warning
+ */
+export const Warning = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Warning.args = {
+  label: "Sample Label",
+  name: "sample3",
+  placeholder: "Placeholder",
+};
+
+/**
+ * Error
+ */
+export const Error = Template.bind({});
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Error.args = {
+  label: "Sample Label",
+  name: "sample4",
+  placeholder: "Placeholder",
+};