@pairbo/ui-kit 0.0.1 → 0.0.3

package/src/internal/watch.ts

@@ -1,79 +0,0 @@
-import { waitUntil } from "@open-wc/testing";
-import { LitElement } from "lit";
-// Define the handler function type
-type UpdateHandler = (prev?: unknown, next?: unknown) => void;
-
-// Check the generic type, remove undefined
-type NonUndefined<A> = A extends undefined ? never : A;
-
-/**
- * Get the keys of the updates handler inside one class.
- *
- * keyof will only extract the keys which are non-never
- *
- * The modified object
- * { [key in keyof T] -?: NonUndefined<T[key]> extends UpdateHandler ? key : never; }
- *
- * Get the keys in the object: [key in keyof T]
- *
- * Remove the undefined keys: -?
- *
- * Ternary operator A ? B : C - Check if the type is UpdateHandler: NonUndefined<T[Key]> extends UpdateHandler
- *  If true, set the value of current key to the key name
- *  Else set the value of current key to never
- *  After that, we use the mapped type to get the keys of the object ExampleObject[keyof ExampleObject] will return an union of they key values, and the never value will be removed
- **/
-type UpdateHandlerKeys<T extends Object> = {
-  [key in keyof T]-?: NonUndefined<T[key]> extends UpdateHandler ? key : never;
-}[keyof T];
-
-type Func = (first: string, second: number, last?: boolean) => void;
-type FunctionKeys = keyof (Func extends Object ? Func : never);
-type Option = {
-  waitUntilFirstUpdate: boolean;
-};
-
-export function watch(propertyName: string | string[], options?: Option) {
-  const resolvedOptions: Required<Option> = {
-    waitUntilFirstUpdate: false,
-    ...options,
-  };
-
-  /**
-   * target: The class to be decorated
-   * decoratedFnName: The name of the function to be decorated
-   */
-  return function <EleClass extends LitElement>(target: EleClass, decoratedFnName: UpdateHandlerKeys<EleClass>) {
-    // If the property name is string, convert it into a string array
-    const watchedProperty = Array.isArray(propertyName) ? propertyName : [propertyName];
-
-    // @ts-ignore update is protected in the LitElement
-    // Store the original update function
-    const { update } = target;
-
-    // This will create a new update function, but it will
-    // wrap the original update function, so it will not be overridden
-
-    // @ts-ignore update is protected in the LitElement
-    target.update = function (this: EleClass, changeProps: Map<keyof EleClass, EleClass[keyof ElemClass]>) {
-      // Loop through the watched properties
-      watchedProperty.forEach(property => {
-        const key = property as keyof EleClass;
-        if (changeProps.has(key)) {
-          const oldValue = changeProps.get(key);
-          const newValue = this[key];
-
-          if (oldValue !== newValue) {
-            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);
-            }
-          }
-        }
-      });
-
-      // @ts-ignore update is protected in the LitElement
-      // Call the original update function
-      update.call(this, changeProps);
-    };
-  };
-}

package/src/styles/component.styles.ts

@@ -1,17 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    box-sizing: border-box;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-`;

package/src/styles/form-control.styles.ts

@@ -1,59 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    margin-bottom: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--sl-input-label-font-size-small);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--sl-input-label-font-size-medium);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--sl-input-label-font-size-large);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
-    color: var(--sl-input-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--sl-input-help-text-color);
-    margin-top: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-small);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-medium);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-large);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--sl-spacing-2x-small);
-  }
-`;

package/temp

@@ -1,20 +0,0 @@
-// .eslintrc.js
-module.exports = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: "module",
-  },
-  plugins: ["@typescript-eslint", "prettier"],
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    'plugin:lit/recommended',
-  ],
-  files:["*.ts"],
-  rules: {
-    // Enforce Prettier formatting as ESLint errors
-    "prettier/prettier": "error",
-  },
-};

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.Iterable", "es2020"],
-    "emitDecoratorMetadata": true,
-    "module": "ESNext", // Changed from NodeNext
-    "moduleResolution": "node", // Changed from NodeNext
-    "strict": true,
-    "strictFunctionTypes": false,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "declaration": true,
-    "removeComments": false,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "strictPropertyInitialization": false,
-    "useUnknownInCatchVariables": true,
-    "typeRoots": ["node_modules/@types", "node_modules/choices.js/public/types"],
-    "rootDir": "."
-  },
-  "include": ["src"],
-  "exclude": ["**/node_modules", "dist"]
-}

package/vite.config.ts

@@ -1,26 +0,0 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import path from "path";
-
-export default defineConfig({
-  build: {
-    outDir: "dist",
-    lib: {
-      entry: path.resolve(__dirname, "src/components/main.ts"),
-      name: "MyCustomElement",
-      fileName: (format) => `pairbo.${format}.js`,
-    },
-    rollupOptions: {
-      external: [],
-      input: {
-        main: path.resolve(__dirname, "src/components/main.ts")
-      }
-    },
-  },
-  plugins: [dts()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, '.')
-    }
-  }
-});