Smeriwether patch 1

.gitignore

@@ -39,3 +39,10 @@ public/fonts/**/Optimistic_*.woff2
 
 # rss
 public/rss.xml
+
+/.conductor/
+/.codeapi/
+/.cache/
+# Directory for Stride Conductor local files
+.conductor/config.yml
+.conductor/story_context.md

README.md

@@ -54,6 +54,7 @@ The documentation is divided into several sections with a different tone and pur
 1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
 1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
+1. Run tests!
 
 ## Translation
 

jacob.json

@@ -0,0 +1,17 @@
+{
+  "language": "TypeScript",
+  "installCommand": "yarn install",
+  "formatCommand": "",
+  "buildCommand": "yarn build",
+  "style": "Tailwind",
+  "iconSet": "Material UI",
+  "directories": {
+    "components": "/src/components",
+    "pages": "/src/pages",
+    "types": "/src/types",
+    "styles": "/src/styles",
+    "tailwindConfig": "/tailwind.config.js",
+    "staticAssets": "/public"
+  },
+  "env": ""
+}

jest.config.ts

@@ -0,0 +1,31 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import type {Config} from 'jest';
+import nextJest from 'next/jest.js';
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  moduleNameMapper: {
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^siteConfig$': '<rootDir>/src/siteConfig.js',
+  },
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

jest.setup.ts

@@ -0,0 +1,45 @@
+import {jest, expect, render} from '@jest/globals';
+import '@testing-library/jest-dom';
+
+global.jest = jest;
+// global.expect = expect;
+// global.render = render;
+
+global.matchMedia =
+  global.matchMedia ||
+  function () {
+    return {
+      matches: false,
+      addListener: function () {},
+      removeListener: function () {},
+      addEventListener: function () {},
+      removeEventListener: function () {},
+    };
+  };
+
+/**
+ * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
+ * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
+ * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the intersection observer, but its methods.
+ */
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+
+  disconnect() {
+    return null;
+  }
+
+  observe() {
+    return null;
+  }
+
+  takeRecords() {
+    return null;
+  }
+
+  unobserve() {
+    return null;
+  }
+};

package.json

@@ -20,14 +20,16 @@
     "start": "next start",
     "postinstall": "patch-package && (is-ci || husky install .husky)",
     "check-all": "npm-run-all prettier lint:fix tsc rss",
-    "rss": "node scripts/generateRss.js"
+    "rss": "node scripts/generateRss.js",
+    "test": "jest"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
@@ -47,10 +49,14 @@
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@mdx-js/mdx": "^2.1.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/debounce": "^1.2.1",
     "@types/github-slugger": "^1.3.0",
+    "@types/jest": "^29.5.14",
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
@@ -74,6 +80,8 @@
     "gray-matter": "^4.0.2",
     "husky": "^7.0.4",
     "is-ci": "^3.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": ">=10",
     "mdast-util-to-string": "^1.1.0",
     "metro-cache": "0.72.2",
@@ -94,6 +102,7 @@
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
     "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"

src/components/Button.tsx

@@ -43,4 +43,154 @@ export function Button({
   );
 }
 
+export function FooButton({
+  children,
+  onClick,
+  active = false,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
+export function BarButton({
+  children,
+  onClick,
+  active = false,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
+export function FooBarButton({
+  children,
+  onClick,
+  active = false,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
+export function BarFooButton({
+  children,
+  onClick,
+  active = false,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
+export function FooBarBazButton({
+  children,
+  onClick,
+  active = false,
+  className,
+  style,
+}: ButtonProps) {
+  return (
+    <button
+      style={style}
+      onMouseDown={(evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+      }}
+      onClick={onClick}
+      className={cn(
+        className,
+        'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',
+        {
+          'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':
+            active,
+          'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
+            !active,
+        }
+      )}>
+      {children}
+    </button>
+  );
+}
+
 export default Button;

tsconfig.json

@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "paths": {
+      "^components/*": ["src/components/*"],
+      "^hooks/*": ["src/hooks/*"],
+      "^siteConfig*": ["src/siteConfig.js"]
+    },
     "target": "es5",
     "lib": [
       "dom",
@@ -27,7 +32,9 @@
   "include": [
     "next-env.d.ts",
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.test.ts",
+    "src/**/*.tsx",
+    "src/**/*.test.tsx"
   ],
   "exclude": [
     "node_modules"