Add sample Storybook stories for few simple components

anttimaki · anttimaki · commit c23f39ece110 · 2021-12-02T08:54:38.000+02:00
Also add short doc string for the components, to see how Storybook
displays these on its Docs tab.
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
@@ -1,7 +1,11 @@
 module.exports = {
   "stories": [
     "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    {
+      "directory": "../stories/components",
+      "files": "*.stories.*",
+      "titlePrefix": "@thunderstore/components"
+    },
   ],
   "addons": [
     "@storybook/addon-links",
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -39,6 +39,7 @@
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@snek-at/storybook-addon-chakra-ui": "^1.0.0-beta.1",
+    "@thunderstore/components": "^0.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "webpack": "^4.46.0"
diff --git a/apps/storybook/stories/components/Markdown.stories.tsx b/apps/storybook/stories/components/Markdown.stories.tsx
@@ -0,0 +1,83 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Markdown } from "@thunderstore/components";
+import React from "react";
+
+const basicContent = `
+# Main header
+
+This is a markdown renderer.
+
+## Subheader
+
+This is first paragraph.
+
+This is second paragraph.
+`;
+
+const codeContent = `
+${"```"}js
+console.log("Hello, World!");
+${"```"}
+
+  
+
+${"```"}python
+print('Hello, World!')
+${"```"}
+`;
+
+const listContent = `
+* Some item
+* Another item
+    * Subitem
+    * Subitem
+* Yet another item
+
+  
+
+1. First item
+2. Second item
+    1. Subitem
+    2. Subitem
+3. Last item
+
+  
+
+- [x] Read ticket thoroughly
+- [ ] Design implementation
+- [ ] Write code and tests
+`;
+
+const textContent = `
+*This text is italicized*
+
+**This is bold text**
+
+**The bold and _the italicized_**
+
+***All bold and italicized***
+
+~~Nevermind~~
+
+> Quoth the Raven "Nevermore."
+`;
+
+const meta = { component: Markdown } as ComponentMeta<typeof Markdown>;
+
+const Template: ComponentStory<typeof Markdown> = (args) => (
+  <Markdown>{args.children}</Markdown>
+);
+
+const BasicContent = Template.bind({});
+BasicContent.args = { children: basicContent };
+
+const CodeContent = Template.bind({});
+CodeContent.args = { children: codeContent };
+
+const ListContent = Template.bind({});
+ListContent.args = { children: listContent };
+
+const TextContent = Template.bind({});
+TextContent.args = { children: textContent };
+
+export { meta as default, BasicContent, CodeContent, ListContent, TextContent };
diff --git a/apps/storybook/stories/components/MultiSelect.stories.tsx b/apps/storybook/stories/components/MultiSelect.stories.tsx
@@ -0,0 +1,16 @@
+import { MultiSelect } from "@thunderstore/components";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import React from "react";
+
+import * as SelectStories from "./Select.stories";
+
+const meta = { component: MultiSelect } as ComponentMeta<typeof MultiSelect>;
+
+const Template: ComponentStory<typeof MultiSelect> = (args) => (
+  <MultiSelect {...args} />
+);
+
+const Multi = Template.bind({});
+Multi.args = { ...SelectStories.Select.args };
+
+export { meta as default, Multi as MultiSelect };
diff --git a/apps/storybook/stories/components/Select.stories.tsx b/apps/storybook/stories/components/Select.stories.tsx
@@ -0,0 +1,21 @@
+import { Select } from "@thunderstore/components";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import React from "react";
+
+const args = {
+  options: [
+    { label: "Option 1", value: "option-1" },
+    { label: "Option 2", value: "option-2" },
+    { label: "Option 3", value: "option-3" },
+  ],
+  onChange: () => null,
+};
+
+const meta = { component: Select } as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+
+const Select_ = Template.bind({});
+Select_.args = { ...args };
+
+export { meta as default, Select_ as Select };
diff --git a/packages/components/src/components/Markdown.tsx b/packages/components/src/components/Markdown.tsx
@@ -5,6 +5,9 @@ interface MarkdownProps {
   children: string;
 }
 
+/**
+ * Wrapper for rendering markdown strings as proper markup.
+ */
 export const Markdown: React.FC<MarkdownProps> = ({ children }) => {
   const [markup, setMarkup] = React.useState<JSX.Element>();
 
diff --git a/packages/components/src/components/Select.tsx b/packages/components/src/components/Select.tsx
@@ -24,6 +24,9 @@ export interface SelectProps<T extends SelectOption = SelectOption> {
   onChange(option: T | null): void;
 }
 
+/**
+ * Select element that supports filtering options by text search.
+ */
 export const Select = <T extends SelectOption = SelectOption>({
   options,
   disabled = false,
@@ -113,6 +116,11 @@ export interface MultiSelectProps<T extends SelectOption = SelectOption> {
   onChange(options: T[]): void;
 }
 
+/**
+ * Multiselect element that supports filtering options by text search.
+ *
+ * Selected options are shown as tags above the select component.
+ */
 export const MultiSelect = <T extends SelectOption = SelectOption>({
   options,
   disabled = false,
diff --git a/yarn.lock b/yarn.lock
@@ -2198,16 +2198,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
+"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0", "@popperjs/core@^2.9.3":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
   integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
 
-"@popperjs/core@^2.9.3":
-  version "2.10.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
-  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
-
 "@preconstruct/cli@^2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@preconstruct/cli/-/cli-2.1.5.tgz#f7f6d06809f382521589af15f67b87009b240c58"
@@ -3370,9 +3365,9 @@
     form-data "^3.0.0"
 
 "@types/node@*", "@types/node@^16.6.2":
-  version "16.11.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.10.tgz#2e3ad0a680d96367103d3e670d41c2fed3da61ae"
-  integrity sha512-3aRnHa1KlOEEhJ6+CvyHKK5vE9BcLGjtUpwvqYLRvYNQKMfabu3BwfJaA/SLW8dxe28LsNDjtHwePTuzn3gmOA==
+  version "16.11.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.11.tgz#6ea7342dfb379ea1210835bada87b3c512120234"
+  integrity sha512-KB0sixD67CeecHC33MYn+eYARkqTheIRNuu97y2XMjR7Wu3XibO1vaY6VBV6O/a89SPI81cEUIYT87UqUWlZNw==
 
 "@types/node@^14.0.10":
   version "14.17.34"
@@ -4557,7 +4552,7 @@ browserslist@4.16.6:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
-browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4.17.6:
+browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4.18.1:
   version "4.18.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f"
   integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==
@@ -5213,22 +5208,22 @@ copy-to-clipboard@3.3.1, copy-to-clipboard@^3.3.1:
     toggle-selection "^1.0.6"
 
 core-js-compat@^3.18.0, core-js-compat@^3.19.1, core-js-compat@^3.8.1:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.19.1.tgz#fe598f1a9bf37310d77c3813968e9f7c7bb99476"
-  integrity sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==
+  version "3.19.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.19.2.tgz#18066a3404a302433cb0aa8be82dd3d75c76e5c4"
+  integrity sha512-ObBY1W5vx/LFFMaL1P5Udo4Npib6fu+cMokeziWkA8Tns4FcDemKF5j9JvaI5JhdkW8EQJQGJN1EcrzmEwuAqQ==
   dependencies:
-    browserslist "^4.17.6"
+    browserslist "^4.18.1"
     semver "7.0.0"
 
 core-js-pure@^3.19.0, core-js-pure@^3.8.1, core-js-pure@^3.8.2:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.19.1.tgz#edffc1fc7634000a55ba05e95b3f0fe9587a5aa4"
-  integrity sha512-Q0Knr8Es84vtv62ei6/6jXH/7izKmOrtrxH9WJTHLCMAVeU+8TF8z8Nr08CsH4Ot0oJKzBzJJL9SJBYIv7WlfQ==
+  version "3.19.2"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.19.2.tgz#26b5bfb503178cff6e3e115bc2ba6c6419383680"
+  integrity sha512-5LkcgQEy8pFeVnd/zomkUBSwnmIxuF1C8E9KrMAbOc8f34IBT9RGvTYeNDdp1PnvMJrrVhvk1hg/yVV5h/znlg==
 
 core-js@^3.0.4, core-js@^3.19.1, core-js@^3.6.5, core-js@^3.8.2:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
-  integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
+  version "3.19.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.2.tgz#ae216d7f4f7e924d9a2e3ff1e4b1940220f9157b"
+  integrity sha512-ciYCResnLIATSsXuXnIOH4CbdfgV+H1Ltg16hJFN7/v6OxqnFr/IFGeLacaZ+fHLAm0TBbXwNK9/DNBzBUrO/g==
 
 core-util-is@~1.0.0:
   version "1.0.3"
@@ -5468,9 +5463,9 @@ debug@^3.0.0, debug@^3.2.7:
     ms "^2.1.1"
 
 debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
   dependencies:
     ms "2.1.2"
 
@@ -5774,15 +5769,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.564:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.4.tgz#57311918524c1a26878c330537f967804d43788a"
-  integrity sha512-teHtgwcmVcL46jlFvAaqjyiTLWuMrUQO1JqV303JKB4ysXG6m8fXSFhbjal9st0r9mNskI22AraJZorb1VcLVg==
-
-electron-to-chromium@^1.3.723, electron-to-chromium@^1.3.896:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.3.tgz#82480df3ef607f04bb38cc3f30a628d8b895339f"
-  integrity sha512-hfpppjYhqIZB8jrNb0rNceQRkSnBN7QJl3W26O1jUv3F3BkQknqy1YTqVXkFnIcFtBc3Qnv5M7r5Lez2iOLgZA==
+electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.723, electron-to-chromium@^1.3.896:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.5.tgz#912e8fd1645edee2f0f212558f40916eb538b1f9"
+  integrity sha512-YKaB+t8ul5crdh6OeqT2qXdxJGI0fAYb6/X8pDIyye+c3a7ndOCk5gVeKX+ABwivCGNS56vOAif3TN0qJMpEHw==
 
 element-resize-detector@^1.2.2:
   version "1.2.3"
@@ -6670,9 +6660,9 @@ fork-ts-checker-webpack-plugin@4.1.6, fork-ts-checker-webpack-plugin@^4.1.6:
     worker-rpc "^0.1.0"
 
 fork-ts-checker-webpack-plugin@^6.0.4:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.4.2.tgz#6d307fb4072ce4abe4d56a89c8ef060066f33d81"
-  integrity sha512-EqtzzRdx2mldr0KEydSN9jaNrf419gMpwkloumG6K/S7jtJc9Fl7wMJ+y+o7DLLGMMU/kouYr06agTD/YkxzIQ==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz#0282b335fa495a97e167f69018f566ea7d2a2b5e"
+  integrity sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -10683,9 +10673,9 @@ react-helmet-async@^1.0.7:
     shallowequal "^1.1.0"
 
 react-hook-form@^7.15.4:
-  version "7.20.4"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.20.4.tgz#7c23dcaed54812fba9ac63be0313b7c5d11d2b93"
-  integrity sha512-Nvy6TnNMlBoR+qS8FpA8lrqtGJ4uoi/MRYEgMEdBMY0HwHVuC7wB1sk6wTjg7FjOUt7QqMAP2W/vOhTWbKrtkQ==
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.20.5.tgz#69d563c9cceafb2d4449bd3c28d17342b57b5830"
+  integrity sha512-xYeBmQW6oqxDYAYVWIoZYC7tRD6lJBJt9b8Rr1Mv/VhZ+ZUCy2IuXlm2YA9i0/zl0TKKxqBWQOxGEb3qyVIhMg==
 
 react-inspector@^5.1.0:
   version "5.1.1"
@@ -10707,9 +10697,9 @@ react-is@^16.7.0, react-is@^16.8.1:
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-markdown@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.1.0.tgz#0ba62a4459daab6600ede83495a9228dae9d8f8e"
-  integrity sha512-hL8cLLkTydyoKlZWZOjlU6TvMYIw9qKLh1CCzVfnhKt/R/SnKVAqiyugetXY61CkjhBqJl2C5FdU3OwHYo7SrQ==
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.1.1.tgz#cb4d2c2fa3bc1292c889b068a5bf064ae4be1c60"
+  integrity sha512-bXS7indkcPlCLB6wRFFzX8Xdghr62TBxUF2587o+CUkaZlNaoILb2qNt+5pYmTZuCOC+OeEcdJ+06mu5whtCVQ==
   dependencies:
     "@types/hast" "^2.0.0"
     "@types/unist" "^2.0.0"
@@ -10744,9 +10734,9 @@ react-popper@^2.2.4:
     warning "^4.0.2"
 
 react-query@^3.21.1:
-  version "3.33.5"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.33.5.tgz#5d8a42bd3237e25a00173a8f8aa59c04b6af5729"
-  integrity sha512-gNpTzbY9Xw/s0ALeLsXdUGXtzXbXQcRAMa4Ina2JOJHbDr2mdA79O2SMNUwctKJ1/c0vKTdALIdn4taptv+MTQ==
+  version "3.33.7"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.33.7.tgz#6ab1b2cb39e2e925a4fc44e8a269c7691e7eb2f3"
+  integrity sha512-uL/1ZatxcRyvfhbNPeuOlLVbcdMQKzQ2t+SQLJMrMM0plfa/Al3buaPbGsbsmIwvyWeI4CVkkSBKzQIkU4p9MQ==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"
@@ -11207,9 +11197,9 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     inherits "^2.0.1"
 
 rollup@^2.32.0:
-  version "2.60.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.1.tgz#4b34cd247f09b421f10a3c9286eda2ecf9972079"
-  integrity sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==
+  version "2.60.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.2.tgz#3f45ace36a9b10b4297181831ea0719922513463"
+  integrity sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==
   optionalDependencies:
     fsevents "~2.3.2"
 

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@ interface MarkdownProps {`
`5`	`5`	`children: string;`
`6`	`6`	`}`
`7`	`7`
	`8`	`+/**`
	`9`	`+ * Wrapper for rendering markdown strings as proper markup.`
	`10`	`+ */`
`8`	`11`	`export const Markdown: React.FC<MarkdownProps> = ({ children }) => {`
`9`	`12`	`const [markup, setMarkup] = React.useState<JSX.Element>();`
`10`	`13`