@spectric/ui 0.0.4

package/src/stories/input.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import type { InputProps } from '../components/input';
+import { InputVariants } from "../components/input"
+import '../components';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'UI/Input',
+  tags: ['autodocs'],
+  component: "spectric-input",
+  render: (args) => html`
+  <spectric-input
+  label=${ifDefined(args.label)}
+  placeholder=${ifDefined(args.placeholder)}
+  helperText=${ifDefined(args.helperText)}
+  pattern=${ifDefined(args.pattern)}
+  name=${ifDefined(args.name)}
+  invalidText=${ifDefined(args.invalidText)}
+  maxCount=${ifDefined(args.maxCount)}
+  @input=${(e) => { console.log(e) }}
+  @change=${e => console.log(e)}
+  ?showPasswordVisibilityToggle=${args.showPasswordVisibilityToggle}
+  ?readonly=${args.readonly}
+    ?disabled=${args.disabled}
+    variant=${ifDefined(args.variant)}
+  >
+  </spectric-input>
+`,
+  args: {
+    label: 'Input label',
+  },
+  argTypes: { variant: { options: Object.values(InputVariants) } }
+
+} satisfies Meta<InputProps>;
+
+export default meta;
+type Story = StoryObj<InputProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    label: 'Input label',
+    placeholder: "Type here",
+    readonly: false,
+    helperText: "Input any text"
+  },
+};
+const variants: InputProps['variant'][] = Object.values(InputVariants)
+function toTitleCase(str) {
+  return str.replace(
+    /\w\S*/g,
+    text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
+  );
+}
+export const Variants: Story = {
+  render: (args) => html`
+  ${variants.map(v => {
+    return html`
+<spectric-input
+    label=${ifDefined(toTitleCase(v + " Input"))}
+    ?disabled=${args.disabled}
+    variant=${v}
+
+    @change=${(e) => { console.log(e) }}
+  >
+    ${v}
+</spectric-input>`
+  })}
+`,
+  args: {
+    showPasswordVisibilityToggle: true,
+    variant: "text",
+  },
+};
+

package/src/stories/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2021",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "sourceMap": true,
+    "declaration": false,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "**/*test*"
+  ],
+  "declaration": true,
+  "pretty": false
+}

package/src/utils/debounce.ts

@@ -0,0 +1,18 @@
+export const debounce = (func: Function, wait: number) => {
+  let timeout: number;
+  return (...args: any[]) => {
+    clearTimeout(timeout);
+    timeout = window.setTimeout(() => func.apply(this, args), wait);
+  };
+};
+export const debounceAnimation = (func: Function) => {
+  var animationFrame: number;
+  return (...args: any[]) => {
+    if (animationFrame) {
+      cancelAnimationFrame(animationFrame)
+    }
+    animationFrame = requestAnimationFrame(() => {
+      func.apply(this, args)
+    })
+  }
+}

package/src/utils/spread.ts

@@ -0,0 +1,71 @@
+import { ElementPart, Part } from 'lit';
+import { nothing } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+
+
+
+/**
+ * Usage:
+ *    import { html, render } from 'lit';
+ *    import { spreadProps } from '@open-wc/lit-helpers';
+ *
+ *    render(
+ *      html`
+ *        <div
+ *          ${spreadProps({
+ *              prop1: 'prop1',
+ *              prop2: ['Prop', '2'],
+ *              prop3: {
+ *                  prop: 3,
+ *              }
+ *          })}
+ *        ></div>
+ *      `,
+ *      document.body,
+ *    );
+ */
+export class SpreadPropsDirective extends AsyncDirective {
+    host!: EventTarget | object | Element;
+    element!: Element;
+    prevData: any = {};
+
+    render(_spreadData: any) {
+        return nothing;
+    }
+    update(part: Part, [spreadData]: Parameters<this['render']>) {
+        if (this.element !== (part as ElementPart).element) {
+            this.element = (part as ElementPart).element;
+        }
+        this.host = part.options?.host || this.element;
+        this.apply(spreadData);
+        this.groom(spreadData);
+        this.prevData = { ...spreadData };
+    }
+
+    apply(data: any) {
+        if (!data) return;
+        const { prevData, element } = this;
+        for (const key in data) {
+            const value = data[key];
+            if (value === prevData[key]) {
+                continue;
+            }
+            // @ts-ignore
+            element[key] = value;
+        }
+    }
+
+    groom(data: any) {
+        const { prevData, element } = this;
+        if (!prevData) return;
+        for (const key in prevData) {
+            //@ts-ignore
+            if (!data || (!(key in data) && element[key] === prevData[key])) {
+                // @ts-ignore
+                element[key] = undefined;
+            }
+        }
+    }
+}
+
+export const spreadProps = directive(SpreadPropsDirective);

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/test/__init__.py

@@ -0,0 +1,9 @@
+from test.elastic import ElasticPersistance
+from typing import Generic,TypeVar,Any
+T = TypeVar("T",callable)
+
+config = {"type":"elastic","host":"elastic"}
+def get_persistance(locator:str,cls:T):
+    if config['type'] == "elastic":
+        return ElasticPersistance[T]({**config,"index":locator},cls)
+    raise ValueError("unknown persistance type")

package/test/elastic.py

@@ -0,0 +1,9 @@
+from test.interface import T, IPersistance
+class ElasticPersistance(IPersistance[T]):
+    def __init__(self,config,cls:T):
+        self.model = cls
+        self.config = config
+    def get_one_by_id(self,id) -> T|None:
+        data = {}
+        return self.model(**data)
+    

package/test/interface.py

@@ -0,0 +1,16 @@
+from typing import Generic,TypeVar,Any
+
+from test import T
+
+class IPersistance(Generic[T]):
+    def __init__(self,config:Any,cls:T):
+        """
+        init function
+        """
+        pass
+    def get_one_by_id(self,id:str) -> T|None:
+        """
+        gets data from database
+        """
+        pass
+

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "sourceMap": true,
+    "declaration": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+    },
+  "include": ["src"],
+  "exclude": ["src/stories","**/*test*"],
+  "declaration": true,
+  "pretty":false
+}

package/vite.config.js

@@ -0,0 +1,34 @@
+import path from 'path'
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import run from "vite-plugin-run";
+// add dts() to the plugins array
+//plugins: [react(), dts()],
+export default defineConfig({
+  plugins:[dts({ tsconfigPath: './tsconfig.json' }),      run(
+        {
+          silent:false,
+          name: 'Create vscode webcomponent json',
+          run: ['npx', 'web-component-analyzer', 'src', '-f', 'vscode', '--outFiles','dist/custom-elements.json'],
+        },
+      )],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src'),
+      name: 'Spectric-UI',
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      //external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        // globals: {
+        //   vue: 'Vue'
+        // }
+      }
+    }
+  }
+})