feat: Add Storybook for component documentation, testing, and development (#34907)

Co-authored-by: Echo <ChaosExAnima@users.noreply.github.com>
Co-authored-by: Renaud Chaput <renchap@gmail.com>

app/javascript/mastodon/components/button/button.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn, expect } from 'storybook/test';
+
+import { Button } from '.';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    secondary: false,
+    compact: false,
+    dangerous: false,
+    disabled: false,
+    onClick: fn(),
+  },
+  argTypes: {
+    text: {
+      control: 'text',
+      type: 'string',
+      description:
+        'Alternative way of specifying the button label. Will override `children` if provided.',
+    },
+    type: {
+      type: 'string',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  tags: ['test'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const buttonTest: Story['play'] = async ({ args, canvas, userEvent }) => {
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).toHaveBeenCalled();
+};
+
+const disabledButtonTest: Story['play'] = async ({
+  args,
+  canvas,
+  userEvent,
+}) => {
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).not.toHaveBeenCalled();
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary button',
+  },
+  play: buttonTest,
+};
+
+export const Secondary: Story = {
+  args: {
+    secondary: true,
+    children: 'Secondary button',
+  },
+  play: buttonTest,
+};
+
+export const Compact: Story = {
+  args: {
+    compact: true,
+    children: 'Compact button',
+  },
+  play: buttonTest,
+};
+
+export const Dangerous: Story = {
+  args: {
+    dangerous: true,
+    children: 'Dangerous button',
+  },
+  play: buttonTest,
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+  play: disabledButtonTest,
+};
+
+export const SecondaryDisabled: Story = {
+  args: {
+    ...Secondary.args,
+    disabled: true,
+  },
+  play: disabledButtonTest,
+};

app/javascript/mastodon/components/button/index.tsx

@@ -0,0 +1,69 @@
+import type { PropsWithChildren, JSX } from 'react';
+import { useCallback } from 'react';
+
+import classNames from 'classnames';
+
+interface BaseProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  block?: boolean;
+  secondary?: boolean;
+  compact?: boolean;
+  dangerous?: boolean;
+}
+
+interface PropsChildren extends PropsWithChildren<BaseProps> {
+  text?: undefined;
+}
+
+interface PropsWithText extends BaseProps {
+  text: JSX.Element | string;
+  children?: undefined;
+}
+
+type Props = PropsWithText | PropsChildren;
+
+/**
+ * Primary UI component for user interaction that doesn't result in navigation.
+ */
+
+export const Button: React.FC<Props> = ({
+  type = 'button',
+  onClick,
+  disabled,
+  block,
+  secondary,
+  compact,
+  dangerous,
+  className,
+  title,
+  text,
+  children,
+  ...props
+}) => {
+  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
+    (e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    },
+    [disabled, onClick],
+  );
+
+  return (
+    <button
+      className={classNames('button', className, {
+        'button-secondary': secondary,
+        'button--compact': compact,
+        'button--block': block,
+        'button--dangerous': dangerous,
+      })}
+      disabled={disabled}
+      onClick={handleClick}
+      title={title}
+      type={type}
+      {...props}
+    >
+      {text ?? children}
+    </button>
+  );
+};