powell-react 0.0.9 → 0.0.11

package/src/powell/components/TreeSelect/TreeSelect.scss

@@ -1,126 +0,0 @@
-.dropdown-wrapper {
-  .field {
-    display: flex;
-    gap: 0.25rem 1rem;
-
-    > div {
-      flex-grow: 1;
-    }
-  }
-
-  :where(.p-inputtext, .p-dropdown) {
-    width: 100%;
-  }
-
-  .p-icon-field {
-    .p-input-icon {
-      z-index: 5;
-      color: var(--text-color-secondary);
-    }
-
-    &.p-icon-field-right {
-      :where(.p-dropdown) {
-        padding-right: 2.5rem;
-      }
-
-      .p-input-icon {
-        right: 0.75rem;
-        left: auto;
-      }
-    }
-
-    &.p-icon-field-left {
-      :where(.p-dropdown) {
-        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-dropdown) {
-        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-dropdown) {
-        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-dropdown) {
-      border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    }
-
-    &.addon-after :where(.p-inputtext, .p-dropdown) {
-      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/src/powell/components/TreeSelect/TreeSelect.tsx

@@ -1,190 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {Addon, LabelPosition, Size} from "@powell/models";
-import {
-  $classNames,
-  $ErrorMessage,
-  $Field,
-  $FieldProps,
-  $FloatLabel,
-  $IconField,
-  $IconFieldProps,
-  $InputIcon,
-  $TreeSelect,
-  $TreeSelectProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {getAddonTemplate, isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/TreeSelect/TreeSelect.scss';
-
-interface TreeSelectProps extends $TreeSelectProps {
-  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?: $IconFieldProps["iconPosition"];
-  labelPosition?: LabelPosition;
-}
-
-export const TreeSelect = (props: TreeSelectProps) => {
-  props = useApplyConfig(props);
-  const {
-    parseError,
-    name,
-    transform = {},
-    iconPosition = 'left',
-    labelPosition,
-    addon,
-    icon,
-    rtl,
-    showRequiredStar,
-    variant,
-    inputSize,
-    ...rest
-  } = props;
-
-  const inputId = useRef($UniqueComponentId());
-
-  // Check if we're in Formik context
-  const formContext = useFormContext();
-  const withinForm = !!formContext && !!name;
-  const isRequired = withinForm && isRequiredField(formContext, name);
-
-  // 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 (
-                  <>
-                    <$TreeSelect
-                        {...commonProps}
-                        value={value}
-                        onChange={(event) => {
-                          onChange(event);
-                          rest.onChange?.(event);
-                        }}
-                        onBlur={(event) => {
-                          field.onBlur(event);
-                          rest.onBlur?.(event);
-                        }}
-                        invalid={!!meta.error}
-                    />
-                    <$ErrorMessage name={name}>
-                      {
-                        (message) => <small className="error">{parseError?.(message) ?? message}</small>
-                      }
-                    </$ErrorMessage>
-                    <small className="hint">{rest.hint}</small>
-                  </>
-              );
-            }}
-          </$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 (
-          <$TreeSelect
-              {...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'
-          ? <$InputIcon className={icon}></$InputIcon>
-          : <$InputIcon>{icon}</$InputIcon>
-  );
-
-  const withIcon = (
-      <$IconField iconPosition={iconPosition}>
-        {iconEl}
-        {rootEl()}
-      </$IconField>
-  );
-
-  return (
-      <div className={$classNames('dropdown-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={$classNames('field-inner', {"p-inputgroup": addon})}>
-            {getAddonTemplate(addon?.before)}
-            {
-              labelPosition === 'float' ? (
-                  <$FloatLabel>
-                    {icon ? withIcon : rootEl()}
-                    {labelEl}
-                  </$FloatLabel>
-              ) : (
-                  icon ? withIcon : rootEl()
-              )
-            }
-            {getAddonTemplate(addon?.after)}
-          </div>
-        </div>
-      </div>
-  );
-};

package/src/powell/components/TreeSelect/index.ts

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

package/src/powell/components/TriStateCheckbox/TriStateCheckbox.scss

@@ -1,32 +0,0 @@
-.knob-wrapper {
-  .field {
-    display: flex;
-    gap: 0.25rem 1rem;
-
-    > .field-inner {
-      flex-grow: 1;
-      display: flex;
-    }
-  }
-
-  &.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;
-  }
-}

package/src/powell/components/TriStateCheckbox/TriStateCheckbox.tsx

@@ -1,144 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {FixLabelPosition} from "@powell/models";
-import {
-  $classNames,
-  $ErrorMessage,
-  $Field,
-  $FieldProps,
-  $TriStateCheckbox,
-  $TriStateCheckboxProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/TriStateCheckbox/TriStateCheckbox.scss';
-
-interface TriStateCheckboxProps extends Omit<$TriStateCheckboxProps, 'checked'> {
-  checked?: boolean;
-  name?: string;
-  parseError?: (error: string) => ReactNode;
-  transform?: {
-    input?: (value: SafeAny) => string;
-    output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
-  };
-  showRequiredStar?: boolean;
-  rtl?: boolean;
-  label?: string;
-  hint?: string;
-  labelPosition?: FixLabelPosition;
-}
-
-export const TriStateCheckbox = (props: TriStateCheckboxProps) => {
-  props = useApplyConfig(props, {sizable: false, isFixLabel: true});
-  const {
-    parseError,
-    name,
-    transform = {},
-    labelPosition,
-    rtl,
-    showRequiredStar,
-    ...rest
-  } = props;
-
-  const inputId = useRef($UniqueComponentId());
-
-  // Check if we're in Formik context
-  const formContext = useFormContext();
-  const withinForm = !!formContext && !!name;
-  const isRequired = withinForm && isRequiredField(formContext, name);
-
-  // Internal state for non-Formik usage
-  const [internalValue, setInternalValue] = useState(rest.value);
-
-  const rootEl = useCallback(() => {
-    const commonProps = {
-      ...rest,
-      inputId: 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: boolean) => formContext.setFieldValue(name, event),
-                transform: {
-                  input: transform.input ?? (value => value),
-                  output: transform.output ?? (event => event.value)
-                }
-              });
-
-              return (
-                  <>
-                    <$TriStateCheckbox
-                        {...commonProps}
-                        value={value}
-                        onChange={(event) => {
-                          onChange(event);
-                          rest.onChange?.(event);
-                        }}
-                        invalid={!!meta.error}
-                    />
-                    <$ErrorMessage name={name}>
-                      {
-                        (message) => <small className="error">{parseError?.(message) ?? message}</small>
-                      }
-                    </$ErrorMessage>
-                    <small className="hint">{rest.hint}</small>
-                  </>
-              );
-            }}
-          </$Field>
-      );
-    } else {
-      // if outside Formik context
-      const {value, onChange} = transformer({
-        value: internalValue,
-        onChange: (event: boolean) => setInternalValue(event),
-        transform: {
-          input: transform.input ?? (value => value),
-          output: transform.output ?? (event => event.value)
-        }
-      });
-
-      return (
-          <$TriStateCheckbox
-              {...commonProps}
-              checked={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>
-  );
-
-  return (
-      <div className={$classNames('checkbox-wrapper',
-          {
-            [`label-${labelPosition}`]: rest.label,
-            'is-rtl': rtl,
-            'is-ltr': !rtl,
-          })}>
-        <div className="field">
-          {labelEl}
-          <div className={$classNames('field-inner')}>
-            {rootEl()}
-          </div>
-        </div>
-      </div>
-  );
-};

package/src/powell/components/TriStateCheckbox/index.ts

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

package/src/powell/hooks/index.ts

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

package/src/powell/hooks/useApplyConfig.ts

@@ -1,36 +0,0 @@
-import {usePowellConfig} from "@powell/hooks";
-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/src/powell/hooks/useFormContext.ts

@@ -1,14 +0,0 @@
-import {useContext} from "react";
-import {FormContext} from "@powell/components/FormContainer";
-import {$FormikConfig, $FormikContextType, $FormikValues, $useFormikContext} from "@powell/api";
-
-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/src/powell/hooks/usePowellConfig.ts

@@ -1,64 +0,0 @@
-import {configService, $PrimeReactContext, $ZIndexOptions} 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($PrimeReactContext);
-
-  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 $ZIndexOptions),
-    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/src/powell/index.ts

@@ -1,29 +0,0 @@
-export {PowellProvider} from "./api/PowellProvider";
-export {AutoComplete} from "./components/AutoComplete";
-export {Button} from "./components/Button";
-export {CascadeSelect} from "./components/CascadeSelect";
-export {Checkbox} from "./components/Checkbox";
-export {Chips} from "./components/Chips";
-export {ColorPicker} from "./components/ColorPicker";
-export {Dropdown} from "./components/Dropdown";
-export {Editor} from "./components/Editor";
-export {FormContainer} from "./components/FormContainer";
-export {InputMask} from "./components/InputMask";
-export {InputNumber} from "./components/InputNumber";
-export {InputOtp} from "./components/InputOtp";
-export {InputPassword} from "./components/InputPassword";
-export {InputSwitch} from "./components/InputSwitch";
-export {InputText} from "./components/InputText";
-export {InputTextarea} from "./components/InputTextarea";
-export {Knob} from "./components/Knob";
-export {ListBox} from "./components/ListBox";
-export {Mention} from "./components/Mention";
-export {MultiSelect} from "./components/MultiSelect";
-export {MultiStateCheckbox} from "./components/MultiStateCheckbox";
-export {RadioGroup} from "./components/RadioGroup";
-export {Rating} from "./components/Rating";
-export {SelectButton} from "./components/SelectButton";
-export {Slider} from "./components/Slider";
-export {ToggleButton} from "./components/ToggleButton";
-export {TreeSelect} from "./components/TreeSelect";
-export {TriStateCheckbox} from "./components/TriStateCheckbox";

package/src/powell/models/common.ts

@@ -1,7 +0,0 @@
-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;