feat(patterns): initialize patterns package

.changeset/brown-bags-complain.md

@@ -0,0 +1,5 @@
+---
+'@bigcommerce/big-design-patterns': major
+---
+
+Releases `@bigcommerce/big-design-pattern`, a collections of useful patterns for BigDesign.

.circleci/config.yml

@@ -126,6 +126,13 @@ jobs:
           paths:
             - packages/docs/.next
 
+  build-patterns:
+    <<: *default_executor
+
+    steps:
+      - pre-setup
+      - run: pnpm build --filter @bigcommerce/big-design-patterns
+
   commitlint:
     <<: *default_executor
 
@@ -207,6 +214,11 @@ workflows:
           requires:
             - build-icons
 
+      - build-patterns:
+          <<: *filter_branch
+          requires:
+            - build-icons
+
       - build-examples:
           <<: *filter_branch
           requires:

commitlint.config.js

@@ -17,6 +17,7 @@ module.exports = {
         'examples',
         'icons',
         'pack',
+        'patterns',
         'release',
         'theme',
       ],

packages/big-design-patterns/.eslintrc.js

@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [require.resolve('@bigcommerce/configs/eslint/base.js')],
+};

packages/big-design-patterns/README.md

@@ -0,0 +1,11 @@
+# BigDesign Patterns [![npm version](https://img.shields.io/npm/v/@bigcommerce/big-design-patterns.svg?style=flat)](https://www.npmjs.com/package/@bigcommerce/big-design-patterns) [![CircleCI](https://circleci.com/gh/bigcommerce/big-design.svg?style=shield)](https://circleci.com/gh/bigcommerce/big-design)
+
+BigDesign React Patterns.
+
+### Documentation
+
+You can find documentation and examples on our [docs page](https://bigcommerce.github.io/big-design).
+
+### Quick start guide
+
+TODO: Write the quick start guide.

packages/big-design-patterns/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@bigcommerce/configs/babel');

packages/big-design-patterns/jest.config.js

@@ -0,0 +1,14 @@
+const defaultJestConfig = require('@bigcommerce/configs/jest');
+
+module.exports = {
+  ...defaultJestConfig,
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  coverageThreshold: {
+    global: {
+      statements: 100,
+      branches: 100,
+      functions: 100,
+      lines: 100,
+    },
+  },
+};

packages/big-design-patterns/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@bigcommerce/big-design-patterns",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "main": "src/index.ts",
+  "author": "BigCommerce Inc",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bigcommerce/big-design.git",
+    "directory": "packages/big-design-patterns"
+  },
+  "license": "(MIT AND CC-BY-3.0)",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm run build:cjs && pnpm run build:es && pnpm run build:dt",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/cjs",
+    "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
+    "build:dt": "tsc -p tsconfig.declarations.json --emitDeclarationOnly",
+    "lint": "eslint . --max-warnings 0",
+    "test": "jest",
+    "test:watch": "pnpm run test --watch",
+    "prepack": "big-design-prepack",
+    "postpack": "big-design-postpack",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/cjs/index.js",
+    "module": "dist/es/index.js",
+    "typings": "dist/index.d.ts"
+  },
+  "prettier": "@bigcommerce/eslint-config/prettier",
+  "dependencies": {
+    "@babel/runtime": "^7.24.4"
+  },
+  "peerDependencies": {
+    "@bigcommerce/big-design": "workspace:^",
+    "@bigcommerce/big-design-icons": "workspace:^",
+    "@bigcommerce/big-design-theme": "workspace:^",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@bigcommerce/big-design": "workspace:^",
+    "@bigcommerce/big-design-icons": "workspace:^",
+    "@bigcommerce/big-design-theme": "workspace:^",
+    "@bigcommerce/configs": "workspace:^",
+    "@bigcommerce/pack": "workspace:^",
+    "@styled/typescript-styled-plugin": "^1.0.1",
+    "@swc/core": "^1.4.14",
+    "@swc/jest": "^0.2.36",
+    "@swc/plugin-styled-components": "^2.0.6",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.3.0",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@types/react-test-renderer": "^18.0.7",
+    "@types/styled-components": "^5.1.34",
+    "babel-jest": "^29.0.2",
+    "babel-plugin-styled-components": "^2.0.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.4.1",
+    "jest-fail-on-console": "^3.2.0",
+    "jest-styled-components": "^7.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "rimraf": "^6.0.1",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.4.5"
+  }
+}

packages/big-design-patterns/setupTests.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import failOnConsole from 'jest-fail-on-console';
+
+failOnConsole();
+
+jest.mock('./src/utils', () => ({
+  ...jest.requireActual('./src/utils'),
+  warning: jest.fn(),
+}));
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

packages/big-design-patterns/src/utils/env.ts

@@ -0,0 +1 @@
+export const isProduction = process.env.NODE_ENV === 'production';

packages/big-design-patterns/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './env';
+export * from './warning';

packages/big-design-patterns/src/utils/warning/index.ts

@@ -0,0 +1 @@
+export { warning } from './warning';

packages/big-design-patterns/src/utils/warning/spec.ts

@@ -0,0 +1,18 @@
+import { warning } from './warning';
+
+jest.mock('./warning', () => ({
+  ...jest.requireActual('./warning'),
+}));
+
+test('warning should throw a console.error', () => {
+  jest.spyOn(console, 'warn').mockImplementation();
+  warning('test error');
+
+  // eslint-disable-next-line no-console
+  expect(console.warn).toHaveBeenCalledTimes(1);
+
+  warning('test error');
+
+  // eslint-disable-next-line no-console
+  expect(console.warn).toHaveBeenCalledTimes(2);
+});

packages/big-design-patterns/src/utils/warning/warning.ts

@@ -0,0 +1,32 @@
+import { isProduction } from '../env';
+
+// Ported from tiny-warning:
+// https://github.com/alexreardon/tiny-warning/blob/master/src/index.js
+// --------------------------------------------
+// Since we don't care about whether or not there is a condition passed
+// we modified the original to account for that.
+
+export const warning = (message: string): void => {
+  // don't do anything in production
+  // wrapping in production check for better dead code elimination
+  if (!isProduction) {
+    // Condition not passed
+    const text = `Warning: ${message}`;
+
+    // check console for IE9 support which provides console
+    // only with open devtools
+    if (typeof console !== 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(text);
+    }
+
+    // Throwing an error and catching it immediately
+    // to improve debugging
+    // A consumer can use 'pause on caught exceptions'
+    // https://github.com/facebook/react/issues/4216
+    try {
+      throw Error(text);
+      // eslint-disable-next-line no-empty
+    } catch (x) {}
+  }
+};

packages/big-design-patterns/tsconfig.declarations.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "tests",
+    "src/**/spec.ts",
+    "src/**/spec.tsx"
+  ]
+}

packages/big-design-patterns/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@bigcommerce/configs/ts",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "dist",
+    "declarationMap": true,
+    "paths": {}
+  },
+  "include": ["src", "setupTests.ts", "tests"]
+}