From d0b91ad01545c7be19c23626751db025d5de3f40 Mon Sep 17 00:00:00 2001 From: Stephen Watkins Date: Fri, 8 Dec 2023 08:59:19 -0500 Subject: [PATCH] feat: add initial Storybook frontmatter (#837) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 📝 Changes - Adds "Getting Started", "Changelog", and "Contributing" frontmatter sections - Breaks out "Components" into "Primitives" and "Components" --- .storybook/preview.tsx | 11 +++++++ easy-ui-react/README.md | 30 ++++++++++--------- easy-ui-react/src/Changelog.mdx | 7 +++++ .../src/CodeBlock/CodeBlock.stories.tsx | 2 +- .../src/CodeSnippet/CodeSnippet.stories.tsx | 2 +- easy-ui-react/src/Contributing.mdx | 7 +++++ easy-ui-react/src/GettingStarted.mdx | 7 +++++ .../HorizontalGrid/HorizontalGrid.stories.tsx | 2 +- .../HorizontalStack.stories.tsx | 2 +- easy-ui-react/src/Icon/Icon.stories.tsx | 2 +- easy-ui-react/src/Text/Text.stories.tsx | 2 +- .../VerticalStack/VerticalStack.stories.tsx | 2 +- 12 files changed, 55 insertions(+), 21 deletions(-) create mode 100644 easy-ui-react/src/Changelog.mdx create mode 100644 easy-ui-react/src/Contributing.mdx create mode 100644 easy-ui-react/src/GettingStarted.mdx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f6a043bf9..31c51e746 100644 --- 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 index c372f501b..0d2502345 100644 --- 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,8 +20,9 @@ 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 { @@ -29,8 +30,9 @@ npm install @easypost/easy-ui --save 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 { @@ -38,8 +40,9 @@ npm install @easypost/easy-ui --save 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 { @@ -47,8 +50,9 @@ npm install @easypost/easy-ui --save 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( -
- {/* More to come */} -
- , +
{/* More to come */}
+ , document.querySelector("#app"), ); ``` diff --git a/easy-ui-react/src/Changelog.mdx b/easy-ui-react/src/Changelog.mdx new file mode 100644 index 000000000..fea539ab0 --- /dev/null +++ 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"; + + + +{Changelog} diff --git a/easy-ui-react/src/CodeBlock/CodeBlock.stories.tsx b/easy-ui-react/src/CodeBlock/CodeBlock.stories.tsx index 412db333a..440ceb3cd 100644 --- 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 = { - 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 index 203a3afbf..6956c262e 100644 --- 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 = { - 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 new file mode 100644 index 000000000..f6c487d35 --- /dev/null +++ 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"; + + + +{Contributing} diff --git a/easy-ui-react/src/GettingStarted.mdx b/easy-ui-react/src/GettingStarted.mdx new file mode 100644 index 000000000..e23c4d639 --- /dev/null +++ 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"; + + + +{Readme} diff --git a/easy-ui-react/src/HorizontalGrid/HorizontalGrid.stories.tsx b/easy-ui-react/src/HorizontalGrid/HorizontalGrid.stories.tsx index c5d6a0700..a2de9c5c7 100644 --- 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) => ; const meta: Meta = { - 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 index af9be513b..ef5a7d15d 100644 --- 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) => ; const meta: Meta = { - 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 index 0e18afae8..16d1ddf75 100644 --- 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; const Template = (args: IconProps) => ; const meta: Meta = { - 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 index 2579bf85c..6f94d38e6 100644 --- 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; const Template = (args: TextProps) => ; const meta: Meta = { - 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 index 1cc6b52fe..2ce4b9a25 100644 --- 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) => ; const meta: Meta = { - title: "Components/VerticalStack", + title: "Primitives/VerticalStack", component: VerticalStack, args: { gap: "2",