afternoon2 · afternoon2 · Sep 8, 2024 · Aug 18, 2024 · Aug 18, 2024 · Aug 18, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,26 @@
+name: GH Pages
+on:
+  push:
+    branches: ["master"]
+  pull_request:
+    branches: ["master"]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.9.x"
+      - run: npm install --global yarn
+      - run: yarn install
+      - run: yarn run build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -2,16 +2,17 @@
 
 Create, save and download SVG gradients
 
-![screen](./demo/demo.gif)
+![screen](./demo/screenshot_v2.png)
 
 Create
+
 - using native web features
 - and/or using awesome Gregor Aisch's [chroma.js](https://github.com/gka/chroma.js) library
-- by applying blend modes
 
 Save as:
+
 - a preset object in local storage
-- a svg file on your computer
+- or download svg file on your computer
 
 ## Installation and starting in local environment
 

diff --git a/components.json b/components.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "state": "@/state"
+  }
+}
diff --git a/demo/demo.gif → demo/demo_v1.gif b/demo/demo.gif → demo/demo_v1.gif
diff --git a/demo/screenshot_v2.png b/demo/screenshot_v2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SVG Gradient Editor</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -4,40 +4,34 @@
   "private": true,
   "homepage": "https://afternoon2.github.io/svg-gradient-editor",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.8",
-    "@fortawesome/free-solid-svg-icons": "^5.5.0",
-    "@fortawesome/react-fontawesome": "^0.1.3",
-    "@types/jest": "^23.3.10",
-    "@types/node": "^10.12.11",
-    "@types/react": "^16.7.10",
-    "@types/react-dom": "^16.0.11",
-    "chroma-js": "^2.0.2",
-    "file-saver": "^2.0.0",
-    "gh-pages": "^2.0.1",
-    "immutability-helper": "^2.9.0",
-    "lodash.throttle": "^4.1.1",
-    "nanoid": "^2.0.0",
-    "polished": "^2.3.0",
-    "react": "16.7.0-alpha.0",
-    "react-color": "^2.17.0",
-    "react-dom": "16.7.0-alpha.0",
-    "react-numeric-input": "^2.2.3",
-    "react-redux": "6.0.0",
-    "react-router": "^4.3.1",
-    "react-scripts": "2.1.1",
-    "react-switch": "^3.0.4",
-    "redux": "^4.0.1",
-    "redux-devtools-extension": "^2.13.7",
-    "redux-thunk": "^2.3.0",
-    "styled-components": "^4.1.2",
-    "typescript": "^3.2.1"
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "chroma-js": "3.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "jotai": "^2.9.3",
+    "jotai-devtools": "^0.10.1",
+    "lucide-react": "^0.428.0",
+    "nanoid": "^5.0.7",
+    "react": "^18.3.1",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "predeploy": "npm run build",
+    "dev": "vite",
+    "build": "vite build",
+    "predeploy": "yarn build",
     "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
@@ -50,16 +44,19 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@types/chroma-js": "^1.4.1",
-    "@types/file-saver": "^2.0.0",
-    "@types/history": "^4.7.2",
-    "@types/lodash.throttle": "^4.1.4",
-    "@types/nanoid": "^1.2.0",
-    "@types/react-color": "^2.14.0",
-    "@types/react-numeric-input": "^2.2.3",
-    "@types/react-redux": "^6.0.10",
-    "@types/redux": "^3.6.0",
-    "@types/styled-components": "^4.1.2",
-    "typesafe-actions": "^2.0.4"
+    "@types/chroma-js": "^2.4.4",
+    "@types/nanoid": "^3.0.0",
+    "@types/node": "^22.4.0",
+    "@types/react": "^18.3.3",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.1"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-700.woff b/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-700.woff
diff --git a/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-700.woff2 b/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-700.woff2
diff --git a/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-regular.woff b/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-regular.woff
diff --git a/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-regular.woff2 b/public/fonts/fira-mono-v6-latin/fira-mono-v6-latin-regular.woff2
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-300.woff b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-300.woff
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-300.woff2 b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-300.woff2
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-700.woff b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-700.woff
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-700.woff2 b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-700.woff2
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-regular.woff b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-regular.woff
diff --git a/public/fonts/open-sans-v15-latin/open-sans-v15-latin-regular.woff2 b/public/fonts/open-sans-v15-latin/open-sans-v15-latin-regular.woff2
diff --git a/public/index.html b/public/index.html
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,49 +1,31 @@
-import * as React from 'react';
-import { Provider } from 'react-redux';
-import { store } from './store/store';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import {
-  faChevronLeft,
-  faList,
-  faPaintRoller,
-  faCaretDown,
-  faCaretUp,
-  faPlus,
-  faSearch,
-  faTrash,
-  faEdit,
-  faCode,
-  faSave,
-  faTimes,
-} from '@fortawesome/free-solid-svg-icons';
-import { StoreThemeProvider } from './components/layout/StoreThemeProvider';
-import { Editor } from './views/editor/Editor';
-import { GlobalStyles } from './components/layout/GlobalStyles';
-import { ThemeSwitch } from './components/layout/ThemeSwitch';
+import View from "@/components/app/view";
+import Artboard from "@/components/app/view/artboard";
+import Defs from "@/components/app/view/defs";
+import Figures from "@/components/app/view/figures";
+import SizeControls from "@/components/app/view/size-controls";
+import { Provider } from "jotai";
+import LayersPanel from "./components/app/layers-panel";
+import SelectionPanel from "./components/app/selection-panel";
+import { DevTools } from "jotai-devtools";
+import "jotai-devtools/styles.css";
+import ThemeListener from "@/components/app/theme-listener";
 
-library.add(faChevronLeft);
-library.add(faList);
-library.add(faPaintRoller);
-library.add(faCaretDown);
-library.add(faCaretUp);
-library.add(faPlus);
-library.add(faSearch);
-library.add(faTrash);
-library.add(faEdit);
-library.add(faCode);
-library.add(faSave);
-library.add(faTimes);
+function App() {
+  return (
+    <Provider>
+      <DevTools />
+      <View>
+        <LayersPanel />
+        <SelectionPanel />
+        <SizeControls />
+        <Artboard>
+          <Defs />
+          <Figures />
+        </Artboard>
+      </View>
+      <ThemeListener />
+    </Provider>
+  );
+}
 
-const App = () => (
-  <Provider store={store}>
-    <StoreThemeProvider>
-        <React.Fragment>
-          <Editor />
-          <ThemeSwitch />
-          <GlobalStyles />
-        </React.Fragment>
-    </StoreThemeProvider>
-  </Provider>
-);
-
-export { App };
+export default App;