powell-react 0.0.9 → 0.0.12

package/src/powell/components/ListBox/ListBox.tsx

@@ -1,135 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {FixLabelPosition, SafeAny} from "@powell/models";
-import {$classNames, $ErrorMessage, $Field, $FieldProps, $ListBox, $ListBoxProps, $UniqueComponentId} from "@powell/api";
-import {isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import '@components/ListBox/ListBox.scss';
-
-interface ListBoxProps extends Omit<$ListBoxProps, '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 ListBox = (props: ListBoxProps) => {
-  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,
-      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: boolean) => formContext.setFieldValue(name, event),
-                transform: {
-                  input: transform.input ?? (value => value),
-                  output: transform.output ?? (event => event.value)
-                }
-              });
-
-              return (
-                  <>
-                    <$ListBox
-                        {...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 (
-          <$ListBox
-              {...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/ListBox/index.ts

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

package/src/powell/components/Mention/Mention.scss

@@ -1,126 +0,0 @@
-.input-text-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/Mention/Mention.tsx

@@ -1,186 +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,
-  $Mention,
-  $MentionProps,
-  $UniqueComponentId
-} from "@powell/api";
-import {getAddonTemplate, isRequiredField, transformer} from "@powell/utils";
-import {useApplyConfig, useFormContext} from "@powell/hooks";
-import {SafeAny} from "@powell/models";
-import '@components/Mention/Mention.scss';
-
-interface MentionProps extends $MentionProps {
-  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 Mention = (props: MentionProps) => {
-  props = useApplyConfig(props);
-  const {
-    parseError,
-    name,
-    transform = {},
-    iconPosition = 'left',
-    labelPosition,
-    addon,
-    icon,
-    rtl,
-    showRequiredStar,
-    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,
-      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.target.value)
-                }
-              });
-
-              return (
-                  <>
-                    <$Mention
-                        {...commonProps}
-                        value={value}
-                        onChange={(event) => {
-                          onChange(event);
-                          rest.onChange?.(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.target.value)
-        }
-      });
-
-      return (
-          <$Mention
-              {...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-text-wrapper',
-          `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/Mention/index.ts

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

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