ButtonGroup: cleanup & update storybook (#626)

Author: ariser

src/components/ButtonGroup/ButtonGroup.stories.ts

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ButtonGroup } from "./ButtonGroup";
+
+const meta: Meta<typeof ButtonGroup> = {
+  component: ButtonGroup,
+  title: "Buttons/ButtonGroup",
+  tags: ["button-group", "autodocs"],
+  render: ({ selected, ...props }) => {
+    const [value, setValue] = useState(selected);
+
+    return (
+      <ButtonGroup
+        {...props}
+        selected={value}
+        onClick={setValue}
+      />
+    );
+  },
+};
+
+export default meta;
+
+export const Playground: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" },
+    ],
+    fillWidth: false,
+    type: "default",
+    selected: "option3",
+  },
+};

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -21,62 +21,46 @@ export interface ButtonGroupProps
 export const ButtonGroup = ({
   options,
   selected,
-  fillWidth,
+  fillWidth = false,
   onClick,
-  type,
+  type = "default",
   ...props
 }: ButtonGroupProps) => {
-  const lastIndex = options.length - 1;
-  const btns = options.map(({ value, label, ...props }, index) => {
-    const position: ButtonPosition =
-      index === 0 ? "left" : index === lastIndex ? "right" : "center";
-    return (
-      <Button
-        key={value}
-        $active={value === selected}
-        $position={position}
-        $fillWidth={fillWidth}
-        $type={type}
-        onClick={() => onClick?.(value)}
-        role="button"
-        {...props}
-      >
-        {label}
-      </Button>
-    );
-  });
+  const buttons = options.map(({ value, label, ...props }) => (
+    <Button
+      key={value}
+      $active={value === selected}
+      $fillWidth={fillWidth}
+      $type={type}
+      onClick={() => onClick?.(value)}
+      role="button"
+      {...props}
+    >
+      {label}
+    </Button>
+  ));
+
   return (
     <ButtonGroupWrapper
       $fillWidth={fillWidth}
       $type={type}
       {...props}
     >
-      {btns}
+      {buttons}
     </ButtonGroupWrapper>
   );
 };
 
-type ButtonPosition = "left" | "center" | "right";
-
-interface ButtonProps {
-  $active: boolean;
-  $position: ButtonPosition;
-  theme: DefaultTheme;
-  $fillWidth?: boolean;
-  $type?: ButtonGroupType;
-}
-
-const ButtonGroupWrapper = styled.div<{ $fillWidth?: boolean; $type?: ButtonGroupType }>`
+const ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`
   display: inline-flex;
   box-sizing: border-box;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: ${({ theme, $type = "default" }) =>
+  padding: ${({ theme, $type }) =>
     `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};
-  gap: ${({ theme, $type = "default" }) =>
-    theme.click.button.group.space.panel[$type].gap};
-  border: ${({ theme, $type = "default" }) =>
+  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};
+  border: ${({ theme, $type }) =>
     $type === "default"
       ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`
       : "none"};
@@ -85,6 +69,13 @@ const ButtonGroupWrapper = styled.div<{ $fillWidth?: boolean; $type?: ButtonGrou
   width: ${({ $fillWidth }) => ($fillWidth ? "100%" : "auto")};
 `;
 
+interface ButtonProps {
+  $active: boolean;
+  theme: DefaultTheme;
+  $fillWidth: boolean;
+  $type: ButtonGroupType;
+}
+
 const Button = styled.button.attrs<ButtonProps>((props: ButtonProps) => ({
   "aria-pressed": props.$active,
 }))`
@@ -99,10 +90,10 @@ const Button = styled.button.attrs<ButtonProps>((props: ButtonProps) => ({
       : theme.click.button.group.color.background.default};
   color: ${({ theme }) => theme.click.button.group.color.text.default};
   font: ${({ theme }) => theme.click.button.group.typography.label.default};
-  padding: ${({ theme, $type = "default" }) =>
+  padding: ${({ theme, $type }) =>
     `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};
-  ${({ $fillWidth = false }) => ($fillWidth ? "flex: 1;" : "")};
-  border-radius: ${({ theme, $type = "default" }) =>
+  ${({ $fillWidth }) => ($fillWidth ? "flex: 1;" : "")};
+  border-radius: ${({ theme, $type }) =>
     theme.click.button.group.radii.button[$type].all};
   cursor: pointer;
   border: none;