Make packages isolated

Ensure packages can be standalone.

categories/web/action/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

categories/web/action/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/blob/react/package.json

@@ -15,9 +15,12 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "eslint": "^8.35.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -25,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.28.1"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -58,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
-    "@modal-sh/react-utils": "workspace:*"
+    "@modal-sh/react-utils": "workspace:*",
+    "clsx": "^1.2.1"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/blob/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/choice/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -61,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tesseract-design/web-base": "workspace:*",
     "@modal-sh/react-utils": "workspace:*",
+    "@tesseract-design/web-base": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.2"
   },

categories/web/choice/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/color/react/package.json

@@ -15,11 +15,14 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/color": "^3.0.3",
     "@types/color-convert": "^2.0.0",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "eslint": "^8.35.0",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -27,8 +30,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.28.1"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

categories/web/color/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/formatted/react/package.json

@@ -15,9 +15,12 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "eslint": "^8.35.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -25,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.28.1"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -58,10 +61,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@modal-sh/react-utils": "workspace:*",
     "@tesseract-design/web-base": "workspace:*",
     "clsx": "^1.2.1",
-    "react-phone-number-input": "^3.3.0",
-    "@modal-sh/react-utils": "workspace:*"
+    "react-phone-number-input": "^3.3.0"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/formatted/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/freeform/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -61,9 +61,9 @@
     "access": "public"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
+    "@modal-sh/react-utils": "workspace:*",
     "@tesseract-design/web-base": "workspace:*",
-    "@modal-sh/react-utils": "workspace:*"
+    "clsx": "^1.2.1"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/freeform/react/src/components/MaskedTextInput/MaskedTextInput.test.tsx

