powell-react 1.0.0

package/api/PowellProvider.tsx

@@ -0,0 +1,37 @@
+import {PropsWithChildren} from "react";
+import {configService, powellDefaults, PrimeProvider} from "@powell/api";
+import {PowellConfig, ThemeName} from "@powell/models";
+
+const createThemeLink = () => {
+  const headEl = document.head;
+  const linkEl = document.createElement("link");
+  linkEl.rel = "stylesheet";
+  linkEl.type = "text/css";
+  linkEl.id = "powell-theme-link";
+  headEl.appendChild(linkEl);
+  return linkEl;
+}
+
+const applyTheme = (theme: ThemeName) => {
+  let themeEl: HTMLLinkElement = document.getElementById('powell-theme-link') as HTMLLinkElement;
+  if (!themeEl) {
+    themeEl = createThemeLink();
+  }
+  const themeLink = `/src/powell/themes/${theme}.css`;
+  themeEl.setAttribute('href', themeLink);
+}
+
+export const PowellProvider = (props: PropsWithChildren<{ config?: PowellConfig }>) => {
+  const {children, config} = props;
+  const defaultConfig: PowellConfig = {
+    ...powellDefaults,
+    ...config
+  };
+  configService.set(defaultConfig);
+  applyTheme(defaultConfig.theme!);
+  return (
+      <PrimeProvider value={defaultConfig}>
+        {children}
+      </PrimeProvider>
+  )
+}

package/api/api.ts

