Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrated storybooks to use utils #40

Merged
merged 8 commits into from
Jan 20, 2021
Merged

refactor: migrated storybooks to use utils #40

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8024deb
chore: added storyTemplate util
anuraghazra Jan 19, 2021
9688d22
chore: added createControls utility
anuraghazra Jan 19, 2021
1ebeb46
refactor(story): ♻️ remove console logs & added default args
navin-moorthy Jan 20, 2021
9dc3586
chore: move storybook utils to storybook folder
anuraghazra Jan 20, 2021
750ac3e
Merge branch 'main' of https://github.com/timelessco/renderlesskit-re…
anuraghazra Jan 20, 2021
7f67faf
refactor: migrated all storybook to use utils
anuraghazra Jan 20, 2021
de1480c
Merge branch 'main' of https://github.com/timelessco/renderlesskit-re…
anuraghazra Jan 20, 2021
8f90880
chore(tag): change close icon
anuraghazra Jan 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
chore: added storyTemplate util
  • Loading branch information
@anuraghazra
anuraghazra committed Jan 19, 2021
commit 8024deb44d1cbb44e31c3a488312bb9f4071f031
126 changes: 63 additions & 63 deletions src/button/stories/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,70 +12,73 @@ import {
CloseButton as CloseButtonDefault,
IconButtonProps,
ButtonGroupProps,
CloseButtonProps,
} from "../index";
import { useTheme } from "../../theme";
import { Spinner } from "../../spinner";
import { SearchIcon, CaretDownIcon } from "../../icons";
import { storyTemplate } from "../../utils/storybookUtils";

export default {
title: "Button",
component: Button,
} as Meta;
} as Meta<ButtonProps>;

const Base: Story<ButtonProps> = args => <Button {...args}>Button</Button>;

export const Default = Base.bind({});
Default.args = { size: "lg", variant: "primary" };

export const ExtendedVariant = Default.bind({});
ExtendedVariant.args = { size: "xxl", variant: "tertiary" };

const LeftIconButton: Story<ButtonProps> = args => (
<Button prefix={<SearchIcon />} {...args}>
Button
</Button>
);

export const LeftIcon = LeftIconButton.bind({});
LeftIcon.args = { size: "lg", variant: "primary" };

const RightIconButton: Story<ButtonProps> = args => (
<Button suffix={<CaretDownIcon />} {...args}>
Button
</Button>
);

export const RightIcon = RightIconButton.bind({});
RightIcon.args = { size: "lg", variant: "primary" };
const base = storyTemplate<ButtonProps>(Button, {
children: "Button",
size: "lg",
variant: "primary",
});

const BothSideIconButton: Story<ButtonProps> = args => (
<Button prefix={<SearchIcon />} suffix={<CaretDownIcon />} {...args}>
Button
</Button>
);
export const Default = base({ size: "lg", children: "Button" });

export const BothSideIcon = BothSideIconButton.bind({});
BothSideIcon.args = { size: "lg", variant: "primary" };
export const ExtendedVariant = base({
// @ts-ignore
size: "xxl",
// @ts-ignore
variant: "tertiary",
children: "Button",
});

const IconButtonBase: Story<IconButtonProps> = args => (
<IconButton aria-label="picture" {...args}>
<SearchIcon />
</IconButton>
);
export const LeftIcon = base({
size: "lg",
variant: "primary",
prefix: <SearchIcon />,
children: "Button",
});

export const OnlyIcon = IconButtonBase.bind({});
OnlyIcon.args = { size: "lg", variant: "primary" };
export const RightIcon = base({
size: "lg",
variant: "primary",
suffix: <CaretDownIcon />,
children: "Button",
});

const CloseButtonBase: Story<CloseButtonProps> = args => (
<CloseButtonDefault {...args} />
);
export const BothIcon = base({
size: "lg",
variant: "primary",
suffix: <CaretDownIcon />,
prefix: <SearchIcon />,
children: "Button",
});

export const LoadingIcon = base({
suffix: <CaretDownIcon />,
prefix: <SearchIcon />,
children: "Button",
isLoading: true,
});

export const CloseButton = CloseButtonBase.bind({});
CloseButton.args = { size: "lg", variant: "primary" };
const iconButtonBase = storyTemplate<IconButtonProps>(args => {
return (
<IconButton aria-label="picture" {...args}>
<SearchIcon />
</IconButton>
);
});
export const OnlyIcon = iconButtonBase({ size: "lg", variant: "primary" });

export const LoadingIcon = BothSideIconButton.bind({});
LoadingIcon.args = { size: "lg", variant: "primary", isLoading: true };
const closeButtonBase = storyTemplate<IconButtonProps>(CloseButtonDefault);
export const CloseButton = closeButtonBase({ size: "lg", variant: "primary" });

const CustomSpinner = () => {
const theme = useTheme();
Expand All @@ -88,38 +91,35 @@ const CustomSpinner = () => {
);
};

export const CustomLaodingElement = BothSideIconButton.bind({});
CustomLaodingElement.args = {
size: "lg",
variant: "primary",
export const CustomLoadingElement = base({
suffix: <CaretDownIcon />,
prefix: <SearchIcon />,
children: "Button",
isLoading: true,
spinner: <CustomSpinner />,
};
});

const ButtonGroupBase: Story<ButtonGroupProps> = args => (
const buttonGroupBase = storyTemplate<ButtonGroupProps>(args => (
<ButtonGroup {...args}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>
);
));

export const GroupDefault = ButtonGroupBase.bind({});
GroupDefault.args = { className: "space-x-4" };
export const GroupDefault = buttonGroupBase({ className: "space-x-4" });

export const GroupCollapsed = ButtonGroupBase.bind({});
GroupCollapsed.args = {
export const GroupCollapsed = buttonGroupBase({
isAttached: true,
size: "lg",
variant: "primary",
};
});

export const GroupSecondary = ButtonGroupBase.bind({});
GroupSecondary.args = {
export const GroupSecondary = buttonGroupBase({
isAttached: true,
size: "lg",
variant: "secondary",
};
});

const ButtonGroupExample: Story<ButtonGroupProps> = args => {
const tab = useTabState();
Expand Down
11 changes: 11 additions & 0 deletions src/utils/storybookUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as React from "react";
import { Story } from "@storybook/react";

export const storyTemplate = <ComponentProps,>(
Component: React.FC,
defaultArgs?: Partial<ComponentProps>,
) => (props: ComponentProps) => {
const base: Story<ComponentProps> = args => <Component {...args} />;
base.args = { ...defaultArgs, ...props };
return base;
};