Skip to content

Commit

Permalink
refactor: ♻️ migrate from newButton to button
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy committed Jul 13, 2021
1 parent 59d1321 commit f9220e1
Show file tree
Hide file tree
Showing 30 changed files with 436 additions and 961 deletions.
10 changes: 5 additions & 5 deletions preset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ const renderlesskitConfig = {
"rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px",
input: "0px 0px 2px rgba(59, 130, 246, 0.6);",
},
animation: {
progress: "progress 1s ease infinite normal none running",
circularProgress:
"circularProgress 2s ease infinite normal none running",
},
keyframes: {
progress: {
"0%": { left: "-40%" },
Expand All @@ -57,11 +62,6 @@ const renderlesskitConfig = {
},
},
},
animation: {
progress: "progress 1s ease infinite normal none running",
circularProgress:
"circularProgress 2s ease infinite normal none running",
},
},
},
plugins: [
Expand Down
2 changes: 1 addition & 1 deletion renderlesskit.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const theme = extendTheme({
tertiary: "bg-purple-600 lib:text-white",
},
size: {
xxl: "h-16 min-w-16 text-xl px-8 w-auto font-medium rounded-lg shadow-sm",
xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",
},
},
// alert: {
Expand Down
56 changes: 32 additions & 24 deletions src/box/stories/Box.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,33 @@ import React from "react";
import { Story, Meta } from "@storybook/react";

import { Box, BoxProps } from "../index";
import { Button as ButtonComponent } from "../../button";
import { cx } from "@renderlesskit/react";
import { createControls } from "../../../.storybook/storybookUtils";

export default {
title: "Primitives/Box",
component: Box,
argTypes: createControls("box", {
ignore: ["unstable_system", "wrapElement", "as"],
}),
parameters: {
options: {
showPanel: false,
},
layout: "centered",
},
} as Meta;

const Base: Story<BoxProps> = args => <Box {...args}>This is the Box</Box>;
const Base: Story<BoxProps> = args => <Box {...args}>This is the div</Box>;

export const Default = Base.bind({});
Default.args = {};

const BoxStyled: Story<BoxProps> = args => (
export const Styled: Story<BoxProps> = args => (
<Box
{...args}
as="figure"
className="p-8 overflow-hidden bg-gray-100 md:flex rounded-xl md:p-0"
{...args}
>
<Box
as="img"
Expand All @@ -44,28 +54,26 @@ const BoxStyled: Story<BoxProps> = args => (
</Box>
);

export const Styled = BoxStyled.bind({});
Styled.args = {};

const BoxButton: Story<BoxProps> = args => (
<Box
as="button"
type="button"
className="h-8 px-4 text-white bg-red-500 rounded-md"
{...args}
>
Button
</Box>
);
export const AsButton: Story<BoxProps> = args => {
const { className, ...rest } = args;

export const Button = BoxButton.bind({});
Button.args = {};
return (
<Box
as="button"
type="button"
className={cx(
"h-8 px-4 text-base font-bold text-white lib:bg-red-500 lib:rounded-md",
className,
)}
{...rest}
>
Button
</Box>
);
};

const BoxButtonComp: Story<BoxProps> = args => (
<Box as={ButtonComponent} {...args}>
export const AsPrevButtonComp: Story<BoxProps> = args => (
<Box as={AsButton} className="bg-green-500" {...args}>
Button
</Box>
);

export const ButtonComp = BoxButtonComp.bind({});
Button.args = {};
121 changes: 46 additions & 75 deletions src/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,52 @@ import {
Button as ReakitButton,
ButtonProps as ReakitButtonProps,
} from "reakit";
import React from "react";
import * as React from "react";
import { cx } from "@renderlesskit/react";

import { useTheme } from "../theme";
import { Spinner } from "../spinner";
import { ButtonIcon } from "./ButtonIcon";
import { useButtonGroup } from "./ButtonGroup";
import { usePrevious } from "../hooks";
import { ButtonChildren } from "./ButtonChildren";
import { forwardRefWithAs } from "../utils/types";
import { announce } from "@react-aria/live-announcer";

export type ButtonProps = Omit<ReakitButtonProps, "prefix"> & {
/**
* How large should the button be?
*
* @default "md"
* @default md
*/
size?: keyof Renderlesskit.GetThemeValue<"button", "size">;

/**
* How the button should be styled?
* How the button should look?
*
* @default "primary"
* @default solid
*/
variant?: keyof Renderlesskit.GetThemeValue<"button", "variant">;

/**
* If added, the button will show an icon before the button's label.
* If added, the button will only show an icon ignoring other childrens.
*/
prefix?: React.ReactElement;
iconOnly?: React.ReactElement;

/**
* If added, the button will show an icon before the button's label.
* If added, the button will show an icon before the button's text.
*/
suffix?: React.ReactElement;

/**
* If added, the button will show an icon before the button's text.
*/
prefix?: React.ReactElement;

/**
* If `true`, the button will show a spinner.
*
* @default false
*/
loading?: boolean;

/**
* If added, the button will show this spinner components
*/
Expand All @@ -50,94 +60,55 @@ export const Button = forwardRefWithAs<
"button"
>((props, ref) => {
const {
size,
variant,
prefix,
children,
size = "md",
variant = "solid",
iconOnly,
suffix,
prefix,
loading = false,
spinner,
disabled = false,
disabled,
className,
style,
children,
...rest
} = props;
const group = useButtonGroup();
const _size = size || group?.size || "md";
const _variant = variant || group?.variant || "primary";
const _disabled = disabled || loading;

const theme = useTheme();
const buttonStyles = cx(
const baseStyles = cx(
theme.button.base,
theme.button.size[_size],
theme.button.variant[_variant],
group ? theme.button.group : "",
disabled ? theme.button.disabled : "",
!iconOnly ? theme.button.size[size] : theme.button.iconOnly.size[size],
theme.button.variant[variant],
_disabled ? "pointer-events-none" : "pointer-events-auto",
className,
);

const ButtonWithIcons = () => (
<>
{prefix && (
<ButtonIcon
className={cx(
theme.button.prefix.size[_size],
theme.button.prefix.variant[_variant],
)}
>
{prefix}
</ButtonIcon>
)}
{children}
{suffix && (
<ButtonIcon
className={cx(
theme.button.suffix.size[_size],
theme.button.suffix.variant[_variant],
)}
>
{suffix}
</ButtonIcon>
)}
</>
);
const prevLoading = usePrevious(loading);

const ButtonSpinner = () => {
if (spinner) return <>{spinner}</>;
return <Spinner className={theme.button.spinner} />;
};
React.useEffect(() => {
if (loading) announce("Started loading...");

// const IconButton = () => {
// return (
// <ButtonIcon
// className={cx(
// theme.button.iconOnly.size[_size],
// theme.button.IconOnly.variant[_variant],
// )}
// >
// {icon}
// </ButtonIcon>
// );
// };
if (!loading && prevLoading) announce("Stopped loading...");
}, [loading, prevLoading]);

return (
<ReakitButton
ref={ref}
className={buttonStyles}
className={baseStyles}
disabled={_disabled}
style={_disabled ? { pointerEvents: "unset", ...style } : style}
{...rest}
>
{!loading ? (
false ? (
<ButtonWithIcons />
) : (
<ButtonWithIcons />
)
) : (
<ButtonSpinner />
)}
<ButtonChildren
iconOnly={iconOnly}
suffix={suffix}
prefix={prefix}
size={size}
loading={loading}
spinner={spinner}
>
{children}
</ButtonChildren>
</ReakitButton>
);
});
Expand Down
4 changes: 2 additions & 2 deletions src/newButton/ButtonChildren.tsx → src/button/ButtonChildren.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ const ChildrenWithPrefixSuffix: React.FC<ChildrenWithPrefixSuffixProps> =
props => {
const { suffix, prefix, children, size, loading, spinner } = props;
const theme = useTheme();
const suffixStyles = cx(theme.newButton.suffix.size[size]);
const prefixStyles = cx(theme.newButton.prefix.size[size]);
const suffixStyles = cx(theme.button.suffix.size[size]);
const prefixStyles = cx(theme.button.prefix.size[size]);

return (
<>
Expand Down
67 changes: 0 additions & 67 deletions src/button/ButtonGroup.tsx
View file

This file was deleted.

Loading

0 comments on commit f9220e1

Please sign in to comment.