New version

.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release
+
+on:
+  push:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 10 # 👈 Required to retrieve git history
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          yarn install --frozen-lockfile 2>&1 | grep -v '^[warning|info]' 
+          yarn build
+          yarn release
+      # - name: Publish to Chromatic
+      #   uses: chromaui/action@v1
+      #   with:
+      #     token: ${{ secrets.GITHUB_TOKEN }}
+      #     projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      #     workingDir: packages/storybook

.gitignore

@@ -1,6 +1,12 @@
 node_modules
 .next
 todo.md
+current.md
 dist
 yarn-error.log
-site/out
+.prettierignore
+.env
+.vscode
+storybook-static
+packages/playground/out
+packages/starter

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run playground
+
+

lerna.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.3.0-next.0",
+  "npmClient": "yarn",
+  "packages": ["packages/*"],
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "verifyAccess": false
+    }
+  }
+}

package.json

@@ -3,29 +3,31 @@
   "workspaces": {
     "packages": [
       "packages/*",
-      "demos/*",
-      "storybook",
-      "site"
+      "external/*"
     ]
   },
   "scripts": {
-    "dev": "yarn workspace xmdx dev",
-    "mbrowser": "yarn workspace @code-hike/mini-browser",
-    "mframe": "yarn workspace @code-hike/mini-frame",
-    "mterminal": "yarn workspace @code-hike/mini-terminal",
-    "meditor": "yarn workspace @code-hike/mini-editor",
-    "scroller": "yarn workspace @code-hike/scroller",
-    "player": "yarn workspace @code-hike/player",
-    "sim-user": "yarn workspace @code-hike/sim-user",
-    "storybook": "yarn workspace storybook",
-    "site": "yarn workspace site",
-    "ch-build": "yarn workspace @code-hike/build",
-    "watch-packages": "yarn mframe watch & yarn mterminal watch & yarn scroller watch & yarn sim-user watch & yarn player watch & yarn mbrowser watch & yarn meditor watch",
-    "build-packages": "yarn mframe build && yarn mterminal build && yarn scroller build && yarn sim-user build && yarn player build && yarn mbrowser build && yarn meditor build",
-    "build-site": "yarn build-packages && yarn workspace site export"
+    "build": "lerna run --stream x -- build",
+    "watch": "lerna run --since HEAD --exclude-dependents --parallel x -- watch",
+    "watch-all": "lerna run --parallel x -- watch",
+    "storybook": "lerna run --scope storybook start --stream",
+    "playground": "lerna run --scope @*/playground dev --stream",
+    "docs": "lerna run build-docs --stream",
+    "build-playground": "lerna run --scope @*/playground build --stream",
+    "release": "auto shipit"
   },
-  "dependencies": {
-    "@emotion/core": "10.0.7",
-    "theme-ui": "0.2.31"
+  "devDependencies": {
+    "auto": "^10.18.7",
+    "lerna": "^4.0.0",
+    "prettier": "^2.5.1"
+  },
+  "repository": "code-hike/codehike",
+  "author": "pomber <[email protected]>",
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ],
+    "onlyPublishWithReleaseLabel": true
   }
 }

packages/player/package.json → packages/classer/package.json

@@ -1,30 +1,29 @@
 {
-  "name": "@code-hike/player",
-  "version": "0.2.1",
-  "main": "dist/index.js",
+  "name": "@code-hike/classer",
+  "version": "0.3.0-next.0",
+  "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "ch-build",
-    "watch": "ch-build --watch"
+    "x": "x"
   },
   "devDependencies": {
-    "@code-hike/build": "0.0.1",
-    "@types/react": "^16.9.38",
-    "react": "^16.13.1"
+    "@code-hike/script": "0.0.1",
+    "@types/react": "^17.0.2",
+    "react": "^17.0.2"
   },
-  "dependencies": {},
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": "^16.8.3 || ^17 || ^18"
   },
-  "keywords": [
-    "react"
-  ],
   "homepage": "https://codehike.org",
   "repository": "code-hike/codehike",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Rodrigo Pombo",
   "license": "MIT",
   "funding": {
     "type": "opencollective",

packages/classer/readme.md

@@ -0,0 +1,106 @@
+> Classer is a tool from [Code Hike](https://codehike.org)
+
+A little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))
+
+You write your library code like this:
+
+```jsx
+// foo-library code
+import { useClasser } from "@code-hike/classer"
+
+export function Foo({ classes }) {
+  const c = useClasser("foo", classes)
+  return (
+    <div className={c("container")}>
+      <h1 className={c("title")}>Hello</h1>
+      <p className={c("description")}>World</p>
+      <img
+        className={c("img")}
+        src="https://placekitten.com/200/200"
+      />
+    </div>
+  )
+}
+```
+
+And the library consumers use it like this in their apps:
+
+```jsx
+import { Foo } from "foo-library"
+
+const classes = {
+  "foo-title": "my-app-blue",
+  "foo-img": "rounded-corners some-border",
+}
+
+function MyApp() {
+  return <Foo classes={classes} />
+}
+```
+
+`MyApp` renders this HTML:
+
+```html
+<div class="foo-container">
+  <h1 class="foo-title my-app-blue">Hello</h1>
+  <p class="foo-description">World</p>
+  <img
+    class="foo-img rounded-corners some-border"
+    src="https://placekitten.com/200/200"
+  />
+</div>
+```
+
+Examples:
+
+- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)
+- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)
+
+## Context
+
+You can also do this (to avoid passing `classes` to nested components):
+
+```jsx
+// foo-library code
+import {
+  useClasser,
+  ClasserProvider,
+} from "@code-hike/classer"
+
+export function Foo({ classes }) {
+  return (
+    <ClasserProvider classes={classes}>
+      <FirstChild />
+      <SecondChild />
+    </ClasserProvider>
+  )
+}
+
+function FirstChild() {
+  const c = useClasser("foo-first")
+  return <h1 className={c("title")}>Hi</h1>
+}
+
+function SecondChild() {
+  const c = useClasser("foo-second")
+  return <h1 className={c("title")}>Ho</h1>
+}
+```
+
+```jsx
+import { Foo } from "./foo-library"
+import styles from "./app.module.css"
+
+const classes = {
+  "foo-title": styles.myTitle,
+  "foo-img": styles.myImage,
+}
+
+function MyApp() {
+  return <Foo classes={classes} />
+}
+```
+
+## License
+
+MIT