powell-react 0.0.9 → 0.0.11

package/src/powell/components/Rating/Rating.tsx

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

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

package/src/powell/components/SelectButton/SelectButton.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/SelectButton/SelectButton.tsx

@@ -1,144 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {FixLabelPosition} from "@powell/models";
-import {
-  $classNames,
-  $ErrorMessage,
-  $Field,
-  $FieldProps,
-  $SelectButton,
-  $SelectButtonProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/SelectButton/SelectButton.scss';
-
-interface SelectButtonProps extends Omit<$SelectButtonProps, '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 SelectButton = (props: SelectButtonProps) => {
-  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.checked);
-
-  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 (
-                  <>
-                    <$SelectButton
-                        {...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 (
-          <$SelectButton
-              {...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/SelectButton/index.ts

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

package/src/powell/components/Slider/Slider.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/Slider/Slider.tsx

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

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

package/src/powell/components/ToggleButton/ToggleButton.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/ToggleButton/ToggleButton.tsx

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

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