@@ -84,9 +84,7 @@ describe('MaskedTextInput', () => {
   it('renders an indicator', () => {
     render(
       <MaskedTextInput
-        indicator={
-          <div />
-        }
+        enhanced
       />,
     );
     const indicator = screen.getByTestId('indicator');
@@ -125,7 +123,7 @@ describe('MaskedTextInput', () => {
         <MaskedTextInput
           size={size}
           label="foo"
-          indicator={<div />}
+          enhanced
         />,
       );
       const label = screen.getByTestId('label');
@@ -137,7 +135,7 @@ describe('MaskedTextInput', () => {
         <MaskedTextInput
           size={size}
           hint="hint"
-          indicator={<div />}
+          enhanced
         />,
       );
 
@@ -149,9 +147,7 @@ describe('MaskedTextInput', () => {
       render(
         <MaskedTextInput
           size={size}
-          indicator={
-            <div />
-          }
+          enhanced
         />,
       );
 

categories/web/freeform/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/information/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

categories/web/information/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/multichoice/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

categories/web/multichoice/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/navigation/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -61,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
-    "@tesseract-design/web-base": "workspace:*"
+    "@tesseract-design/web-base": "workspace:*",
+    "clsx": "^1.2.1"
   },
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/production/index.js",

categories/web/navigation/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/number/react/package.json

@@ -16,11 +16,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/testing-library__jest-dom": "^5.14.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -28,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.33.0"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -61,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tesseract-design/web-base": "workspace:*",
     "@modal-sh/react-utils": "workspace:*",
+    "@tesseract-design/web-base": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.3"
   },

categories/web/number/react/src/components/NumberSpinner/NumberSpinner.test.tsx

@@ -84,9 +84,7 @@ describe('NumberSpinner', () => {
   it('renders an indicator', () => {
     render(
       <NumberSpinner
-        indicator={
-          <div />
-        }
+        enhanced
       />,
     );
     const indicator = screen.getByTestId('indicator');
@@ -125,7 +123,7 @@ describe('NumberSpinner', () => {
         <NumberSpinner
           size={size}
           label="foo"
-          indicator={<div />}
+          enhanced
         />,
       );
       const label = screen.getByTestId('label');
@@ -137,7 +135,7 @@ describe('NumberSpinner', () => {
         <NumberSpinner
           size={size}
           hint="hint"
-          indicator={<div />}
+          enhanced
         />,
       );
 
@@ -149,9 +147,7 @@ describe('NumberSpinner', () => {
       render(
         <NumberSpinner
           size={size}
-          indicator={
-            <div />
-          }
+          enhanced
         />,
       );
 

categories/web/number/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

categories/web/temporal/react/package.json

@@ -15,9 +15,12 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "eslint": "^8.35.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^20.4.7",
+    "@types/react": "^18.2.18",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.46.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",
     "pridepack": "2.4.4",
@@ -25,8 +28,8 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^0.28.1"
+    "typescript": "^5.1.6",
+    "vitest": "^0.34.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -58,8 +61,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tesseract-design/web-base": "workspace:*",
     "@modal-sh/react-utils": "workspace:*",
+    "@tesseract-design/web-base": "workspace:*",
     "clsx": "^1.2.1",
     "tailwindcss": "3.3.3"
   },

categories/web/temporal/react/typedoc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["../../../../typedoc.base.json"],
-  "exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
+	"$schema": "https://typedoc.org/schema.json",
+  "exclude": ["node_modules/**"],
   "entryPoints": ["src/index.ts"],
   "excludeNotDocumented": true,
+	"excludeExternals": true,
   "includeVersion": true,
-  "tsconfig": "../../../../tsconfig.json"
+  "tsconfig": "tsconfig.json"
 }

packages/react-binary-data-canvas/package.json

@@ -16,7 +16,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.18",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",

packages/react-blob-previews/package.json

@@ -16,7 +16,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.18",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",

packages/react-refractor/package.json

@@ -16,7 +16,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.18",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",

packages/react-utils/package.json

@@ -16,7 +16,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.18",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",

packages/react-wavesurfer/package.json

@@ -16,7 +16,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.18",
     "eslint": "^8.35.0",
     "eslint-config-lxsmnsyc": "^0.5.0",
     "jsdom": "^21.1.0",

showcases/web-kitchensink-reactnext/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

showcases/web-kitchensink-reactnext/.gitignore

@@ -1,37 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-.data/

showcases/web-kitchensink-reactnext/README.md

@@ -1,38 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

showcases/web-kitchensink-reactnext/colorthief.d.ts

@@ -1,5 +0,0 @@
-declare module 'colorthief' {
-  export default class ColorThief {
-    getPalette(image: HTMLImageElement, colorCount: number): Promise<[number, number, number][]>;
-  }
-}

showcases/web-kitchensink-reactnext/next.config.js

@@ -1,12 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.resolve.fallback.fs = false;
-    }
-    return config;
-  }
-}
-
-module.exports = nextConfig

showcases/web-kitchensink-reactnext/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "@tesseract-design/web-kitchensink-reactnext",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "typedoc": "",
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@modal-sh/audio-utils": "workspace:*",
-    "@modal-sh/image-utils": "workspace:*",
-    "@modal-sh/react-binary-data-canvas": "workspace:*",
-    "@modal-sh/react-refractor": "workspace:*",
-    "@modal-sh/react-utils": "workspace:*",
-    "@modal-sh/text-utils": "workspace:*",
-    "@modal-sh/video-utils": "workspace:*",
-    "@tesseract-design/viewfinder-base": "link:../../../viewfinder/packages/base",
-    "@tesseract-design/viewfinder-react": "link:../../../viewfinder/packages/react",
-    "@tesseract-design/web-action-react": "workspace:*",
-    "@tesseract-design/web-base": "workspace:*",
-    "@tesseract-design/web-blob-react": "workspace:*",
-    "@tesseract-design/web-choice-react": "workspace:*",
-    "@tesseract-design/web-color-react": "workspace:*",
-    "@tesseract-design/web-formatted-react": "workspace:*",
-    "@tesseract-design/web-freeform-react": "workspace:*",
-    "@tesseract-design/web-information-react": "workspace:*",
-    "@tesseract-design/web-multichoice-react": "workspace:*",
-    "@tesseract-design/web-navigation-react": "workspace:*",
-    "@tesseract-design/web-number-react": "workspace:*",
-    "@tesseract-design/web-temporal-react": "workspace:*",
-    "@theoryofnekomata/formxtra": "^1.0.3",
-    "@types/node": "20.3.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "autoprefixer": "10.4.14",
-    "clsx": "^1.2.1",
-    "eslint": "8.43.0",
-    "eslint-config-next": "13.4.7",
-    "next": "13.4.7",
-    "postcss": "8.4.24",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-markdown": "^8.0.7",
-    "react-refractor": "^2.1.7",
-    "typescript": "5.1.3"
-  },
-  "devDependencies": {
-    "tailwindcss": "0.0.0-insiders.7f31ac1",
-    "typedoc": "^0.24.8"
-  }
-}

showcases/web-kitchensink-reactnext/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

showcases/web-kitchensink-reactnext/public/code.py

@@ -1,106 +0,0 @@
-import os
-import random
-from PIL import Image, ImageDraw, ImageFont
-
-# set up the image folder and font file
-image_folder = 'dogetemplates/'
-font_file = 'impact.ttf'
-
-# get a list of all the image files in the folder
-image_files = [os.path.join(image_folder, f) for f in os.listdir(image_folder) if os.path.isfile(os.path.join(image_folder, f))]
-
-# set up the text parameters
-
-text_color = (255, 255, 255)
-text_outline_color = (0, 0, 0)
-text_outline_width = 2
-
-# load the text files
-with open('strings.txt', 'r') as f:
-    string_lines = f.readlines()
-with open('strings_toptext.txt', 'r') as f:
-    string_toptext_lines = f.readlines()
-with open('strings_bottomtext.txt', 'r') as f:
-    string_bottomtext_lines = f.readlines()
-
-# create the output folder if it doesn't exist
-output_folder = 'randomdoges'
-if not os.path.exists(output_folder):
-    os.makedirs(output_folder)
-
-# generate a random meme
-image_file = random.choice(image_files)
-image = Image.open(image_file)
-draw = ImageDraw.Draw(image)
-
-# scale the font size based on a 500x500 image
-if image.width < 500 and image.height < 500:
-    font_size = int(40)
-else:
-    font_size = int(40 * (min(image.width, image.height) / 500))
-font = ImageFont.truetype(font_file, font_size)
-
-top_text = random.choice(string_lines + string_toptext_lines).strip().upper()
-bottom_text = random.choice(string_lines + string_bottomtext_lines).strip().upper()
-
-text_width, text_height = draw.textsize(top_text, font)
-while text_width > image.width:
-    font_size -= 1
-    font = ImageFont.truetype(font_file, font_size)
-    text_width, text_height = draw.textsize(top_text, font)
-
-x = (image.width - text_width) / 2
-y = 10
-draw.text((x, y), top_text, font=font, fill=text_color, stroke_width=text_outline_width, stroke_fill=text_outline_color)
-
-text_width, text_height = draw.textsize(bottom_text, font)
-while text_width > image.width:
-    font_size -= 1
-    font = ImageFont.truetype(font_file, font_size)
-    text_width, text_height = draw.textsize(bottom_text, font)
-
-x = (image.width - text_width) / 2
-y = image.height - text_height - 10
-draw.text((x, y), bottom_text, font=font, fill=text_color, stroke_width=text_outline_width, stroke_fill=text_outline_color)
-
-# set the image size
-min_size = 225
-max_size = 960
-new_size = random.randint(min_size, max_size)
-image = image.resize((new_size, new_size))
-
-# wrap text to new lines if it goes out of bounds
-max_width = int(image.width * 0.8)
-top_text_lines = []
-bottom_text_lines = []
-for text, lines in [(top_text, top_text_lines), (bottom_text, bottom_text_lines)]:
-    words = text.split()
-    current_line = words[0]
-    for word in words[1:]:
-        if draw.textsize(current_line + ' ' + word, font=font)[0] < max_width:
-            current_line += ' ' + word
-        else:
-            lines.append(current_line)
-            current_line = word
-    lines.append(current_line)
-
-# draw the text on the image
-text_y = 10
-for line in top_text_lines:
-    text_width, text_height = draw.textsize(line, font)
-    x = (image.width - text_width) / 2
-    draw.text((x, text_y), line, font=font, fill=text_color, stroke_width=text_outline_width, stroke_fill=text_outline_color)
-    text_y += text_height
-
-text_y = image.height - 10
-for line in reversed(bottom_text_lines):
-    text_width, text_height = draw.textsize(line, font)
-    x = (image.width - text_width) / 2
-    text_y -= text_height
-    draw.text((x, text_y), line, font=font, fill=text_color, stroke_width=text_outline_width, stroke_fill=text_outline_color)
-
-# save the meme with an incrementing file name in the output folder
-file_num = len(os.listdir(output_folder))
-file_name = f"randomdoge{file_num:04d}.jpg" # 4-digit padded file number
-output_path = os.path.join(output_folder, file_name)
-image.save(output_path)

showcases/web-kitchensink-reactnext/public/next.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
-  <rect width="1" height="2" fill="#000"/>
-  <rect width="1" height="1" x="1" fill="#000"/>
-  <rect width="1" height="1" x="1" y="1" fill="#fff"/>
-</svg>

showcases/web-kitchensink-reactnext/public/plaintext.txt

@@ -1,95 +0,0 @@
-Law 1: Never Outshine the Master: Ensure that those above you always feel superior. Go out of your way to make your bosses look better and feel smarter than anyone else. Everyone is insecure, but an insecure boss can retaliate more strongly than others can.
-
-Law 2: Never Put too Much Trust in Friends, Learn How to Use Enemies: Keep a close eye on your friends — they get envious and will undermine you. If you co-opt an enemy, he’ll be more loyal than a friend because he’ll try harder to prove himself worthy of your trust.
-
-Law 3: Conceal Your Intentions: Always hide your true intentions. Create a smokescreen. If you keep people off-balance and in the dark, they can’t counter your efforts.
-
-Law 4: Always Say Less than Necessary: Say little and be ambiguous, leaving the meaning to others to interpret. The less you say, the more intimidating and powerful you are.
-
-Law 5: So Much Depends on Reputation — Guard It with Your Life: Nurture and guard your reputation because reputation is integral to power. With a strong reputation, you can influence and intimidate others.
-
-Law 6: Create an Air of Mystery: Be outrageous or create an aura of mystery. Any attention — positive or negative — is better than being ignored. Attention brings you wealth.
-
-Law 7: Get Others to Do the Work for You, but Always Take the Credit: Get others to do your work for you. Use their skill, time, and energy to further your ambitions while taking full credit. You’ll be admired for your efficiency.
-
-Law 8: Make Other People Come to You — Use Bait if Necessary: Make your opponent come to you. When you force others to act, you’re in control. Bait them, then attack.
-
-Law 9: Win Through Your Actions, Never Through Argument: Demonstrate your point rather than arguing. Arguing rarely changes anyone’s mind, but people believe what they see. They’re also less likely to be offended.
-
-Law 10: Infection: Avoid the Unhappy and Unlucky: Avoid miserable people. The perpetually miserable spread misery like an infection, and they’ll drown you in it.
-
-Law 11: Learn to Keep People Dependent on You: Make your superior dependent on you. The more she needs you, the more security and freedom you have to pursue your goals.
-
-Law 12: Use Selective Honesty and Generosity to Disarm Your Victim: Use honesty and generosity to disarm and distract others from your schemes. Even the most suspicious people respond to acts of kindness, leaving them vulnerable to manipulation.
-
-Law 13: When Asking for Help, Appeal to People’s Self-Interest, Never to their Mercy or Gratitude: When you need help from someone in a position of power, appeal to their self-interest. They’ll be glad to help if they’ll get something in return, and you’ll get what you want without seeming desperate or irritating.
-
-Law 14: Pose as a Friend, Work as a Spy: Be friendly, sympathetic, and interested to get people to reveal their deepest thoughts and feelings. When you know your opponent’s secrets, you can predict his behavior and control him.
-
-Law 15: Crush Your Enemy Totally: Crush your enemy completely. If you leave even one ember smoldering, it will eventually ignite. You can’t afford to be lenient.
-
-Law 16: Use Absence to Increase Respect and Honor: Once you’ve become well-known, don’t wear out your welcome. The more you’re seen and heard from, the more you cheapen your brand. 
-
-Law 17: Keep Others in Suspended Terror: Cultivate an Air of Unpredictability: Throw others off balance and unnerve them with random, unpredictable acts. You’ll gain the upper hand.
-
-Law 18: Do Not Build Fortresses to Protect Yourself – Isolation is Dangerous: Never isolate yourself when under pressure. This cuts you off from information you need, and when real danger arises you won’t see it coming. 
-
-Law 19: Know Who You’re Dealing With – Do Not Offend the Wrong Person: When attempting to deceive someone, know who you’re dealing with, so you don’t waste your time or stir up a hornets’ nest in reaction.
-
-Law 20: Do Not Commit to Anyone: Don’t commit to any side or cause except yourself. By maintaining your independence, you remain in control — others will vie for your attention. You also have the ability to pit the sides against each other.
-
-Law 21: Play a Sucker to Catch a Sucker – Seem Dumber Than Your Mark: Make your intended victims feel as though they’re smarter than you are, and they won’t suspect you of having ulterior motives.
-
-Law 22: Use the Surrender Tactic: Transform Weakness into Power: When you’re weaker, surrender rather than fighting for the sake of honor. This gives you time to build strength and undermine your victor. You’ll win in the end.
-
-Law 23: Concentrate Your Forces: Focus your resources and energies where you’ll have the most impact or get the most benefit. Otherwise, you’ll waste limited time and energy.
-
-Law 24: Play the Perfect Courtier: Learn the rules of the society you’re playing in, and follow them to avoid attracting unfavorable attention. This includes appearing like a team player and being careful about criticizing diplomatically.
-
-Law 25: Re-Create Yourself: Create a powerful image that stands out, rather than letting others define you. Change your appearance and emotions to suit the occasion. People who seem larger than life attract admiration and power.
-
-Law 26: Keep Your Hands Clean: You’ll inevitably make mistakes or need to take care of unpleasant problems. But keep your hands clean by finding others to do the dirty work, and scapegoats to blame.
-
-Law 27: Play on People’s Need to Believe to Create a Cultlike Following: Offer people something to believe in and someone to follow. Promise the world but keep it vague; whip up enthusiasm. People will respond to a desperate need for belonging. Followers line your pockets, and your opponents are afraid to rile them.
-
-Law 28: Enter Action with Boldness: When you act, do so boldly — and if you make mistakes, correct them with even greater boldness. Boldness brings admiration and power.
-
-Law 29: Plan All the Way to the End: Make detailed plans with a clear ending. Take into account all possible developments. Then don’t be tempted from your path. Otherwise, you risk being surprised and forced to react without time to think.
-
-Law 30: Make Your Accomplishments Seem Effortless: Make difficult feats seem effortless and you’ll inspire awe in others and seem powerful. By contrast, when you make too much of your efforts, your achievement will seem less impressive and you’ll lose respect.
-
-Law 31: Control the Options: Get Others to Play with the Cards You Deal: To deceive people, seem to give them a meaningful choice. But sharply limit their options to a few that work in your favor regardless of which they choose. Your victims will feel in control, but you’ll pull the strings. 
-
-Law 32: Play to People’s Fantasies: Conjure up alluring fantasies in contrast to the gloomy realities of life, and people will flock to you. Spin the right tale and wealth and power will follow.
-
-Law 33: Discover Each Man’s Thumbscrew: Everyone has a weakness, a hole in his armor. Find it and it’s leverage that you can use to your advantage. 
-
-Law 34: Be Royal in Your Own Fashion: Act Like a King to Be Treated Like One: Act like royalty and people will treat you that way. Project dignity and supreme confidence that you’re destined for great things, and others will believe it.
-
-Law 35: Master the Art of Timing: Anticipate the ebb and flow of power. Recognize when the time is right, and align yourself with the right side. Be patient and wait for your moment. Bad timing ends careers and ambitions.
-
-Law 36: Disdain Things You Cannot Have: Ignoring Them Is the Best Revenge: Sometimes it’s better to ignore things because reacting can make small problems worse, make you look bad, and give your enemy attention.
-
-Law 37: Create Compelling Spectacles: In addition to words, use visuals and symbols to underscore your power. What people see makes a greater impression on them than what they hear. 
-
-Law 38: Think as You Like But Behave Like Others: Don’t make a show of being different, or people will think you look down on them and will retaliate against you.
-
-Law 39: Stir Up Waters to Catch Fish: Always stay calm and objective. When you get angry, you’ve lost control. But if you can make your enemies angry, you gain an advantage. 
-
-Law 40: Despise the Free Lunch: Use money and generosity strategically to achieve your goals. Use gifts to build a reputation of generosity, and also to obligate people to you.
-
-Law 41: Avoid Stepping Into a Great Man’s Shoes: If you succeed a great leader or famous parent, find or create your own space to fill. Sharply separate from the past and set your own standards — or you’ll be deemed a failure for not being a clone of your predecessor.
-
-Law 42: Strike the Shepherd and the Sheep Will Scatter: Trouble in a group often starts with a single individual who stirs the pot. Stop them before others succumb to their influence.
-
-Law 43: Work on the Hearts and Minds of Others: Win others’ hearts and minds. Play on their emotions and weaknesses, and appeal to their self-interest. You’ll have them eating out of your hand, and they’ll be less likely to turn on you.
-
-Law 44: Disarm and Infuriate with the Mirror Effect: Seduce people by mirroring their emotions and interests; create the illusion that you share their values. They’ll be so grateful to be understood that they won’t notice your ulterior motives. 
-
-Law 45: Preach the Need for Change, But Never Reform Too Much at Once: Talk change but move slowly. Evoke revered history and cloak your changes in familiar rituals. Too much change is unsettling and will spark backlash.
-
-Law 46: Never Appear Too Perfect: To forestall or mitigate envy, admit to a flaw or weakness, emphasize the role of luck, or downplay your talents. If you don’t recognize and nip envy in the bud, it will grow and the envious will work insidiously against you. 
-
-Law 47: Do Not Go Past the Mark You Aimed For; In Victory, Learn When to Stop: When you’ve won, don’t let emotions push you past your goal. The moment of victory is dangerous because if you press your luck, you’ll blunder into something you haven’t planned for. 
-
-Law 48: Assume Formlessness: Be flexible, fluid, and unpredictable — formless — so your opponents can’t get a fix on you and can’t figure out how to respond.

showcases/web-kitchensink-reactnext/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-export const Brand = ({
-  platform,
-  version,
-}) => {
-  switch (platform) {
-    case 'react':
-      return (
-        <span className="relative font-headings block lowercase leading-none">
-          <span className="relative -top-2 text-3xl font-semibold">
-            Tesseract
-          </span>
-          {' '}
-          <span className="absolute left-4 top-4 font-semibold">
-            Web
-          </span>
-          {' '}
-          <span className="ml-1 font-semibold relative text-lg -top-2">
-            <span className="sr-only">(</span>
-            React
-            <span className="sr-only">)</span>
-          </span>
-          {version && (
-            <>
-              {' '}
-              <span className="absolute right-0 top-4 font-black text-xs">
-                v.{version}
-              </span>
-            </>
-          )}
-        </span>
-      );
-    default:
-      break;
-  }
-
-  return (
-    <span className="relative font-headings block lowercase leading-none">
-      <span className="text-3xl font-semibold">
-        Tesseract
-      </span>
-    </span>
-  )
-};

showcases/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx

@@ -1,33 +0,0 @@
-import Head from 'next/head';
-import {FC, ReactNode} from 'react';
-
-type DefaultLayoutProps = {
-  title?: string,
-  appName?: string,
-  children?: ReactNode,
-}
-
-export const DefaultLayout: FC<DefaultLayoutProps> = ({
-  title,
-  appName = 'Tesseract Web (React)',
-  children,
-}) => {
-  return (
-    <>
-      <Head>
-        <title>
-          {title ? `${title} | ${appName}` : appName}
-        </title>
-        {
-          title
-          && (
-            <meta name="display-title" className="block lowercase text-6xl font-headings container mx-auto px-4 font-thin leading-none" content={title} />
-          )
-        }
-      </Head>
-      <main>
-        {children}
-      </main>
-    </>
-  )
-}

showcases/web-kitchensink-reactnext/src/components/DocsLayout.tsx

@@ -1,193 +0,0 @@
-import * as React from 'react';
-import {Layouts, Widgets} from '@tesseract-design/viewfinder-react';
-import Link from 'next/link';
-import {Brand} from '@/components/Brand';
-import {PLATFORMS} from '@/utils/data';
-
-export interface Page {
-  id: string;
-  href: string;
-  label: string;
-}
-
-export interface DocsLayoutProps {
-  componentPages?: { name: string; components: Page[] }[];
-  docsPages?: Page[];
-  examplePages?: Page[];
-  sidebarOpen?: boolean;
-  platforms?: any;
-  children?: React.ReactNode;
-  currentPlatform?: string;
-  currentVersion?: string;
-}
-
-const createSidebarPageLink = (p: Page) => (
-  <div
-    key={p.id}
-  >
-    <Link
-      href={p.href}
-      className="no-underline font-semibold m-0 p-0 leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
-    >
-      <Layouts.LeftSidebar.SidebarContentContainer>
-        {p.label}
-      </Layouts.LeftSidebar.SidebarContentContainer>
-    </Link>
-  </div>
-);
-
-export const DocsLayout: React.FC<DocsLayoutProps> = ({
-  sidebarOpen = false,
-  componentPages = [],
-  docsPages = [],
-  examplePages = [],
-  platforms = [],
-  currentPlatform,
-  currentVersion,
-  children,
-}) => {
-  return (
-    <Layouts.LeftSidebar.Root
-      topBarWidget={
-        <Widgets.TopBar
-          span="wide"
-          brand={
-            <Link
-              href="/"
-              className="no-underline block"
-            >
-              <Brand
-                platform={currentPlatform}
-                version={currentVersion}
-              />
-            </Link>
-          }
-          menuLink={
-            <Link
-              href={{
-                query: {
-                  open: 'sidebar',
-                },
-              }}
-              className="no-underline p-0 m-0"
-            >
-              <svg
-                className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
-                viewBox="0 0 24 24"
-                role="presentation"
-              >
-                <line x1="3" y1="12" x2="21" y2="12"/>
-                <line x1="3" y1="6" x2="21" y2="6"/>
-                <line x1="3" y1="18" x2="21" y2="18"/>
-              </svg>
-            </Link>
-          }
-        />
-      }
-      sidebarBaseWidget={
-        <Widgets.LeftSidebarBase
-          open={sidebarOpen}
-        >
-          <div className="min-h-full py-4 box-border flex flex-col gap-8">
-            <div>
-              <nav>
-                <Layouts.LeftSidebar.SidebarContentContainer>
-                  <h1>
-                    Docs
-                  </h1>
-                </Layouts.LeftSidebar.SidebarContentContainer>
-                <div className="flex flex-col gap-2 my-8">
-                  {docsPages?.map(createSidebarPageLink)}
-                </div>
-              </nav>
-              <nav>
-                <Layouts.LeftSidebar.SidebarContentContainer>
-                  <h1>
-                    Platforms
-                  </h1>
-                </Layouts.LeftSidebar.SidebarContentContainer>
-                <div className="flex flex-col gap-2 my-8">
-                  <Layouts.LeftSidebar.SidebarContentContainer>
-                    <div className="flex gap-8">
-                      {platforms.map((platformName) => {
-                        // TODO make platform selection a select with optgroup labels for platforms and versions
-                        const platform = PLATFORMS[platformName as keyof typeof PLATFORMS];
-
-                        return (
-                          <Link
-                            key={platformName}
-                            href={platform.href}
-                            className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
-                          >
-                            {platform.label}
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  </Layouts.LeftSidebar.SidebarContentContainer>
-                </div>
-              </nav>
-              {/*<div>*/}
-              {/*  <Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*    <h1>*/}
-              {/*      Categories*/}
-              {/*    </h1>*/}
-              {/*  </Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*  {componentPages.map(({name, components}) => (*/}
-              {/*    <nav key={name}>*/}
-              {/*      <h2>*/}
-              {/*        <Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*          {name}*/}
-              {/*        </Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*      </h2>*/}
-              {/*      <div className="flex flex-col gap-2 my-8">*/}
-              {/*        {components?.map(createSidebarPageLink)}*/}
-              {/*      </div>*/}
-              {/*    </nav>*/}
-              {/*  ))}*/}
-              {/*</div>*/}
-              {/*<nav>*/}
-              {/*  <Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*    <h1>*/}
-              {/*      Examples*/}
-              {/*    </h1>*/}
-              {/*  </Layouts.LeftSidebar.SidebarContentContainer>*/}
-              {/*  <div className="flex flex-col gap-4 my-4">*/}
-              {/*    {examplePages?.map(createSidebarPageLink)}*/}
-              {/*  </div>*/}
-              {/*</nav>*/}
-            </div>
-            <div className="mb-8">
-              <Layouts.LeftSidebar.SidebarContentContainer>
-                <div className="flex gap-8">
-                  <Link
-                    href="https://code.modal.sh/tesseract-design/tesseract"
-                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
-                  >
-                    Repo
-                  </Link>
-                  <Link
-                    href="https://code.modal.sh/tesseract-design/tesseract"
-                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
-                  >
-                    Website
-                  </Link>
-                  <Link
-                    href="https://code.modal.sh/tesseract-design/tesseract/issues"
-                    className="no-underline font-semibold leading-none h-8 flex items-center cursor-pointer uppercase text-sm"
-                  >
-                    Issues
-                  </Link>
-                </div>
-              </Layouts.LeftSidebar.SidebarContentContainer>
-            </div>
-          </div>
-        </Widgets.LeftSidebarBase>
-      }
-    >
-      <Layouts.LeftSidebar.MainContentContainer>
-        {children}
-      </Layouts.LeftSidebar.MainContentContainer>
-    </Layouts.LeftSidebar.Root>
-  )
-};

showcases/web-kitchensink-reactnext/src/components/Section/index.tsx

@@ -1,25 +0,0 @@
-export const Section = ({ children, title }) => (
-  <section>
-    <div className="container mx-auto px-4">
-      <h1>
-        {title}
-      </h1>
-      <div>
-        {children}
-      </div>
-    </div>
-  </section>
-);
-
-export const Subsection = ({ children, title }) => (
-  <section>
-    <div>
-      <h2>
-        {title}
-      </h2>
-      <div>
-        {children}
-      </div>
-    </div>
-  </section>
-);

showcases/web-kitchensink-reactnext/src/components/temporal/WeekInput/index.tsx

@@ -1,218 +0,0 @@
-import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-
-export type WeekInputDerivedElement = HTMLInputElement;
-
-export interface WeekInputProps extends Omit<React.HTMLProps<WeekInputDerivedElement>, 'size' | 'type' | 'label' | 'pattern'> {
-  /**
-   * Short textual description indicating the nature of the component's value.
-   */
-  label?: React.ReactNode,
-  /**
-   * Short textual description as guidelines for valid input values.
-   */
-  hint?: React.ReactNode,
-  /**
-   * Size of the component.
-   */
-  size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
-  /**
-   * Should the component display a border?
-   */
-  border?: boolean,
-  /**
-   * Should the component occupy the whole width of its parent?
-   */
-  block?: boolean,
-  /**
-   * Style of the component.
-   */
-  variant?: TextControl.Variant,
-  /**
-   * Is the label hidden?
-   */
-  hiddenLabel?: boolean,
-}
-
-/**
- * Component for inputting textual values.
- */
-export const WeekInput = React.forwardRef<
-  WeekInputDerivedElement,
-  WeekInputProps
->((
-  {
-    label,
-    hint,
-    indicator,
-    size = 'medium' as const,
-    border = false,
-    block = false,
-    variant = 'default' as const,
-    hiddenLabel = false,
-    className,
-    id: idProp,
-    style,
-    ...etcProps
-  }: WeekInputProps,
-  forwardedRef,
-) => {
-  const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
-
-  // TODO render enhanced version
-
-  return (
-    <div
-      className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
-        'focus-within:ring-4',
-        {
-          'block': block,
-          'inline-block align-middle': !block,
-        },
-        className,
-      )}
-      style={style}
-      data-testid="base"
-    >
-      {label && (
-        <>
-          <label
-            data-testid="label"
-            id={labelId}
-            htmlFor={id}
-            className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
-              {
-                'sr-only': hiddenLabel,
-              },
-              {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
-              },
-            )}
-          >
-            <span className="block w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
-              {label}
-            </span>
-          </label>
-          {' '}
-        </>
-      )}
-      <input
-        {...etcProps}
-        ref={forwardedRef}
-        id={id}
-        aria-labelledby={labelId}
-        type="week"
-        data-testid="input"
-        pattern="\d{4}-W\d{,2}"
-        className={clsx(
-          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
-          'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
-          {
-            'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
-          },
-        )}
-      />
-      {hint && (
-        <div
-          data-testid="hint"
-          className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
-            {
-              'bottom-0 pl-4 pb-1': variant === 'default',
-              'top-0.5': variant === 'alternate',
-            },
-            {
-              'pt-2': variant === 'alternate' && size === 'small',
-              'pt-3': variant === 'alternate' && size !== 'small',
-            },
-            {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
-            },
-          )}
-        >
-          <div
-            className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
-          >
-            {hint}
-          </div>
-        </div>
-      )}
-      {indicator && (
-        <div
-          className={clsx(
-            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
-        >
-          {indicator}
-        </div>
-      )}
-      {border && (
-        <span
-          data-testid="border"
-          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
-        />
-      )}
-    </div>
-  );
-});
-
-WeekInput.displayName = 'WeekInput';
-
-WeekInput.defaultProps = {
-  label: undefined,
-  hint: undefined,
-  size: 'medium',
-  indicator: undefined,
-  border: false,
-  block: false,
-  variant: 'default',
-  hiddenLabel: false,
-};

showcases/web-kitchensink-reactnext/src/components/temporal/YearMonthInput/index.tsx

@@ -1,218 +0,0 @@
-import * as React from 'react';
-import { TextControl } from '@tesseract-design/web-base';
-import clsx from 'clsx';
-
-export type YearMonthInputDerivedElement = HTMLInputElement;
-
-export interface YearMonthInputProps extends Omit<React.HTMLProps<YearMonthInputDerivedElement>, 'size' | 'type' | 'label' | 'pattern'> {
-  /**
-   * Short textual description indicating the nature of the component's value.
-   */
-  label?: React.ReactNode,
-  /**
-   * Short textual description as guidelines for valid input values.
-   */
-  hint?: React.ReactNode,
-  /**
-   * Size of the component.
-   */
-  size?: TextControl.Size,
-  /**
-   * Additional description, usually graphical, indicating the nature of the component's value.
-   */
-  indicator?: React.ReactNode,
-  /**
-   * Should the component display a border?
-   */
-  border?: boolean,
-  /**
-   * Should the component occupy the whole width of its parent?
-   */
-  block?: boolean,
-  /**
-   * Style of the component.
-   */
-  variant?: TextControl.Variant,
-  /**
-   * Is the label hidden?
-   */
-  hiddenLabel?: boolean,
-}
-
-/**
- * Component for inputting textual values.
- */
-export const YearMonthInput = React.forwardRef<
-  YearMonthInputDerivedElement,
-  YearMonthInputProps
->((
-  {
-    label,
-    hint,
-    indicator,
-    size = 'medium' as const,
-    border = false,
-    block = false,
-    variant = 'default' as const,
-    hiddenLabel = false,
-    className,
-    id: idProp,
-    style,
-    ...etcProps
-  }: YearMonthInputProps,
-  forwardedRef,
-) => {
-  const labelId = React.useId();
-  const defaultId = React.useId();
-  const id = idProp ?? defaultId;
-
-  // TODO render enhanced version
-
-  return (
-    <div
-      className={clsx(
-        'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
-        'focus-within:ring-4',
-        {
-          'block': block,
-          'inline-block align-middle': !block,
-        },
-        className,
-      )}
-      style={style}
-      data-testid="base"
-    >
-      {label && (
-        <>
-          <label
-            data-testid="label"
-            id={labelId}
-            htmlFor={id}
-            className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
-              {
-                'sr-only': hiddenLabel,
-              },
-              {
-                'pr-1': !indicator,
-              },
-              {
-                'pr-10': indicator && size === 'small',
-                'pr-12': indicator && size === 'medium',
-                'pr-16': indicator && size === 'large',
-              },
-            )}
-          >
-            <span className="block w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
-              {label}
-            </span>
-          </label>
-          {' '}
-        </>
-      )}
-      <input
-        {...etcProps}
-        ref={forwardedRef}
-        id={id}
-        aria-labelledby={labelId}
-        type="month"
-        data-testid="input"
-        pattern="\d{4}-\d{2}"
-        className={clsx(
-          'bg-negative rounded-inherit w-full peer block font-inherit tabular-nums',
-          'focus:outline-0',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          {
-            'text-xxs': size === 'small',
-            'text-xs': size === 'medium',
-          },
-          {
-            'pl-4': variant === 'default',
-            'pl-1.5': variant === 'alternate',
-          },
-          {
-            'pt-4': variant === 'alternate',
-          },
-          {
-            'pr-4': variant === 'default' && !indicator,
-            'pr-1.5': variant === 'alternate' && !indicator,
-          },
-          {
-            'pr-10': indicator && size === 'small',
-            'pr-12': indicator && size === 'medium',
-            'pr-16': indicator && size === 'large',
-          },
-          {
-            'h-10': size === 'small',
-            'h-12': size === 'medium',
-            'h-16': size === 'large',
-          },
-        )}
-      />
-      {hint && (
-        <div
-          data-testid="hint"
-          className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
-            {
-              'bottom-0 pl-4 pb-1': variant === 'default',
-              'top-0.5': variant === 'alternate',
-            },
-            {
-              'pt-2': variant === 'alternate' && size === 'small',
-              'pt-3': variant === 'alternate' && size !== 'small',
-            },
-            {
-              'pr-4': !indicator && variant === 'default',
-              'pr-1': !indicator && variant === 'alternate',
-            },
-            {
-              'pr-10': indicator && size === 'small',
-              'pr-12': indicator && size === 'medium',
-              'pr-16': indicator && size === 'large',
-            },
-          )}
-        >
-          <div
-            className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
-          >
-            {hint}
-          </div>
-        </div>
-      )}
-      {indicator && (
-        <div
-          className={clsx(
-            'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
-            {
-              'w-10': size === 'small',
-              'w-12': size === 'medium',
-              'w-16': size === 'large',
-            },
-          )}
-        >
-          {indicator}
-        </div>
-      )}
-      {border && (
-        <span
-          data-testid="border"
-          className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
-        />
-      )}
-    </div>
-  );
-});
-
-YearMonthInput.displayName = 'YearMonthInput';
-
-YearMonthInput.defaultProps = {
-  label: undefined,
-  hint: undefined,
-  size: 'medium',
-  indicator: undefined,
-  border: false,
-  block: false,
-  variant: 'default',
-  hiddenLabel: false,
-};

showcases/web-kitchensink-reactnext/src/components/temporal/index.ts

@@ -1,2 +0,0 @@
-export * from './YearMonthInput';
-export * from './WeekInput';

showcases/web-kitchensink-reactnext/src/pages/[...url].tsx

@@ -1,254 +0,0 @@
-import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
-import * as fs from 'fs/promises';
-import * as path from 'path';
-import * as React from 'react'
-import {useRouter} from 'next/router';
-import ReactMarkdown from 'react-markdown';
-import {DocsLayout, Page} from '@/components/DocsLayout';
-import {getDocs, getPlatforms} from '@/utils/data';
-
-export interface Props {
-  componentPages: { name: string; components: Page[] }[],
-  docsPages: Page[],
-  examplePages: Page[],
-  markdown: string,
-  platforms: string,
-  platform: string,
-  framework: string,
-}
-
-const InnerPage: NextPage<Props> = ({
-  componentPages,
-  examplePages,
-  docsPages,
-  markdown,
-  platforms,
-  platform,
-  framework,
-}) => {
-  const router = useRouter();
-  const sidebarOpen = router.query.open === 'sidebar';
-
-  return (
-    <DocsLayout
-      componentPages={componentPages}
-      examplePages={examplePages}
-      docsPages={docsPages}
-      platforms={platforms}
-      currentPlatform={framework}
-      currentVersion="0.1.0"
-      sidebarOpen={sidebarOpen}
-    >
-      {markdown && (
-        <ReactMarkdown
-          className="my-12 leading-loose"
-          components={{
-            ul: ({node, ordered: _ordered, ...props}) => (
-              <ul
-                {...props}
-                className="list-disc pl-4"
-              />
-            ),
-            li: ({node, ...props}) => (
-              <li
-                {...props}
-                className="list-item pl-4"
-              />
-            ),
-          }}
-        >
-          {markdown}
-        </ReactMarkdown>
-      )}
-      <pre>
-        <code>
-          {JSON.stringify(componentPages, null, 2)}
-        </code>
-      </pre>
-    </DocsLayout>
-  )
-}
-
-export const getStaticProps: GetStaticProps = async (ctx) => {
-  const { params } = ctx;
-  const { url } = params as { url: string[] };
-  const [platform, framework, ...etcUrl] = url;
-
-  const props = {} as Record<string, unknown>;
-  props.platform = platform;
-  props.framework = framework;
-
-  props.docsPages = await getDocs({
-    deriveHrefFromFilename: d => `/docs/${
-      d
-        .replace(/\.md/i, '')
-        .split('-')
-        .slice(1)
-        .join('-')
-    }`,
-    deriveLabelFromFilename: d => (
-      d
-        .split('-')
-        .slice(1)
-        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
-        .join(' ')
-        .replace(/\.md/i, '')
-    ),
-  });
-  props.platforms = await getPlatforms();
-
-  // const categoriesPath = path.resolve('../../categories');
-  // const categories = await fs.readdir(categoriesPath);
-  // props.componentPages = categories.map((c) => ({
-  //   id: c,
-  //   href: `/categories/${c}`,
-  //   label: c.split('-').map((cc) => cc.slice(0, 1).toUpperCase() + cc.slice(1)).join(' '),
-  // }));
-
-  // const pagesPath = path.resolve('src/pages');
-  // const examplesPath = path.resolve(pagesPath, 'examples');
-  // const examplesRaw = await fs.readdir(examplesPath);
-  // const examplesIndexPage = await Promise.all(
-  //   examplesRaw.map(async (c) => {
-  //     const indexPath = await path.resolve(examplesPath, c, 'index.tsx');
-  //     try {
-  //       const statResult = await fs.stat(indexPath);
-  //       return [c, statResult.isFile()];
-  //     } catch {
-  //       // noop
-  //     }
-  //
-  //     return [c, false];
-  //   })
-  // ) as [string, boolean][];
-  // const examples = examplesIndexPage
-  //   .filter(([, hasIndexPage]) => hasIndexPage)
-  //   .map(([key]) => key);
-  // props.examplePages = examples.map((e) => ({
-  //   id: e,
-  //   href: `/examples/${e}`,
-  //   label: e.split('-').map((ee) => ee.slice(0, 1).toUpperCase() + ee.slice(1)).join(' '),
-  // }));
-
-  // const typedocData = await fs.readFile('typedoc.data.json', 'utf-8');
-  // const project = JSON.parse(typedocData) as any;
-  //
-  // props.componentPages = project.children.reduce(
-  //   (theComponents, pkg) => {
-  //     const packageNameFragments = pkg.name.split('-');
-  //     const packageFramework = packageNameFragments.pop();
-  //     const categoryBaseName = packageNameFragments.pop();
-  //
-  //     console.log(packageFramework, categoryBaseName);
-  //
-  //     if (theComponents.some((c) => c.name === categoryBaseName)) {
-  //       return theComponents.map((cc) => {
-  //         if (cc.name !== categoryBaseName) {
-  //           return cc;
-  //         }
-  //
-  //         let components = [];
-  //         if (packageFramework === 'react') {
-  //           components = pkg.children
-  //             .filter((exported) => {
-  //               return exported.kind === 64; // Function, these are react components
-  //             })
-  //             .map((component) => {
-  //               return {
-  //                 ...component,
-  //                 id: component.name,
-  //                 href: `/categories/${categoryBaseName}/${component.name}`,
-  //                 label: component.name,
-  //                 descriptionMarkdown: component.signatures[0].comment.summary.reduce(
-  //                   (theText, t) => {
-  //                     if (t.kind === 'text') {
-  //                       return `${theText}${t.text}`;
-  //                     }
-  //                     if (t.kind === 'inline-tag' && t.tag === '@link') {
-  //                       return `${theText}[${t.text}](#)` // TODO set URL
-  //                     }
-  //                     return theText;
-  //                   },
-  //                   ''
-  //                 ),
-  //               };
-  //             });
-  //         }
-  //
-  //         return {
-  //           ...cc,
-  //           name: categoryBaseName,
-  //           packages: {
-  //             ...(cc.packages ?? {}),
-  //             [packageFramework]: {
-  //               components,
-  //             },
-  //           },
-  //         };
-  //       })
-  //     }
-  //
-  //     let components = [];
-  //     if (packageFramework === 'react') {
-  //       components = pkg.children
-  //         .filter((exported) => {
-  //           return exported.kind === 64; // Function, these are react components
-  //         })
-  //         .map((component) => {
-  //           return {
-  //             ...component,
-  //             id: component.name,
-  //             href: `/categories/${categoryBaseName}/${component.name}`,
-  //             label: component.name,
-  //             descriptionMarkdown: component.signatures[0].comment.summary.reduce(
-  //               (theText, t) => {
-  //                 if (t.kind === 'text') {
-  //                   return `${theText}${t.text}`;
-  //                 }
-  //                 if (t.kind === 'inline-tag' && t.tag === '@link') {
-  //                   return `${theText}[${t.text}](#)` // TODO set URL
-  //                 }
-  //                 return theText;
-  //               },
-  //               ''
-  //             ),
-  //           };
-  //         });
-  //     }
-  //
-  //     return [
-  //       ...theComponents,
-  //       {
-  //         name: categoryBaseName,
-  //         packages: {
-  //           [packageFramework]: {
-  //             components,
-  //           }
-  //         }
-  //       }
-  //     ]
-  //   },
-  //   [],
-  // );
-
-  return {
-    props,
-  };
-};
-
-export default InnerPage;
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const docsPath = path.resolve('../../docs');
-  const docs = await fs.readdir(docsPath);
-
-  const categoriesPath = path.resolve('../../categories');
-  const categories = await fs.readdir(categoriesPath);
-
-  return {
-    paths: [
-      ...docs.map((d) => `/docs/${d}`),
-    ],
-    fallback: true,
-  };
-};

showcases/web-kitchensink-reactnext/src/pages/_app.tsx

@@ -1,14 +0,0 @@
-import '@/styles/globals.css'
-import '@/styles/kitchen-sink.css'
-
-import '@modal-sh/react-refractor/dist/Refractor.css'
-
-import type { AppProps } from 'next/app'
-
-const App = ({ Component, pageProps }: AppProps) => {
-  return (
-		<Component {...pageProps} />
-  );
-};
-
-export default App;

showcases/web-kitchensink-reactnext/src/pages/_document.tsx

@@ -1,25 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-import theme from '@/styles/theme'
-
-export default function Document() {
-  return (
-    <Html lang="en" className="bg-negative text-positive tracking-normal font-semi-expanded">
-      <Head className="block">
-				<meta name="viewport" content="initial-scale=1,minimum-scale=1,width=device-width,viewport-fit=cover" />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              :root {
-                ${Object.entries(theme).map(([name, value]) => `--${name}: ${value};`).join('\n')}
-              }
-            `,
-          }}
-        />
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}

showcases/web-kitchensink-reactnext/src/pages/api/[...url].ts

@@ -1,14 +0,0 @@
-import {NextApiHandler} from 'next';
-import {readFile} from 'fs/promises';
-
-const handler: NextApiHandler = async (req, res) => {
-	const typedocJson = await readFile('./.data/typedoc-data.json', 'utf-8');
-	const typedocData = JSON.parse(typedocJson);
-	res.json(
-		typedocData.children.map((c) => ({
-			name: c.name,
-		}))
-	);
-};
-
-export default handler;

showcases/web-kitchensink-reactnext/src/pages/api/index.ts

@@ -1,14 +0,0 @@
-import {NextApiHandler} from 'next';
-import {readFile} from 'fs/promises';
-
-const handler: NextApiHandler = async (req, res) => {
-	const typedocJson = await readFile('./.data/typedoc-data.json', 'utf-8');
-	const typedocData = JSON.parse(typedocJson);
-	res.json(
-		typedocData.children.map((c) => ({
-			name: c.name,
-		}))
-	);
-};
-
-export default handler;

showcases/web-kitchensink-reactnext/src/pages/docs/[...url].tsx

@@ -1,126 +0,0 @@
-import type {GetStaticPaths, GetStaticProps, NextPage} from 'next';
-import * as React from 'react'
-import {useRouter} from 'next/router';
-import ReactMarkdown from 'react-markdown';
-import {DocsLayout, Page} from '@/components/DocsLayout';
-import {getDocs, getMainReadmeFileContents, getPlatforms} from '@/utils/data';
-
-export interface Props {
-  componentPages: { name: string; components: Page[] }[],
-  docsPages: Page[],
-  examplePages: Page[],
-  platforms: any,
-  markdown: string,
-}
-
-const InnerPage: NextPage<Props> = ({
-  componentPages,
-  examplePages,
-  docsPages,
-  platforms,
-  markdown,
-}) => {
-  const router = useRouter();
-  const sidebarOpen = router.query.open === 'sidebar';
-
-  return (
-    <DocsLayout
-      componentPages={componentPages}
-      examplePages={examplePages}
-      docsPages={docsPages}
-      platforms={platforms}
-      sidebarOpen={sidebarOpen}
-    >
-      {markdown && (
-        <ReactMarkdown
-          className="my-12 leading-loose"
-          components={{
-            ul: ({node, ordered: _ordered, ...props}) => (
-              <ul
-                {...props}
-                className="list-disc pl-4"
-              />
-            ),
-            li: ({node, ...props}) => (
-              <li
-                {...props}
-                className="list-item pl-4"
-              />
-            ),
-          }}
-        >
-          {markdown}
-        </ReactMarkdown>
-      )}
-      <pre>
-        <code>
-          {JSON.stringify(componentPages, null, 2)}
-        </code>
-      </pre>
-    </DocsLayout>
-  )
-}
-
-export const getStaticProps: GetStaticProps = async (ctx) => {
-  const { params } = ctx;
-  const { url } = params as { url: string[] };
-  const props = {} as Record<string, unknown>;
-
-  const DOCS_MAPPING = {
-    '/docs/philosophy': 'docs/00-philosophy.md',
-  }
-
-  const theUrl = ['', 'docs', ...url].join('/');
-  const theDocFileUrl = DOCS_MAPPING[theUrl as keyof typeof DOCS_MAPPING] ?? theUrl;
-
-  props.markdown = await getMainReadmeFileContents(theDocFileUrl) ?? null;
-  props.platforms = await getPlatforms();
-  props.docsPages = await getDocs({
-    deriveHrefFromFilename: d => `/docs/${
-      d
-        .replace(/\.md/i, '')
-        .split('-')
-        .slice(1)
-        .join('-')
-    }`,
-    deriveLabelFromFilename: d => (
-      d
-        .split('-')
-        .slice(1)
-        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
-        .join(' ')
-        .replace(/\.md/i, '')
-    ),
-  });
-
-  return {
-    props,
-  };
-};
-
-export default InnerPage;
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const docsPages = await getDocs({
-    deriveHrefFromFilename: d => `/docs/${
-      d
-        .replace(/\.md/i, '')
-        .split('-')
-        .slice(1)
-        .join('-')
-    }`,
-    deriveLabelFromFilename: d => (
-      d
-        .split('-')
-        .slice(1)
-        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
-        .join(' ')
-        .replace(/\.md/i, '')
-    ),
-  });
-
-  return {
-    paths: docsPages.map((d) => d.href),
-    fallback: true,
-  };
-};

showcases/web-kitchensink-reactnext/src/pages/examples/web/react/blog-post/index.tsx

@@ -1,71 +0,0 @@
-import {Refractor} from '@modal-sh/react-refractor';
-import {NextPage} from 'next';
-import * as React from 'react';
-import {getFormValues} from '@theoryofnekomata/formxtra';
-
-const BlogPostPage: NextPage = () => {
-  const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
-    e.preventDefault();
-    const { currentTarget, nativeEvent } = e;
-    const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
-    const { action } = getFormValues(currentTarget, { submitter });
-    switch (action) {
-    case 'copyContents':
-      console.log('copy contents');
-      break;
-    default:
-      break;
-    }
-  }, []);
-
-  return (
-    <>
-      <div className="container mx-auto px-4">
-        <h1>
-          Using Refractor on your Next website
-        </h1>
-        <p>
-          Use <code>@modal-sh/react-refractor</code> as follows on your page:
-        </p>
-      </div>
-      <div className="bg-shade/20 overflow-auto pt-4 pb-8 text-sm">
-        <div className="container mx-auto px-4">
-          <Refractor
-            lineNumbers
-            header
-            language="tsx"
-            scroll
-            actions={
-              <></>
-            }
-            code={`import {Refractor} from '@modal-sh/react-refractor';
-import {NextPage} from 'next';
-
-const BlogPostPage: NextPage = () => {
-  return (
-    <div className="container mx-auto px-4">
-      <Refractor
-        language="tsx"
-        code={\`
-          import {Refractor} from '@modal-sh/react-refractor';
-        \`}
-      />
-    </div>
-  );
-};
-
-export default BlogPostPage;
-`}
-          />
-        </div>
-      </div>
-      <div className="container mx-auto px-4">
-        <p>
-          Easy as that!
-        </p>
-      </div>
-    </>
-  )
-};
-
-export default BlogPostPage;

showcases/web-kitchensink-reactnext/src/pages/examples/web/react/registration-form/index.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import { NextPage } from 'next';
-import { getFormValues } from '@theoryofnekomata/formxtra';
-import * as Freeform from '@tesseract-design/web-freeform-react';
-import * as Formatted from '@tesseract-design/web-formatted-react';
-import * as Action from '@tesseract-design/web-action-react';
-import {Refractor} from '@modal-sh/react-refractor';
-
-const RegistrationFormPage: NextPage = () => {
-  const [values, setValues] = React.useState({} as Record<string, unknown>);
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    const newValues = getFormValues(e.currentTarget);
-    setValues(newValues);
-  };
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    e.preventDefault();
-    const form = e.currentTarget.form;
-    if (!form) {
-      return;
-    }
-    const newValues = getFormValues(form);
-    setValues(newValues);
-  };
-
-  return (
-    <main className="my-16 md:my-32">
-      <div className="container mx-auto px-4">
-        <h1>
-          Registration Form
-        </h1>
-        <p>
-          Input your data in order to gain access to the functions of this service.
-        </p>
-        <form onSubmit={handleSubmit}>
-          <fieldset className="contents">
-            <legend className="sr-only">
-              Register
-            </legend>
-            <div className="grid sm:grid-cols-6 gap-4">
-              <div className="sm:col-span-2">
-                <Freeform.TextInput
-                  block
-                  border
-                  label="First Name"
-                  name="firstName"
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="sm:col-span-2">
-                <Freeform.TextInput
-                  block
-                  border
-                  label="Middle Name"
-                  name="middleName"
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="sm:col-span-2">
-                <Freeform.TextInput
-                  block
-                  border
-                  label="Last Name"
-                  name="lastName"
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="sm:col-span-3">
-                <Formatted.EmailInput
-                  block
-                  border
-                  label="Email"
-                  name="email"
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="sm:col-span-3">
-                <Formatted.UrlInput
-                  block
-                  border
-                  label="Website"
-                  name="website"
-                  onChange={handleChange}
-                />
-              </div>
-              <div className="sm:col-span-2">
-                <Formatted.PhoneNumberInput
-                  country="PH"
-                  block
-                  border
-                  label="Phone"
-                  name="phone"
-                  onChange={handleChange}
-                  enhanced
-                />
-              </div>
-              <div className="sm:col-span-2">
-                <Freeform.MaskedTextInput
-                  block
-                  border
-                  label="Password"
-                  name="password"
-                  onChange={handleChange}
-                  enhanced
-                />
-              </div>
-              <div className="sm:col-span-2">
-                <Freeform.MaskedTextInput
-                  block
-                  border
-                  label="Confirm Password"
-                  name="confirmPassword"
-                  onChange={handleChange}
-                  enhanced
-                />
-              </div>
-              <div className="sm:col-span-6 text-center">
-                <div
-                  className="sm:flex items-center justify-end space-y-4 sm:space-y-0 sm:space-x-4"
-                >
-                  <small>
-                    By registering, you agree to the <a href="#">Terms</a> of this service.
-                  </small>
-                  {' '}
-                  <div>
-                    <Action.ActionButton
-                      variant="filled"
-                      block
-                      type="submit"
-                      menuItem
-                      subtext="Registration requires activation"
-                    >
-                      Submit
-                    </Action.ActionButton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </fieldset>
-        </form>
-        <div className="mt-4">
-          <Refractor
-            language="json"
-            code={JSON.stringify(values, null, 2)}
-          />
-        </div>
-      </div>
-    </main>
-  )
-}
-
-export default RegistrationFormPage;

showcases/web-kitchensink-reactnext/src/pages/index.tsx

@@ -1,124 +0,0 @@
-import type {GetStaticProps, NextPage} from 'next';
-import * as React from 'react'
-import {useRouter} from 'next/router';
-import ReactMarkdown from 'react-markdown';
-import {Layouts} from '@tesseract-design/viewfinder-react';
-import {LinkButton} from '@tesseract-design/web-navigation-react';
-import Link from 'next/link';
-import {getDocs, getMainReadmeFileContents, getPlatforms, PLATFORMS} from '@/utils/data';
-
-export interface Props {
-  markdown: string;
-  docsPages: any;
-  platforms: string[];
-}
-
-const IndexPage: NextPage<Props> = ({
-  markdown,
-  docsPages,
-  platforms,
-}) => {
-  const router = useRouter();
-
-  return (
-    <Layouts.Basic.Root>
-      <Layouts.Basic.ContentContainer>
-        <ReactMarkdown
-          className="my-12 leading-loose"
-          components={{
-            ul: ({node, ordered: _ordered, ...props}) => (
-              <ul
-                {...props}
-                className="list-disc pl-4"
-              />
-            ),
-            li: ({node, ...props}) => (
-              <li
-                {...props}
-                className="list-item pl-4"
-              />
-            ),
-          }}
-        >
-          {markdown}
-        </ReactMarkdown>
-        <nav>
-          <h1>Platforms</h1>
-          <div className="grid xs:grid-cols-2 gap-4">
-            {platforms.map((platformName) => {
-              const platform = PLATFORMS[platformName as keyof typeof PLATFORMS];
-
-              return (
-                <div
-                  key={platformName}
-                >
-                  <Link href={platform.href} passHref legacyBehavior>
-                    <LinkButton
-                      href={platform.href}
-                      menuItem
-                      block
-                      variant="outline"
-                    >
-                      {platform.label}
-                    </LinkButton>
-                  </Link>
-                </div>
-              )
-            })}
-          </div>
-        </nav>
-        <nav>
-          <h1>Docs</h1>
-          <div className="grid xs:grid-cols-2 gap-4">
-            {docsPages.map((page) => (
-              <div
-                key={page.id}
-              >
-                <Link href={page.href} passHref legacyBehavior>
-                  <LinkButton
-                    href={page.href}
-                    menuItem
-                    block
-                    variant="outline"
-                  >
-                    {page.label}
-                  </LinkButton>
-                </Link>
-              </div>
-            ))}
-          </div>
-        </nav>
-      </Layouts.Basic.ContentContainer>
-    </Layouts.Basic.Root>
-  );
-}
-
-export const getStaticProps: GetStaticProps = async () => {
-  const props = {} as Record<string, unknown>;
-
-  props.markdown = await getMainReadmeFileContents('README.md') ?? null;
-  props.docsPages = await getDocs({
-    deriveHrefFromFilename: d => `/docs/${
-      d
-        .replace(/\.md/i, '')
-        .split('-')
-        .slice(1)
-        .join('-')
-    }`,
-    deriveLabelFromFilename: d => (
-      d
-        .split('-')
-        .slice(1)
-        .map((dd) => dd.slice(0, 1).toUpperCase() + dd.slice(1))
-        .join(' ')
-        .replace(/\.md/i, '')
-    ),
-  });
-  props.platforms = await getPlatforms();
-
-  return {
-    props,
-  };
-};
-
-export default IndexPage

showcases/web-kitchensink-reactnext/src/styles/globals.css

@@ -1,146 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* TODO add to tesseract plugin */
-@layer base {
-  :root {
-    --color-sidebar: 29 29 29;
-    --color-topbar: 19 19 19;
-  }
-
-  h1 {
-    @apply font-headings lowercase text-5xl font-thin leading-none my-8;
-  }
-
-  h2 {
-    @apply font-headings lowercase text-4xl font-light leading-none my-8;
-  }
-
-  h3 {
-    @apply font-headings lowercase text-3xl leading-none my-8;
-  }
-
-  h4 {
-    @apply font-headings lowercase text-2xl leading-none my-8;
-  }
-
-  h5 {
-    @apply font-headings lowercase text-xl leading-none my-8;
-  }
-
-  h6 {
-    @apply font-headings lowercase text-lg leading-none my-8;
-  }
-
-  p {
-    @apply my-8;
-  }
-
-  small {
-    font-size: 0.75em;
-  }
-
-  a {
-    @apply ring-secondary/50 rounded text-primary p-1 -m-1 underline;
-  }
-
-  a.no-underline {
-    text-decoration: none;
-  }
-
-  a:focus {
-    @apply ring-4 text-secondary;
-    outline: 0;
-  }
-
-  a:active {
-    @apply ring-tertiary/50 text-tertiary;
-  }
-
-  a.focus\:text-negative:focus {
-    color: rgb(var(--color-negative));
-  }
-
-  a.active\:text-negative:active {
-    color: rgb(var(--color-negative));
-  }
-
-  /*pre {*/
-  /*  overflow: auto;*/
-  /*  margin: 0 -1rem;*/
-  /*  padding: 0 1rem;*/
-  /*  line-height: 1.2;*/
-  /*  box-sizing: border-box;*/
-  /*}*/
-
-  @media only print {
-    pre, pre * {
-      color: inherit !important;
-    }
-
-    code, code * {
-      color: inherit !important;
-    }
-
-    img {
-      filter: grayscale(100%);
-    }
-
-    :root {
-      --color-accent: black !important;
-      --color-active: black !important;
-    }
-  }
-}
-
-:root .rti--container {
-  --rti-bg: transparent;
-  --rti-border: transparent;
-  --rti-main: transparent;
-  --rti-radius: 0;
-  --rti-s: 0.5rem;
-  --rti-tag: transparent;
-  --rti-tag-remove: transparent;
-  --rti-tag-padding: 0 0;
-}
-
-.highlight .token.number { color: rgb(var(--color-code-number)); }
-.highlight .token.keyword { color: rgb(var(--color-code-keyword)); }
-.highlight .token.tag { color: rgb(var(--color-code-keyword)); }
-.highlight .token.type { color: rgb(var(--color-code-type)); }
-.highlight .token.instance-attribute { color: rgb(var(--color-code-instance-attribute)); }
-.highlight .token.maybe-class-name { color: rgb(var(--color-code-function)); font-style: italic; }
-.highlight .token.function { color: rgb(var(--color-code-function)); font-style: italic; }
-.highlight .token.parameter { color: rgb(var(--color-code-parameter)); }
-.highlight .token.property { color: rgb(var(--color-code-property)); }
-.highlight .token.attr-name { color: rgb(var(--color-code-property)); font-style: italic; }
-.highlight .token.string { color: rgb(var(--color-code-string)); }
-.highlight .token.attr-value { color: rgb(var(--color-code-string)); }
-.highlight .token.attr-value .attr-equals { color: rgb(var(--color-positive)); }
-.highlight .token.variable { color: rgb(var(--color-code-variable)); }
-.highlight .token.regexp { color: rgb(var(--color-code-regexp)); }
-.highlight .token.url { color: rgb(var(--color-code-url)); }
-.highlight .token.global { color: rgb(var(--color-code-global)); }
-.highlight .token.comment { opacity: 0.5; }
-
-.highlight .x00 { color: rgb(var(--color-code-keyword)); }
-.highlight .x10 { color: rgb(var(--color-code-global)); }
-.highlight .x20 { color: rgb(var(--color-code-string)); }
-.highlight .x30 { color: rgb(var(--color-code-number)); }
-.highlight .x40 { color: rgb(var(--color-code-url)); }
-.highlight .x50 { color: rgb(var(--color-code-type)); }
-.highlight .x60 { color: rgb(var(--color-code-parameter)); }
-.highlight .x70 { color: rgb(var(--color-code-property)); }
-.highlight .x80 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-keyword)); }
-.highlight .x90 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-global)); }
-.highlight .xa0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-string)); }
-.highlight .xb0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-number)); }
-.highlight .xc0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-url)); }
-.highlight .xd0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-type)); }
-.highlight .xe0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-parameter)); }
-.highlight .xf0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-property)); }
-
-.focus\:outline-0:-moz-focusring {
-  outline: 0;
-}

