add storybook and sample story

no-chris · Mar 1, 2024 · 125699b · 125699b
1 parent 9491b9c
commit 125699b
Show file tree

Hide file tree

Showing 25 changed files with 3,450 additions and 188 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@ coverage
 
 # Macos
 .DS_Store
+
+*storybook.log
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/chord-chart-studio/.storybook/main.js b/packages/chord-chart-studio/.storybook/main.js
@@ -0,0 +1,28 @@
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@chromatic-com/storybook'),
+		getAbsolutePath('@storybook/addon-interactions'),
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/react-vite'),
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+export default config;
diff --git a/packages/chord-chart-studio/.storybook/preview.js b/packages/chord-chart-studio/.storybook/preview.js
@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+};
+
+export default preview;
diff --git a/packages/chord-chart-studio/build/assets/index-1ovoJZ2z.css b/packages/chord-chart-studio/build/assets/index-1ovoJZ2z.css
diff --git a/...art-studio/build/assets/index-COv2kAVA.js → ...art-studio/build/assets/index-D-AW_nO6.js b/...art-studio/build/assets/index-COv2kAVA.js → ...art-studio/build/assets/index-D-AW_nO6.js
diff --git a/packages/chord-chart-studio/build/assets/index-qH_J_xcx.css b/packages/chord-chart-studio/build/assets/index-qH_J_xcx.css
diff --git a/packages/chord-chart-studio/build/index.html b/packages/chord-chart-studio/build/index.html
@@ -39,10 +39,10 @@
 
 			gtag('config', 'G-EGKBT2J600');
 		</script>
-		<script type="module" crossorigin src="/app/assets/index-COv2kAVA.js"></script>
+		<script type="module" crossorigin src="/app/assets/index-D-AW_nO6.js"></script>
 		<link rel="modulepreload" crossorigin href="/app/assets/vendor-BPGk5lTF.js">
 		<link rel="stylesheet" crossorigin href="/app/assets/vendor-D780UWrd.css">
-		<link rel="stylesheet" crossorigin href="/app/assets/index-1ovoJZ2z.css">
+		<link rel="stylesheet" crossorigin href="/app/assets/index-qH_J_xcx.css">
 	<script id="vite-plugin-pwa:register-sw" src="/app/registerSW.js"></script></head>
 	<body>
 		<div id="app" class="theme-dark"></div>

