refactor(inputs): ♻️ update textarea, add invalid & loading (#235)

adaptui · Dec 23, 2021 · 384fd69 · 384fd69 · vercel · Dec 23, 2021
1 parent 6501dba
commit 384fd69
Show file tree

Hide file tree

Showing 27 changed files with 773 additions and 247 deletions.
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -2,28 +2,33 @@ import * as React from "react";
 
 import { RenderProp } from "../utils";
 
-import { InputMain, InputMainHTMLProps } from "./InputMain";
+import { InputBase, InputBaseHTMLProps } from "./InputBase";
 import { InputPrefix } from "./InputPrefix";
 import { useInputProps } from "./InputProps";
 import { InputInitialState, InputStateReturn } from "./InputState";
 import { InputSuffix } from "./InputSuffix";
 import { InputWrapper } from "./InputWrapper";
 
-export type InputOwnProps = InputMainHTMLProps & {};
+export type InputOwnProps = InputBaseHTMLProps & {};
 
 export type InputProps = InputInitialState &
   InputOwnProps &
   RenderProp<InputStateReturn>;
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (props, ref) => {
-    const { state, wrapperProps, mainProps, prefixProps, suffixProps } =
-      useInputProps(props);
-    const { prefix, suffix } = state;
+    const {
+      wrapperProps,
+      mainProps,
+      prefixProps,
+      suffixProps,
+      suffix,
+      prefix,
+    } = useInputProps(props);
 
     return (
       <InputWrapper {...wrapperProps}>
-        <InputMain ref={ref} {...mainProps} />
+        <InputBase ref={ref} {...mainProps} />
         {prefix ? <InputPrefix {...prefixProps} /> : null}
         {suffix ? <InputSuffix {...suffixProps} /> : null}
       </InputWrapper>

diff --git a/src/input/InputBase.tsx b/src/input/InputBase.tsx
@@ -0,0 +1,55 @@
+import { createComponent, createHook } from "reakit-system";
+import { InputHTMLProps, InputOptions, useInput } from "reakit";
+import { ariaAttr } from "@renderlesskit/react";
+
+import { useTheme } from "../theme";
+import { cx } from "../utils";
+
+import { INPUT_BASE_KEYS } from "./__keys";
+import { InputStateReturn } from "./InputState";
+
+export type InputBaseOptions = InputOptions &
+  Pick<
+    InputStateReturn,
+    "size" | "variant" | "prefix" | "suffix" | "invalid"
+  > & {};
+
+export type InputBaseHTMLProps = Omit<InputHTMLProps, "size" | "prefix">;
+
+export type InputBaseProps = InputBaseOptions & InputBaseHTMLProps;
+
+export const useInputBase = createHook<InputBaseOptions, InputBaseHTMLProps>({
+  name: "InputBase",
+  compose: useInput,
+  keys: INPUT_BASE_KEYS,
+
+  useProps(options, htmlProps) {
+    const { size, variant, prefix, suffix, invalid, disabled } = options;
+    const { className: htmlClassName, ...restHtmlProps } = htmlProps;
+
+    const theme = useTheme("input");
+    const className = cx(
+      theme.base.common,
+      theme.base.size[size].common,
+      !prefix || !suffix ? theme.base.size[size].withoutAddon : "",
+      theme.base.variant[variant].common,
+      disabled || invalid ? "" : theme.base.variant[variant].interactions,
+      disabled ? theme.base.variant[variant].disabled : "",
+      invalid ? theme.base.variant[variant].invalid : "",
+      htmlClassName,
+    );
+
+    return {
+      className,
+      disabled,
+      "aria-invalid": ariaAttr(invalid),
+      ...restHtmlProps,
+    };
+  },
+});
+
+export const InputBase = createComponent({
+  as: "input",
+  memo: true,
+  useHook: useInputBase,
+});
diff --git a/src/input/InputMain.tsx b/src/input/InputMain.tsx
diff --git a/src/input/InputPrefix.tsx b/src/input/InputPrefix.tsx
@@ -5,10 +5,13 @@ import { useTheme } from "../theme";
 import { cx } from "../utils";
 
 import { INPUT_PREFIX_KEYS } from "./__keys";
+import { InputProps } from "./Input";
 import { InputStateReturn } from "./InputState";
 
 export type InputPrefixOptions = BoxOptions &
-  Pick<InputStateReturn, "size" | "variant"> & {};
+  Pick<InputStateReturn, "size" | "variant" | "invalid"> & {
+    disabled: InputProps["disabled"];
+  };
 
 export type InputPrefixHTMLProps = BoxHTMLProps;
 
@@ -23,14 +26,17 @@ export const useInputPrefix = createHook<
   keys: INPUT_PREFIX_KEYS,
 
   useProps(options, htmlProps) {
-    const { size, variant } = options;
+    const { size, variant, invalid, disabled } = options;
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
     const theme = useTheme("input");
     const className = cx(
-      theme.prefix.base,
+      theme.prefix.common,
       theme.prefix.size[size],
-      theme.prefix.variant[variant],
+      theme.prefix.variant[variant].common,
+      disabled || invalid ? "" : theme.prefix.variant[variant].interactions,
+      disabled ? theme.prefix.variant[variant].disabled : "",
+      invalid ? theme.prefix.variant[variant].invalid : "",
       htmlClassName,
     );
 

diff --git a/src/input/InputProps.tsx b/src/input/InputProps.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { getComponentProps } from "../index";
+import { Spinner } from "../spinner";
 import { runIfFn, splitProps, withIconA11y } from "../utils";
 
 import { USE_INPUT_STATE_KEYS } from "./__keys";
@@ -29,17 +30,24 @@ const componentMap = {
 
 export const useInputProps = (props: React.PropsWithChildren<InputProps>) => {
   const [state, inputProps] = useInputStateSplit(props);
-  const { prefix, suffix } = state;
-  const { className, style, children, ...restProps } = inputProps;
+  const { prefix, suffix, loading, size } = state;
+  const { className, style, children, disabled, ...restProps } = inputProps;
   const { componentProps } = getComponentProps(componentMap, children, state);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setHasPaddingCalculated] = React.useState(false);
 
   const _prefix: InputProps["prefix"] =
     componentProps?.prefixProps?.children || prefix;
-  const _suffix: InputProps["suffix"] =
+  const __suffix: InputProps["suffix"] =
     componentProps?.suffixProps?.children || suffix;
+  const _suffix: InputProps["suffix"] = React.useMemo(() => {
+    return loading ? (
+      <Spinner size={size !== "xl" ? "xs" : "md"} />
+    ) : (
+      withIconA11y(runIfFn(__suffix, state))
+    );
+  }, [__suffix, loading, size, state]);
 
   const inputInlineStyles = React.useRef<Record<string, any>>({});
   const prefixRef = React.useRef<HTMLElement>(null);
@@ -78,27 +86,32 @@ export const useInputProps = (props: React.PropsWithChildren<InputProps>) => {
 
   const mainProps: InputWrapperProps = {
     ...state,
+    disabled,
     ...restProps,
     style: { ...inputInlineStyles.current },
     ...componentProps.mainProps,
   };
 
   const prefixProps: InputPrefixProps = {
     ...state,
+    disabled,
     ...componentProps.prefixProps,
     ref: prefixRef,
     children: withIconA11y(runIfFn(_prefix, state)),
   };
 
   const suffixProps: InputSuffixProps = {
     ...state,
+    disabled,
     ...componentProps.suffixProps,
     ref: suffixRef,
-    children: withIconA11y(runIfFn(_suffix, state)),
+    children: _suffix,
   };
 
   return {
     state,
+    prefix: _prefix,
+    suffix: _suffix,
     wrapperProps,
     mainProps,
     prefixProps,

diff --git a/src/input/InputState.tsx b/src/input/InputState.tsx
@@ -6,14 +6,14 @@ export type InputState = {
    *
    * @default md
    */
-  size: keyof Renderlesskit.GetThemeValue<"input", "main", "size">;
+  size: keyof Renderlesskit.GetThemeValue<"input", "base", "size">;
 
   /**
    * How the input should look?
    *
    * @default solid
    */
-  variant: keyof Renderlesskit.GetThemeValue<"input", "main", "variant">;
+  variant: keyof Renderlesskit.GetThemeValue<"input", "base", "variant">;
 
   /**
    * Description for the Switch.
@@ -24,18 +24,38 @@ export type InputState = {
    * Description for the Switch.
    */
   suffix: RenderPropType<InputStateReturn>;
+
+  /**
+   * True, if the value of the input is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * True, if the input is loading.
+   */
+  loading?: boolean;
 };
 
 export type InputActions = {};
 
 export type InputStateReturn = InputState & InputActions;
 
 export type InputInitialState = Partial<
-  Pick<InputState, "prefix" | "suffix" | "size" | "variant">
+  Pick<
+    InputState,
+    "prefix" | "suffix" | "size" | "variant" | "invalid" | "loading"
+  >
 > & {};
 
 export function useInputState(props: InputInitialState = {}): InputStateReturn {
-  const { prefix, suffix, size = "md", variant = "outline" } = props;
-
-  return { prefix, suffix, size, variant };
+  const {
+    prefix,
+    suffix,
+    size = "md",
+    variant = "outline",
+    invalid = false,
+    loading = false,
+  } = props;
+
+  return { prefix, suffix, size, variant, invalid, loading };
 }
diff --git a/src/input/InputSuffix.tsx b/src/input/InputSuffix.tsx
@@ -5,10 +5,13 @@ import { useTheme } from "../theme";
 import { cx } from "../utils";
 
 import { INPUT_SUFFIX_KEYS } from "./__keys";
+import { InputProps } from "./Input";
 import { InputStateReturn } from "./InputState";
 
 export type InputSuffixOptions = BoxOptions &
-  Pick<InputStateReturn, "size" | "variant"> & {};
+  Pick<InputStateReturn, "size" | "variant" | "invalid"> & {
+    disabled: InputProps["disabled"];
+  };
 
 export type InputSuffixHTMLProps = BoxHTMLProps;
 
@@ -23,14 +26,17 @@ export const useInputSuffix = createHook<
   keys: INPUT_SUFFIX_KEYS,
 
   useProps(options, htmlProps) {
-    const { size, variant } = options;
+    const { size, variant, disabled, invalid } = options;
     const { className: htmlClassName, ...restHtmlProps } = htmlProps;
 
-    const theme = useTheme("input");
+    const theme = useTheme("select");
     const className = cx(
-      theme.suffix.base,
+      theme.suffix.common,
       theme.suffix.size[size],
-      theme.suffix.variant[variant],
+      theme.suffix.variant[variant].common,
+      disabled || invalid ? "" : theme.suffix.variant[variant].interactions,
+      disabled ? theme.suffix.variant[variant].disabled : "",
+      invalid ? theme.suffix.variant[variant].invalid : "",
       htmlClassName,
     );
 

diff --git a/src/input/__keys.ts b/src/input/__keys.ts
@@ -4,9 +4,11 @@ export const USE_INPUT_STATE_KEYS = [
   "suffix",
   "size",
   "variant",
+  "invalid",
+  "loading",
 ] as const;
 export const INPUT_STATE_KEYS = USE_INPUT_STATE_KEYS;
-export const INPUT_MAIN_KEYS = INPUT_STATE_KEYS;
-export const INPUT_PREFIX_KEYS = INPUT_MAIN_KEYS;
+export const INPUT_BASE_KEYS = INPUT_STATE_KEYS;
+export const INPUT_PREFIX_KEYS = [...INPUT_BASE_KEYS, "disabled"] as const;
 export const INPUT_SUFFIX_KEYS = INPUT_PREFIX_KEYS;
-export const INPUT_WRAPPER_KEYS = INPUT_SUFFIX_KEYS;
+export const INPUT_WRAPPER_KEYS = INPUT_BASE_KEYS;
diff --git a/src/input/stories/InputBasic.stories.tsx b/src/input/stories/InputBasic.stories.tsx
@@ -85,6 +85,10 @@ export const Disabled: Story = {
   args: { placeholder: "Search", disabled: true },
 };
 
+export const Invalid: Story = {
+  args: { placeholder: "Search", invalid: true },
+};
+
 export const Prefix: Story = {
   args: {
     placeholder: "Search",
@@ -106,3 +110,7 @@ export const PrefixSuffix: Story = {
     suffix: <CaretDownIcon />,
   },
 };
+
+export const Loading: Story = {
+  args: { placeholder: "Search", loading: true },
+};