Improve tsdx with example (#48)

* Fix disabled pseudo, add tests for example

* fix jest tests

* remove coverage reports

* try to fix ci

* fix tsconfig

* Consolidate CI to root scripts

* stop extending tsconfig

* more sandbox changes

* add readme

* spelling

.github/workflows/main.yml

@@ -27,12 +27,12 @@ jobs:
           CI: true
 
       - name: Lint
-        run: yarn lint && yarn --cwd example lint
+        run: yarn lint
         env:
           CI: true
 
       - name: Test
-        run: yarn test --ci --coverage --maxWorkers=2 && yarn --cwd example test --ci --coverage --maxWorkers=2
+        run: yarn test --ci --coverage --maxWorkers=2 
         env:
           CI: true
 

example/README.md

@@ -0,0 +1,17 @@
+# System Props Examples
+
+This example project serves two purposes:
+
+* Examples of how to use System Props in your project (setting up types, creating a Box component)
+* Integration tests with styled-components and Emotion (with types, too)
+
+## Running in CodeSandbox
+
+[Click here to fork in CodeSandbox](https://codesandbox.io/s/github/system-props/system-props/tree/main/example)
+
+You can fork this project in codesandbox, which can be useful to demonstrate bugs or quickly spin up a new feature. However, there's a few things you'll need to do first:
+
+1. Reset the `system-props` version to `latest` (by default, it's symlinked to local repo's version for better local testing)
+2. Go to `Server Control Panel` on the left, beneath the File Explorer tab.
+3. Beneath "Control Container", click "Restart Server"
+4. You should be up and running 🔥

example/package.json

@@ -4,10 +4,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "serve": "vite preview",
-    "test": "tsdx test src",
-    "lint": "tsdx lint src",
-    "format": "tsdx lint src --fix"
+    "serve": "vite preview"
   },
   "dependencies": {
     "@emotion/react": "^11.4.0",
@@ -26,15 +23,7 @@
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "csstype": "^3.0.7",
     "jest-styled-components": "^7.0.4",
-    "prettier": "file:../node_modules/prettier",
-    "tsdx": "file:../node_modules/tsdx",
-    "typescript": "file:../node_modules/typescript",
     "vite": "^2.1.0",
     "vite-babel-plugin": "^0.0.2"
-  },
-  "resolutions": {
-    "**/typescript": "^4.1.0",
-    "**/@typescript-eslint/eslint-plugin": "^4.6.1",
-    "**/@typescript-eslint/parser": "^4.6.1"
   }
 }

example/sandbox.config.json

@@ -0,0 +1,8 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "container": {
+    "node": "14"
+  }
+}

example/src/App.tsx

@@ -1,3 +1,6 @@
+/**
+ * NOTE: If running in codesandbox, you will need to specify a version of system-props
+ */
 import React from 'react';
 import { Box as ScBox } from './box-styled-components';
 import { Box as ScTransientBox } from './box-styled-components-transient-props';

example/tsconfig.json

@@ -1,14 +1,17 @@
 {
-  "extends": "../tsconfig.json",
+  "include": ["src", "vite.config.ts"],
   "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["dom", "esnext"],
+    "strict": true,
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
-    "baseUrl": "."
+    "jsx": "react"
   }
 }

tsconfig.json

@@ -13,6 +13,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "jsx": "react"
   }
 }