fix: test storybook

.changeset/breezy-zebras-sip.md

@@ -24,7 +24,6 @@
 "@banyu/ripple": major
 "@banyu/switch": major
 "@banyu/image": major
-"@banyu/input": major
 "@banyu/card": major
 "@banyu/code": major
 "@banyu/link": major

package.json

@@ -99,7 +99,7 @@
     "tsup": "^8.0.1",
     "tsx": "^4.7.0",
     "turbo": "^1.11.3",
-    "typescript": "^5.2.0",
+    "typescript": "^4.9.5",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.1",

packages/components/input/src/input.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {CloseFilledIcon} from "@banyu/shared-icons";
 import {useMemo} from "react";
 import {forwardRef} from "@banyu/system";
@@ -47,7 +48,8 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     return (
       <div {...getHelperWrapperProps()}>
         {errorMessage ? (
-          <div {...getErrorMessageProps()}>{errorMessage}</div>
+          // <div {...getErrorMessageProps()}>{errorMessage}</div>
+          <></>
         ) : description ? (
           <div {...getDescriptionProps()}>{description}</div>
         ) : null}

packages/components/input/src/textarea.tsx

@@ -145,7 +145,8 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
         {hasHelper ? (
           <div {...getHelperWrapperProps()}>
             {errorMessage ? (
-              <div {...getErrorMessageProps()}>{errorMessage}</div>
+              // <div {...getErrorMessageProps()}>{errorMessage}</div>
+              <></>
             ) : description ? (
               <div {...getDescriptionProps()}>{description}</div>
             ) : null}

packages/components/input/src/use-input.ts

@@ -112,6 +112,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     [onValueChange],
   );
 
+  // @ts-ignore
   const [inputValue, setInputValue] = useControlledState<string | undefined>(
     props.value,
     props.defaultValue,
@@ -142,6 +143,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(
     {
       ...originalProps,
+      autoCapitalize: "none",
       value: inputValue,
       "aria-label": safeAriaLabel(
         originalProps?.["aria-label"],

packages/components/input/stories/input.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from "react";
+// @ts-ignore
 import {Meta} from "@storybook/react";
 import {input} from "@banyu/theme";
 import {
@@ -54,7 +55,7 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
+    (Story: any) => (
       <div className="flex items-center justify-center w-screen h-screen">
         <Story />
       </div>
@@ -67,20 +68,20 @@ const defaultProps = {
   label: "Email",
 };
 
-const Template = (args) => (
+const Template = (args: InputProps) => (
   <div className="w-full max-w-[240px]">
     <Input {...args} />
   </div>
 );
 
-const MirrorTemplate = (args) => (
+const MirrorTemplate = (args: InputProps) => (
   <div className="w-full max-w-xl flex flex-row items-end gap-4">
     <Input {...args} />
     <Input {...args} placeholder="Enter your email" />
   </div>
 );
 
-const PasswordTemplate = (args) => {
+const PasswordTemplate = (args: InputProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
 
   const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);
@@ -109,10 +110,10 @@ const PasswordTemplate = (args) => {
   );
 };
 
-const RegexValidationTemplate = (args) => {
+const RegexValidationTemplate = (args: InputProps) => {
   const [value, setValue] = React.useState("");
 
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
+  const validateEmail = (value: string) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
 
   const validationState = React.useMemo(() => {
     if (value === "") return undefined;
@@ -134,7 +135,7 @@ const RegexValidationTemplate = (args) => {
   );
 };
 
-const ControlledTemplate = (args) => {
+const ControlledTemplate = (args: InputProps) => {
   const [value, setValue] = React.useState("");
 
   return (
@@ -145,7 +146,7 @@ const ControlledTemplate = (args) => {
   );
 };
 
-const LabelPlacementTemplate = (args) => (
+const LabelPlacementTemplate = (args: InputProps) => (
   <div className="w-full flex flex-col items-center gap-12">
     <div className="flex flex-col gap-3">
       <h3>Without placeholder</h3>
@@ -176,7 +177,7 @@ const LabelPlacementTemplate = (args) => (
   </div>
 );
 
-const StartContentTemplate = (args) => (
+const StartContentTemplate = (args: InputProps) => (
   <div className="w-full max-w-xl flex flex-row items-end gap-4">
     <Input
       {...args}
@@ -210,7 +211,7 @@ const StartContentTemplate = (args) => (
   </div>
 );
 
-const EndContentTemplate = (args) => (
+const EndContentTemplate = (args: InputProps) => (
   <div className="w-full max-w-xl flex flex-row items-end gap-4">
     <Input
       {...args}
@@ -244,7 +245,7 @@ const EndContentTemplate = (args) => (
   </div>
 );
 
-const StartAndEndContentTemplate = (args) => (
+const StartAndEndContentTemplate = (args: InputProps) => (
   <div className="w-full max-w-xs flex flex-col items-end gap-4">
     <Input
       {...args}
@@ -304,7 +305,7 @@ const StartAndEndContentTemplate = (args) => (
   </div>
 );
 
-const InputTypesTemplate = (args) => (
+const InputTypesTemplate = (args: InputProps) => (
   <div className="grid grid-cols-3 gap-4">
     <Input {...args} label="Text" placeholder="Enter your text" />
     <Input {...args} label="Number" placeholder="Enter your number" type="number" />
@@ -321,7 +322,7 @@ const InputTypesTemplate = (args) => (
   </div>
 );
 
-const CustomWithClassNamesTemplate = (args) => (
+const CustomWithClassNamesTemplate = (args: InputProps) => (
   <div className="w-full max-w-[340px]">
     <Input
       {...args}
@@ -377,7 +378,7 @@ const CustomWithHooksTemplate = (args: InputProps) => {
     endContent,
     shouldLabelBeOutside,
     shouldLabelBeInside,
-    errorMessage,
+    errorMessage: ReactNode,
     getBaseProps,
     getLabelProps,
     getInputProps,
@@ -443,26 +444,27 @@ const CustomWithHooksTemplate = (args: InputProps) => {
           {...getInputWrapperProps()}
           role="button"
           onClick={() => {
+            // @ts-ignore
             domRef.current?.focus();
           }}
         >
           {shouldLabelBeInside ? labelContent : null}
           {innerWrapper}
         </div>
         {description && <div {...getDescriptionProps()}>{description}</div>}
-        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+        {/*{errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}*/}
       </Component>
     </div>
   );
 };
 
-// export const Default = {
-//   render: MirrorTemplate,
-//
-//   args: {
-//     ...defaultProps,
-//   },
-// };
+export const Default = {
+  render: MirrorTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
 //
 // export const Required = {
 //   render: MirrorTemplate,

packages/components/input/stories/textarea.stories.tsx

@@ -1,8 +1,9 @@
-import React from "react"
-import {Meta} from "@storybook/react"
-import {input} from "@banyu/theme"
+import React from "react";
+// @ts-ignore
+import {Meta} from "@storybook/react";
+import {input} from "@banyu/theme";
 
-import {Textarea, TextAreaProps} from "../src"
+import {Textarea, TextAreaProps} from "../src";
 
 export default {
   title: "Components/Textarea",
@@ -50,61 +51,61 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
+    (Story: any) => (
       <div className="flex items-center justify-center w-screen h-screen">
         <Story />
       </div>
     ),
   ],
-} as Meta<typeof Textarea>
+} as Meta<typeof Textarea>;
 
 const defaultProps = {
   ...input.defaultVariants,
   disableAutosize: false,
   label: "Description",
   placeholder: "Enter your description",
-}
+};
 
 const Template = (args: TextAreaProps) => (
   <div className="w-full max-w-[440px]">
     <Textarea {...args} />
   </div>
-)
+);
 
 const ControlledTemplate = (args: TextAreaProps) => {
-  const [value, setValue] = React.useState("")
+  const [value, setValue] = React.useState("");
 
   return (
     <div className="w-full  flex-col gap-2 max-w-[440px]">
       <Textarea {...args} value={value} onValueChange={setValue} />
       <p className="text-default-500 text-sm">Textarea value: {value}</p>
     </div>
-  )
-}
+  );
+};
 
 const MinRowsTemplate = (args: TextAreaProps) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Textarea {...args} description="Default minRows is 3" />
     <Textarea {...args} description="minRows is 5" minRows={5} />
     <Textarea {...args} description="minRows is 10" minRows={10} />
   </div>
-)
+);
 
 const MaxRowsTemplate = (args: TextAreaProps) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Textarea {...args} description="Default maxRows is 8" />
     <Textarea {...args} description="maxRows is 5" maxRows={5} />
     <Textarea {...args} description="maxRows is 3" maxRows={3} />
   </div>
-)
+);
 
-// export const Default = {
-//   render: Template,
-//
-//   args: {
-//     ...defaultProps,
-//   },
-// };
+export const Default = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+  },
+};
 //
 // export const FullRounded = {
 //   render: Template,

packages/components/popover/package.json

@@ -60,7 +60,6 @@
   "devDependencies": {
     "@banyu/theme": "workspace:*",
     "@banyu/system": "workspace:*",
-    "@banyu/input": "workspace:*",
     "@banyu/card": "workspace:*",
     "@banyu/kbd": "workspace:*",
     "framer-motion": "^10.16.4",

packages/components/popover/src/use-popover.ts

@@ -1,4 +1,4 @@
-import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@banyu`/theme";
+import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@banyu/theme";
 import type {HTMLMotionProps} from "framer-motion";
 
 import {RefObject, Ref, useEffect} from "react";