showcases/web-kitchensink-reactnext/src/styles/kitchen-sink.css

@@ -1,10 +0,0 @@
-/* kitchen-sink styles */
-
-meta[name="display-title"] {
-  max-width: 720px;
-}
-
-meta[name="display-title"]::before {
-  display: block;
-  content: attr(content);
-}

showcases/web-kitchensink-reactnext/src/styles/theme.ts

@@ -1,25 +0,0 @@
-const theme = {
-  "color-shade": "0 0 0",
-  "color-negative": "34 34 34",
-  "color-positive": "238 238 238",
-  "color-primary": "199 138 179",
-  "color-secondary": "215 95 75",
-  "color-tertiary": "255 153 0",
-  "color-code-number": "116 249 94",
-  "color-code-keyword": "255 67 137",
-  "color-code-type": "80 151 210",
-  "color-code-instance-attribute": "118 167 210",
-  "color-code-function": "103 194 82",
-  "color-code-parameter": "145 94 194",
-  "color-code-property": "255 161 201",
-  "color-code-string": "238 211 113",
-  "color-code-variable": "139 194 117",
-  "color-code-regexp": "116 167 43",
-  "color-code-url": "0 153 204",
-  "color-code-global": "194 128 80",
-  "font-sans": '"Encode Sans"',
-  "font-headings": 'Glory, var(--font-sans)',
-  "font-mono": 'MonoLisa, mononoki',
-} as const;
-
-export default theme;

