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