powell-react 1.0.0

package/models/config.ts

@@ -0,0 +1,86 @@
+import {PrimeAPIOptions} from "@powell/api";
+import {Size} from "@powell/models/common";
+import {FixLabelPosition, LabelPosition} from "@powell/models/forms";
+
+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 OmittedPrimeApiOptions = Omit<PrimeAPIOptions,
+    "setAppendTo" |
+    "setStyleContainer" |
+    "setAutoZIndex" |
+    "setCssTransition" |
+    "setFilterMatchModeOptions" |
+    "setHideOverlaysOnDocumentScrolling" |
+    "setInputStyle" |
+    "setLocale" |
+    "setNonce" |
+    "setNullSortOrder" |
+    "setRipple" |
+    "setZIndex" |
+    "setPt" |
+    "changeTheme">;
+
+export interface PowellConfig extends OmittedPrimeApiOptions {
+  theme?: ThemeName;
+  rtl?: boolean;
+  showRequiredStar?: boolean;
+  inputSize?: Size;
+  labelPosition?: LabelPosition;
+  fixLabelPosition?: FixLabelPosition;
+}

package/models/forms.ts

@@ -0,0 +1,23 @@
+import {PrimeButtonProps} from "@powell/api";
+import {ButtonAppearance, Position} 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?: PrimeButtonProps["severity"];
+  appearance?: ButtonAppearance;
+  icon?: string;
+  iconPosition?: IconPosition;
+  text?: string;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+
+export interface Addon {
+  before?: AddonConfig;
+  after?: AddonConfig;
+}

package/models/index.ts

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

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "powell-react",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "primeicons": "^7.0.0",
+    "primereact": "^10.7.0",
+    "react": "^18.2.0"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/themes/arya-blue.css

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

package/themes/arya-green.css

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

package/themes/arya-orange.css

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

package/themes/arya-purple.css

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

package/themes/bootstrap4-dark-blue.css

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

package/themes/bootstrap4-dark-purple.css

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

package/themes/bootstrap4-light-blue.css

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

package/themes/bootstrap4-light-purple.css

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

package/themes/fluent-light.css

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

package/themes/lara-dark-amber.css

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

package/themes/lara-dark-blue.css

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

package/themes/lara-dark-cyan.css

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

package/themes/lara-dark-green.css

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

package/themes/lara-dark-indigo.css

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

package/themes/lara-dark-pink.css

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

package/themes/lara-dark-purple.css

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

package/themes/lara-dark-teal.css

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

package/themes/lara-light-amber.css

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

package/themes/lara-light-blue.css

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

package/themes/lara-light-cyan.css

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

package/themes/lara-light-green.css

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

package/themes/lara-light-indigo.css

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

package/themes/lara-light-pink.css

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

package/themes/lara-light-purple.css

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

package/themes/lara-light-teal.css

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

package/themes/luna-amber.css

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

package/themes/luna-blue.css

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

package/themes/luna-green.css

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

package/themes/luna-pink.css

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

package/themes/md-dark-deeppurple.css

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

package/themes/md-dark-indigo.css

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

package/themes/md-light-deeppurple.css

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

package/themes/md-light-indigo.css

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

package/themes/mdc-dark-deeppurple.css

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

package/themes/mdc-dark-indigo.css

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

package/themes/mdc-light-deeppurple.css

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

package/themes/mdc-light-indigo.css

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

package/themes/mira.css

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

package/themes/nano.css

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

package/themes/nova-accent.css

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

package/themes/nova-alt.css

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

package/themes/nova.css

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

package/themes/rhea.css

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

package/themes/saga-blue.css

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

package/themes/saga-green.css

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

package/themes/saga-orange.css

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

package/themes/saga-purple.css

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

package/themes/soho-dark.css

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

package/themes/soho-light.css

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

package/themes/tailwind-light.css

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

package/themes/vela-blue.css

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

package/themes/vela-green.css

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

package/themes/vela-orange.css

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

package/themes/vela-purple.css

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

package/themes/viva-dark.css

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

package/themes/viva-light.css

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

package/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/utils/index.ts

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

package/utils/utilsService.tsx

@@ -0,0 +1,39 @@
+import {AddonConfig} from "@powell/models";
+import {Button} from "@powell/components/Button";
+import {SafeAny} from "@powell/models/common";
+import {UseTransformOptions} from "@powell/hooks";
+
+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 transformer = (options: UseTransformOptions) => {
+  const value = options.transform?.input?.(options.value) || options.value;
+  const onChange = (...event: SafeAny[]) => {
+    if (typeof options.transform?.output === 'function') {
+      options.onChange(options.transform.output(...event));
+    } else {
+      options.onChange(...event);
+    }
+  }
+
+  return {
+    value,
+    onChange
+  }
+}