feat: add input
This commit is contained in:
parent
b61f12eac7
commit
a2c0f201d9
111
packages/react/components/Input.tsx
Normal file
111
packages/react/components/Input.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React from "react";
|
||||
import { VariantProps, vcn } from "../shared";
|
||||
|
||||
const inputColors = {
|
||||
background: {
|
||||
default: "bg-neutral-50 dark:bg-neutral-900",
|
||||
hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
||||
invalid:
|
||||
"invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
|
||||
invalidHover:
|
||||
"hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
|
||||
},
|
||||
border: {
|
||||
default: "border-neutral-400 dark:border-neutral-600",
|
||||
invalid:
|
||||
"invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
|
||||
},
|
||||
ring: {
|
||||
default: "ring-transparent focus-within:ring-current",
|
||||
invalid:
|
||||
"invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
|
||||
},
|
||||
};
|
||||
|
||||
const [inputVariant, resolveInputVariantProps] = vcn({
|
||||
base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
|
||||
variants: {
|
||||
unstyled: {
|
||||
true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
unstyled: false,
|
||||
},
|
||||
});
|
||||
|
||||
interface InputFrameProps
|
||||
extends VariantProps<typeof inputVariant>,
|
||||
React.ComponentPropsWithoutRef<"label"> {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, otherPropsUnsafe] = resolveInputVariantProps(props);
|
||||
const { children, ...otherPropsSafe } = otherPropsUnsafe;
|
||||
|
||||
return (
|
||||
<label
|
||||
ref={ref}
|
||||
className={`group/input-frame ${inputVariant(variantProps)}`}
|
||||
{...otherPropsSafe}
|
||||
>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
interface InputProps
|
||||
extends VariantProps<typeof inputVariant>,
|
||||
React.ComponentPropsWithoutRef<"input"> {
|
||||
type: Exclude<
|
||||
React.InputHTMLAttributes<HTMLInputElement>["type"],
|
||||
| "button"
|
||||
| "checkbox"
|
||||
| "color"
|
||||
| "date"
|
||||
| "datetime-local"
|
||||
| "file"
|
||||
| "radio"
|
||||
| "range"
|
||||
| "reset"
|
||||
| "image"
|
||||
| "submit"
|
||||
| "time"
|
||||
>;
|
||||
invalid?: string;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||
const [variantProps, otherPropsUnsafe] = resolveInputVariantProps(props);
|
||||
const { type, invalid, ...otherPropsSafe } = otherPropsUnsafe;
|
||||
|
||||
const innerRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (innerRef && innerRef.current) {
|
||||
innerRef.current.setCustomValidity(invalid ?? "");
|
||||
}
|
||||
}, [invalid]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
ref={(el) => {
|
||||
innerRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
className={inputVariant(variantProps)}
|
||||
{...otherPropsSafe}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export { InputFrame, Input };
|
||||
115
packages/react/stories/Input.stories.tsx
Normal file
115
packages/react/stories/Input.stories.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import React from "react";
|
||||
import { Input, InputFrame } from "../components/Input";
|
||||
import { Button } from "../components/Button";
|
||||
|
||||
export default {
|
||||
title: "React/Input",
|
||||
};
|
||||
|
||||
export const TextInput = () => {
|
||||
return <Input type="text" placeholder="Type Here..." />;
|
||||
};
|
||||
|
||||
export const PasswordInput = () => {
|
||||
return <Input type="password" />;
|
||||
};
|
||||
|
||||
export const InvalidInput = () => {
|
||||
return <Input type="text" invalid="Invalid" />;
|
||||
};
|
||||
|
||||
export const DisabledInput = () => {
|
||||
return <Input type="text" disabled />;
|
||||
};
|
||||
|
||||
export const InputWithFrame = () => {
|
||||
const [passwordState, setPasswordState] = React.useState({ visible: false });
|
||||
|
||||
return (
|
||||
<InputFrame>
|
||||
<Input type={passwordState.visible ? "text" : "password"} unstyled />
|
||||
<Button
|
||||
preset="default"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setPasswordState((prev) => ({ ...prev, visible: !prev.visible }))
|
||||
}
|
||||
>
|
||||
{passwordState.visible ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 17.5c-3.8 0-7.2-2.1-8.8-5.5H1c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5h-2.2c-1.6 3.4-5 5.5-8.8 5.5"
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</Button>
|
||||
</InputFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export const InputWithFrameInvalid = () => {
|
||||
const [passwordState, setPasswordState] = React.useState({ visible: false });
|
||||
|
||||
return (
|
||||
<InputFrame>
|
||||
<Input
|
||||
type={passwordState.visible ? "text" : "password"}
|
||||
unstyled
|
||||
invalid="Invalid"
|
||||
/>
|
||||
<Button
|
||||
preset="default"
|
||||
size="icon"
|
||||
onClick={() =>
|
||||
setPasswordState((prev) => ({ ...prev, visible: !prev.visible }))
|
||||
}
|
||||
background="error"
|
||||
border="error"
|
||||
>
|
||||
{passwordState.visible ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 17.5c-3.8 0-7.2-2.1-8.8-5.5H1c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5h-2.2c-1.6 3.4-5 5.5-8.8 5.5"
|
||||
></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</Button>
|
||||
</InputFrame>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user