revotech-ui-kit 0.0.0

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './mouse-conroller.helper';
+export * from './style.helpers';

package/src/helpers/mouse-conroller.helper.ts

@@ -0,0 +1,42 @@
+import { ReactiveControllerHost } from 'lit';
+
+export class MouseController {
+  private host: ReactiveControllerHost;
+
+  pos = { x: 0, y: 0 };
+
+  _onMouseMove = ({ clientX, clientY }: MouseEvent) => {
+    this.pos = { x: clientX, y: clientY };
+    this.host.requestUpdate();
+  };
+
+  _onClick = (e: MouseEvent) => {
+    console.log(`click: ${e.target}`);
+    console.log(`pos: ${this.pos.x}`);
+    this.host.requestUpdate();
+  };
+
+  _onScroll = (e: Event) => {
+    console.log(`scroll: ${e.target}`);
+    console.log(`pos: ${this.pos.y}`);
+    console.log(`pos: ${window.scrollY} ${window.innerHeight}`);
+    this.host.requestUpdate();
+  };
+
+  constructor(host: ReactiveControllerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    window.addEventListener('mousemove', this._onMouseMove);
+    window.addEventListener('click', this._onClick);
+    window.addEventListener('scroll', this._onScroll);
+  }
+
+  hostDisconnected() {
+    window.removeEventListener('mousemove', this._onMouseMove);
+    window.removeEventListener('click', this._onClick);
+    window.removeEventListener('scroll', this._onScroll);
+  }
+}

package/src/helpers/style.helpers.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/interfaces/actionable.interface.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export type ActionableProps = Partial<{
+  onClick: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onSubmit: (event?: React.FormEvent<HTMLFormElement>) => void;
+}>;

package/src/interfaces/atomic.interface.ts

@@ -0,0 +1,6 @@
+export type AtomicProps = Partial<{
+  id: string;
+  className: string;
+  name: string;
+  title: string;
+}>;

package/src/interfaces/changeable.interface.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IntractableProps } from './intractable.interface';
+
+export type ChangeableProps<
+  T = React.ChangeEvent<HTMLInputElement> | string | number,
+  K = unknown
+> = Partial<
+  IntractableProps & {
+    onChange: (event?: T, value?: K) => void;
+    onBlur: (event?: T) => void;
+    onPaste: (event?: T) => void;
+  }
+>;

package/src/interfaces/child-support-atomic.interface.ts

@@ -0,0 +1,5 @@
+import { AtomicProps } from './atomic.interface';
+
+export type AtomicComponentWithChildren = {
+  children: React.ReactNode;
+} & AtomicProps;

package/src/interfaces/index.ts

@@ -0,0 +1,6 @@
+export * from './actionable.interface';
+export * from './atomic.interface';
+export * from './child-support-atomic.interface';
+export * from './changeable.interface';
+export * from './intractable.interface';
+export * from './variant.interface';

package/src/interfaces/intractable.interface.ts

@@ -0,0 +1,6 @@
+export type IntractableProps<T = string> = Partial<{
+  isDisabled: boolean;
+  isChecked: boolean;
+  isReadOnly: boolean;
+  type: T;
+}>;

package/src/interfaces/variant.interface.ts

@@ -0,0 +1,3 @@
+export type VariantProps<T> = Partial<{
+  variant: T;
+}>;

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * from './tw.styles';