Merge pull request #20 from DeterminateSystems/enum-arrays

Convert enums to arrays

Author: lucperkins

src/Button/Button.stories.tsx

@@ -1,11 +1,31 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import Button from "./";
+import Button, { buttonColors, buttonSizes } from "./";
 
 const meta = {
   title: "Atoms/Button",
   component: Button,
+  argTypes: {
+    id: {
+      description: "An optional HTML identifier for the button",
+      control: "text",
+    },
+    color: {
+      description: "The button's color scheme",
+      control: "select",
+      options: [...buttonColors],
+    },
+    size: {
+      description: "The button's size",
+      control: "select",
+      options: [...buttonSizes],
+    },
+    outlined: {
+      description: "Whether the button is outlined",
+      control: "boolean",
+    },
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

src/Button/index.tsx

@@ -3,14 +3,18 @@ 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";
+export const buttonSizes = ["sm", "base", "lg"] as const;
+export type ButtonSize = (typeof buttonSizes)[number];
+
+export const buttonColors = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "danger",
+] as const;
+export type ButtonColor = (typeof buttonColors)[number];
 
 export interface ButtonProps {
   /**
@@ -26,7 +30,7 @@ export interface ButtonProps {
   /**
    * The button's color scheme.
    */
-  color?: ButtonColors;
+  color?: ButtonColor;
 
   /**
    * Whether the button is outlined.

src/CodeBlock/CodeBlock.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import CodeBlock from "./";
+import { highlightLanguages } from "../hooks/useHighlight";
 
 const meta = {
   title: "Molecules/CodeBlock",
@@ -11,7 +12,7 @@ const meta = {
   argTypes: {
     language: {
       control: "select",
-      options: ["shell", "yaml", "terraform", "text"],
+      options: [...highlightLanguages],
     },
     code: { control: "text" },
     allowCopy: { control: "boolean" },

src/CodeFile/CodeFile.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import CodeFile from "./";
+import { highlightLanguages } from "../hooks/useHighlight";
 
 const meta = {
   title: "Molecules/CodeFile",
@@ -11,7 +12,7 @@ const meta = {
   argTypes: {
     language: {
       control: "select",
-      options: ["shell", "yaml", "terraform", "text"],
+      options: [...highlightLanguages],
     },
     code: { control: "text" },
     filename: { control: "text" },

src/Highlight/Highlight.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Highlight from "./";
+import { highlightLanguages } from "../hooks/useHighlight";
 
 const meta = {
   title: "Atoms/Highlight",
@@ -11,7 +12,7 @@ const meta = {
   argTypes: {
     language: {
       control: "select",
-      options: ["shell", "yaml", "terraform", "text"],
+      options: [...highlightLanguages],
     },
     code: { control: "text" },
     inline: { control: "boolean" },

src/hooks/useHighlight.ts

@@ -10,7 +10,13 @@ import { useMemo } from "react";
 /**
  * Languages understood by the UI system's highlighter. The `text` option prevents highlighting.
  */
-export type HighlightLanguage = "shell" | "yaml" | "terraform" | "text";
+export const highlightLanguages = [
+  "shell",
+  "yaml",
+  "terraform",
+  "text",
+] as const;
+export type HighlightLanguage = (typeof highlightLanguages)[number];
 
 // Lazily instantiate the Shiki renderer to avoid paying (some) startp costs
 let shiki: ReturnType<typeof createHighlighterCoreSync>;