feat: storybook infrastructure

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: 
+  push: 
+    branches: [ dev ]
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

pkg/app/package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "generate": "graphql-codegen",
     "storybook": "start-storybook -p 3333",
-    "build:storybook": "build-storybook"
+    "build:storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=015a4a235bee"
   },
   "dependencies": {
     "@apollo/client": "^3.6.8",
@@ -101,6 +102,7 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/webpack-bundle-analyzer": "^4.4.2",
+    "chromatic": "^6.11.4",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.0.1",
     "eslint": "^8.18.0",
@@ -111,5 +113,7 @@
     "storybook-addon-material-ui": "^0.9.0-alpha.24",
     "storybook-addon-next": "^1.6.9",
     "typescript": "^4.7.4"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "@gamedao-haiku/app@1.0.0-rc.1"
 }

pkg/app/src/components/Button/index.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react'
+import { Button } from '@mui/material'
+
+interface Props {
+	sx?: any
+	children: ReactNode
+	onClick?: any
+	variant?: 'primary' | 'secondary' | 'nav' | 'error'
+}
+
+const CustomButton = ({ children, variant, sx, onClick }: Props) => {
+	const customSx = sx || {}
+
+	switch (variant) {
+		case 'secondary':
+			return (
+				<Button onClick={onClick} type="button" sx={customSx} variant="outlined">
+					{children}
+				</Button>
+			)
+		case 'nav':
+			return (
+				<Button onClick={onClick} type="button" sx={customSx} variant="secondary" color="secondary">
+					{children}
+				</Button>
+			)
+		case 'error':
+			return (
+				<Button onClick={onClick} type="button" sx={customSx} variant="contained" color="error">
+					{children}
+				</Button>
+			)
+		case 'primary':
+		default:
+			return (
+				<Button onClick={onClick} type="button" sx={customSx} variant="contained">
+					{children}
+				</Button>
+			)
+	}
+}
+
+export default CustomButton

pkg/app/src/stories/Components/Button/Button.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Button } from '@mui/material'
+
+export default {
+	title: 'Components/Button',
+	component: Button,
+	argTypes: {
+		backgroundColor: { control: 'color' },
+	},
+} as ComponentMeta<typeof Button>
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+	variant: 'contained',
+	type: 'button',
+	children: 'Button',
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+	variant: 'outlined',
+	type: 'button',
+	children: 'Button',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+	variant: 'contained',
+	color: 'error',
+	type: 'button',
+	children: 'Button',
+}
+
+export const Navigation = Template.bind({})
+Navigation.args = {
+	variant: 'secondary',
+	type: 'button',
+	color: 'secondary',
+	children: 'Button',
+}

pkg/app/src/stories/Header.stories.tsx → pkg/app/src/stories/Containers/Header/Header.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { Header } from './Header'
 
 export default {
-	title: 'Example/Header',
+	title: 'Containers/Header',
 	component: Header,
 	parameters: {
 		// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout

pkg/app/src/stories/Header.tsx → pkg/app/src/stories/Containers/Header/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button } from './Button'
+import Button from '../../../components/Button'
 import './header.css'
 
 type User = {
@@ -36,12 +36,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
 						<span className="welcome">
 							Welcome, <b>{user.name}</b>!
 						</span>
-						<Button size="small" onClick={onLogout} label="Log out" />
+						<Button onClick={onLogout}>Log out</Button>
 					</>
 				) : (
 					<>
-						<Button size="small" onClick={onLogin} label="Log in" />
-						<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+						<Button onClick={onLogin}>Log in</Button>
+						<Button onClick={onCreateAccount}>Sign up</Button>
 					</>
 				)}
 			</div>