chore(setup): setup TSDX and Next.js

We will use TSDX for the actual development of the React components.
However we also want to provide a sort of "playground" while developing
these components.

For this "playground" we will use Next.js which you can start with `yarn
playground` or `npm run playground`.

Author: RobinMalfait

.gitignore

@@ -1,5 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# logs
 *.log
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/dist
+
+# misc
 .DS_Store
-node_modules
+*.pem
 .cache
-dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+module.exports = { extends: ['@commitlint/config-conventional'] }

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/jest/custom-matchers.ts'],
+  globals: {
+    'ts-jest': {
+      isolatedModules: true,
+      tsConfig: './tsconfig.tsdx.json',
+    },
+  },
+}

jest/custom-matchers.ts

@@ -0,0 +1,31 @@
+// Assuming requestAnimationFrame is roughly 60 frames per second
+const frame = 1000 / 60
+
+const formatter = new Intl.NumberFormat('en')
+
+expect.extend({
+  toBeWithinRenderFrame(actual, expected) {
+    const min = expected - frame
+    const max = expected + frame
+
+    const pass = actual >= min && actual <= max
+
+    if (pass) {
+      return {
+        message: () =>
+          `expected ${actual} not to be within range of a frame ${formatter.format(
+            min
+          )} - ${formatter.format(max)}`,
+        pass: true,
+      }
+    } else {
+      return {
+        message: () =>
+          `expected ${actual} to be within range of a frame ${formatter.format(
+            min
+          )} - ${formatter.format(max)}`,
+        pass: false,
+      }
+    }
+  },
+})

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  devIndicators: {
+    autoPrerender: false,
+  },
+}

package.json

@@ -1,6 +1,9 @@
 {
   "name": "@tailwindui/react",
   "version": "0.0.0-development",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/tailwindui.esm.js",
   "license": "MIT",
   "files": [
     "dist"
@@ -9,11 +12,18 @@
     "node": ">=10"
   },
   "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build --name tailwindui --tsconfig ./tsconfig.tsdx.json",
+    "test": "tsdx test --passWithNoTests",
+    "playground": "next dev",
+    "lint": "tsdx lint",
+    "prepare": "npm run build",
     "commit": "git-cz",
     "semantic-release": "semantic-release"
   },
   "husky": {
     "hooks": {
+      "pre-commit": "npm run lint",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
@@ -28,12 +38,39 @@
       "path": "cz-conventional-changelog"
     }
   },
+  "release": {
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "master",
+      {
+        "name": "develop",
+        "channel": "next"
+      }
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
   "devDependencies": {
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.2",
-    "commitizen": "^4.1.2",
+    "@tailwindcss/ui": "^0.5.0",
+    "@testing-library/react": "^10.4.8",
+    "@types/node": "^14.6.0",
+    "@types/react-dom": "^16.9.8",
+    "@types/react": "^16.9.46",
+    "babel-jest": "^26.3.0",
+    "commitizen": "^4.1.5",
     "cz-conventional-changelog": "^3.2.0",
     "husky": "^4.2.5",
-    "semantic-release": "^17.1.1"
+    "next": "9.5.2",
+    "react-dom": "^16.13.1",
+    "react": "^16.13.1",
+    "semantic-release": "^17.1.1",
+    "snapshot-diff": "^0.8.1",
+    "tailwindcss": "^1.7.3",
+    "tsdx": "^0.13.3",
+    "tslib": "^2.0.1",
+    "typescript": "^3.9.7"
   }
 }

postcss.config.js

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

tailwind.config.js

@@ -0,0 +1,17 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  variants: {},
+  plugins: [require('@tailwindcss/ui')],
+}

tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "@tailwindui/react": ["src"],
+      "*": ["src/*", "node_modules/*"]
+    },
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": ["node_modules"]
+}

tsconfig.tsdx.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}