chore: stub out new component lib (#2495)

* chore: stub out new component lib (#2467)

* chore: stub a bundled component lib

* chore: add cosmos to preview component lib

* Fix code style issues with ESLint
Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

* fixup: tsconfig

* fix: homepage
Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

.gitignore

@@ -16,6 +16,9 @@
 # production
 /build
 
+# bundle
+/dist
+
 # misc
 .DS_Store
 .env.local

cosmos.config.json

+{
+  "staticPath": "public",
+  "watchDirs": ["src"],
+  "webpack": {
+    "configPath": "react-scripts/config/webpack.config"
+  }
+}

package.json

@@ -2,6 +2,13 @@
   "name": "@uniswap/interface",
   "description": "Uniswap Interface",
   "homepage": ".",
+  "main": "dist/interface.js",
+  "module": "dist/interface.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "lib",
+    "dist"
+  ],
   "private": true,
   "devDependencies": {
     "@davatar/react": "1.6.2",
@@ -71,6 +78,7 @@
     "array.prototype.flatmap": "^1.2.4",
     "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
+    "cross-env": "^7.0.3",
     "cypress": "^7.7.0",
     "d3": "^7.0.0",
     "eslint": "^7.11.0",
@@ -85,6 +93,7 @@
     "inter-ui": "^3.13.1",
     "jest-styled-components": "^7.0.5",
     "luxon": "^1.25.0",
+    "microbundle": "^0.13.3",
     "ms.macro": "^2.0.0",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
@@ -95,6 +104,7 @@
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
+    "react-cosmos": "^5.6.3",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
@@ -138,7 +148,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=./custom-test-env.js",
-    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'"
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "bundle": "microbundle --tsconfig tsconfig.lib.json src/lib/index.tsx --format esm,cjs",
+    "cosmos": "open http://localhost:5000 && cross-env FAST_REFRESH=false cosmos"
   },
   "eslintConfig": {
     "extends": "react-app",

src/lib/index.test.tsx

+import './'
+
+describe('lib', () => {
+  it('exists', () => {
+    expect(true).toBeTruthy()
+  })
+})

src/lib/index.tsx

+export {}

tsconfig.base.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "strict": true,
+    "alwaysStrict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "useUnknownInCatchVariables": false,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "downlevelIteration": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["react-spring", "jest"]
+  },
+  "exclude": ["node_modules", "cypress"],
+  "include": ["src/**/*"]
+}

tsconfig.json

 {
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "strict": true,
-    "alwaysStrict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": false,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noImplicitReturns": true,
-    "useUnknownInCatchVariables": false,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
     "jsx": "react-jsx",
-    "downlevelIteration": true,
-    "allowSyntheticDefaultImports": true,
-    "types": ["react-spring", "jest"],
     "baseUrl": "src"
   },
   "exclude": ["node_modules", "cypress"],
-  "include": ["./src/**/*.ts", "./src/**/*.tsx", "src/components/Confetti/index.js"]
+  "include": ["src/**/*"]
 }

tsconfig.lib.json

+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "baseUrl": "src/lib"
+  },
+  "exclude": ["node_modules", "src/lib/**/*.test.*"],
+  "include": ["src/lib/**/*"]
+}