docs: add button stories

.storybook/preview.ts

@@ -8,6 +8,8 @@ initialize();
 const preview: Preview = {
   loaders: [mswLoader],
 
+  tags: ["autodocs"],
+
   parameters: {
     controls: {
       matchers: {

src/Components/Button.stories.tsx

@@ -0,0 +1,32 @@
+import { GlobeEuropeAfricaIcon } from "@heroicons/react/24/solid";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+
+  parameters: {
+    layout: "centered",
+  },
+
+  args: {
+    children: <span className="flex-grow">My Button</span>,
+    className: "!w-64",
+    onClick: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicButton: Story = {};
+
+export const ButtonWithIcon: Story = {
+  args: {
+    renderIcon: () => <GlobeEuropeAfricaIcon className="w-6" />,
+  },
+};

src/Components/Button.tsx

@@ -2,15 +2,16 @@ import classNames from "classnames";
 import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  renderIcon?: () => ReactElement;
+  /** A function that returns a React component to use as an icon */
+  readonly renderIcon?: () => ReactElement;
 }
 
 function Button({
   children,
   className,
   renderIcon,
   ...props
-}: Readonly<PropsWithChildren<Props>>) {
+}: PropsWithChildren<Props>) {
   return (
     <button className={classNames(`group relative focus:ring-0`)} {...props}>
       <div

src/Components/Duration.tsx

@@ -1,14 +1,14 @@
 import { Temporal } from "temporal-polyfill";
 
 interface DurationProps {
-  time: number;
+  readonly time: number;
 }
 
 function to2Digits(number: number) {
   return String(number).padStart(2, "0");
 }
 
-function Duration({ time }: Readonly<DurationProps>) {
+function Duration({ time }: DurationProps) {
   if (isNaN(time)) {
     time = 0;
   }