Add initial versions of @muban/storybook and @muban/storybook-addon-s…

…ource

.gitignore

@@ -0,0 +1,66 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+#c cache-loader cache
+.cache-loader
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# idea project files
+.idea
+
+# VisualStudio Code files
+.vscode
+
+### Project
+
+/packages/*/dist/

README.md

@@ -0,0 +1,7 @@
+# @muban/storybook
+
+Monorepo of all Muban storybook related packages:
+
+* [@muban/storybook](./packages/muban-storybook) - The storybook framework for Muban
+* [@muban/storybook-addon-source](./packages/muban-storybook-addon-source) - An addon to view Muban component sources
+ in addon panels.

package.json

@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "muban-storybook",
+  "workspaces": ["packages/*"]
+}

packages/muban-storybook-addon-source/.eslintcache

@@ -0,0 +1 @@
+[{"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/index.ts":"1","/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/globals.ts":"2","/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/index.ts":"3","/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/render.ts":"4","/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/types.ts":"5","/Volumes/Projects/mm/muban/muban-storybook-new/src/server/build.ts":"6","/Volumes/Projects/mm/muban/muban-storybook-new/src/server/index.ts":"7","/Volumes/Projects/mm/muban/muban-storybook-new/src/server/options.ts":"8","/Volumes/Projects/mm/muban/muban-storybook-new/src/typings.d.ts":"9","/Volumes/Projects/mm/muban/muban-storybook-new/src/server/framework-preset-muban.ts":"10"},{"size":217,"mtime":1598801786951,"results":"11","hashOfConfig":"12"},{"size":65,"mtime":1597683764243,"results":"13","hashOfConfig":"12"},{"size":1493,"mtime":1598806784827,"results":"14","hashOfConfig":"12"},{"size":1057,"mtime":1598807191213,"results":"15","hashOfConfig":"12"},{"size":399,"mtime":1598801800600,"results":"16","hashOfConfig":"12"},{"size":110,"mtime":1597683764243,"results":"17","hashOfConfig":"12"},{"size":104,"mtime":1597683764244,"results":"18","hashOfConfig":"12"},{"size":242,"mtime":1598806888248,"results":"19","hashOfConfig":"12"},{"size":153,"mtime":1598806861334,"results":"20","hashOfConfig":"12"},{"size":477,"mtime":1598806925593,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1jnazj4",{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/index.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/globals.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/index.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/render.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/client/preview/types.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/server/build.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/server/index.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/server/options.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/typings.d.ts",[],"/Volumes/Projects/mm/muban/muban-storybook-new/src/server/framework-preset-muban.ts",[]]

packages/muban-storybook-addon-source/.eslintignore

@@ -0,0 +1 @@
+dist/**/*

packages/muban-storybook-addon-source/.eslintrc.js

@@ -0,0 +1,14 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  extends: ['@mediamonks'],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+  },
+};

packages/muban-storybook-addon-source/.nvmrc

@@ -0,0 +1 @@
+12

packages/muban-storybook-addon-source/.prettierignore

@@ -0,0 +1,2 @@
+# for potential vendor files in src
+src/app/data/shared-variable/media-queries.json

packages/muban-storybook-addon-source/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "proseWrap": "always"
+}

packages/muban-storybook-addon-source/README.md

@@ -0,0 +1,51 @@
+# @muban/storybook-addon-source
+
+A storybook addon for Muban to view the source of your components in 4 panels.
+
+## Getting started
+
+Install this package in your project:
+
+```sh
+yarn add @muban/storybook-addon-source
+# or
+npm i -S @muban/storybook-addon-source
+```
+
+In your project that uses storybook, add the addon to the config:
+
+```js
+// .storybook/main.js
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+
+    '@muban/storybook-addon-source', // add this to the list
+  ],
+};
+```
+
+In your story files, make sure to export the hbs component and the source data parameter.
+
+```js
+export default {
+  title: 'My Component',
+  component: require('./my-component'), // you can omit the .hbs extension
+  parameters: {
+    source: {
+      data: require('./data/data.yaml'), // point to the most extensive data file
+    },
+  },
+};
+```
+
+Then you should see 4 new panels in Storybook, for each of the source types:
+
+* `template` - your hbs file
+* `style` - the scss file linked in your hbs
+* `script` - the ts file linked in your hbs
+* `data` - the data object

