Add storybook and basic large tables.

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
+/integration-test/node_modules
 /.idea/
 /build

.nvmrc

@@ -0,0 +1 @@
+v16.0.0

integration-test/.storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env"],
+    ["@babel/preset-react", { "runtime": "classic" }],
+    ["@babel/preset-typescript"]
+  ]
+}

integration-test/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ["../stories/**/*.stories.tsx"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+};

integration-test/.storybook/preview.js

@@ -0,0 +1,23 @@
+import { getFCP } from "web-vitals";
+
+// Not sure this is the best way to capture this, but the metric passed to
+// `getFCP` has some relative times that are hard to track. This value `a`
+// is assigned when all story modules are loaded.
+
+const a = new Date().getTime();
+getFCP(() => {
+  const b = new Date().getTime();
+  const div = document.createElement("div");
+  div.innerText = `FCP ${(b - a) / 1000}`;
+  document.body.insertBefore(div, document.body.firstChild);
+});
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

integration-test/package.json

@@ -2,6 +2,8 @@
   "name": "@homebound/truss-integration-tests",
   "private": true,
   "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "test": "jest"
   },
   "license": "ISC",
@@ -10,5 +12,28 @@
     "snapshotSerializers": [
       "@emotion/jest/serializer"
     ]
+  },
+  "dependencies": {
+    "@babel/core": "^7.14.3",
+    "@emotion/jest": "^11.1.0",
+    "@emotion/react": "^11.1.4",
+    "@material-ui/core": "^4.10.2",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@testing-library/react": "^10.3.0",
+    "@types/jest": "^26.0.20",
+    "babel-loader": "^8.2.2",
+    "fela": "^11.6.1",
+    "jest": "^26.6.3",
+    "jest-react-fela": "^11.6.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-fela": "^11.6.1",
+    "ts-jest": "^26.4.4",
+    "ts-node": "^8.10.2",
+    "typescript": "^4.1.3",
+    "web-vitals": "^1.1.2"
   }
 }

integration-test/stories/Foo.stories.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+
+export default {
+  title: "Foo",
+} as Meta;
+
+export const Bar = () => {
+  return <div>Foo 2</div>;
+};

integration-test/stories/Performance.baseline.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+
+export default {
+  title: "Baseline",
+} as Meta;
+
+export const LargeTable = () => {
+  return (
+    <table>
+      <tbody>
+        {zeroTo(1000).map((i) => {
+          return <Row key={i} i={i} />;
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+function Row(props: { i: number }) {
+  const { i } = props;
+  return (
+    <tr>
+      {zeroTo(7).map((j) => {
+        return (
+          <td key={j}>
+            cell {i} x {j}
+          </td>
+        );
+      })}
+    </tr>
+  );
+}
+
+function zeroTo(n: number): number[] {
+  return [...Array(n).keys()];
+}

integration-test/stories/Performance.emotion.stories.tsx

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import React from "react";
+import { jsx } from "@emotion/react";
+import { Meta } from "@storybook/react";
+import { Css } from "../Css";
+
+export default {
+  title: "Emotion",
+} as Meta;
+
+export const Foo = () => {
+  return <div>Foo</div>;
+};
+
+export const LargeTable = () => {
+  return (
+    <table>
+      <tbody>
+        {zeroTo(1000).map((i) => {
+          return <Row key={i} i={i} />;
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+function Row(props: { i: number }) {
+  const { i } = props;
+  return (
+    <tr>
+      {zeroTo(7).map((j) => {
+        return (
+          <td key={j} css={Css.p1.$}>
+            cell {i} x {j}
+          </td>
+        );
+      })}
+    </tr>
+  );
+}
+
+function zeroTo(n: number): number[] {
+  return [...Array(n).keys()];
+}

integration-test/stories/Performance.fela.stories.tsx

@@ -0,0 +1,51 @@
+/** @jsx fe */
+import React from "react";
+import { fe } from "react-fela";
+import { Meta } from "@storybook/react";
+import { Css } from "../Css";
+import { createRenderer } from "fela";
+import { RendererProvider } from "react-fela";
+
+const renderer = createRenderer({
+  optimizeCaching: true,
+} as any);
+
+export default {
+  title: "Fela",
+  decorators: [
+    (story) => {
+      return <RendererProvider renderer={renderer}>{story()}</RendererProvider>;
+    },
+  ],
+} as Meta;
+
+export const LargeTable = () => {
+  return (
+    <table>
+      <tbody>
+        {zeroTo(1000).map((i) => {
+          return <Row key={i} i={i} />;
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+function Row(props: { i: number }) {
+  const { i } = props;
+  return (
+    <tr>
+      {zeroTo(7).map((j) => {
+        return (
+          <td key={j} css={Css.p1.$}>
+            cell {i} x {j}
+          </td>
+        );
+      })}
+    </tr>
+  );
+}
+
+function zeroTo(n: number): number[] {
+  return [...Array(n).keys()];
+}

integration-test/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "dom"],
     "esModuleInterop": true,
     "declaration": true,
     "declarationMap": true,