chore: add additional stories to storybook (#11524)

add stories for ActiveUserChart, CopyableValue, and CopyButton

site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActiveUserChart } from "./ActiveUserChart";
+
+const meta: Meta<typeof ActiveUserChart> = {
+  title: "components/ActiveUserChart",
+  component: ActiveUserChart,
+  args: {
+    data: [
+      { date: "1/1/2024", amount: 5 },
+      { date: "1/2/2024", amount: 6 },
+      { date: "1/3/2024", amount: 7 },
+      { date: "1/4/2024", amount: 8 },
+      { date: "1/5/2024", amount: 9 },
+      { date: "1/6/2024", amount: 10 },
+      { date: "1/7/2024", amount: 11 },
+    ],
+    interval: "day",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActiveUserChart>;
+
+export const Example: Story = {};
+
+export const UserLimit: Story = {
+  args: {
+    userLimit: 10,
+  },
+};

site/src/components/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CopyButton } from "./CopyButton";
+
+const meta: Meta<typeof CopyButton> = {
+  title: "components/CopyButton",
+  component: CopyButton,
+  args: {
+    children: "Get secret",
+    text: "cool secret",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyButton>;
+
+const Example: Story = {};
+
+export { Example as CopyButton };

site/src/components/CopyButton/CopyButton.tsx

@@ -36,18 +36,7 @@ export const CopyButton: FC<CopyButtonProps> = ({
     <Tooltip title={tooltipTitle} placement="top">
       <div css={[{ display: "flex" }, wrapperStyles]}>
         <IconButton
-          css={[
-            (theme) => css`
-              border-radius: 8px;
-              padding: 8px;
-              min-width: 32px;
-
-              &:hover {
-                background: ${theme.palette.background.paper};
-              }
-            `,
-            buttonStyles,
-          ]}
+          css={[styles.button, buttonStyles]}
           onClick={copyToClipboard}
           size="small"
           aria-label={Language.ariaLabel}
@@ -66,6 +55,15 @@ export const CopyButton: FC<CopyButtonProps> = ({
 };
 
 const styles = {
+  button: (theme) => css`
+    border-radius: 8px;
+    padding: 8px;
+    min-width: 32px;
+
+    &:hover {
+      background: ${theme.palette.background.paper};
+    }
+  `,
   copyIcon: css`
     width: 20px;
     height: 20px;

site/src/components/CopyableValue/CopyableValue.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CopyableValue } from "./CopyableValue";
+
+const meta: Meta<typeof CopyableValue> = {
+  title: "components/CopyableValue",
+  component: CopyableValue,
+  args: {
+    children: <button>Get secret</button>,
+    value: "cool secret",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyableValue>;
+
+const Example: Story = {};
+
+export { Example as CopyableValue };

site/src/components/CopyableValue/CopyableValue.tsx

@@ -1,9 +1,9 @@
 import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
+import { type FC, type HTMLAttributes } from "react";
 import { useClickable } from "hooks/useClickable";
 import { useClipboard } from "hooks/useClipboard";
-import { type FC, type HTMLProps } from "react";
 
-interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
+interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
   value: string;
   placement?: TooltipProps["placement"];
   PopperProps?: TooltipProps["PopperProps"];
@@ -13,7 +13,8 @@ export const CopyableValue: FC<CopyableValueProps> = ({
   value,
   placement = "bottom-start",
   PopperProps,
-  ...props
+  children,
+  ...attrs
 }) => {
   const { isCopied, copy } = useClipboard(value);
   const clickableProps = useClickable<HTMLSpanElement>(copy);
@@ -24,7 +25,9 @@ export const CopyableValue: FC<CopyableValueProps> = ({
       placement={placement}
       PopperProps={PopperProps}
     >
-      <span {...props} {...clickableProps} css={{ cursor: "pointer" }} />
+      <span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
+        {children}
+      </span>
     </Tooltip>
   );
 };