chore: add storybook

.eslintrc.js

@@ -1,5 +1,3 @@
 module.exports = {
-  extends: [
-    '@yext/slapshot/typescript'
-  ]
+  extends: ["plugin:storybook/recommended", "@yext/eslint-config"],
 };

.github/workflows/coverage.yml

@@ -1,5 +1,5 @@
 # This workflow will run our tests, generate an lcov code coverage file,
-# and send that coverage to Coveralls 
+# and send that coverage to Coveralls
 
 name: Code Coverage
 

.github/workflows/percy_snapshots.yml

@@ -1,7 +1,6 @@
-
 name: Percy Snapshots
 
-on: 
+on:
   push:
     branches-ignore: dev/*
   pull_request:

.github/workflows/run_linting.yml

@@ -4,6 +4,11 @@ on:
   pull_request:
     branches:
       - main
+  workflow_call:
+    lint_script:
+        required: false
+        type: string
+        default: npm run lint && npm run prettier-write
 
 jobs:
   linting:

.github/workflows/sync_sites_branch.yml

@@ -0,0 +1,18 @@
+name: Sync Main to Storybook Site Branch
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: mtanzi/action-automerge@v1
+        with:
+          source: "${{ github.event.repository.default_branch }}"
+          target: "storybook-site"
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/third_party_notices_check.yml

@@ -6,4 +6,4 @@ jobs:
   call_notices_check:
     uses: yext/slapshot-reusable-workflows/.github/workflows/third_party_notices_check.yml@v1
     secrets:
-      REPO_SCOPED_TOKEN: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}
+      REPO_SCOPED_TOKEN: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}

.github/workflows/update_docs.yml

@@ -6,4 +6,4 @@ jobs:
   call_update_docs:
     uses: yext/slapshot-reusable-workflows/.github/workflows/update_docs.yml@v1
     secrets:
-      REPO_SCOPED_TOKEN: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}
+      REPO_SCOPED_TOKEN: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.js

@@ -0,0 +1,22 @@
+module.exports = {
+  stories: ["../tests/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-coverage",
+      options: {
+        istanbul: {
+          include: ["src/components/**"],
+        },
+      },
+    },
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  staticDirs: ["./public"],
+};

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" href="./yextIcon.svg" />

.storybook/manager.cjs

@@ -0,0 +1,5 @@
+const { addons } = require("@storybook/addons");
+
+addons.setConfig({
+  theme: require("./yextTheme.cjs"),
+});

.storybook/preview.js

@@ -0,0 +1,21 @@
+import { runOnly } from "./wcagConfig";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  a11y: {
+    options: {
+      runOnly,
+    },
+  },
+  options: {
+    storySort: {
+      order: ["Address"],
+    },
+  },
+};

.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import { injectAxe, checkA11y } from "axe-playwright";
+import { Page } from "playwright-core";
+import { runOnly } from "./wcagConfig";
+
+/**
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
+const renderFunctions = {
+  async preRender(page: Page) {
+    await injectAxe(page);
+  },
+  async postRender(page: Page, context) {
+    await checkA11y(page, "#root", {
+      axeOptions: {
+        runOnly,
+        rules: {
+          "color-contrast": { enabled: context.name !== "Loading" },
+        },
+      },
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default renderFunctions;

.storybook/wcagConfig.ts

@@ -0,0 +1,6 @@
+import { axeOptionsConfig } from "axe-playwright";
+
+export const runOnly: axeOptionsConfig["axeOptions"]["runOnly"] = {
+  type: "tag",
+  values: ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
+};

.storybook/yextTheme.cjs

@@ -0,0 +1,32 @@
+const { create } = require("@storybook/theming");
+
+module.exports = create({
+  base: "light",
+  colorPrimary: "#eeeff0",
+  colorSecondary: "#2563eb",
+
+  // UI
+  appBg: "#fafafa",
+  appContentBg: "white",
+  appBorderColor: "#eeeff0",
+  appBorderRadius: 6,
+
+  // Text colors
+  textColor: "black",
+  textMutedColor: "#4b5563",
+
+  // Toolbar colors
+  barTextColor: "#4b5563",
+  barBg: "#eeeff0",
+
+  // Form
+  inputBg: "white",
+  inputTextColor: "black",
+  inputBorder: "#9ca3af",
+  inputBorderRadius: 4,
+
+  // Brand logo
+  brandTitle: "Yext Component Library",
+  brandUrl: "https://github.com/yext/react-components",
+  brandImage: "./logo.png",
+});

.stylelintrc.json

@@ -1,7 +1,5 @@
 {
-  "plugins": [
-    "stylelint-scss"
-  ],
+  "plugins": ["stylelint-scss"],
   "rules": {
     "color-no-invalid-hex": true,
     "function-calc-no-invalid": true,
@@ -18,4 +16,4 @@
     "scss/at-import-no-partial-leading-underscore": true,
     "scss/at-import-partial-extension": "never"
   }
-}
+}

LICENSE

@@ -1,3 +1,6 @@
+Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json)
+which is made available under the ODC Attribution License (https://github.com/mattcg/language-subtag-registry/blob/master/LICENSE.md).
+
 The React Component files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements
 and certain functionality requires paid subscriptions to Yext products.
 

THIRD-PARTY-NOTICES

@@ -58,11 +58,41 @@ THE SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - [email protected]
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) Sindre Sorhus <[email protected]> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
 The following NPM packages may be included in this product:
 
- - react-dom@18.2.0
- - react@18.2.0
- - scheduler@0.23.0
+ - react-dom@17.0.2
+ - react@17.0.2
+ - scheduler@0.20.2
 
 These packages each contain the following license and notice below:
 

babel.config.js

@@ -1,7 +1,7 @@
 // Needed for es6 imports and TS support in jest
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-typescript',
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
   ],
-};
+};