powell-react 0.0.0

package/src/powell/models/config.ts

@@ -0,0 +1,85 @@
+import {$APIOptions} from "@powell/api";
+import {FixLabelPosition, LabelPosition, Size} from "@powell/models";
+
+export type ThemeName =
+    "arya-blue" |
+    "arya-green" |
+    "arya-orange" |
+    "arya-purple" |
+    "bootstrap4-dark-blue" |
+    "bootstrap4-dark-purple" |
+    "bootstrap4-light-blue" |
+    "bootstrap4-light-purple" |
+    "fluent-light" |
+    "lara-dark-amber" |
+    "lara-dark-blue" |
+    "lara-dark-cyan" |
+    "lara-dark-green" |
+    "lara-dark-indigo" |
+    "lara-dark-pink" |
+    "lara-dark-purple" |
+    "lara-dark-teal" |
+    "lara-light-amber" |
+    "lara-light-blue" |
+    "lara-light-cyan" |
+    "lara-light-green" |
+    "lara-light-indigo" |
+    "lara-light-pink" |
+    "lara-light-purple" |
+    "lara-light-teal" |
+    "luna-amber" |
+    "luna-blue" |
+    "luna-green" |
+    "luna-pink" |
+    "md-dark-deeppurple" |
+    "md-dark-indigo" |
+    "md-light-deeppurple" |
+    "md-light-indigo" |
+    "mdc-dark-deeppurple" |
+    "mdc-dark-indigo" |
+    "mdc-light-deeppurple" |
+    "mdc-light-indigo" |
+    "mira" |
+    "nano" |
+    "nova" |
+    "nova-accent" |
+    "nova-alt" |
+    "rhea" |
+    "saga-blue" |
+    "saga-green" |
+    "saga-orange" |
+    "saga-purple" |
+    "soho-dark" |
+    "soho-light" |
+    "tailwind-light" |
+    "vela-blue" |
+    "vela-green" |
+    "vela-orange" |
+    "vela-purple" |
+    "viva-dark" |
+    "viva-light";
+
+type OmittedApiOptions = Omit<$APIOptions,
+    "setAppendTo" |
+    "setStyleContainer" |
+    "setAutoZIndex" |
+    "setCssTransition" |
+    "setFilterMatchModeOptions" |
+    "setHideOverlaysOnDocumentScrolling" |
+    "setInputStyle" |
+    "setLocale" |
+    "setNonce" |
+    "setNullSortOrder" |
+    "setRipple" |
+    "setZIndex" |
+    "setPt" |
+    "changeTheme">;
+
+export interface PowellConfig extends OmittedApiOptions {
+  theme?: ThemeName;
+  rtl?: boolean;
+  showRequiredStar?: boolean;
+  inputSize?: Size;
+  labelPosition?: LabelPosition;
+  fixLabelPosition?: FixLabelPosition;
+}

package/src/powell/models/forms.ts

