add A/B testing example

ab-testing/Readme.md

@@ -0,0 +1,37 @@
+# A/B Testing Example
+
+> This example project demonstrates a host application consuming two [rocket-science](https://github.com/SketchLagoon/rocket-science) applications, one which provides two variants of a component, and the other which impliments a A/B testing system for said variants.
+
+## Usage
+
+- **dev-site-host** (HOST)
+- **dev-site-components** (REMOTE)
+- **ab-manager** (REMOTE)
+
+```bash
+# dev-site-components
+
+# To run federated server (port 3001)
+$ yarn build
+$ yarn federate
+
+# To run storybook and federated server together
+$ yarn launch
+```
+
+```bash
+# ab-manager
+
+# To run build and run federated server (port 3002)
+$ yarn build
+$ yarn federate
+```
+
+```bash
+# dev-site-host
+
+# To start app (port 3003)
+$ yarn start
+```
+
+Running storybook and the federated server together with `$ yarn launch` allows you to develop the components locally within storybook while **Host app** can consume changes with a browser refresh.

ab-testing/ab-manager/.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    ["@babel/transform-runtime"],
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "ab-manager": "./src"
+        }
+      }
+    ]
+  ]
+}

ab-testing/ab-manager/.gitignore

@@ -0,0 +1,119 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# 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
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# jest test results
+.jest-test-results.json

ab-testing/ab-manager/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test

ab-testing/ab-manager/.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"
+  ],
+  "addons": [
+    'storybook-readme',
+    '@storybook/addon-jest',
+    "@storybook/addon-links",
+    '@storybook/addon-a11y',
+    'storybook-addon-performance/register',
+    '@storybook/addon-storysource',
+    {name: "@storybook/addon-essentials", options: {actions: false}}
+  ]
+}

ab-testing/ab-manager/.storybook/manager.js

@@ -0,0 +1,9 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import RocketScienceTheme from './rocketScienceTheme'
+
+addons.setConfig({
+  theme: RocketScienceTheme,
+});

ab-testing/ab-manager/.storybook/preview.js

@@ -0,0 +1,39 @@
+import { addDecorator } from "@storybook/react"; // <- or your view layer
+import { withTests } from "@storybook/addon-jest";
+import { addReadme } from "storybook-readme";
+import { withPerformance } from 'storybook-addon-performance';
+import { initializeWorker, mswDecorator } from 'msw-storybook-addon';
+import { themes } from '@storybook/theming';
+
+
+try {
+  if (require.resolve('../.jest-test-results.json')) {
+    const results = require('../.jest-test-results.json');
+    addDecorator(
+      withTests({
+        results,
+      })
+    );
+  }
+} catch (e) {
+  console.log('error', e);
+}
+
+initializeWorker();
+addDecorator(mswDecorator);
+addDecorator(addReadme);
+addDecorator(withPerformance);
+
+
+export const parameters = {
+  // storySort: {
+  //   order: ['Guides', ['Introduction', 'Installation'], 'Demos', ['Urql']],
+  // },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

ab-testing/ab-manager/.storybook/rocketScienceTheme.js

@@ -0,0 +1,39 @@
+import { create } from '@storybook/theming';
+
+const RocketScienceTheme = create({
+  base: 'light', // light or dark
+
+//   colorPrimary: 'hotpink',
+//   colorSecondary: 'deepskyblue',
+
+  // UI
+//   appBg: 'white',
+//   appContentBg: 'silver',
+//   appBorderColor: 'grey',
+  appBorderRadius: 6,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#181818',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+//   barTextColor: 'silver',
+//   barSelectedColor: 'black',
+//   barBg: 'hotpink',
+
+  // Form colors
+//   inputBg: 'white',
+//   inputBorder: 'silver',
+//   inputTextColor: 'black',
+//   inputBorderRadius: 4,
+
+  brandTitle: 'Rocket Science',
+  brandUrl: 'https://github.com/rocket-science-core/rocket-science',
+  brandImage: 'https://i.imgur.com/K2jrKka.png',
+});
+
+export default RocketScienceTheme;