diff --git a/packages/chord-chart-studio/build/sw.js b/packages/chord-chart-studio/build/sw.js
diff --git a/packages/chord-chart-studio/package.json b/packages/chord-chart-studio/package.json
@@ -1,84 +1,95 @@
 {
-	"name": "chord-chart-studio",
-	"version": "0.14.0",
-	"description": "Chord Chart Studio",
-	"private": true,
-	"author": "Christophe Noël",
-	"license": "LicenseRef-LICENSE",
-	"engines": {
-		"node": ">=16"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/no-chris/.chord-chart-studio.git"
-	},
-	"bugs": {
-		"url": "https://github.com/no-chris/chord-chart-studio/issues"
-	},
-	"homepage": "https://github.com/no-chris/chord-chart-studio#readme",
-	"devDependencies": {
-		"@testing-library/dom": "^9.3.4",
-		"@testing-library/jest-dom": "^6.3.0",
-		"@testing-library/react": "^14.1.2",
-		"@testing-library/user-event": "^14.5.2",
-		"react-test-renderer": "^18.2.0"
-	},
-	"dependencies": {
-		"chord-mark": "^0.16.2",
-		"chord-mark-converters": "^0.16.2",
-		"chord-mark-themes": "^0.16.2",
-		"chord-symbol": "^4.0.0",
-		"chord-symbol-ultimateguitar": "^4.0.0",
-		"combine-section-reducers": "^1.0.6",
-		"core-js": "^3.35.1",
-		"dompurify": "^3.0.8",
-		"file-saver": "^2.0.5",
-		"filesize": "^10.1.0",
-		"lodash": "^4.17.21",
-		"normalize.css": "^8.0.1",
-		"prop-types": "^15.8.1",
-		"prosemirror-commands": "^1.5.2",
-		"prosemirror-history": "^1.3.2",
-		"prosemirror-keymap": "^1.2.2",
-		"prosemirror-model": "^1.19.4",
-		"prosemirror-schema-basic": "^1.2.2",
-		"prosemirror-state": "^1.4.3",
-		"prosemirror-transform": "^1.8.0",
-		"prosemirror-view": "^1.32.7",
-		"qs": "^6.11.2",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-redux": "^8.1.3",
-		"redux": "^4.2.1",
-		"redux-devtools-extension": "^2.13.9",
-		"redux-thunk": "^2.4.2",
-		"reselect": "^4.1.8",
-		"scroll-sync-react": "^1.2.0",
-		"universal-router": "^9.2.0",
-		"uuid": "^9.0.1"
-	},
-	"scripts": {
-		"audit": "npm audit",
-		"build": "npm run format && npm run lint && npm run test && npm run version && npm run bundle && npm run size && npm run sloc",
-		"bundle": "npx vite build",
-		"dev": "npx vite",
-		"format": "prettier --write \"**/*.{js,jsx,json,ts,md,scss,css}\"",
-		"lint": "eslint src tests",
-		"preview": "npx vite preview",
-		"size": "npx size-limit",
-		"sloc": "echo \"Source code:\" > SLOC && npx sloc src >> SLOC && echo \"Tests:\" >> SLOC && npx sloc tests >> SLOC && echo \"Total:\" >> SLOC && npx sloc src tests >> SLOC",
-		"test": "npx jest",
-		"unit": "npx jest tests/unit",
-		"version": "node src/core/createGetVersions.js"
-	},
-	"size-limit": [
-		{
-			"path": "./build/assets/index-*.js",
-			"limit": "25 KB"
-		},
-		{
-			"path": "./build/assets/vendor-*.js",
-			"limit": "300 KB"
-		}
-	]
+  "name": "chord-chart-studio",
+  "version": "0.14.0",
+  "description": "Chord Chart Studio",
+  "private": true,
+  "author": "Christophe Noël",
+  "license": "LicenseRef-LICENSE",
+  "engines": {
+    "node": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/no-chris/.chord-chart-studio.git"
+  },
+  "bugs": {
+    "url": "https://github.com/no-chris/chord-chart-studio/issues"
+  },
+  "homepage": "https://github.com/no-chris/chord-chart-studio#readme",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.1",
+    "@storybook/addon-essentials": "8.0.0-rc.0",
+    "@storybook/addon-interactions": "8.0.0-rc.0",
+    "@storybook/addon-links": "8.0.0-rc.0",
+    "@storybook/blocks": "8.0.0-rc.0",
+    "@storybook/react": "8.0.0-rc.0",
+    "@storybook/react-vite": "8.0.0-rc.0",
+    "@storybook/test": "8.0.0-rc.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "react-test-renderer": "^18.2.0",
+    "storybook": "8.0.0-rc.0"
+  },
+  "dependencies": {
+    "chord-mark": "^0.16.2",
+    "chord-mark-converters": "^0.16.2",
+    "chord-mark-themes": "^0.16.2",
+    "chord-symbol": "^4.0.0",
+    "chord-symbol-ultimateguitar": "^4.0.0",
+    "combine-section-reducers": "^1.0.6",
+    "core-js": "^3.35.1",
+    "dompurify": "^3.0.8",
+    "file-saver": "^2.0.5",
+    "filesize": "^10.1.0",
+    "lodash": "^4.17.21",
+    "normalize.css": "^8.0.1",
+    "prop-types": "^15.8.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-history": "^1.3.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-transform": "^1.8.0",
+    "prosemirror-view": "^1.32.7",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.2",
+    "reselect": "^4.1.8",
+    "scroll-sync-react": "^1.2.0",
+    "universal-router": "^9.2.0",
+    "uuid": "^9.0.1"
+  },
+  "scripts": {
+    "audit": "npm audit",
+    "build": "npm run format && npm run lint && npm run test && npm run version && npm run bundle && npm run size && npm run sloc",
+    "bundle": "npx vite build",
+    "dev": "npx vite",
+    "format": "prettier --write \"**/*.{js,jsx,json,ts,md,scss,css}\"",
+    "lint": "eslint src tests",
+    "preview": "npx vite preview",
+    "size": "npx size-limit",
+    "sloc": "echo \"Source code:\" > SLOC && npx sloc src >> SLOC && echo \"Tests:\" >> SLOC && npx sloc tests >> SLOC && echo \"Total:\" >> SLOC && npx sloc src tests >> SLOC",
+    "test": "npx jest",
+    "unit": "npx jest tests/unit",
+    "version": "node src/core/createGetVersions.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "size-limit": [
+    {
+      "path": "./build/assets/index-*.js",
+      "limit": "25 KB"
+    },
+    {
+      "path": "./build/assets/vendor-*.js",
+      "limit": "300 KB"
+    }
+  ]
 }