@@ -0,0 +1,126 @@
+import {
+  AutoComplete,
+  AutoCompleteChangeEvent,
+  AutoCompleteCompleteEvent,
+  AutoCompleteDropdownClickEvent,
+  AutoCompleteProps,
+  AutoCompleteSelectEvent,
+  AutoCompleteUnselectEvent,
+} from "primereact/autocomplete";
+import {
+  Calendar,
+  CalendarDateTemplateEvent,
+  CalendarMonthChangeEvent,
+  CalendarMonthNavigatorTemplateEvent,
+  CalendarNavigatorTemplateEvent,
+  CalendarProps,
+  CalendarSelectEvent,
+  CalendarViewChangeEvent,
+  CalendarVisibleChangeEvent,
+  CalendarYearNavigatorTemplateEvent,
+} from "primereact/calendar";
+import {
+  Checkbox,
+  CheckboxChangeEvent,
+  CheckboxContext,
+  CheckboxPassThroughMethodOptions,
+  CheckboxPassThroughOptions,
+  CheckboxPassThroughType,
+  CheckboxProps,
+  CheckboxState
+} from "primereact/checkbox";
+import {Dropdown, DropdownChangeEvent, DropdownFilterEvent, DropdownProps} from "primereact/dropdown";
+import {FloatLabel} from "primereact/floatlabel";
+import {InputIcon} from 'primereact/inputicon';
+import {IconField, IconFieldProps} from "primereact/iconfield";
+import {InputText, InputTextProps} from "primereact/inputtext";
+import {InputTextarea, InputTextareaProps} from "primereact/inputtextarea";
+import {Button, ButtonProps} from "primereact/button";
+import {Sidebar} from "primereact/sidebar";
+import {PanelMenu} from 'primereact/panelmenu';
+import {MenuItem} from "primereact/menuitem";
+import {
+  addLocale,
+  APIOptions,
+  locale,
+  localeOption,
+  localeOptions,
+  PrimeReactContext,
+  PrimeReactProvider,
+  updateLocaleOption,
+  updateLocaleOptions,
+  ZIndexOptions
+} from "primereact/api";
+import {classNames, UniqueComponentId} from "primereact/utils";
+
+export const PrimeAutoComplete = AutoComplete;
+export type PrimeAutoCompleteProps = AutoCompleteProps;
+export type PrimeAutoCompleteSelectEvent = AutoCompleteSelectEvent;
+export type PrimeAutoCompleteUnselectEvent = AutoCompleteUnselectEvent;
+export type PrimeAutoCompleteCompleteEvent = AutoCompleteCompleteEvent;
+export type PrimeAutoCompleteChangeEvent = AutoCompleteChangeEvent;
+export type PrimeAutoCompleteDropdownClickEvent = AutoCompleteDropdownClickEvent;
+
+export const PrimeCalendar = Calendar;
+export type PrimeCalendarProps = CalendarProps;
+export type PrimeCalendarSelectEvent = CalendarSelectEvent;
+export type PrimeCalendarNavigatorTemplateEvent = CalendarNavigatorTemplateEvent;
+export type PrimeCalendarDateTemplateEvent = CalendarDateTemplateEvent;
+export type PrimeCalendarMonthChangeEvent = CalendarMonthChangeEvent;
+export type PrimeCalendarVisibleChangeEvent = CalendarVisibleChangeEvent;
+export type PrimeCalendarViewChangeEvent = CalendarViewChangeEvent;
+export type PrimeCalendarMonthNavigatorTemplateEvent = CalendarMonthNavigatorTemplateEvent;
+export type PrimeCalendarYearNavigatorTemplateEvent = CalendarYearNavigatorTemplateEvent;
+
+export const PrimeCheckbox = Checkbox;
+export type PrimeCheckboxChangeEvent = CheckboxChangeEvent;
+export type PrimeCheckboxPassThroughMethodOptions = CheckboxPassThroughMethodOptions;
+export type PrimeCheckboxPassThroughType<T> = CheckboxPassThroughType<T>;
+export type PrimeCheckboxPassThroughOptions = CheckboxPassThroughOptions;
+export type PrimeCheckboxProps = CheckboxProps;
+export type PrimeCheckboxState = CheckboxState;
+export type PrimeCheckboxContext = CheckboxContext;
+
+export const PrimeButton = Button;
+export type PrimeButtonProps = ButtonProps;
+
+export const PrimeInputText = InputText;
+export type PrimeInputTextProps = InputTextProps;
+
+export const PrimeInputTextarea = InputTextarea;
+export type PrimeInputTextareaProps = InputTextareaProps;
+
+export const PrimeIconField = IconField;
+export type PrimeIconFieldProps = IconFieldProps;
+
+export const PrimeFloatLabel = FloatLabel;
+
+export const PrimeInputIcon = InputIcon;
+
+export type PrimeAPIOptions = APIOptions;
+
+export const PrimeDropdown = Dropdown;
+export type PrimeDropdownProps = DropdownProps;
+export type PrimeDropdownChangeEvent = DropdownChangeEvent;
+export type PrimeDropdownFilterEvent = DropdownFilterEvent;
+
+export const PrimeProvider = PrimeReactProvider;
+
+export const PrimeContext = PrimeReactContext;
+
+export const PrimePanelMenu = PanelMenu;
+
+export const PrimeSidebar = Sidebar;
+
+export type PrimeMenuItem = MenuItem;
+
+export type PrimeZIndexOptions = ZIndexOptions;
+
+export const primeLocale = locale;
+export const primeAddLocale = addLocale;
+export const primeUpdateLocaleOption = updateLocaleOption;
+export const primeUpdateLocaleOptions = updateLocaleOptions;
+export const primeLocaleOption = localeOption;
+export const primeLocaleOptions = localeOptions;
+export const PrimeUniqueComponentId = UniqueComponentId;
+export const primeClassNames = classNames;

package/api/configService.ts

@@ -0,0 +1,4 @@
+import {globalState} from "@powell/utils";
+import {PowellConfig} from "@powell/models";
+
+export const configService = globalState<PowellConfig>({});

package/api/index.ts

@@ -0,0 +1,4 @@
+export * from './api';
+export * from './configService';
+export * from './powellDefaults';
+export * from './PowellProvider';

package/api/powellDefaults.ts

@@ -0,0 +1,11 @@
+import {PowellConfig} from "@powell/models";
+
+export const powellDefaults: PowellConfig = {
+  theme: 'lara-light-cyan',
+  rtl: false,
+  showRequiredStar: true,
+  ripple: true,
+  inputSize: 'md',
+  labelPosition: 'fix-top',
+  fixLabelPosition: 'fix-side'
+}