showcases/web-kitchensink-reactnext/src/utils/data.ts

@@ -1,70 +0,0 @@
-import path from 'path';
-import fs from 'fs/promises';
-
-export const PLATFORMS = {
-  react: {
-    label: 'React',
-    href: '/web/react',
-  },
-};
-
-export const getMainReadmeFileContents = async (p: string) => {
-  const readmePath = path.resolve('../..', p);
-  try {
-    const contents = await fs.readFile(readmePath);
-    return contents.toString('utf-8');
-  } catch (errRaw) {
-    const err = errRaw as NodeJS.ErrnoException;
-
-    if (err.code === 'ENOENT') {
-      return undefined;
-    }
-    throw err;
-  }
-};
-
-export interface GetDocsOptions {
-  deriveLabelFromFilename?: (filename: string) => string;
-  deriveHrefFromFilename?: (filename: string) => string;
-}
-
-export const getDocs = async (options = {} as GetDocsOptions) => {
-  const docsPath = path.resolve('../../docs');
-  const docs = await fs.readdir(docsPath);
-  const {
-    deriveLabelFromFilename = (filename) => filename,
-    deriveHrefFromFilename = (filename) => `/docs/${filename}`,
-  } = options;
-  return docs.map((d) => ({
-    id: d,
-    href: deriveHrefFromFilename(d),
-    label: deriveLabelFromFilename(d),
-  }));
-};
-
-export const getPlatforms = async () => {
-  const categoriesPath = path.resolve('../../categories');
-  const categories = await fs.readdir(categoriesPath);
-  const platformsCheck = await Promise.all(categories.map(async (category) => {
-    const categoryDir = path.resolve(categoriesPath, category);
-    const availableCategoryPlatforms = await fs.readdir(categoryDir);
-    const platformsWithReadmeCheck = await Promise.all(availableCategoryPlatforms.map(async (platform) => {
-      const platformDir = path.resolve(categoryDir, platform);
-      try {
-        const platformReadmePath = path.resolve(platformDir, 'README.md');
-        await fs.stat(platformReadmePath);
-        return [platform, true];
-      } catch (errorRaw) {
-        const error = errorRaw as NodeJS.ErrnoException;
-        if (error.code !== 'ENOENT') {
-          throw error;
-        }
-      }
-      return [platform, false];
-    }));
-    return platformsWithReadmeCheck
-      .filter(([, hasReadme]) => hasReadme)
-      .map(([platform]) => platform)
-  }));
-  return Array.from(new Set(platformsCheck.flat()));
-};

