18 files changed, 220 insertions, 0 deletions

diff --git a/examples/design-system/packages/acme-core/.eslintrc.js b/examples/design-system/packages/acme-core/.eslintrc.js
new file mode 100644
index 0000000..b2a3fa9
--- /dev/null
+++ b/examples/design-system/packages/acme-core/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["acme"],
+};
diff --git a/examples/design-system/packages/acme-core/package.json b/examples/design-system/packages/acme-core/package.json
new file mode 100644
index 0000000..ebe7892
--- /dev/null
+++ b/examples/design-system/packages/acme-core/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@acme/core",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "devDependencies": {
+    "@acme/tsconfig": "workspace:*",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "eslint": "^8.15.0",
+    "eslint-config-acme": "workspace:*",
+    "react": "^18.1.0",
+    "tsup": "^5.10.1",
+    "typescript": "^4.5.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/examples/design-system/packages/acme-core/src/Button.tsx b/examples/design-system/packages/acme-core/src/Button.tsx
new file mode 100644
index 0000000..fbd6ee0
--- /dev/null
+++ b/examples/design-system/packages/acme-core/src/Button.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface ButtonProps {
+  children: React.ReactNode;
+}
+
+export function Button(props: ButtonProps) {
+  return <button>{props.children}</button>;
+}
+
+Button.displayName = "Button";
diff --git a/examples/design-system/packages/acme-core/src/index.tsx b/examples/design-system/packages/acme-core/src/index.tsx
new file mode 100644
index 0000000..f623b20
--- /dev/null
+++ b/examples/design-system/packages/acme-core/src/index.tsx
@@ -0,0 +1,2 @@
+import * as React from "react";
+export { Button, type ButtonProps } from "./Button";
diff --git a/examples/design-system/packages/acme-core/tsconfig.json b/examples/design-system/packages/acme-core/tsconfig.json
new file mode 100644
index 0000000..9be70c0
--- /dev/null
+++ b/examples/design-system/packages/acme-core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@acme/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/examples/design-system/packages/acme-tsconfig/base.json b/examples/design-system/packages/acme-tsconfig/base.json
new file mode 100644
index 0000000..d72a9f3
--- /dev/null
+++ b/examples/design-system/packages/acme-tsconfig/base.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}
diff --git a/examples/design-system/packages/acme-tsconfig/node16.json b/examples/design-system/packages/acme-tsconfig/node16.json
new file mode 100644
index 0000000..d88cc58
--- /dev/null
+++ b/examples/design-system/packages/acme-tsconfig/node16.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Node 16",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["ES2020"],
+    "module": "commonjs",
+    "target": "ES2020"
+  }
+}
diff --git a/examples/design-system/packages/acme-tsconfig/package.json b/examples/design-system/packages/acme-tsconfig/package.json
new file mode 100644
index 0000000..fe468e0
--- /dev/null
+++ b/examples/design-system/packages/acme-tsconfig/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@acme/tsconfig",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/examples/design-system/packages/acme-tsconfig/react-library.json b/examples/design-system/packages/acme-tsconfig/react-library.json
new file mode 100644
index 0000000..fc1e02a
--- /dev/null
+++ b/examples/design-system/packages/acme-tsconfig/react-library.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "ES2015"],
+    "module": "ESNext",
+    "target": "es6"
+  }
+}
diff --git a/examples/design-system/packages/acme-utils/.eslintrc.js b/examples/design-system/packages/acme-utils/.eslintrc.js
new file mode 100644
index 0000000..b2a3fa9
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["acme"],
+};
diff --git a/examples/design-system/packages/acme-utils/package.json b/examples/design-system/packages/acme-utils/package.json
new file mode 100644
index 0000000..debaa2a
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@acme/utils",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "devDependencies": {
+    "@acme/tsconfig": "workspace:*",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "eslint": "^8.15.0",
+    "eslint-config-acme": "workspace:*",
+    "react": "^18.1.0",
+    "tsup": "^5.10.1",
+    "typescript": "^4.5.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/examples/design-system/packages/acme-utils/src/index.tsx b/examples/design-system/packages/acme-utils/src/index.tsx
new file mode 100644
index 0000000..6098c1f
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/src/index.tsx
@@ -0,0 +1,3 @@
+export { toSlug } from "./toSlug";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { usePrevious } from "./usePrevious";
diff --git a/examples/design-system/packages/acme-utils/src/toSlug.ts b/examples/design-system/packages/acme-utils/src/toSlug.ts
new file mode 100644
index 0000000..6aec61c
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/src/toSlug.ts
@@ -0,0 +1,18 @@
+/**
+ * Return a slugified copy of a string.
+ *
+ * @param {string} str The string to be slugified
+ * @return {string} The slugified string.
+ */
+export function toSlug(str: string): string {
+  let s = str;
+  if (!s) {
+    return "";
+  }
+  s = s.toLowerCase().trim();
+  s = s.replace(/ & /g, " and ");
+  s = s.replace(/[ ]+/g, "-");
+  s = s.replace(/[-]+/g, "-");
+  s = s.replace(/[^a-z0-9-]+/g, "");
+  return s;
+}
diff --git a/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx
new file mode 100644
index 0000000..59a7899
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? React.useLayoutEffect : () => {};
+
+export { useIsomorphicLayoutEffect };
diff --git a/examples/design-system/packages/acme-utils/src/usePrevious.tsx b/examples/design-system/packages/acme-utils/src/usePrevious.tsx
new file mode 100644
index 0000000..8024464
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/src/usePrevious.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function usePrevious<T>(value: T) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = React.useRef<T>(value);
+
+  // Store current value in ref
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
+export { usePrevious };
diff --git a/examples/design-system/packages/acme-utils/tsconfig.json b/examples/design-system/packages/acme-utils/tsconfig.json
new file mode 100644
index 0000000..9be70c0
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@acme/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/examples/design-system/packages/eslint-config-acme/index.js b/examples/design-system/packages/eslint-config-acme/index.js
new file mode 100644
index 0000000..c9523f1
--- /dev/null
+++ b/examples/design-system/packages/eslint-config-acme/index.js
@@ -0,0 +1,11 @@
+module.exports = {
+  extends: ["next", "turbo", "prettier"],
+  rules: {
+    "@next/next/no-html-link-for-pages": "off",
+  },
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve("next/babel")],
+    },
+  },
+};
diff --git a/examples/design-system/packages/eslint-config-acme/package.json b/examples/design-system/packages/eslint-config-acme/package.json
new file mode 100644
index 0000000..9db355e
--- /dev/null
+++ b/examples/design-system/packages/eslint-config-acme/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "eslint-config-acme",
+  "version": "0.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "eslint-config-next": "latest",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-config-turbo": "latest"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}