package/components/AutoComplete/AutoComplete.scss

@@ -0,0 +1,126 @@
+.auto-complete-wrapper {
+  .field {
+    display: flex;
+    gap: 0.25rem 1rem;
+
+    > div {
+      flex-grow: 1;
+    }
+  }
+
+  :where(.p-inputtext, .p-autocomplete) {
+    width: 100%;
+  }
+
+  .p-icon-field {
+    .p-input-icon {
+      z-index: 5;
+      color: var(--text-color-secondary);
+    }
+
+    &.p-icon-field-right {
+      :where(.p-inputtext) {
+        padding-right: 2.5rem;
+      }
+
+      .p-input-icon {
+        right: 0.75rem;
+        left: auto;
+      }
+    }
+
+    &.p-icon-field-left {
+      :where(.p-inputtext) {
+        padding-left: 2.5rem;
+      }
+
+      .p-input-icon {
+        left: 0.75rem;
+        right: auto;
+      }
+    }
+  }
+
+  &.label-fix-side .field {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &.label-fix-top .field {
+    flex-direction: column;
+
+    label {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &.addon-before {
+    [class*="icon-"] {
+      :where(.p-inputtext, .p-autocomplete) {
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+      }
+    }
+  }
+
+  &.addon-after {
+    &.label-float {
+      .p-inputgroup-addon {
+        border-left: 0;
+      }
+    }
+
+    [class*="icon-"] {
+      :where(.p-inputtext, .p-autocomplete) {
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+      }
+    }
+  }
+
+  &[class*="addon-"] {
+    .p-inputgroup {
+      .p-icon-field,
+      .p-float-label {
+        flex-grow: 1;
+      }
+    }
+
+    &.addon-before :where(.p-inputtext, .p-autocomplete)  {
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    }
+
+    &.addon-after :where(.p-inputtext, .p-autocomplete)  {
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
+    }
+  }
+
+  &.is-ltr {
+    direction: ltr;
+
+    &.label-float {
+      &.icon-left .field label {
+        left: 2.5rem;
+      }
+    }
+  }
+
+  &.is-rtl {
+    direction: rtl;
+
+    &.label-float {
+      label {
+        left: auto;
+        right: 0.75rem;
+      }
+
+      &.icon-right .field label {
+        right: 2.5rem;
+      }
+    }
+
+    &[class*="addon-"] {
+      .p-inputgroup {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+}

package/components/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,184 @@
+import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
+import {Addon, LabelPosition, Size} from "@powell/models";
+import {
+  primeClassNames,
+  PrimeFloatLabel,
+  PrimeIconField,
+  PrimeIconFieldProps,
+  PrimeInputIcon,
+  PrimeAutoComplete,
+  PrimeAutoCompleteProps,
+  PrimeUniqueComponentId
+} from "@powell/api";
+import {getAddonTemplate, transformer} from "@powell/utils";
+import {Field, FieldProps} from "formik";
+import {useApplyConfig, useFormContext} from "@powell/hooks";
+import {SafeAny} from "@powell/models/common";
+import {ErrorMessage} from "@powell/components/ErrorMessage";
+import './AutoComplete.scss';
+
+interface AutoCompleteProps extends PrimeAutoCompleteProps {
+  name?: string;
+  parseError?: (error: string) => ReactNode;
+  transform?: {
+    input?: (value: SafeAny) => string;
+    output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
+  };
+  showRequiredStar?: boolean;
+  rtl?: boolean;
+  label?: string;
+  icon?: string | ReactNode;
+  hint?: string;
+  addon?: Addon;
+  inputSize?: Size;
+  iconPosition?: PrimeIconFieldProps["iconPosition"];
+  labelPosition?: LabelPosition;
+}
+
+export const AutoComplete = (props: AutoCompleteProps) => {
+  props = useApplyConfig(props);
+  const {
+    parseError,
+    name,
+    transform = {},
+    iconPosition = 'left',
+    labelPosition,
+    addon,
+    icon,
+    rtl,
+    showRequiredStar,
+    variant,
+    inputSize,
+    ...rest
+  } = props;
+
+  const inputId = useRef(PrimeUniqueComponentId());
+
+  // Check if we're in Formik context
+  const formContext = useFormContext();
+  const withinForm = !!formContext && !!name;
+  const isRequired = withinForm && formContext.validationSchema?.fields?.[name].tests?.some((t: SafeAny) => t.OPTIONS.name === 'required');
+
+  // Internal state for non-Formik usage
+  const [internalValue, setInternalValue] = useState(rest.value || '');
+
+  const inputEl = useCallback(() => {
+    const commonProps = {
+      ...rest,
+      variant,
+      id: inputId.current,
+      name,
+    };
+
+    if (withinForm) {
+      // if in Formik context
+      return (
+          <Field name={name}>
+            {({field, meta}: FieldProps) => {
+              const {value, onChange} = transformer({
+                value: field.value,
+                onChange: (event: string) => formContext.setFieldValue(name, event),
+                transform: {
+                  input: transform.input ?? (value => value),
+                  output: transform.output ?? (event => event.target.value)
+                }
+              });
+
+              return (
+                  <>
+                    <PrimeAutoComplete
+                        {...commonProps}
+                        value={value}
+                        onChange={(event) => {
+                          onChange(event);
+                          rest.onChange?.(event);
+                        }}
+                        onBlur={(event) => {
+                          field.onBlur(event);
+                          rest.onBlur?.(event);
+                        }}
+                        invalid={!!meta.error}
+                    />
+                    <ErrorMessage message={meta.error} parseError={parseError} hint={rest.hint}/>
+                  </>
+              );
+            }}
+          </Field>
+      );
+    } else {
+      // if outside Formik context
+      const {value, onChange} = transformer({
+        value: internalValue,
+        onChange: (event: string) => setInternalValue(event),
+        transform: {
+          input: transform.input ?? (value => value),
+          output: transform.output ?? (event => event.target.value)
+        }
+      });
+
+      return (
+          <PrimeAutoComplete
+              {...commonProps}
+              value={value}
+              onChange={(event) => {
+                onChange(event);
+                rest.onChange?.(event);
+              }}
+              onBlur={rest.onBlur}
+          />
+      );
+    }
+  }, [internalValue]);
+
+  const labelEl = rest.label && (
+      <label htmlFor={inputId.current}>
+        {rest.label}
+        {isRequired && showRequiredStar ? '*' : ''}
+      </label>
+  );
+
+  const iconEl = icon && (
+      typeof icon === 'string'
+          ? <PrimeInputIcon className={icon}></PrimeInputIcon>
+          : <PrimeInputIcon>{icon}</PrimeInputIcon>
+  );
+
+  const withIcon = (
+      <PrimeIconField iconPosition={iconPosition}>
+        {iconEl}
+        {inputEl()}
+      </PrimeIconField>
+  );
+
+  return (
+      <div className={primeClassNames('auto-complete-wrapper',
+          `variant-${variant}`,
+          `p-inputtext-${inputSize}`,
+          {
+            [`label-${labelPosition}`]: rest.label,
+            [`icon-${iconPosition}`]: iconEl,
+            'is-rtl': rtl,
+            'is-ltr': !rtl,
+            'addon-before': addon?.before,
+            'addon-after': addon?.after,
+          })}>
+        <div className="field">
+          {labelPosition !== 'float' && labelEl}
+          <div className={primeClassNames({"p-inputgroup": addon})}>
+            {getAddonTemplate(addon?.before)}
+            {
+              labelPosition === 'float' ? (
+                  <PrimeFloatLabel>
+                    {icon ? withIcon : inputEl()}
+                    {labelEl}
+                  </PrimeFloatLabel>
+              ) : (
+                  icon ? withIcon : inputEl()
+              )
+            }
+            {getAddonTemplate(addon?.after)}
+          </div>
+        </div>
+      </div>
+  );
+};

package/components/AutoComplete/index.ts

@@ -0,0 +1 @@
+export * from "./AutoComplete";

package/components/Button/Button.tsx

@@ -0,0 +1,85 @@
+import {memo, MouseEvent, useRef, useState} from "react";
+import {PrimeButton, PrimeButtonProps, primeClassNames} from "@powell/api";
+import {ButtonAppearance} from "@powell/models";
+
+type ButtonState = 'default' | 'loading' | 'next';
+
+interface ButtonProps extends Omit<PrimeButtonProps, "loading" | "link" | "text" | "outlined"> {
+  async?: true;
+  onClickAsync?: (event: { loadingCallback: (ok?: boolean) => void, event: MouseEvent<HTMLButtonElement> }) => void;
+  appearance?: ButtonAppearance;
+  nextLabel?: string;
+  nextIcon?: string;
+  nextRaised?: boolean;
+  nextAppearance?: ButtonAppearance;
+  nextSeverity?: ButtonProps['severity'];
+  state?: ButtonState;
+  onStateChange?: (state: ButtonState) => void;
+}
+
+type ButtonTempProps = Pick<ButtonProps, "label" | "icon" | "raised" | "appearance" | "severity">;
+
+export const Button = memo((props: ButtonProps) => {
+  const {
+    async,
+    onClickAsync,
+    onClick,
+    nextLabel,
+    nextIcon,
+    nextRaised,
+    nextSeverity,
+    nextAppearance,
+    state = 'default',
+    onStateChange,
+    type = 'button',
+    ...rest
+  } = props;
+
+  const [_state, _setState] = useState<ButtonState>(state);
+
+  const getButtonTempProps = (newState: ButtonState) => {
+    return {
+      label: newState === 'default' ? props.label : (nextLabel ?? props.label),
+      icon: newState === 'default' ? props.icon : (nextIcon ?? props.icon),
+      appearance: newState === 'default' ? props.appearance : (nextAppearance ?? props.appearance),
+      raised: newState === 'default' ? props.raised : (nextRaised ?? props.raised),
+      severity: newState === 'default' ? props.severity : (nextSeverity ?? props.severity),
+    }
+  }
+
+  const tempProps = useRef<ButtonTempProps>(getButtonTempProps(state));
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    if (async) {
+      onClickAsync?.({event, loadingCallback: removeLoading});
+      _setState('loading');
+      onStateChange?.('loading');
+    } else {
+      onClick?.(event);
+    }
+  }
+
+  const removeLoading = (toggleState?: boolean) => {
+    const newState = toggleState ? 'next' : 'default';
+    tempProps.current = getButtonTempProps(newState);
+    _setState(newState);
+    onStateChange?.(newState);
+  }
+
+  return (
+      <PrimeButton
+          type={type}
+          {...rest}
+          onClick={handleClick}
+          label={async ? tempProps.current.label : props.label}
+          icon={async ? tempProps.current.icon : props.icon}
+          severity={async ? tempProps.current.severity : props.severity}
+          raised={async ? tempProps.current.raised : props.raised}
+          text={async ? tempProps.current.appearance === 'text' : props.appearance === 'text'}
+          outlined={async ? tempProps.current.appearance === 'outlined' : props.appearance === 'outlined'}
+          link={async ? tempProps.current.appearance === 'link' : props.appearance === 'link'}
+          loading={_state === 'loading'}
+          className={primeClassNames(props.className, `state-${_state}`)}
+      />
+  )
+})

package/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/components/Checkbox/Checkbox.scss

@@ -0,0 +1,35 @@
+.checkbox-wrapper {
+  .field {
+    display: flex;
+    gap: 0.25rem 1rem;
+
+    > .field-inner {
+      flex-grow: 1;
+    }
+  }
+
+  :where(.p-checkbox) {
+    width: 100%;
+  }
+
+  &.label-fix-side .field {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &.label-fix-top .field {
+    flex-direction: column;
+
+    label {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &.is-ltr {
+    direction: ltr;
+  }
+
+  &.is-rtl {
+    direction: rtl;
+  }
+}