showcases/web-kitchensink-reactnext/tailwind.config.js

@@ -1,157 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-const {
-  dropdownSelectPlugin,
-  menuSelectPlugin,
-  radioButtonPlugin,
-  radioTickBoxPlugin,
-} = require('@tesseract-design/web-choice-react');
-const {
-  colorPickerPlugin,
-} = require('@tesseract-design/web-color-react');
-const {
-  menuMultiSelectPlugin,
-  tagInputPlugin,
-  toggleButtonPlugin,
-  toggleSwitchPlugin,
-  toggleTickBoxPlugin,
-} = require('@tesseract-design/web-multichoice-react');
-const {
-  numberSpinnerPlugin,
-  sliderPlugin,
-} = require('@tesseract-design/web-number-react');
-const {
-  dateDropdownPlugin,
-  timeSpinnerPlugin,
-} = require('@tesseract-design/web-temporal-react');
-const {
-  tailwind
-} = require('@tesseract-design/viewfinder-base');
-
-const plugin = require('tailwindcss/plugin')
-
-const tesseractPlugin = plugin(
-  ({ addUtilities }) => {
-    addUtilities({
-      '.font-condensed': {
-        'font-stretch': 'condensed',
-      },
-      '.font-semi-condensed': {
-        'font-stretch': 'semi-condensed',
-      },
-      '.font-expanded': {
-        'font-stretch': 'expanded',
-      },
-      '.font-semi-expanded': {
-        'font-stretch': 'semi-expanded',
-      },
-      '.font-inherit': {
-        'font-stretch': 'inherit',
-      },
-      '.linejoin-round': {
-        'stroke-linejoin': 'round',
-      },
-      '.linecap-round': {
-        'stroke-linecap': 'round',
-      },
-    });
-  },
-  {
-    theme: {
-      fontFamily: {
-        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
-        headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
-        mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
-        inherit: ['inherit'],
-      },
-      colors: {
-        'sidebar': 'rgb(var(--color-sidebar)',
-        'topbar': 'rgb(var(--color-topbar)',
-
-        'shade': 'rgb(var(--color-shade))',
-        'negative': 'rgb(var(--color-negative))',
-        'positive': 'rgb(var(--color-positive))',
-        'primary': 'rgb(var(--color-primary))',
-        'secondary': 'rgb(var(--color-secondary))',
-        'tertiary': 'rgb(var(--color-tertiary))',
-        'code-number': 'rgb(var(--color-code-number))',
-        'code-keyword': 'rgb(var(--color-code-keyword))',
-        'code-type': 'rgb(var(--color-code-type))',
-        'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
-        'code-function': 'rgb(var(--color-code-function))',
-        'code-parameter': 'rgb(var(--color-code-parameter))',
-        'code-property': 'rgb(var(--color-code-property))',
-        'code-string': 'rgb(var(--color-code-string))',
-        'code-variable': 'rgb(var(--color-code-variable))',
-        'code-regexp': 'rgb(var(--color-code-regexp))',
-        'code-url': 'rgb(var(--color-code-url))',
-        'code-global': 'rgb(var(--color-code-global))',
-        'current': 'currentcolor',
-        'inherit': 'inherit',
-        'transparent': 'transparent',
-      },
-      extend: {
-        fontSize: {
-          'lg': '1.125em',
-          'xl': '1.25em',
-          '2xl': '1.5em',
-          '3xl': '1.75em',
-          '4xl': '2em',
-          '5xl': '3em',
-          '6xl': '4em',
-          'xxs': '0.625rem',
-        },
-        borderRadius: {
-          inherit: 'inherit',
-        },
-        minWidth: {
-          6: '1.5rem',
-          10: '2.5rem',
-          12: '3rem',
-          16: '4rem',
-          48: '12rem',
-          64: '16rem',
-        },
-        minHeight: {
-          6: '1.5rem',
-          10: '2.5rem',
-          12: '3rem',
-          16: '4rem',
-          64: '16rem',
-        },
-        strokeWidth: {
-          3: '3',
-        },
-      },
-    },
-  },
-);
-
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/categories/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@tesseract-design/viewfinder-react/dist/**/*.js',
-    './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
-  ],
-  plugins: [
-    tailwind.plugin(),
-    tesseractPlugin,
-    colorPickerPlugin,
-    dateDropdownPlugin,
-    dropdownSelectPlugin,
-    menuMultiSelectPlugin,
-    menuSelectPlugin,
-    numberSpinnerPlugin,
-    radioButtonPlugin,
-    radioTickBoxPlugin,
-    sliderPlugin,
-    tagInputPlugin,
-    timeSpinnerPlugin,
-    toggleButtonPlugin,
-    toggleSwitchPlugin,
-    toggleTickBoxPlugin,
-  ],
-}

