fix(design-system): Font path formatting issue

sullivanpj · Nov 7, 2022 · 45caa76 · 45caa76
1 parent 3457a54
commit 45caa76
Show file tree

Hide file tree

Showing 17 changed files with 304 additions and 64 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -11,5 +11,5 @@
   "arrowParens": "avoid",
   "endOfLine": "crlf",
   "insertFinalNewline": false,
-  "tailwindConfig": "./apps/web/shell/tailwind.config.js"
+  "tailwindConfig": "./design-system/components/tailwind.config.js"
 }
diff --git a/design-system/components/postcss.config.js b/design-system/components/postcss.config.js
@@ -0,0 +1,15 @@
+const { join } = require("path");
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, "tailwind.config.js"),
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/design-system/components/project.json b/design-system/components/project.json
@@ -50,7 +50,8 @@
           "dev": true,
           "prod": false,
           "baseBuildTarget": "build-base",
-          "clean": true
+          "clean": true,
+          "verbose": true
         }
       }
     },
@@ -61,12 +62,14 @@
         "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",
+        "postcssConfig": "postcss.config.js"
       },
       "configurations": {
         "production": {
           "dev": false,
-          "prod": true
+          "prod": true,
+          "verbose": true
         }
       }
     },

diff --git a/design-system/components/src/components.d.ts b/design-system/components/src/components.d.ts
@@ -41,16 +41,32 @@ export namespace Components {
           * Decides if input field required
          */
         "required": boolean;
+        /**
+          * Input select method
+         */
+        "selectText": () => Promise<void>;
+        /**
+          * 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> {
+    detail: T;
+    target: HTMLOsInputElement;
+}
 declare global {
     interface HTMLOsButtonElement extends Components.OsButton, HTMLStencilElement {
     }
@@ -101,6 +117,10 @@ declare namespace LocalJSX {
           * The name of the input field
          */
         "name"?: string;
+        /**
+          * Event emitted during a value in change the input field
+         */
+        "onOsChange"?: (event: OsInputCustomEvent<CustomEvent<string>>) => void;
         /**
           * Decides if input field required
          */
@@ -109,6 +129,10 @@ declare namespace LocalJSX {
           * Show if input is touched
          */
         "touched"?: boolean;
+        /**
+          * Type of input
+         */
+        "type"?: string;
         /**
           * Decides if input has an error
          */

diff --git a/design-system/components/src/components/os-input/os-input.spec.ts b/design-system/components/src/components/os-input/os-input.spec.ts
@@ -1,10 +1,10 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { MyComponent } from "./os-input";
+import { OsInput } from "./os-input";
 
 describe("os-input", () => {
   it("renders", async () => {
     const { root } = await newSpecPage({
-      components: [MyComponent],
+      components: [OsInput],
       html: "<os-input></os-input>",
     });
     expect(root).toEqualHtml(`
@@ -20,11 +20,11 @@ describe("os-input", () => {
 
   it("renders with values", async () => {
     const { root } = await newSpecPage({
-      components: [MyComponent],
-      html: `<os-input first="Stencil" last="'Don't call me a framework' JS"></os-input>`,
+      components: [OsInput],
+      html: `<os-input label="Label" name="name"></os-input>`,
     });
     expect(root).toEqualHtml(`
-      <os-input first="Stencil" last="'Don't call me a framework' JS">
+      <os-input label="Label" name="name">
         <mock:shadow-root>
           <div>
             Hello, World! I'm Stencil 'Don't call me a framework' JS
@@ -34,4 +34,3 @@ describe("os-input", () => {
     `);
   });
 });
-
diff --git a/design-system/components/src/components/os-input/os-input.tsx b/design-system/components/src/components/os-input/os-input.tsx
@@ -1,16 +1,39 @@
-import { Component, h, Prop } from "@stencil/core";
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} from "@stencil/core";
+import { nanoid } from "nanoid";
 
+/**
+ * An input field used in forms to collect data from users
+ */
 @Component({
   tag: "os-input",
   styleUrl: "os-input.css",
   shadow: true,
 })
 export class OsInput {
+  /**
+   * Type of input
+   *  */
+  @Prop() type = "text";
+
   /**
    * The name of the input field
    */
   @Prop() name: string;
 
+  /**
+   * The id prop of the inner input field
+   */
+  @Prop() inputId: string = nanoid(10);
+
   /**
    * The text label displayed above the input field
    */
@@ -41,12 +64,64 @@ export class OsInput {
    */
   @Prop() required = false;
 
+  /**
+   * The current value of the input
+   */
+  @State() value?: string;
+
+  /** Input focus method */
+  @Method()
+  async setFocus() {
+    this.getNativeInput().focus();
+  }
+  /** Input select method */
+  @Method()
+  async selectText() {
+    this.getNativeInput().select();
+  }
+
+  /**
+   * Event emitted during a value in change the input field
+   */
+  @Event({
+    eventName: "osChange",
+    composed: true,
+    cancelable: true,
+    bubbles: true,
+  })
+  change: EventEmitter<CustomEvent<string>>;
+
+  /**
+   * Handle a value in change the input field
+   */
+  handleChange(event: CustomEvent<string>) {
+    event.stopPropagation();
+    this.value = event.detail;
+
+    this.change.emit(event);
+  }
+
+  /**
+   * A reference to the input element being rendered
+   */
+  nativeInput: HTMLInputElement;
+
+  getNativeInput() {
+    return this.nativeInput;
+  }
+
   render() {
     return (
-      <div>
-        <label htmlFor={this.name}>{this.label} + Extra</label>
-        <input name={this.name}></input>
-      </div>
+      <Host class="col gap-xxxs flex">
+        <label htmlFor={this.name}>{this.label}</label>
+        <input
+          id={this.inputId}
+          ref={el => (this.nativeInput = el)}
+          type={"text"}
+          name={this.name}
+          required={this.required}
+          onChange={this.handleChange}></input>
+      </Host>
     );
   }
 }
diff --git a/design-system/components/src/components/os-input/readme.md b/design-system/components/src/components/os-input/readme.md
@@ -7,13 +7,46 @@
 
 ## Properties
 
-| Property | Attribute | Description                                    | Type     | Default     |
-| -------- | --------- | ---------------------------------------------- | -------- | ----------- |
-| `first`  | `first`   | The first name                                 | `string` | `undefined` |
-| `label`  | `label`   | The text label displayed above the input field | `string` | `undefined` |
-| `last`   | `last`    | The last name                                  | `string` | `undefined` |
-| `middle` | `middle`  | The middle name                                | `string` | `undefined` |
-| `name`   | `name`    | The name of the input field                    | `string` | `undefined` |
+| Property   | Attribute  | Description                                    | Type      | Default     |
+| ---------- | ---------- | ---------------------------------------------- | --------- | ----------- |
+| `disabled` | `disabled` | Decides if input is disabled                   | `boolean` | `false`     |
+| `error`    | `error`    | Decides if input has an error                  | `boolean` | `false`     |
+| `label`    | `label`    | The text label displayed above the input field | `string`  | `undefined` |
+| `name`     | `name`     | The name of the input field                    | `string`  | `undefined` |
+| `required` | `required` | Decides if input field required                | `boolean` | `false`     |
+| `touched`  | `touched`  | Show if input is touched                       | `boolean` | `false`     |
+| `type`     | `type`     | Type of input                                  | `string`  | `"text"`    |
+| `warning`  | `warning`  | Decides if input has an error                  | `boolean` | `false`     |
+
+
+## Events
+
+| Event      | Description                                            | Type                               |
+| ---------- | ------------------------------------------------------ | ---------------------------------- |
+| `osChange` | Event emitted during a value in change the input field | `CustomEvent<CustomEvent<string>>` |
+
+
+## Methods
+
+### `selectText() => Promise<void>`
+
+Input select method
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `setFocus() => Promise<void>`
+
+Input focus method
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ----------------------------------------------

diff --git a/design-system/components/src/styles.css b/design-system/components/src/styles.css
@@ -0,0 +1,5 @@
+@import url("../../../dist/design-system/tokens/css/fonts.css");
+
+@tailwind components;
+@tailwind base;
+@tailwind utilities;
diff --git a/design-system/components/stencil.config.ts b/design-system/components/stencil.config.ts
@@ -1,6 +1,9 @@
 import { Config } from "@stencil/core";
 import { reactOutputTarget } from "@stencil/react-output-target";
+import autoprefixer from "autoprefixer";
 import tailwind, { tailwindHMR } from "stencil-tailwind-plugin";
+import tailwindcss from "tailwindcss";
+import tailwindConf from "./tailwind.config";
 
 export const config: Config = {
   namespace: "design-system-components",
@@ -28,5 +31,14 @@ export const config: Config = {
       includeDefineCustomElements: true,
     }),
   ],
-  plugins: [tailwind(), tailwindHMR()],
+  plugins: [
+    tailwind({
+      tailwindConf,
+      tailwindCssPath: "../../style.css",
+      postcss: {
+        plugins: [tailwindcss(), autoprefixer()],
+      },
+    }),
+    tailwindHMR(),
+  ],
 };
diff --git a/design-system/components/tailwind.config.js b/design-system/components/tailwind.config.js
@@ -0,0 +1,18 @@
+const { createGlobPatternsForDependencies } = require("@nrwl/react/tailwind");
+const { join } = require("path");
+const extend = require("../../dist/design-system/tokens/js/theme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(
+      __dirname,
+      "{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}"
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend,
+  },
+  plugins: [],
+};
diff --git a/design-system/tokens/project.json b/design-system/tokens/project.json
@@ -30,7 +30,7 @@
           "imagesDir": "assets/images"
         },
         "resume": {
-          "tokensDir": "design-system/tokens/src/resume57",
+          "tokensDir": "design-system/tokens/src/resume",
           "fontsDir": "assets/fonts",
           "imagesDir": "assets/images"
         }

diff --git a/design-system/tokens/src/open-system/design-tokens.json b/design-system/tokens/src/open-system/design-tokens.json
@@ -520,6 +520,18 @@
         }
       }
     },
+    "required": {
+      "description": "",
+      "type": "color",
+      "value": "#bc1c1cff",
+      "blendMode": "normal",
+      "extensions": {
+        "org.lukasoppermann.figmaDesignTokens": {
+          "styleId": "S:a6ca8762960da34e9f0417ab4e745c249fed8820,",
+          "exportKey": "color"
+        }
+      }
+    },
     "header colors": {
       "header-primary": {
         "description": "",

diff --git a/design-system/tokens/src/open-system/open-system.fig b/design-system/tokens/src/open-system/open-system.fig
diff --git a/tools/executors/typescript/design-components-build/impl.ts b/tools/executors/typescript/design-components-build/impl.ts
@@ -18,7 +18,7 @@ export default async function (
       printInfo("Cleaning previous design components build...");
 
       result = await execute(
-        `rimraf dist/design-system/components/!("package.json")`
+        `rimraf dist/design-system/components/dist/collection`
       );
       if (result) {
         printError(result);

diff --git a/tools/executors/typescript/design-components-clean/impl.ts b/tools/executors/typescript/design-components-clean/impl.ts
@@ -13,7 +13,7 @@ export default async function (
     printInfo("Cleaning previous design components build...");
 
     const result = await execute(
-      `rimraf dist/design-system/components/!("package.json")`
+      `rimraf dist/design-system/components/dist/collection`
     );
     if (result) {
       printError(result);