From 73b91b9bd442708d75d3c5da4c2a54c3cd57457b Mon Sep 17 00:00:00 2001
From: Luc Perkins <lucperkins@gmail.com>
Date: Thu, 12 Jun 2025 11:16:18 -0700
Subject: [PATCH 1/2] Provide shared/reusable values

---
 src/Button/index.tsx      | 14 +++-----------
 src/CodeBlock/index.tsx   |  2 +-
 src/Highlight/index.tsx   |  3 ++-
 src/hooks/useHighlight.ts |  6 +-----
 src/index.ts              |  5 +----
 src/shared.ts             | 34 ++++++++++++++++++++++++++++++++++
 6 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 src/shared.ts

diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index 65cea08..9712b6b 100644
--- a/src/Button/index.tsx
+++ b/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.
diff --git a/src/CodeBlock/index.tsx b/src/CodeBlock/index.tsx
index 5cd7635..f730359 100644
--- a/src/CodeBlock/index.tsx
+++ b/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";
 
diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx
index cc4f6b6..a298a2d 100644
--- a/src/Highlight/index.tsx
+++ b/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 {
   /**
diff --git a/src/hooks/useHighlight.ts b/src/hooks/useHighlight.ts
index b4a0f10..99c92e4 100644
--- a/src/hooks/useHighlight.ts
+++ b/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>;
diff --git a/src/index.ts b/src/index.ts
index 9326173..5a01058 100644
--- a/src/index.ts
+++ b/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
diff --git a/src/shared.ts b/src/shared.ts
new file mode 100644
index 0000000..e84def2
--- /dev/null
+++ b/src/shared.ts
@@ -0,0 +1,34 @@
+// 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];

From 6a261711132fbf30a45a4aa40eecfb944538b44c Mon Sep 17 00:00:00 2001
From: Luc Perkins <lucperkins@gmail.com>
Date: Thu, 12 Jun 2025 11:30:38 -0700
Subject: [PATCH 2/2] Make click action shared

---
 src/Button/Button.stories.tsx | 7 +++----
 src/shared.ts                 | 4 ++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 2db864d..7b66200 100644
--- a/src/Button/Button.stories.tsx
+++ b/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}>
diff --git a/src/shared.ts b/src/shared.ts
index e84def2..3be2906 100644
--- a/src/shared.ts
+++ b/src/shared.ts
@@ -1,3 +1,5 @@
+import { action } from "@storybook/addon-actions";
+
 // Corresponds to the $sizes map in Sass
 export const sizes = ["sm", "base", "lg"] as const;
 
@@ -32,3 +34,5 @@ export const highlightLanguages = [
  * Languages understood by the UI system's highlighter. The `text` option prevents highlighting.
  */
 export type HighlightLanguage = (typeof highlightLanguages)[number];
+
+export const makeClickVisible = action("click");