Merge pull request #21 from opendexnetwork/feat/storybook

feat: add storybook

Author: maybeast

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import theme from "./theme";
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ThemeProvider } from "@material-ui/core";
+import { createMuiTheme } from "@material-ui/core/styles";
+import { addDecorator } from "@storybook/react";
+import { withThemes } from "@react-theming/storybook-addon";
+import { darkTheme } from "../src/themes";
+import storybookTheme from "./theme";
+
+const providerFn = ({ theme, children }) => {
+  const muTheme = createMuiTheme(theme);
+  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>;
+};
+
+addDecorator(withThemes(null, [darkTheme], { providerFn }));
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  docs: {
+    theme: storybookTheme,
+  },
+};

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming";
+import { darkTheme } from "../src/themes";
+
+export default create({
+  base: "dark",
+  brandTitle: "OpenDEX storybook",
+  brandImage:
+    "https://gblobscdn.gitbook.com/spaces%2F-Lq7dAvRcXVJXcPrZrNF%2Favatar.png?alt=media",
+});

README.md

@@ -27,3 +27,7 @@ A graphical user interface for interacting with an [opendex-docker](https://gith
 ### Lint
 
 `yarn lint`
+
+### Develop view components
+
+`yarn storybook`

package.json

@@ -10,7 +10,9 @@
     "eject": "react-scripts eject",
     "lint": "eslint . --ext .js,.ts,.tsx",
     "check-prettier": "prettier --check src/",
-    "prettier": "prettier --write src/"
+    "prettier": "prettier --write src/",
+    "storybook": "start-storybook -p 6006 -s public --no-manager-cache",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -34,6 +36,15 @@
     "xterm-addon-fit": "^0.4.0"
   },
   "devDependencies": {
+    "@react-theming/storybook-addon": "^1.0.3",
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/addons": "^6.1.21",
+    "@storybook/node-logger": "^6.1.21",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.21",
+    "@storybook/theming": "^6.1.21",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/common/components/input/buttons/Button.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import ButtonBase, { ButtonBaseProps } from "./ButtonBase";
 
-type ButtonProps = Omit<ButtonBaseProps, "variant"> & {
+export type ButtonProps = Omit<ButtonBaseProps, "variant"> & {
   variant?: "contained" | "outlined";
 };
 

src/stories/Button.stories.tsx

@@ -0,0 +1,26 @@
+import Button, { ButtonProps } from "../common/components/input/buttons/Button";
+import React from "react";
+import { Story, Meta } from "@storybook/react/types-6-0";
+
+export default {
+  title: "Button",
+  component: Button,
+  argTypes: {
+    text: { defaultValue: "I'm a Button" },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = (args: ButtonProps) => (
+  <Button {...args} />
+);
+
+export const PrimaryButton = Template.bind({});
+PrimaryButton.args = {
+  color: "primary",
+};
+
+export const OutlinedButton = Template.bind({});
+OutlinedButton.args = {
+  color: "default",
+  variant: "outlined",
+};