Skip to content

Commit

Permalink
feat(input): ✨ update stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy committed Jun 21, 2022
1 parent 6b63c17 commit c060d35
Show file tree
Hide file tree
Showing 11 changed files with 212 additions and 139 deletions.
19 changes: 9 additions & 10 deletions src/input/InputBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,20 @@ export const useInputBase = createHook<InputBaseOptions>(
const theme = useTheme("input");
const className = cx(
theme.base,
size ? theme.size[size].base.default : "",
size && (!prefix || !suffix) ? theme.size[size].base.withoutAddon : "",
variant ? theme.variant[variant].default : "",
props.disabled || invalid
size ? theme.size[size]?.base?.default : "",
size && (!prefix || !suffix) ? theme.size[size]?.base?.withoutAddon : "",
props.disabled
? ""
: variant
? cx(
theme.variant[variant].default.base,
theme.variant[variant].hover.base,
theme.variant[variant].active.base,
theme.variant[variant].focus.base,
theme.variant[variant]?.default?.base,
theme.variant[variant]?.hover?.base,
theme.variant[variant]?.active?.base,
theme.variant[variant]?.focus?.base,
invalid ? theme.variant[variant]?.invalid?.base : "",
)
: "",
variant && props.disabled ? theme.variant[variant].disabled.base : "",
variant && invalid ? theme.variant[variant].invalid.base : "",
variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
props.className,
);

Expand Down
5 changes: 2 additions & 3 deletions src/input/InputPrefix.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,18 @@ export const useInputPrefix = createHook<InputPrefixOptions>(
const className = cx(
theme.prefix,
size ? theme.size[size].prefix : "",
variant ? theme.variant[variant].default : "",
disabled || invalid
disabled
? ""
: variant
? cx(
theme.variant[variant].default.prefix,
theme.variant[variant].hover.prefix,
theme.variant[variant].active.prefix,
theme.variant[variant].focus.prefix,
invalid ? theme.variant[variant].invalid.prefix : "",
)
: "",
variant && disabled ? theme.variant[variant].disabled.prefix : "",
variant && invalid ? theme.variant[variant].invalid.prefix : "",
props.className,
);

Expand Down
5 changes: 2 additions & 3 deletions src/input/InputSuffix.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,18 @@ export const useInputSuffix = createHook<InputSuffixOptions>(
const className = cx(
theme.suffix,
size ? theme.size[size].suffix : "",
variant ? theme.variant[variant].default : "",
disabled || invalid
disabled
? ""
: variant
? cx(
theme.variant[variant].default.suffix,
theme.variant[variant].hover.suffix,
theme.variant[variant].active.suffix,
theme.variant[variant].focus.suffix,
invalid ? theme.variant[variant].invalid.suffix : "",
)
: "",
variant && disabled ? theme.variant[variant].disabled.suffix : "",
variant && invalid ? theme.variant[variant].invalid.suffix : "",
props.className,
);

Expand Down
77 changes: 42 additions & 35 deletions src/input/stories/InputBasic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,20 @@ export default {
title: "Forms/Input/Basic",
component: InputBasic,
argTypes: {
label: { control: { type: "text" } },
description: { control: { type: "text" } },
...createControls(undefined, {
...createControls("input", {
ignore: [
"unstable_system",
"unstable_clickOnEnter",
"unstable_clickOnSpace",
"ref",
"wrapElement",
"focusable",
"as",
"setState",
"checked",
"value",
"defaultState",
"state",
"onStateChange",
"icon",
"prefix",
"suffix",
"spinner",
"autoFocus",
"focusable",
"accessibleWhenDisabled",
"onFocusVisible",
"clickOnEnter",
"clickOnSpace",
],
}),
},
Expand All @@ -42,75 +39,85 @@ export default {
} as Meta;

export const Default: Story = {
args: {},
args: { size: "md", variant: "outline" },
};

export const WithPlaceholder: Story = {
args: { placeholder: "Search" },
...Default,
args: { ...Default.args, placeholder: "Search" },
};

export const Small: Story = {
args: { size: "sm", placeholder: "Search" },
...Default,
args: { ...Default.args, size: "sm", placeholder: "Search" },
};

export const Medium: Story = {
args: { size: "md", placeholder: "Search" },
...Default,
args: { ...Default.args, size: "md", placeholder: "Search" },
};

export const Large: Story = {
args: { size: "lg", placeholder: "Search" },
...Default,
args: { ...Default.args, size: "lg", placeholder: "Search" },
};

export const ExtraLarge: Story = {
args: { size: "xl", placeholder: "Search" },
...Default,
args: { ...Default.args, size: "xl", placeholder: "Search" },
};

export const Outline: Story = {
args: { variant: "outline", placeholder: "Search" },
...Default,
args: { ...Default.args, variant: "outline", placeholder: "Search" },
};

export const Subtle: Story = {
args: { variant: "subtle", placeholder: "Search" },
...Default,
args: { ...Default.args, variant: "subtle", placeholder: "Search" },
};

export const Underline: Story = {
args: { variant: "underline", placeholder: "Search" },
...Default,
args: { ...Default.args, variant: "underline", placeholder: "Search" },
};

export const Ghost: Story = {
args: { variant: "ghost", placeholder: "Search" },
...Default,
args: { ...Default.args, variant: "ghost", placeholder: "Search" },
};

export const Disabled: Story = {
args: { placeholder: "Search", disabled: true },
...Default,
args: { ...Default.args, placeholder: "Search", disabled: true },
};

export const Invalid: Story = {
args: { placeholder: "Search", invalid: true },
...Default,
args: { ...Default.args, placeholder: "Search", invalid: true },
};

export const Prefix: Story = {
args: {
placeholder: "Search",
prefix: <SlotIcon />,
},
...Default,
args: { ...Default.args, placeholder: "Search", prefix: <SlotIcon /> },
};

export const Suffix: Story = {
args: {
placeholder: "Search",
suffix: <SlotIcon />,
},
...Default,
args: { ...Default.args, placeholder: "Search", suffix: <SlotIcon /> },
};

export const PrefixSuffix: Story = {
...Default,
args: {
...Default.args,
placeholder: "Search",
prefix: <SlotIcon />,
suffix: <SlotIcon />,
},
};

export const Loading: Story = {
args: { placeholder: "Search", loading: true },
...Default,
args: { ...Default.args, placeholder: "Search", loading: true },
};
27 changes: 13 additions & 14 deletions src/input/stories/InputStack.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,22 @@ export default {
title: "Forms/Input/Stack",
component: InputStack,
argTypes: {
label: { control: { type: "text" } },
description: { control: { type: "text" } },
...createControls(undefined, {
...createControls("input", {
ignore: [
"unstable_system",
"unstable_clickOnEnter",
"unstable_clickOnSpace",
"ref",
"wrapElement",
"focusable",
"as",
"setState",
"checked",
"value",
"defaultState",
"state",
"onStateChange",
"icon",
"prefix",
"suffix",
"spinner",
"autoFocus",
"focusable",
"accessibleWhenDisabled",
"onFocusVisible",
"clickOnEnter",
"clickOnSpace",
"size",
"variant",
],
}),
},
Expand Down
19 changes: 9 additions & 10 deletions src/select/SelectBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,20 @@ export const useSelectBase = createHook<SelectBaseOptions>(
const theme = useTheme("select");
const className = cx(
theme.base,
size ? theme.size[size].base.default : "",
size && (!prefix || !suffix) ? theme.size[size].base.withoutAddon : "",
variant ? theme.variant[variant].default : "",
props.disabled || invalid
size ? theme.size[size]?.base?.default : "",
size && (!prefix || !suffix) ? theme.size[size]?.base?.withoutAddon : "",
props.disabled
? ""
: variant
? cx(
theme.variant[variant].default.base,
theme.variant[variant].hover.base,
theme.variant[variant].active.base,
theme.variant[variant].focus.base,
theme.variant[variant]?.default?.base,
theme.variant[variant]?.hover?.base,
theme.variant[variant]?.active?.base,
theme.variant[variant]?.focus?.base,
invalid ? theme.variant[variant]?.invalid?.base : "",
)
: "",
variant && props.disabled ? theme.variant[variant].disabled.base : "",
variant && invalid ? theme.variant[variant].invalid.base : "",
variant && props.disabled ? theme.variant[variant]?.disabled?.base : "",
props.className,
);

Expand Down
5 changes: 2 additions & 3 deletions src/select/SelectPrefix.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,18 @@ export const useSelectPrefix = createHook<SelectPrefixOptions>(
const className = cx(
theme.prefix,
size ? theme.size[size].prefix : "",
variant ? theme.variant[variant].default : "",
disabled || invalid
disabled
? ""
: variant
? cx(
theme.variant[variant].default.prefix,
theme.variant[variant].hover.prefix,
theme.variant[variant].active.prefix,
theme.variant[variant].focus.prefix,
invalid ? theme.variant[variant].invalid.prefix : "",
)
: "",
variant && disabled ? theme.variant[variant].disabled.prefix : "",
variant && invalid ? theme.variant[variant].invalid.prefix : "",
props.className,
);

Expand Down
17 changes: 8 additions & 9 deletions src/select/SelectSuffix.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,19 @@ export const useSelectSuffix = createHook<SelectSuffixOptions>(
const theme = useTheme("select");
const className = cx(
theme.suffix,
size ? theme.size[size].suffix : "",
variant ? theme.variant[variant].default : "",
disabled || invalid
size ? theme.size[size]?.suffix : "",
disabled
? ""
: variant
? cx(
theme.variant[variant].default.suffix,
theme.variant[variant].hover.suffix,
theme.variant[variant].active.suffix,
theme.variant[variant].focus.suffix,
theme.variant[variant]?.default?.suffix,
theme.variant[variant]?.hover?.suffix,
theme.variant[variant]?.active?.suffix,
theme.variant[variant]?.focus?.suffix,
invalid ? theme.variant[variant]?.invalid?.suffix : "",
)
: "",
variant && disabled ? theme.variant[variant].disabled.suffix : "",
variant && invalid ? theme.variant[variant].invalid.suffix : "",
variant && disabled ? theme.variant[variant]?.disabled?.suffix : "",
props.className,
);

Expand Down
Loading

1 comment on commit c060d35

@vercel
Copy link

@vercel vercel bot commented on c060d35 Jun 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-tailwind – ./

adaptui-react-tailwind.vercel.app
react-tailwind-timelessco.vercel.app
react-tailwind-git-main-timelessco.vercel.app

Please sign in to comment.