powell-react 0.0.9 → 0.0.12

package/src/powell/components/AutoComplete/AutoComplete.scss

@@ -1,126 +0,0 @@
-.auto-complete-wrapper {
-  .field {
-    display: flex;
-    gap: 0.25rem 1rem;
-
-    > div {
-      flex-grow: 1;
-    }
-  }
-
-  :where(.p-inputtext, .p-autocomplete) {
-    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, .p-autocomplete) {
-        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-autocomplete) {
-        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-autocomplete) {
-      border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    }
-
-    &.addon-after :where(.p-inputtext, .p-autocomplete) {
-      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/AutoComplete/AutoComplete.tsx

@@ -1,190 +0,0 @@
-import {ChangeEvent, ReactNode, useCallback, useRef, useState} from "react";
-import {Addon, LabelPosition, Size} from "@powell/models";
-import {
-  $AutoComplete,
-  $AutoCompleteProps,
-  $classNames,
-  $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/AutoComplete/AutoComplete.scss';
-
-interface AutoCompleteProps extends $AutoCompleteProps {
-  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;
-  inputSize?: Size;
-  iconPosition?: $IconFieldProps["iconPosition"];
-  labelPosition?: LabelPosition;
-}
-
-export const AutoComplete = (props: AutoCompleteProps) => {
-  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 inputEl = 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 (
-                  <>
-                    <$AutoComplete
-                        {...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 (
-          <$AutoComplete
-              {...commonProps}
-              value={value}
-              onChange={(event) => {
-                onChange(event);
-                rest.onChange?.(event);
-              }}
-              onBlur={rest.onBlur}
-          />
-      );
-    }
-  }, [internalValue]);
-
-  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}
-        {inputEl()}
-      </$IconField>
-  );
-
-  return (
-      <div className={$classNames('auto-complete-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({"p-inputgroup": addon})}>
-            {getAddonTemplate(addon?.before)}
-            {
-              labelPosition === 'float' ? (
-                  <$FloatLabel>
-                    {icon ? withIcon : inputEl()}
-                    {labelEl}
-                  </$FloatLabel>
-              ) : (
-                  icon ? withIcon : inputEl()
-              )
-            }
-            {getAddonTemplate(addon?.after)}
-          </div>
-        </div>
-      </div>
-  );
-};

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

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

package/src/powell/components/Button/Button.tsx

@@ -1,90 +0,0 @@
-import {memo, MouseEvent, useRef, useState} from "react";
-import {$Button, $ButtonProps, $classNames} from "@powell/api";
-import {ButtonAppearance} from "@powell/models";
-
-type ButtonState = 'default' | 'loading' | 'next';
-
-interface ButtonOnClickAsyncEvent {
-  loadingCallback: (ok?: boolean) => void,
-  event: MouseEvent<HTMLButtonElement>
-}
-
-interface ButtonProps extends Omit<$ButtonProps, "loading" | "link" | "text" | "outlined"> {
-  async?: boolean;
-  onClickAsync?: (event: ButtonOnClickAsyncEvent) => void;
-  appearance?: ButtonAppearance;
-  nextLabel?: string;
-  nextIcon?: string;
-  nextRaised?: boolean;
-  nextAppearance?: ButtonAppearance;
-  nextSeverity?: ButtonProps['severity'];
-  state?: ButtonState;
-  onStateChange?: (state: ButtonState) => void;
-}
-
-type ButtonTempProps = Pick<ButtonProps, "label" | "icon" | "raised" | "appearance" | "severity">;
-
-export const Button = memo((props: ButtonProps) => {
-  const {
-    async,
-    onClickAsync,
-    onClick,
-    nextLabel,
-    nextIcon,
-    nextRaised,
-    nextSeverity,
-    nextAppearance,
-    state = 'default',
-    onStateChange,
-    type = 'button',
-    ...rest
-  } = props;
-
-  const [_state, _setState] = useState<ButtonState>(state);
-
-  const getButtonTempProps = (newState: ButtonState) => {
-    return {
-      label: newState === 'default' ? rest.label : (nextLabel ?? rest.label),
-      icon: newState === 'default' ? rest.icon : (nextIcon ?? rest.icon),
-      appearance: newState === 'default' ? rest.appearance : (nextAppearance ?? rest.appearance),
-      raised: newState === 'default' ? rest.raised : (nextRaised ?? rest.raised),
-      severity: newState === 'default' ? rest.severity : (nextSeverity ?? rest.severity),
-    }
-  }
-
-  const tempProps = useRef<ButtonTempProps>(getButtonTempProps(state));
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (async) {
-      onClickAsync?.({event, loadingCallback: removeLoading});
-      _setState('loading');
-      onStateChange?.('loading');
-    } else {
-      onClick?.(event);
-    }
-  }
-
-  const removeLoading = (toggleState?: boolean) => {
-    const newState = toggleState ? 'next' : 'default';
-    tempProps.current = getButtonTempProps(newState);
-    _setState(newState);
-    onStateChange?.(newState);
-  }
-
-  return (
-      <$Button
-          type={type}
-          {...rest}
-          onClick={handleClick}
-          label={async ? tempProps.current.label : rest.label}
-          icon={async ? tempProps.current.icon : rest.icon}
-          severity={async ? tempProps.current.severity : rest.severity}
-          raised={async ? tempProps.current.raised : rest.raised}
-          text={async ? tempProps.current.appearance === 'text' : rest.appearance === 'text'}
-          outlined={async ? tempProps.current.appearance === 'outlined' : rest.appearance === 'outlined'}
-          link={async ? tempProps.current.appearance === 'link' : rest.appearance === 'link'}
-          loading={_state === 'loading'}
-          className={$classNames(rest.className, `state-${_state}`)}
-      />
-  )
-})

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

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

package/src/powell/components/CascadeSelect/CascadeSelect.scss

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