diff --git a/packages/chord-chart-studio/src/components/button/Button.jsx b/packages/chord-chart-studio/src/components/button/Button.jsx
@@ -0,0 +1,11 @@
+import styles from './Button.module.css';
+
+import React from 'react';
+
+export default function Button({ children, onClick }) {
+	return (
+		<div className={styles.button} onClick={onClick}>
+			{children}
+		</div>
+	);
+}
diff --git a/packages/chord-chart-studio/src/components/button/Button.module.css b/packages/chord-chart-studio/src/components/button/Button.module.css
@@ -0,0 +1,4 @@
+.button {
+	font-weight: bold;
+	background-color: red;
+}
diff --git a/packages/chord-chart-studio/src/components/button/Button.stories.js b/packages/chord-chart-studio/src/components/button/Button.stories.js
@@ -0,0 +1,26 @@
+import { fn } from '@storybook/test';
+
+import Button from './Button';
+
+export default {
+	component: Button,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		children: {
+			control: 'select',
+			options: ['Primary', 'Secondary'],
+		},
+	},
+	args: { children: 'myButton', onClick: fn() },
+};
+
+export const Main = {};
+
+export const SecondState = {
+	args: {
+		children: 'mySecondButton',
+	},
+};
diff --git a/packages/chord-chart-studio/src/core/getVersions.js b/packages/chord-chart-studio/src/core/getVersions.js
@@ -1 +1,5 @@
-export default () => ({'chord-chart-studio':'v0.14.0','chord-symbol':'v4.0.0','chord-mark':'v0.16.2'});
+export default () => ({
+	'chord-chart-studio': 'v0.14.0',
+	'chord-symbol': 'v4.0.0',
+	'chord-mark': 'v0.16.2',
+});
diff --git a/packages/chord-chart-studio/src/modules/library/controllers/Library.jsx b/packages/chord-chart-studio/src/modules/library/controllers/Library.jsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { getAllTitles } from '../../../db/files/selectors';
 import { navigateTo, getLink } from '../../../core/router';
+import Button from '../../../components/button/Button';
 
 export default function Library() {
 	const allTitles = useSelector(getAllTitles);
@@ -15,6 +16,7 @@ export default function Library() {
 		<div>
 			Full Library
 			<ul>{allrenderedTitles}</ul>
+			<Button>My Nice Button</Button>
 		</div>
 	);
 }

diff --git a/packages/chord-chart-studio/src/stories/Button.jsx b/packages/chord-chart-studio/src/stories/Button.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+	const mode = primary
+		? 'storybook-button--primary'
+		: 'storybook-button--secondary';
+	return (
+		<button
+			type="button"
+			className={[
+				'storybook-button',
+				`storybook-button--${size}`,
+				mode,
+			].join(' ')}
+			style={backgroundColor && { backgroundColor }}
+			{...props}
+		>
+			{label}
+		</button>
+	);
+};
+
+Button.propTypes = {
+	/**
+	 * Is this the principal call to action on the page?
+	 */
+	primary: PropTypes.bool,
+	/**
+	 * What background color to use
+	 */
+	backgroundColor: PropTypes.string,
+	/**
+	 * How large should the button be?
+	 */
+	size: PropTypes.oneOf(['small', 'medium', 'large']),
+	/**
+	 * Button contents
+	 */
+	label: PropTypes.string.isRequired,
+	/**
+	 * Optional click handler
+	 */
+	onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+	backgroundColor: null,
+	primary: false,
+	size: 'medium',
+	onClick: undefined,
+};