Provide shared/reusable values

src/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
-import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Button from "./";
+import { makeClickVisible } from "../shared";
 
 const meta = {
   title: "Atoms/Button",
@@ -11,13 +11,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Make clicks visible in the inspector
-const onClick = action("click");
+const onClick = makeClickVisible;
 
 export const All = () => (
   <>
     <div style={{ display: "flex", gap: 8, padding: "1rem 0" }}>
-      <Button size="sm" color="primary" onClick={onClick}>
+      <Button size="sm" color="primary" onClick={makeClickVisible}>
         Primary small
       </Button>
       <Button size="base" color="primary" onClick={onClick}>

src/Button/index.tsx

@@ -2,15 +2,7 @@ import type { FC, PropsWithChildren } from "react";
 
 import "./index.scss";
 import clsx from "clsx";
-
-export type ButtonSize = "sm" | "base" | "lg";
-export type ButtonColors =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "info"
-  | "warning"
-  | "danger";
+import type { Color, Size } from "../shared";
 
 export interface ButtonProps {
   /**
@@ -21,12 +13,12 @@ export interface ButtonProps {
   /**
    * The button's size.
    */
-  size?: ButtonSize;
+  size?: Size;
 
   /**
    * The button's color scheme.
    */
-  color?: ButtonColors;
+  color?: Color;
 
   /**
    * Whether the button is outlined.

src/CodeBlock/index.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 
-import type { HighlightLanguage } from "../hooks/useHighlight";
+import type { HighlightLanguage } from "../shared";
 import Highlight from "../Highlight";
 import CopyButton from "../CopyButton";
 

src/Highlight/index.tsx

@@ -2,8 +2,9 @@ import { type FC } from "react";
 
 import "./index.scss";
 
-import useHighlight, { type HighlightLanguage } from "../hooks/useHighlight";
+import useHighlight from "../hooks/useHighlight";
 import clsx from "clsx";
+import type { HighlightLanguage } from "../shared";
 
 export interface HighlightProps {
   /**

src/hooks/useHighlight.ts

@@ -6,11 +6,7 @@ import langYaml from "@shikijs/langs/yaml";
 import themeGitHubDark from "@shikijs/themes/github-dark";
 import themeGitHubLight from "@shikijs/themes/github-light";
 import { useMemo } from "react";
-
-/**
- * Languages understood by the UI system's highlighter. The `text` option prevents highlighting.
- */
-export type HighlightLanguage = "shell" | "yaml" | "terraform" | "text";
+import type { HighlightLanguage } from "../shared";
 
 // Lazily instantiate the Shiki renderer to avoid paying (some) startp costs
 let shiki: ReturnType<typeof createHighlighterCoreSync>;

src/index.ts

@@ -1,8 +1,5 @@
 // Hooks
-export {
-  type HighlightLanguage,
-  default as useHighlight,
-} from "./hooks/useHighlight";
+export { default as useHighlight } from "./hooks/useHighlight";
 export { default as useObjectURL } from "./hooks/useObjectURL";
 
 // Components

src/shared.ts

@@ -0,0 +1,38 @@
+import { action } from "@storybook/addon-actions";
+
+// Corresponds to the $sizes map in Sass
+export const sizes = ["sm", "base", "lg"] as const;
+
+/**
+ * Semantic sizes within the design system.
+ */
+export type Size = (typeof sizes)[number];
+
+// Corresponds to the $colors map in Sass
+export const colors = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "danger",
+] as const;
+
+/**
+ * Semantic colors within the design system.
+ */
+export type Color = (typeof colors)[number];
+
+export const highlightLanguages = [
+  "shell",
+  "terraform",
+  "text",
+  "yaml",
+] as const;
+
+/**
+ * Languages understood by the UI system's highlighter. The `text` option prevents highlighting.
+ */
+export type HighlightLanguage = (typeof highlightLanguages)[number];
+
+export const makeClickVisible = action("click");