Merge pull request #35 from tomkennedy22/try-next

Convert FacesJS site to React, add lots of Gallery functionality

.github/workflows/nodejs.yml

@@ -0,0 +1,22 @@
+name: Node CI
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: '20.x'
+        registry-url: <registry url>
+    - name: Install dependencies
+      run: yarn install
+    - name: Tests
+      run: yarn test
+    - name: Build
+      run: yarn build
+    - name: Build site
+      run: yarn build-site

.gitignore

@@ -1,7 +1,7 @@
 build
+build-site
 node_modules
-viewer/build
 src/svgs.ts
 src/svgs-index.ts
-test.html
 yarn-error.log
+*.DS_Store

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 4.1.0 (???)
+
+- #35 - @tomkennedy22 rewrote the editor UI and added a ton of functionality. The main new features are a gallery of faces showing previews of all features you can select, and the ability to export a face in SVG or PNG format.
+
 # 4.0.0 (2023-11-19)
 
 - Added `faceToSvgString` function to output faces as SVG strings, rather than only rendering to the DOM via `display`.

README.md

@@ -119,12 +119,12 @@ Generage a male white face and save it to test.svg:
 
 ## Development
 
-Running `yarn run start` will do a few things:
+Running `yarn run dev` will do a few things:
 
-1. Give you a URL to open the face viewer UI in your browser
+1. Give you a URL to open the face editor UI in your browser
 2. Watch for changes to the code
 3. Watch for changes to the facial feature SVG files
-4. Update the face viewer UI when any code or SVG changes
+4. Update the face editor UI when any code or SVG changes
 
 This lets you immediately see your changes as you work.
 
@@ -162,4 +162,4 @@ or CommonJS:
 
 ## Credits
 
-[dumbmatter](https://github.com/dumbmatter) wrote most of the code, [TravisJB89](https://github.com/TravisJB89) made most of the graphics, [Lia Cui](https://liacui.carrd.co/) made most of the female graphics, and [gurushida](https://github.com/gurushida) wrote the code to export faces as SVG strings.
+[dumbmatter](https://github.com/dumbmatter) wrote most of the code, [TravisJB89](https://github.com/TravisJB89) made most of the graphics, [Lia Cui](https://liacui.carrd.co/) made most of the female graphics, [gurushida](https://github.com/gurushida) wrote the code to export faces as SVG strings, and [tomkennedy22](https://github.com/tomkennedy22) wrote most of the editor UI code.

eslint.config.js

@@ -0,0 +1,24 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+// Merge the contents of eslint-config-prettier into every
+export default tseslint.config(
+  {
+    ignores: ["build/", "build-site/"],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        console: "readonly",
+      },
+    },
+    rules: {
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "no-prototype-builtins": "off",
+    },
+  },
+);

package.json

@@ -2,26 +2,6 @@
   "name": "facesjs",
   "version": "4.0.0",
   "description": "A JavaScript library for generating vector-based cartoon faces",
-  "exports": {
-    "import": {
-      "types": "./build/esmodules/index.d.ts",
-      "default": "./build/esmodules/index.js"
-    },
-    "require": {
-      "types": "./build/commonjs/index.d.ts",
-      "default": "./build/commonjs/index.js"
-    }
-  },
-  "main": "./build/commonjs/index.js",
-  "types": "./build/commonjs/index.d.ts",
-  "scripts": {
-    "build": "node tools/process-svgs.js && rm -rf build && yarn run build-commonjs && yarn run build-esmodules && yarn run tsc && yarn run tsc -p tsconfig-commonjs.json",
-    "build-commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions '.ts,.js' --out-dir build/commonjs",
-    "build-esmodules": "babel src --extensions '.ts,.js' --out-dir build/esmodules && echo '{\"type\": \"module\"}' > build/esmodules/package.json",
-    "prepare": "yarn run build && husky install",
-    "start": "node tools/server.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zengm-games/facesjs.git"
@@ -34,37 +14,80 @@
   "keywords": [
     "faces",
     "cartoon",
-    "mii"
+    "mii",
+    "avatar",
+    "svg",
+    "vector"
   ],
   "homepage": "https://zengm.com/facesjs/",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "test": "tsc --noEmit --emitDeclarationOnly false && eslint && vitest run",
+    "build": "node tools/process-svgs.js && rm -rf build && yarn run build-commonjs && yarn run build-esmodules && yarn run tsc -p tsconfig-esmodules.json && yarn run tsc -p tsconfig-commonjs.json",
+    "build-commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions '.ts,.js' --out-dir build/commonjs",
+    "build-esmodules": "babel src --extensions '.ts,.js' --out-dir build/esmodules && echo '{\"type\": \"module\"}' > build/esmodules/package.json",
+    "build-site": "vite build",
+    "prepare": "node tools/process-svgs.js && husky",
+    "prepublishOnly": "yarn test && yarn run build"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
-    "@babel/preset-typescript": "^7.21.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@types/node": "^20.8.6",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
+    "@eslint/js": "^9.1.1",
+    "@nextui-org/react": "^2.2.10",
+    "@phosphor-icons/react": "^2.1.4",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/node": "^20.12.3",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "autoprefixer": "^10.4.19",
     "babel-plugin-add-module-exports": "^1.0.4",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "cross-env": "^7.0.3",
-    "husky": "^8.0.3",
-    "lint-staged": ">=10",
-    "prettier": "^3.1.0",
-    "rollup": "^4.5.0",
-    "svgo": "^3.0.2",
-    "typescript": "^5.2.2",
-    "ws": "^8.12.1"
+    "eslint": "^9.1.0",
+    "framer-motion": "^11.0.25",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.8.2",
+    "svgo": "^3.2.0",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.0",
+    "vite": "^5.2.7",
+    "vitest": "^1.5.0",
+    "zustand": "^4.5.2"
   },
-  "files": [
-    "build"
-  ],
   "dependencies": {
     "svg-path-bbox": "1.2.5"
   },
+  "exports": {
+    "import": {
+      "types": "./build/esmodules/index.d.ts",
+      "default": "./build/esmodules/index.js"
+    },
+    "require": {
+      "types": "./build/commonjs/index.d.ts",
+      "default": "./build/commonjs/index.js"
+    }
+  },
+  "main": "./build/commonjs/index.js",
+  "types": "./build/commonjs/index.d.ts",
+  "files": [
+    "build"
+  ],
   "bin": "build/esmodules/cli.js",
   "lint-staged": {
-    "*.{js,css,md}": "prettier --write"
+    "*.{js,cjs,mjs,jsx,json,scss,ts,tsx}": "prettier --write"
   },
   "sideEffects": false
 }

postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}