feat(example): add Storybook for example app

Add storybook and stories for example app

Resolves #71

Signed-off-by: Niloy Sikdar <[email protected]>

example/.babelrc

@@ -0,0 +1,9 @@
+// .babelrc
+
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}

example/.storybook/main.ts

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+};

example/.storybook/preview.ts

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

example/package.json

@@ -6,12 +6,29 @@
     "prepare": "yarn build",
     "build": "rm -rf lib && yarn build:esm && yarn build:cjs",
     "build:esm": "tsc -p tsconfig.json",
-    "build:cjs": "tsc -p tsconfig.json --module commonjs --outDir lib/cjs --target es2015"
+    "build:cjs": "tsc -p tsconfig.json --module commonjs --outDir lib/cjs --target es2015",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -o docs-build"
   },
   "dependencies": {
     "@leopardslab/react-email": "file:leopardslab-react-email-1.7.0.tgz"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "babel-loader": "^8.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.7.4"
   }
 }

example/src/Layouts/HelloEmail.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { HelloEmail } from './HelloEmail';
+
+export default {
+  component: HelloEmail,
+} as ComponentMeta<typeof HelloEmail>;
+
+//“template” of how args map to rendering
+const Template: ComponentStory<typeof HelloEmail> = (args) => <HelloEmail {...args} />;
+
+export const Default = Template.bind({});

example/tsconfig.json

@@ -18,5 +18,11 @@
     "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": [
+    "node_modules",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx"
+  ]
 }