@@ -0,0 +1,33 @@
+import {$ButtonProps} from "@powell/api";
+import {ButtonAppearance, Nullable, Position, SafeAny} from "@powell/models";
+import {MouseEvent} from "react";
+
+export type LabelPosition = 'float' | 'fix-side' | 'fix-top';
+export type FixLabelPosition = Exclude<LabelPosition, 'float'>;
+export type IconPosition = Exclude<Position, 'top' | 'bottom'>;
+
+export interface AddonConfig {
+  type: 'button' | 'icon' | 'text';
+  label?: string;
+  severity?: $ButtonProps["severity"];
+  appearance?: ButtonAppearance;
+  icon?: string;
+  iconPosition?: IconPosition;
+  text?: string;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+
+export interface Addon {
+  before?: AddonConfig;
+  after?: AddonConfig;
+}
+
+// todo: make transform type [usage] generic in components (remove SafeAny from utils.service)
+export type TransformOptions<V = SafeAny, T = SafeAny> = {
+  value: Nullable<V>;
+  onChange: (...event: SafeAny[]) => void;
+  transform?: {
+    input?: (value: Nullable<V>) => SafeAny;
+    output?: (...event: T[]) => SafeAny;
+  }
+}

package/src/powell/models/index.ts

@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./config";
+export * from "./forms";

package/src/powell/styles/common.scss

@@ -0,0 +1,9 @@
+.error {
+  display: block;
+  color: rgb(185, 28, 28);
+}
+
+.hint {
+  display: block;
+  color: rgb(156, 163, 175);
+}

package/src/powell/themes/arya-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/arya-blue/theme.css";

package/src/powell/themes/arya-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/arya-green/theme.css";

package/src/powell/themes/arya-orange.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/arya-orange/theme.css";

package/src/powell/themes/arya-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/arya-purple/theme.css";

package/src/powell/themes/bootstrap4-dark-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/bootstrap4-dark-blue/theme.css";

package/src/powell/themes/bootstrap4-dark-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/bootstrap4-dark-purple/theme.css";

package/src/powell/themes/bootstrap4-light-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/bootstrap4-light-blue/theme.css";

package/src/powell/themes/bootstrap4-light-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/bootstrap4-light-purple/theme.css";

package/src/powell/themes/fluent-light.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/fluent-light/theme.css";

package/src/powell/themes/lara-dark-amber.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-amber/theme.css";

package/src/powell/themes/lara-dark-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-blue/theme.css";

package/src/powell/themes/lara-dark-cyan.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-cyan/theme.css";

package/src/powell/themes/lara-dark-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-green/theme.css";

package/src/powell/themes/lara-dark-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-indigo/theme.css";

package/src/powell/themes/lara-dark-pink.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-pink/theme.css";

package/src/powell/themes/lara-dark-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-purple/theme.css";

package/src/powell/themes/lara-dark-teal.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-dark-teal/theme.css";

package/src/powell/themes/lara-light-amber.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-amber/theme.css";

package/src/powell/themes/lara-light-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-blue/theme.css";

package/src/powell/themes/lara-light-cyan.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-cyan/theme.css";

package/src/powell/themes/lara-light-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-green/theme.css";

package/src/powell/themes/lara-light-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-indigo/theme.css";

package/src/powell/themes/lara-light-pink.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-pink/theme.css";

package/src/powell/themes/lara-light-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-purple/theme.css";

package/src/powell/themes/lara-light-teal.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/lara-light-teal/theme.css";

package/src/powell/themes/luna-amber.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/luna-amber/theme.css";

package/src/powell/themes/luna-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/luna-blue/theme.css";

package/src/powell/themes/luna-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/luna-green/theme.css";

package/src/powell/themes/luna-pink.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/luna-pink/theme.css";

package/src/powell/themes/md-dark-deeppurple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/md-dark-deeppurple/theme.css";

package/src/powell/themes/md-dark-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/md-dark-indigo/theme.css";

package/src/powell/themes/md-light-deeppurple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/md-light-deeppurple/theme.css";

package/src/powell/themes/md-light-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/md-light-indigo/theme.css";

package/src/powell/themes/mdc-dark-deeppurple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/mdc-light-indigo/theme.css";

package/src/powell/themes/mdc-dark-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/mdc-dark-indigo/theme.css";

package/src/powell/themes/mdc-light-deeppurple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/mdc-light-deeppurple/theme.css";

package/src/powell/themes/mdc-light-indigo.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/mdc-light-indigo/theme.css";

package/src/powell/themes/mira.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/nano/theme.css";

package/src/powell/themes/nano.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/nano/theme.css";

package/src/powell/themes/nova-accent.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/nova-accent/theme.css";

package/src/powell/themes/nova-alt.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/nova-alt/theme.css";

package/src/powell/themes/nova.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/nova/theme.css";

package/src/powell/themes/rhea.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/rhea/theme.css";

package/src/powell/themes/saga-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/saga-blue/theme.css";

package/src/powell/themes/saga-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/saga-green/theme.css";

package/src/powell/themes/saga-orange.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/saga-orange/theme.css";

package/src/powell/themes/saga-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/saga-purple/theme.css";

package/src/powell/themes/soho-dark.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/soho-dark/theme.css";

package/src/powell/themes/soho-light.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/soho-light/theme.css";

package/src/powell/themes/tailwind-light.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/tailwind-light/theme.css";

package/src/powell/themes/vela-blue.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/vela-blue/theme.css";

package/src/powell/themes/vela-green.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/vela-green/theme.css";

package/src/powell/themes/vela-orange.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/vela-orange/theme.css";

package/src/powell/themes/vela-purple.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/vela-purple/theme.css";

package/src/powell/themes/viva-dark.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/viva-dark/theme.css";

package/src/powell/themes/viva-light.css

@@ -0,0 +1 @@
+@import "primereact/resources/themes/viva-light/theme.css";

package/src/powell/utils/globalState.ts

@@ -0,0 +1,96 @@
+import {SetStateAction, useEffect, useLayoutEffect, useRef, useState} from "react";
+
+type Set<T> = (newState: SetStateAction<T>, callback?: (newState: T) => void) => void;
+
+type UseSelector<T> = <TSelected = unknown>(selector: (state: T) => TSelected, equalityFn?: Comparator<TSelected>) => TSelected;
+
+export interface StateWithValue<T> {
+  use: () => [T, Set<T>];
+  useValue: () => T;
+  get: () => T;
+  useSelector: UseSelector<T>;
+  set: Set<T>;
+  reset: () => void;
+  subscribe(subscriber: SubscriberFunc<T>): () => void;
+}
+
+type SubscriberFunc<T> = (newState: T, previousState: T) => void;
+
+interface Options<T> {
+  onSet?: SubscriberFunc<T>;
+}
+
+type Comparator<TSelected = unknown> = (a: TSelected, b: TSelected) => boolean;
+
+const useIsomorphicLayoutEffect =
+    typeof window !== "undefined" || typeof document !== "undefined"
+        ? useLayoutEffect
+        : useEffect;
+
+const equ: Comparator = (a, b) => a === b;
+
+const FR = {};
+
+function useComparator<T>(v: T, c: Comparator<T> = equ): T {
+  const f = useRef(FR as T);
+  let nv = f.current;
+
+  useIsomorphicLayoutEffect(() => {
+    f.current = nv;
+  });
+
+  if (f.current === FR || !c(v, f.current)) {
+    nv = v;
+  }
+
+  return nv;
+}
+
+export function globalState<T>(initialValue: T, options?: Options<T>): StateWithValue<T> {
+  let sb: SubscriberFunc<T>[] = [];
+
+  let v: T = initialValue;
+
+  function set(newValue: SetStateAction<T>, callback?: SubscriberFunc<T>) {
+    const pv = v;
+    v = newValue instanceof Function ? newValue(v) : newValue;
+
+    setTimeout(() => {
+      sb.forEach((c) => c(v, pv));
+      callback?.(v, pv);
+      options?.onSet?.(v, pv);
+    });
+  }
+
+  function subscribe(subscriber: SubscriberFunc<T>): () => void {
+    sb.push(subscriber);
+    return () => {
+      sb = sb.filter((f) => f !== subscriber);
+    };
+  }
+
+  function useSubscription(subscriber: SubscriberFunc<T>) {
+    useIsomorphicLayoutEffect(() => subscribe(subscriber), [subscriber]);
+  }
+
+  function use(): [T, Set<T>] {
+    const [l, s] = useState<T>(v);
+    useSubscription(s);
+    return [l, set];
+  }
+
+  function useSelector<TSelected = unknown>(selector: (state: T) => TSelected, comparator: Comparator<TSelected> = equ): TSelected {
+    const [rv] = use();
+    return useComparator(selector(rv), comparator);
+  }
+
+  return {
+    use,
+    useSelector,
+    useValue: () => use()[0],
+    get: () => v,
+    set,
+    reset: () => set(initialValue),
+    subscribe,
+  };
+}

package/src/powell/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./globalState";
+export * from "./utilsService";

package/src/powell/utils/utilsService.tsx

@@ -0,0 +1,55 @@
+import {AddonConfig, SafeAny, TransformOptions} from "@powell/models";
+import {Button} from "@powell/components/Button";
+import {$FormikContextType, $FormikValues} from "@powell/api";
+
+export const getAddonTemplate = (config?: AddonConfig) => {
+  if (!config) {
+    return <></>
+  }
+  const {type, ...rest} = config;
+  switch (type) {
+    case "button":
+      return <Button {...rest} />
+    case "icon":
+      return (
+          <span className="p-inputgroup-addon" onClick={rest?.onClick}>
+            <i className={rest.icon}></i>
+          </span>
+      )
+    case "text":
+      return <span className="p-inputgroup-addon">{rest.text}</span>
+  }
+}
+
+export const isRequiredField = (formContext: $FormikContextType<$FormikValues> | null, name: string | undefined) => {
+  const keys = name?.split('.') ?? [];
+  let current = formContext?.validationSchema?.fields;
+  for (const key of keys) {
+    if (!current) {
+      return false;
+    }
+    if (current[key]?.fields) {
+      current = current[key]?.fields;
+    } else {
+      current = current[key];
+    }
+  }
+  return current?.tests?.some((t: SafeAny) => t.OPTIONS.name === 'required');
+}
+
+// todo: make transform type [usage] generic in components (remove SafeAny from models)
+export const transformer = <V = SafeAny, T = SafeAny>(options: TransformOptions<V, T>) => {
+  const value: V = options.transform?.input?.(options.value) || options.value;
+  const onChange = (...event: T[]) => {
+    if (typeof options.transform?.output === 'function') {
+      options.onChange(options.transform.output(...event));
+    } else {
+      options.onChange(...event);
+    }
+  }
+
+  return {
+    value,
+    onChange
+  }
+}

package/src/stories/Button.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@powell/components/Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Button',
+  },
+};

package/tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "esnext",
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "noEmit": false,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@powell/*": [
+        "src/powell/*"
+      ],
+    },
+    "allowJs": true,
+    "isolatedModules": true,
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "types": [
+      "@testing-library/jest-dom"
+    ],
+    "useDefineForClassFields": true,
+  },
+  "include": [
+    "src",
+    "*.tsx",
+    "*.ts",
+    "eslint.config.js"
+  ],
+  "exclude": [
+    "coverage",
+    "config",
+    "dist",
+    "node_modules/**"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import react from '@vitejs/plugin-react';
+import { resolve } from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr({ include: '**/*.svg' })],
+  resolve: {
+    alias: {
+      "@powell": resolve(__dirname, "./src/powell/"),
+    }
+  }
+});