Skip to content

Commit

Permalink
refactor(docs): button dx (#3981)
Browse files Browse the repository at this point in the history
  • Loading branch information
wingkwong authored Nov 7, 2024
1 parent 2dc2bcd commit 74a2268
Show file tree
Hide file tree
Showing 31 changed files with 438 additions and 489 deletions.
14 changes: 14 additions & 0 deletions apps/docs/content/components/button/colors.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {Button} from "@nextui-org/react";

export default function App() {
return (
<div className="flex flex-wrap gap-4 items-center">
<Button color="default">Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
</div>
);
}
27 changes: 1 addition & 26 deletions apps/docs/content/components/button/colors.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,4 @@
const App = `import {Button} from "@nextui-org/react";
export default function App() {
return (
<div className="flex flex-wrap gap-4 items-center">
<Button color="default">
Default
</Button>
<Button color="primary">
Primary
</Button>
<Button color="secondary">
Secondary
</Button>
<Button color="success">
Success
</Button>
<Button color="warning">
Warning
</Button>
<Button color="danger">
Danger
</Button>
</div>
);
}`;
import App from "./colors.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
38 changes: 38 additions & 0 deletions apps/docs/content/components/button/custom-impl.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {forwardRef} from "react";
import {useButton, Ripple, Spinner} from "@nextui-org/react";

const MyButton = forwardRef((props, ref) => {
const {
domRef,
children,
spinnerSize,
spinner = <Spinner color="current" size={spinnerSize} />,
spinnerPlacement,
startContent,
endContent,
isLoading,
disableRipple,
getButtonProps,
getRippleProps,
} = useButton({
ref,
...props,
});

const {ripples, onClear} = getRippleProps();

return (
<button ref={domRef} {...getButtonProps()}>
{startContent}
{isLoading && spinnerPlacement === "start" && spinner}
{children}
{isLoading && spinnerPlacement === "end" && spinner}
{endContent}
{!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
</button>
);
});

MyButton.displayName = "MyButton";

export default MyButton;
40 changes: 40 additions & 0 deletions apps/docs/content/components/button/custom-impl.raw.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {forwardRef} from "react";
import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";

export interface ButtonProps extends BaseButtonProps {}

const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const {
domRef,
children,
spinnerSize,
spinner = <Spinner color="current" size={spinnerSize} />,
spinnerPlacement,
startContent,
endContent,
isLoading,
disableRipple,
getButtonProps,
getRippleProps,
} = useButton({
ref,
...props,
});

const {ripples, onClear} = getRippleProps();

return (
<button ref={domRef} {...getButtonProps()}>
{startContent}
{isLoading && spinnerPlacement === "start" && spinner}
{children}
{isLoading && spinnerPlacement === "end" && spinner}
{endContent}
{!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
</button>
);
});

MyButton.displayName = "MyButton";

export default MyButton;
82 changes: 2 additions & 80 deletions apps/docs/content/components/button/custom-impl.ts
Original file line number Diff line number Diff line change
@@ -1,83 +1,5 @@
const App = `import {forwardRef} from "react";
import {useButton, Ripple, Spinner} from "@nextui-org/react";
const MyButton = forwardRef((props, ref) => {
const {
domRef,
children,
spinnerSize,
spinner = <Spinner color="current" size={spinnerSize} />,
spinnerPlacement,
startContent,
endContent,
isLoading,
disableRipple,
getButtonProps,
getRippleProps,
} = useButton({
ref,
...props,
});
const {ripples, onClear} = getRippleProps();
return (
<button ref={domRef} {...getButtonProps()}>
{startContent}
{isLoading && spinnerPlacement === "start" && spinner}
{children}
{isLoading && spinnerPlacement === "end" && spinner}
{endContent}
{!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
</button>
);
});
MyButton.displayName = "MyButton";
export default MyButton;`;

const AppTs = `import {forwardRef} from "react";
import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
export interface ButtonProps extends BaseButtonProps {}
const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const {
domRef,
children,
spinnerSize,
spinner = <Spinner color="current" size={spinnerSize} />,
spinnerPlacement,
startContent,
endContent,
isLoading,
disableRipple,
getButtonProps,
getRippleProps,
} = useButton({
ref,
...props,
});
const {ripples, onClear} = getRippleProps();
return (
<button ref={domRef} {...getButtonProps()}>
{startContent}
{isLoading && spinnerPlacement === "start" && spinner}
{children}
{isLoading && spinnerPlacement === "end" && spinner}
{endContent}
{!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
</button>
);
});
MyButton.displayName = "MyButton";
export default MyButton;`;
import App from "./custom-impl.raw.jsx?raw";
import AppTs from "./custom-impl.raw.tsx?raw";

const react = {
"/App.jsx": App,
Expand Down
12 changes: 12 additions & 0 deletions apps/docs/content/components/button/custom-styles.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {Button} from "@nextui-org/react";

export default function App() {
return (
<Button
className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
radius="full"
>
Button
</Button>
);
}
10 changes: 1 addition & 9 deletions apps/docs/content/components/button/custom-styles.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
const App = `import {Button} from "@nextui-org/react";
export default function App() {
return (
<Button radius="full" className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
Button
</Button>
);
}`;
import App from "./custom-styles.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
9 changes: 9 additions & 0 deletions apps/docs/content/components/button/disabled.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {Button} from "@nextui-org/react";

export default function App() {
return (
<Button isDisabled color="primary">
Button
</Button>
);
}
10 changes: 1 addition & 9 deletions apps/docs/content/components/button/disabled.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
const App = `import {Button} from "@nextui-org/react";
export default function App() {
return (
<Button isDisabled color="primary">
Button
</Button>
);
}`;
import App from "./disabled.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
11 changes: 11 additions & 0 deletions apps/docs/content/components/button/group-disabled.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {Button, ButtonGroup} from "@nextui-org/react";

export default function App() {
return (
<ButtonGroup isDisabled>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}
12 changes: 1 addition & 11 deletions apps/docs/content/components/button/group-disabled.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
const App = `import {Button, ButtonGroup} from "@nextui-org/react";
export default function App() {
return (
<ButtonGroup isDisabled>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}`;
import App from "./group-disabled.raw.jsx?raw";

const react = {
"/App.jsx": App,
Expand Down
69 changes: 69 additions & 0 deletions apps/docs/content/components/button/group-use-case.raw.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import {
Button,
ButtonGroup,
Dropdown,
DropdownTrigger,
DropdownMenu,
DropdownItem,
} from "@nextui-org/react";

export const ChevronDownIcon = () => (
<svg fill="none" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"
fill="currentColor"
/>
</svg>
);

export default function App() {
const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));

const descriptionsMap = {
merge:
"All commits from the source branch are added to the destination branch via a merge commit.",
squash:
"All commits from the source branch are added to the destination branch as a single commit.",
rebase: "All commits from the source branch are added to the destination branch individually.",
};

const labelsMap = {
merge: "Create a merge commit",
squash: "Squash and merge",
rebase: "Rebase and merge",
};

// Convert the Set to an Array and get the first value.
const selectedOptionValue = Array.from(selectedOption)[0];

return (
<ButtonGroup variant="flat">
<Button>{labelsMap[selectedOptionValue]}</Button>
<Dropdown placement="bottom-end">
<DropdownTrigger>
<Button isIconOnly>
<ChevronDownIcon />
</Button>
</DropdownTrigger>
<DropdownMenu
disallowEmptySelection
aria-label="Merge options"
className="max-w-[300px]"
selectedKeys={selectedOption}
selectionMode="single"
onSelectionChange={setSelectedOption}
>
<DropdownItem key="merge" description={descriptionsMap["merge"]}>
{labelsMap["merge"]}
</DropdownItem>
<DropdownItem key="squash" description={descriptionsMap["squash"]}>
{labelsMap["squash"]}
</DropdownItem>
<DropdownItem key="rebase" description={descriptionsMap["rebase"]}>
{labelsMap["rebase"]}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
);
}
Loading

0 comments on commit 74a2268

Please sign in to comment.