Feat: Move existing examples into Storybook and add documentation

.eslintrc.js

@@ -1,27 +1,29 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  extends: ['plugin:react/recommended', 'prettier'],
+  extends: ['plugin:react/recommended', 'prettier', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true,
+      jsx: true
     },
     ecmaVersion: 12,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: ['@typescript-eslint', 'prettier'],
   rules: {
     '@typescript-eslint/no-unused-vars': 'error',
-    'prefer-const': ['warn', { destructuring: 'all' }],
+    'prefer-const': ['warn', {
+      destructuring: 'all'
+    }],
     'no-var': 'error',
-    eqeqeq: ['error', 'smart'],
+    eqeqeq: ['error', 'smart']
   },
   settings: {
     react: {
-      version: 'detect',
-    },
-  },
-};
+      version: 'detect'
+    }
+  }
+};

.storybook/main.js

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

.storybook/preview-head.html

@@ -0,0 +1,17 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap"
+/>
+<link
+  rel="stylesheet"
+  data-href="https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap"
+/>
+
+<style>
+  body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,39 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Overview', 'Playback Controls', 'State Machines'],
+    },
+  },
+  viewMode: 'docs',
+};
+
+// The below function helps to default to the docs page, which contains all the documentation and examples
+function clickDocsButtonOnFirstLoad() {
+  window.removeEventListener("load", clickDocsButtonOnFirstLoad);
+
+  try {
+    const docsButtonSelector = window.parent.document.evaluate(
+      "//button[contains(., 'Docs')]",
+      window.parent.document,
+      null,
+      XPathResult.ANY_TYPE,
+      null
+    );
+
+    const button = docsButtonSelector.iterateNext();
+
+    button.click();
+  } catch (error) {
+    // Do nothing if it wasn't able to click on Docs button.
+  }
+}
+
+window.addEventListener("load", clickDocsButtonOnFirstLoad);