showcases/web-kitchensink-reactnext/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "tailwind.config": ["./tailwind.config.js"],
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

showcases/web-kitchensink-reactnext/typedoc.json

@@ -1,8 +0,0 @@
-{
-  "entryPoints": ["../../categories/**"],
-  "entryPointStrategy": "packages",
-  "name": "@tesseract-design/tesseract-web-react",
-  "json": ".data/typedoc-data.json",
-  "pretty": false,
-  "tsconfig": "../../tsconfig.json"
-}

tsconfig.json

@@ -1,24 +0,0 @@
-{
-    "include": ["categories/**/src/*"],
-    "exclude": [
-        "node_modules",
-        "**/*.test.{ts,js,tsx,jsx}"
-    ],
-    "compilerOptions": {
-        "module": "ESNext",
-        "lib": ["ESNext", "DOM"],
-        "importHelpers": true,
-        "declaration": true,
-        "sourceMap": true,
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true,
-        "moduleResolution": "node",
-        "jsx": "react",
-        "esModuleInterop": true,
-        "target": "es2018",
-        "emitDeclarationOnly": true
-    }
-}

typedoc.base.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://typedoc.org/schema.json",
-  "includeVersion": true
-}

typedoc.json

@@ -1,6 +1,4 @@
 {
   "entryPoints": ["categories/**"],
-	"exclude": ["**/*.test.(ts|tsx)", "**/node_modules/**"],
-  "entryPointStrategy": "packages",
-  "tsconfig": "tsconfig.json"
+  "entryPointStrategy": "packages"
 }