packages/muban-storybook-addon-source/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@muban/storybook-addon-source",
+  "version": "6.0.0",
+  "description": "A storybook addon for Muban to view the source of your components",
+  "keywords": [
+    "muban",
+    "storybook",
+    "addon"
+  ],
+  "author": "Arjan van Wijk",
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "register.js"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "cypress:open": "cypress open",
+    "check-types": "tsc --noEmit --noUnusedLocals",
+    "lint": "npm-run-all lint:*",
+    "lint:eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --cache",
+    "fix": "npm-run-all fix:*",
+    "fix:eslint": "npm run lint:eslint -- --fix",
+    "fix:prettier": "prettier \"src/**/*.js,jsx,ts,tsx,scss}\" --write"
+  },
+  "peerDependencies": {
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@storybook/addon-docs": "^6.0.21",
+    "@storybook/addons": "^6.0.21",
+    "@storybook/core": "^6.0.21",
+    "react": "^16.8.3"
+  },
+  "devDependencies": {
+    "@mediamonks/eslint-config": "^1.1.3",
+    "@typescript-eslint/eslint-plugin": "^3.8.0",
+    "eslint": "^7.6.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-cypress": "^2.11.1",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-unicorn": "^21.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.11",
+    "muban-core": "^2.1.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.5",
+    "sort-package-json": "^1.44.0",
+    "typescript": "^4.0.2"
+  }
+}

packages/muban-storybook-addon-source/register.js

@@ -0,0 +1 @@
+require('./dist/register');

packages/muban-storybook-addon-source/src/register.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+import { AddonPanel } from '@storybook/components';
+import { useStorybookApi, useStorybookState, useParameter } from '@storybook/api';
+import { Source } from '@storybook/addon-docs/blocks';
+
+const ADDON_ID = 'muban-source';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+type SourceType = 'template' | 'script' | 'style' | 'data';
+
+const useSource = (type: SourceType) => {
+  const state = useStorybookState();
+  const api = useStorybookApi();
+  const sourceParam = useParameter('source', {}) as { data: any };
+  const data = (state.storyId && api.getParameters(state.storyId)) || {};
+  const source = data.component || {};
+  return type === 'data' ? JSON.stringify(sourceParam.data || {}, null, 2) : source[type] || '';
+};
+
+addons.register(ADDON_ID, api => {
+  addons.add(`${PANEL_ID}-template`, {
+    type: types.PANEL,
+    title: 'Template Source',
+    render: ({ active, key }) => {
+      const source = useSource('template');
+
+      return (
+        <AddonPanel active={!!active} key={key}>
+          <div style={{ margin: '0 10px' }}>
+            {source && <Source language="html" code={source} />}
+          </div>
+        </AddonPanel>
+      );
+    },
+  });
+  addons.add(`${PANEL_ID}-style`, {
+    type: types.PANEL,
+    title: 'Style Source',
+    render: ({ active, key }) => {
+      const source = useSource('style');
+
+      return (
+        <AddonPanel active={!!active} key={key}>
+          <div style={{ margin: '0 10px' }}>
+            {source && <Source language="css" code={source} />}
+          </div>
+        </AddonPanel>
+      );
+    },
+  });
+  addons.add(`${PANEL_ID}-script`, {
+    type: types.PANEL,
+    title: 'Script Source',
+    render: ({ active, key }) => {
+      const source = useSource('script');
+
+      return (
+        <AddonPanel active={!!active} key={key}>
+          <div style={{ margin: '0 10px' }}>{source && <Source language="js" code={source} />}</div>
+        </AddonPanel>
+      );
+    },
+  });
+  addons.add(`${PANEL_ID}-data`, {
+    type: types.PANEL,
+    title: 'Data Structure',
+    render: ({ active, key }) => {
+      const source = useSource('data');
+
+      return (
+        <AddonPanel active={!!active} key={key}>
+          <div style={{ margin: '0 10px' }}>
+            {source && <Source language="json" code={source} />}
+          </div>
+        </AddonPanel>
+      );
+    },
+  });
+});