powell-react 0.0.0

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

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

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

package/src/powell/components/SelectButton/SelectButton.scss

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

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

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

package/src/powell/components/Slider/Slider.scss

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

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

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

package/src/powell/components/ToggleButton/ToggleButton.scss

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

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

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