powell-react 1.0.0

package/components/InputText/InputText.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,
+  PrimeInputText,
+  PrimeInputTextProps,
+  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 './InputText.scss';
+
+interface InputTextProps extends PrimeInputTextProps {
+  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;
+  inputSize?: Size;
+  addon?: Addon;
+  iconPosition?: PrimeIconFieldProps["iconPosition"];
+  labelPosition?: LabelPosition;
+}
+
+export const InputText = (props: InputTextProps) => {
+  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 rootEl = 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 (
+                  <>
+                    <PrimeInputText
+                        {...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 (
+          <PrimeInputText
+              {...commonProps}
+              value={value}
+              onChange={(event) => {
+                onChange(event);
+                rest.onChange?.(event);
+              }}
+              onBlur={rest.onBlur}
+          />
+      );
+    }
+  }, [internalValue, props]);
+
+  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}
+        {rootEl()}
+      </PrimeIconField>
+  );
+
+  return (
+      <div className={primeClassNames('input-text-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('field-inner', {"p-inputgroup": addon})}>
+            {getAddonTemplate(addon?.before)}
+            {
+              labelPosition === 'float' ? (
+                  <PrimeFloatLabel>
+                    {icon ? withIcon : rootEl()}
+                    {labelEl}
+                  </PrimeFloatLabel>
+              ) : (
+                  icon ? withIcon : rootEl()
+              )
+            }
+            {getAddonTemplate(addon?.after)}
+          </div>
+        </div>
+      </div>
+  );
+};

package/components/InputText/index.ts

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

package/components/InputTextarea/InputTextarea.scss

@@ -0,0 +1,126 @@
+.input-textarea-wrapper {
+  .field {
+    display: flex;
+    gap: 0.25rem 1rem;
+
+    > .field-inner {
+      flex-grow: 1;
+    }
+  }
+
+  :where(.p-inputtextarea) {
+    width: 100%;
+  }
+
+  .p-icon-field {
+    .p-input-icon {
+      z-index: 5;
+      color: var(--text-color-secondary);
+    }
+
+    &.p-icon-field-right {
+      :where(.p-inputtextarea) {
+        padding-right: 2.5rem;
+      }
+
+      .p-input-icon {
+        right: 0.75rem;
+        left: auto;
+      }
+    }
+
+    &.p-icon-field-left {
+      :where(.p-inputtextarea) {
+        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-inputtextarea) {
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+      }
+    }
+  }
+
+  &.addon-after {
+    &.label-float {
+      .p-inputgroup-addon {
+        border-left: 0;
+      }
+    }
+
+    [class*="icon-"] {
+      :where(.p-inputtextarea) {
+        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-inputtextarea) {
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    }
+
+    &.addon-after :where(.p-inputtextarea) {
+      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/InputTextarea/InputTextarea.tsx

@@ -0,0 +1,181 @@
+import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
+import {Addon, LabelPosition} from "@powell/models";
+import {
+  primeClassNames,
+  PrimeFloatLabel,
+  PrimeIconField,
+  PrimeIconFieldProps,
+  PrimeInputIcon,
+  PrimeInputTextarea,
+  PrimeInputTextareaProps,
+  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 './InputTextarea.scss';
+
+interface InputTextareaProps extends PrimeInputTextareaProps {
+  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;
+  iconPosition?: PrimeIconFieldProps["iconPosition"];
+  labelPosition?: LabelPosition;
+}
+
+export const InputTextarea = (props: InputTextareaProps) => {
+  props = useApplyConfig(props);
+  const {
+    parseError,
+    name,
+    transform = {},
+    iconPosition = 'left',
+    labelPosition,
+    addon,
+    icon,
+    rtl,
+    showRequiredStar,
+    variant,
+    ...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 rootEl = 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 (
+                  <>
+                    <PrimeInputTextarea
+                        {...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 (
+          <PrimeInputTextarea
+              {...commonProps}
+              value={value}
+              onChange={(event) => {
+                onChange(event);
+                rest.onChange?.(event);
+              }}
+              onBlur={rest.onBlur}
+          />
+      );
+    }
+  }, [internalValue, props]);
+
+  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}
+        {rootEl()}
+      </PrimeIconField>
+  );
+
+  return (
+      <div className={primeClassNames('input-textarea-wrapper',
+          `variant-${variant}`,
+          {
+            [`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('field-inner', {"p-inputgroup": addon})}>
+            {getAddonTemplate(addon?.before)}
+            {
+              labelPosition === 'float' ? (
+                  <PrimeFloatLabel>
+                    {icon ? withIcon : rootEl()}
+                    {labelEl}
+                  </PrimeFloatLabel>
+              ) : (
+                  icon ? withIcon : rootEl()
+              )
+            }
+            {getAddonTemplate(addon?.after)}
+          </div>
+        </div>
+      </div>
+  );
+};

package/components/InputTextarea/index.ts

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

package/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./useApplyConfig";
+export * from "./useFormContext";
+export * from "./usePowellConfig";
+export * from "./useTransform";

package/hooks/useApplyConfig.ts

@@ -0,0 +1,36 @@
+import {usePowellConfig} from "@powell/hooks/usePowellConfig";
+import {PowellConfig} from "@powell/models";
+
+interface ApplyConfigOptions {
+  isFixLabel?: boolean;
+  sizable?: boolean;
+}
+
+interface CommonConfigProps {
+  rtl?: PowellConfig["rtl"];
+  showRequiredStar?: PowellConfig["showRequiredStar"];
+  labelPosition?: PowellConfig["labelPosition"];
+  inputSize?: PowellConfig["inputSize"];
+}
+
+export const useApplyConfig = <T extends CommonConfigProps>(props: T, options: ApplyConfigOptions = {}) => {
+  const [config] = usePowellConfig();
+  const {sizable = true, isFixLabel = false} = options;
+
+  const result = {
+    ...props,
+    rtl: props.rtl ?? config.rtl,
+    showRequiredStar: props.showRequiredStar ?? config.showRequiredStar,
+    labelPosition: props.labelPosition ?? config.labelPosition,
+  }
+
+  if (isFixLabel) {
+    result.labelPosition = config.fixLabelPosition;
+  }
+
+  if (sizable) {
+    result.inputSize = props.inputSize ?? config.inputSize;
+  }
+
+  return result;
+}

package/hooks/useFormContext.ts

@@ -0,0 +1,14 @@
+import {useContext} from "react";
+import {FormikConfig, FormikContextType, FormikValues, useFormikContext} from "formik";
+import {FormContext} from "@powell/components/FormContainer";
+
+export const useFormContext = () => {
+  const context = useContext(FormContext) as FormikConfig<FormikValues>;
+  const formikContext = useFormikContext();
+
+  if (!context || !formikContext) {
+    return null;
+  }
+
+  return {...context, ...formikContext} as FormikContextType<FormikValues>;
+};

package/hooks/usePowellConfig.ts

@@ -0,0 +1,64 @@
+import {configService, PrimeContext, PrimeZIndexOptions} from "@powell/api";
+import {useContext} from "react";
+import {PowellConfig, SafeAny} from "@powell/models";
+
+export const usePowellConfig = () => {
+  const [powellConfig, setPowellConfig] = configService.use();
+  const {
+    setPt,
+    setFilterMatchModeOptions,
+    setLocale,
+    setNonce,
+    setHideOverlaysOnDocumentScrolling,
+    setRipple,
+    setCssTransition,
+    setStyleContainer,
+    setInputStyle,
+    setNullSortOrder,
+    setZIndex,
+    setAutoZIndex,
+    setAppendTo,
+    changeTheme,
+    ...restPrimeConfig
+  } = useContext(PrimeContext);
+
+  const actions: Partial<Record<keyof PowellConfig, (c: PowellConfig) => SafeAny>> = {
+    pt: (v) => setPt?.(v.pt!),
+    filterMatchModeOptions: (v) => setFilterMatchModeOptions?.(v.filterMatchModeOptions!),
+    locale: (v) => setLocale?.(v.locale!),
+    nonce: (v) => setNonce?.(v.nonce!),
+    hideOverlaysOnDocumentScrolling: (v) => setHideOverlaysOnDocumentScrolling?.(v.hideOverlaysOnDocumentScrolling!),
+    ripple: (v) => {
+      setRipple?.(v.ripple!);
+      if (v.ripple) {
+        document.body.classList.remove('p-ripple-disabled');
+      } else {
+        document.body.classList.add('p-ripple-disabled');
+      }
+    },
+    cssTransition: (v) => setCssTransition?.(v.cssTransition!),
+    styleContainer: (v) => setStyleContainer?.(v.styleContainer!),
+    inputStyle: (v) => {
+      if (v.inputStyle === 'filled') {
+        document.body.classList.add('p-input-filled');
+      } else {
+        document.body.classList.remove('p-input-filled');
+      }
+      setInputStyle?.(v.inputStyle!);
+    },
+    nullSortOrder: (v) => setNullSortOrder?.(v.nullSortOrder!),
+    zIndex: (v) => setZIndex?.(v.zIndex! as PrimeZIndexOptions),
+    autoZIndex: (v) => setAutoZIndex?.(v.autoZIndex!),
+    appendTo: (v) => setAppendTo?.(v.appendTo!),
+    theme: (v) => changeTheme?.(powellConfig.theme, v.theme!, 'powell-theme-link')
+  }
+  const updateConfig = (c: Partial<PowellConfig>) => {
+    for (const key in c) {
+      if (key in actions) {
+        actions[key as keyof PowellConfig]?.(c);
+      }
+      setPowellConfig(prev => ({...prev, ...c}));
+    }
+  }
+  return [{...powellConfig, ...restPrimeConfig}, updateConfig] as [config: PowellConfig, (c: Partial<PowellConfig>) => any];
+}

package/hooks/useTransform.ts

@@ -0,0 +1,27 @@
+import {SafeAny} from "@powell/models/common";
+
+export type UseTransformOptions = {
+  value: SafeAny;
+  onChange: (...event: SafeAny[]) => void;
+  transform?: {
+    input?: (value: SafeAny) => SafeAny;
+    output?: (...event: SafeAny[]) => SafeAny;
+  }
+}
+
+export const useTransform = (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
+  }
+}
+

package/index.js

@@ -0,0 +1 @@
+export { default as Button } from './components/Button';

package/models/common.ts

@@ -0,0 +1,7 @@
+export type ButtonAppearance = 'default' | 'text' | 'outlined' | 'link';
+export type Direction = 'rtl' | 'ltr';
+export type Size = 'sm' | 'md' | 'lg';
+export type Orientation = 'horizontal' | 'vertical';
+export type Position = 'left' | 'right' | 'top' | 'bottom';
+export type Nullable<T = void> = T | null | undefined;
+export type SafeAny = any;