feat: add initial Storybook frontmatter (#837)

## 📝 Changes - Adds "Getting Started", "Changelog", and "Contributing" frontmatter sections - Breaks out "Components" into "Primitives" and "Components"
EasyPost · Dec 8, 2023 · d0b91ad · d0b91ad
1 parent a98c59b
commit d0b91ad
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 21 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -28,6 +28,17 @@ const preview: Preview = {
         opacity: 0.25,
       },
     },
+    options: {
+      storySort: {
+        order: [
+          "Getting Started",
+          "Changelog",
+          "Contributing",
+          "Primitives",
+          "Components",
+        ],
+      },
+    },
   },
   decorators: [
     (Story, context) => {

diff --git a/easy-ui-react/README.md b/easy-ui-react/README.md
@@ -1,6 +1,6 @@
-# Easy UI React
+# Easy UI
 
-Easy UI React is a component library designed to help developers create the best experience for shippers who use EasyPost.
+[Easy UI](https://github.com/EasyPost/easy-ui) is a component library designed to help developers create the best experience for shippers who use EasyPost.
 
 ## Installation
 
@@ -20,35 +20,39 @@ npm install @easypost/easy-ui --save
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-400.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-400.woff") format("woff");
 }
 
 @font-face {
   font-family: "Poppins";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-500.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-500.woff") format("woff");
 }
 
 @font-face {
   font-family: "Poppins";
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-600.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-600.woff") format("woff");
 }
 
 @font-face {
   font-family: "Poppins";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"), url("/fonts/poppins/poppins-v20-latin-700.woff")
-      format("woff");
+  src:
+    url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"),
+    url("/fonts/poppins/poppins-v20-latin-700.woff") format("woff");
 }
 ```
 
@@ -69,10 +73,8 @@ import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";
 ```js
 ReactDOM.render(
   <EasyUIProvider>
-    <div>
-      {/* More to come */}
-    </div>
-  </AppProvider>,
+    <div>{/* More to come */}</div>
+  </EasyUIProvider>,
   document.querySelector("#app"),
 );
 ```

diff --git a/easy-ui-react/src/Changelog.mdx b/easy-ui-react/src/Changelog.mdx
@@ -0,0 +1,7 @@
+import React from "react";
+import { Canvas, Meta, ArgTypes, Controls, Markdown } from "@storybook/blocks";
+import Changelog from "../CHANGELOG.md?raw";
+
+<Meta title="Changelog" />
+
+<Markdown>{Changelog}</Markdown>
diff --git a/easy-ui-react/src/CodeBlock/CodeBlock.stories.tsx b/easy-ui-react/src/CodeBlock/CodeBlock.stories.tsx
@@ -32,7 +32,7 @@ const getSnippets = () => (
 );
 
 const meta: Meta<typeof CodeBlock> = {
-  title: "Components/CodeBlock",
+  title: "Components/Code/CodeBlock",
   component: CodeBlock,
   args: {
     children: (

diff --git a/easy-ui-react/src/CodeSnippet/CodeSnippet.stories.tsx b/easy-ui-react/src/CodeSnippet/CodeSnippet.stories.tsx
@@ -10,7 +10,7 @@ const Template = (args: CodeSnippetProps) => (
 );
 
 const meta: Meta<typeof CodeSnippet> = {
-  title: "Components/CodeSnippet",
+  title: "Components/Code/CodeSnippet",
   component: CodeSnippet,
   args: {
     language: SnippetLanguages.JAVASCRIPT,

diff --git a/easy-ui-react/src/Contributing.mdx b/easy-ui-react/src/Contributing.mdx
@@ -0,0 +1,7 @@
+import React from "react";
+import { Canvas, Meta, ArgTypes, Controls, Markdown } from "@storybook/blocks";
+import Contributing from "../../.github/CONTRIBUTING.md?raw";
+
+<Meta title="Contributing" />
+
+<Markdown>{Contributing}</Markdown>
diff --git a/easy-ui-react/src/GettingStarted.mdx b/easy-ui-react/src/GettingStarted.mdx
@@ -0,0 +1,7 @@
+import React from "react";
+import { Canvas, Meta, ArgTypes, Controls, Markdown } from "@storybook/blocks";
+import Readme from "../README.md?raw";
+
+<Meta title="Getting Started" />
+
+<Markdown>{Readme}</Markdown>
diff --git a/easy-ui-react/src/HorizontalGrid/HorizontalGrid.stories.tsx b/easy-ui-react/src/HorizontalGrid/HorizontalGrid.stories.tsx
@@ -21,7 +21,7 @@ const Content = (props: PlaceholderBoxProps) => (
 const Template = (args: HorizontalGridProps) => <HorizontalGrid {...args} />;
 
 const meta: Meta<typeof HorizontalGrid> = {
-  title: "Components/HorizontalGrid",
+  title: "Primitives/HorizontalGrid",
   component: HorizontalGrid,
   args: {
     columns: 4,

diff --git a/easy-ui-react/src/HorizontalStack/HorizontalStack.stories.tsx b/easy-ui-react/src/HorizontalStack/HorizontalStack.stories.tsx
@@ -21,7 +21,7 @@ const Content = (props: PlaceholderBoxProps) => (
 const Template = (args: HorizontalStackProps) => <HorizontalStack {...args} />;
 
 const meta: Meta<typeof HorizontalStack> = {
-  title: "Components/HorizontalStack",
+  title: "Primitives/HorizontalStack",
   component: HorizontalStack,
   args: {
     gap: "2",

diff --git a/easy-ui-react/src/Icon/Icon.stories.tsx b/easy-ui-react/src/Icon/Icon.stories.tsx
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof Icon>;
 const Template = (args: IconProps) => <Icon {...args} />;
 
 const meta: Meta<typeof Icon> = {
-  title: "Components/Icon",
+  title: "Primitives/Icon",
   argTypes: {
     // TODO: Figure out how to include all icons from our icons project
     symbol: createLabelledOptionsControl({

diff --git a/easy-ui-react/src/Text/Text.stories.tsx b/easy-ui-react/src/Text/Text.stories.tsx
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Text>;
 const Template = (args: TextProps) => <Text {...args} />;
 
 const meta: Meta<typeof Text> = {
-  title: "Components/Text",
+  title: "Primitives/Text",
   argTypes: {
     variant: createFontStyleTokensControl(),
     color: createColorTokensControl(),

diff --git a/easy-ui-react/src/VerticalStack/VerticalStack.stories.tsx b/easy-ui-react/src/VerticalStack/VerticalStack.stories.tsx
@@ -22,7 +22,7 @@ const Content = (props: PlaceholderBoxProps) => (
 const Template = (args: VerticalStackProps) => <VerticalStack {...args} />;
 
 const meta: Meta<typeof VerticalStack> = {
-  title: "Components/VerticalStack",
+  title: "Primitives/VerticalStack",
   component: VerticalStack,
   args: {
     gap: "2",