powell-react 0.0.9 → 0.0.11

package/src/powell/components/MultiSelect/MultiSelect.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,
-  $MultiSelect,
-  $MultiSelectProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {getAddonTemplate, isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/MultiSelect/MultiSelect.scss';
-
-interface MultiSelectProps extends $MultiSelectProps {
-  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 MultiSelect = (props: MultiSelectProps) => {
-  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 (
-                  <>
-                    <$MultiSelect
-                        {...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 (
-          <$MultiSelect
-              {...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/MultiSelect/index.ts

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

package/src/powell/components/MultiStateCheckbox/MultiStateCheckbox.scss

@@ -1,32 +0,0 @@
-.checkbox-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/MultiStateCheckbox/MultiStateCheckbox.tsx

@@ -1,143 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {FixLabelPosition, SafeAny} from "@powell/models";
-import {
-  $classNames,
-  $ErrorMessage,
-  $Field,
-  $FieldProps,
-  $MultiStateCheckbox,
-  $MultiStateCheckboxProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import '@components/MultiStateCheckbox/MultiStateCheckbox.scss';
-
-interface MultiStateCheckboxProps extends Omit<$MultiStateCheckboxProps, '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 MultiStateCheckbox = (props: MultiStateCheckboxProps) => {
-  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}: $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 (
-                  <>
-                    <$MultiStateCheckbox
-                        {...commonProps}
-                        value={value}
-                        onChange={(event) => {
-                          console.log(event)
-                          onChange(event);
-                          rest.onChange?.(event);
-                        }}
-                    />
-                    <$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 (
-          <$MultiStateCheckbox
-              {...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>
-  );
-
-  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/MultiStateCheckbox/index.ts

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

package/src/powell/components/RadioGroup/RadioGroup.scss

@@ -1,32 +0,0 @@
-.input-switch-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/RadioGroup/RadioGroup.tsx

@@ -1,167 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {FixLabelPosition} from "@powell/models";
-import {
-  $classNames,
-  $ErrorMessage,
-  $Field,
-  $FieldProps,
-  $RadioButton,
-  $RadioButtonProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/RadioGroup/RadioGroup.scss';
-
-interface RadioGroupProps extends Omit<$RadioButtonProps, '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;
-  options: SafeAny[];
-  optionLabel?: string;
-  optionValue?: string;
-}
-
-export const RadioGroup = (props: RadioGroupProps) => {
-  props = useApplyConfig(props, {sizable: false, isFixLabel: true});
-  const {
-    parseError,
-    name,
-    transform = {},
-    labelPosition,
-    rtl,
-    showRequiredStar,
-    options,
-    optionLabel = 'label',
-    optionValue = 'value',
-    ...rest
-  } = props;
-
-  // 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.checked);
-
-  const processedOptions = useRef(options.map(option => ({
-    ...option,
-    __id: $UniqueComponentId()
-  })));
-
-  const rootEl = useCallback(() => {
-    const commonProps = {
-      ...rest,
-      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 (
-                  <>
-                    {
-                      processedOptions.current.map(option => (
-                          <>
-                            <$RadioButton
-                                {...commonProps}
-                                inputId={option.__id}
-                                checked={value === option[optionValue]}
-                                value={option[optionValue]}
-                                onChange={(event) => {
-                                  onChange(event);
-                                  rest.onChange?.(event);
-                                }}
-                                invalid={!!meta.error}
-                            />
-                            <label htmlFor={option.__id}>{option[optionLabel]}</label>
-                          </>
-                      ))
-                    }
-                    <$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 (
-          processedOptions.current.map(option => (
-              <>
-                <$RadioButton
-                    {...commonProps}
-                    inputId={option.__id}
-                    checked={value === option[optionValue]}
-                    value={option[optionValue]}
-                    onChange={(event) => {
-                      onChange(event);
-                      rest.onChange?.(event);
-                    }}
-                />
-                <label htmlFor={option.__id}>{option[optionLabel]}</label>
-              </>
-          ))
-      );
-    }
-  }, [internalValue, props]);
-
-  const labelEl = rest.label && (
-      <label>
-        {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/RadioGroup/index.ts

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

package/src/powell/components/Rating/Rating.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;
-  }
-}