powell-react 0.0.8 → 0.0.9

package/src/powell/components/Editor/Editor.scss

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

@@ -0,0 +1,183 @@
+import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
+import {Addon, LabelPosition} from "@powell/models";
+import {
+  $classNames,
+  $Editor,
+  $EditorProps,
+  $ErrorMessage,
+  $Field,
+  $FieldProps,
+  $FloatLabel,
+  $IconField,
+  $IconFieldProps,
+  $InputIcon,
+  $UniqueComponentId
+} from "@powell/api";
+import {getAddonTemplate, isRequiredField, transformer} from "@powell/utils";
+import {useApplyConfig, useFormContext} from "@powell/hooks";
+import {SafeAny} from "@powell/models";
+import '@components/Editor/Editor.scss';
+
+interface EditorProps extends $EditorProps {
+  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?: $IconFieldProps["iconPosition"];
+  labelPosition?: LabelPosition;
+}
+
+export const Editor = (props: EditorProps) => {
+  props = useApplyConfig(props);
+  const {
+    parseError,
+    name,
+    transform = {},
+    iconPosition = 'left',
+    labelPosition,
+    addon,
+    icon,
+    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,
+      id: inputId.current,
+      name,
+    };
+
+    if (withinForm) {
+      // if in Formik context
+      return (
+          <$Field name={name}>
+            {({field}: $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.htmlValue)
+                }
+              });
+
+              return (
+                  <>
+                    <$Editor
+                        {...commonProps}
+                        value={value}
+                        onTextChange={(event) => {
+                          onChange(event);
+                          rest.onTextChange?.(event);
+                        }}
+                        onBlur={(event) => {
+                          field.onBlur(event);
+                          rest.onBlur?.(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: string) => setInternalValue(event),
+        transform: {
+          input: transform.input ?? (value => value),
+          output: transform.output ?? (event => event.htmlValue)
+        }
+      });
+
+      return (
+          <$Editor
+              {...commonProps}
+              value={value}
+              onTextChange={(event) => {
+                onChange(event);
+                rest.onTextChange?.(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('chips-wrapper',
+          {
+            [`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/Editor/index.ts

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

package/src/powell/components/FormContainer/FormContainer.tsx

@@ -0,0 +1,49 @@
+import {ForwardedRef, forwardRef, PropsWithChildren, useEffect, useRef} from "react";
+import {FormProvider} from "@powell/components/FormContainer";
+import {$Form, $Formik, $FormikConfig, $FormikContextType, $FormikValues, $useFormikContext} from "@powell/api";
+
+interface FormContainerProps<T extends $FormikValues> extends $FormikConfig<T> {
+  onInit?: (context: $FormikContextType<T>) => void;
+  className?: string;
+}
+
+const FormContent = <T extends $FormikValues>(props: PropsWithChildren<{onInit: FormContainerProps<T>['onInit']}>) => {
+  const {children, onInit} = props;
+  const formikContext: $FormikContextType<T> = $useFormikContext();
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    if (!initialized.current) {
+      onInit?.(formikContext);
+      initialized.current = true;
+    }
+  }, [formikContext, onInit]);
+
+  return (
+      <>
+        {children}
+      </>
+  );
+}
+
+export const FormContainer = forwardRef(<T extends $FormikValues>(props: FormContainerProps<T>, ref: ForwardedRef<HTMLFormElement>) => {
+  const {children, onInit, className, ...rest} = props;
+
+  return (
+      <$Formik {...rest}>
+        {
+          (context) => (
+              <FormProvider {...rest}>
+                <$Form ref={ref} className={className}>
+                  {
+                    <FormContent<T> onInit={onInit}>
+                      {typeof children === 'function' ? children(context) : children}
+                    </FormContent>
+                  }
+                </$Form>
+              </FormProvider>
+          )
+        }
+      </$Formik>
+  )
+})

package/src/powell/components/FormContainer/FormContext.tsx

@@ -0,0 +1,18 @@
+import {createContext, PropsWithChildren} from "react";
+import {$FormikConfig, $FormikValues} from "@powell/api";
+import {SafeAny} from "@powell/models";
+
+export const FormContext = createContext<$FormikConfig<$FormikValues> | undefined>(undefined);
+
+export const FormProvider = <T extends $FormikValues>(props: PropsWithChildren<$FormikConfig<T>>) => {
+  const {children, ...rest} = props;
+
+  return (
+      <FormContext.Provider value={rest as SafeAny}>
+        <>
+          {children}
+        </>
+      </FormContext.Provider>
+  );
+};
+

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

@@ -0,0 +1,2 @@
+export * from "./FormContainer";
+export * from "./FormContext";

package/src/powell/components/InputMask/InputMask.scss

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

@@ -0,0 +1,190 @@
+import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
+import {Addon, LabelPosition, Size} from "@powell/models";
+import {
+  $classNames,
+  $ErrorMessage,
+  $Field,
+  $FieldProps,
+  $FloatLabel,
+  $IconField,
+  $IconFieldProps,
+  $InputIcon,
+  $InputMask,
+  $InputMaskProps,
+  $UniqueComponentId
+} from "@powell/api";
+import {getAddonTemplate, isRequiredField, transformer} from "@powell/utils";
+import {useApplyConfig, useFormContext} from "@powell/hooks";
+import {SafeAny} from "@powell/models";
+import '@components/InputMask/InputMask.scss';
+
+interface InputMaskProps extends $InputMaskProps {
+  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 InputMask = (props: InputMaskProps) => {
+  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.value)
+                }
+              });
+
+              return (
+                  <>
+                    <$InputMask
+                        {...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.value)
+        }
+      });
+
+      return (
+          <$InputMask
+              {...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('input-mask-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/InputMask/index.ts

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