refactor(docs): button dx

apps/docs/content/components/button/colors.raw.jsx

@@ -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>
+  );
+}

apps/docs/content/components/button/colors.ts

@@ -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,

apps/docs/content/components/button/custom-impl.raw.jsx

@@ -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;

apps/docs/content/components/button/custom-impl.raw.tsx

@@ -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;

apps/docs/content/components/button/custom-impl.ts

@@ -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,

apps/docs/content/components/button/custom-styles.raw.jsx

@@ -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>
+  );
+}

apps/docs/content/components/button/custom-styles.ts

@@ -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,

apps/docs/content/components/button/disabled.raw.jsx

@@ -0,0 +1,9 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button isDisabled color="primary">
+      Button
+    </Button>
+  );
+}

apps/docs/content/components/button/disabled.ts

@@ -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,

apps/docs/content/components/button/group-disabled.raw.jsx

@@ -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>
+  );
+}

apps/docs/content/components/button/group-disabled.ts

@@ -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,

apps/docs/content/components/button/group-use-case.raw.jsx

@@ -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>
+  );
+}