Moved over circles project

package.json

@@ -26,6 +26,7 @@
     "caniuse-lite": "^1.0.30000697",
     "classnames": "^2.2.5",
     "d3-scale": "^3.3.0",
+    "file-saver": "^2.0.5",
     "firebase": "^7.14.0",
     "firebase-tools": "^7.14.0",
     "framer": "^1.1.7",
@@ -43,20 +44,22 @@
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-html-externals": "^0.2.0",
     "postcss-preset-env": "^6.7.0",
-    "preshape": "^12.0.2",
+    "preshape": "^13.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.0.0-beta.2 ",
     "react-router-dom": "^6.2.2",
     "react-snap": "^1.23.0",
     "regl": "^2.0.1",
     "regression": "^2.0.1",
-    "sat": "^0.8.0"
+    "sat": "^0.8.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@types/bezier-easing": "*",
     "@types/classnames": "*",
     "@types/d3-scale": "*",
+    "@types/file-saver": "*",
     "@types/gl-matrix": "*",
     "@types/lodash.flatten": "*",
     "@types/lodash.floor": "*",
@@ -69,6 +72,7 @@
     "@types/react-router-dom": "*",
     "@types/regression": "^2.0.2",
     "@types/sat": "*",
+    "@types/uuid": "*",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "eslint": "^8.10.0",

src/components/Projects/CircleArt/CircleArt.tsx

@@ -0,0 +1,34 @@
+import { Box, useMatchMedia } from 'preshape';
+import React, { useState } from 'react';
+import data from '../../../data';
+import ProjectPage from '../../ProjectPage/ProjectPage';
+import Editor from './Editor/Editor';
+import Gallery from './Gallery/Gallery';
+import configurations from './Gallery/configurations';
+
+const CircleArt = () => {
+  const match = useMatchMedia(['1000px']);
+  const [circleData, setCircleData] = useState(configurations[0]);
+
+  return (
+    <ProjectPage {...data.projects.CircleArt}>
+      <Box flex={match('1000px') ? 'horizontal' : 'vertical'} gap="x3" grow>
+        <Box
+          backgroundColor="background-shade-2"
+          basis="0"
+          borderRadius="x3"
+          flex="vertical"
+          grow
+        >
+          <Editor data={circleData.config} />
+        </Box>
+
+        <Box basis="0" maxHeight="100%">
+          <Gallery onSelect={setCircleData} />
+        </Box>
+      </Box>
+    </ProjectPage>
+  );
+};
+
+export default CircleArt;

src/components/Projects/CircleArt/Editor/Editor.css

@@ -0,0 +1,22 @@
+.CircleArt__circle,
+.CircleArt__intersection {
+  stroke-width: 1;
+  transition-property: fill, stroke, stroke-width;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.CircleArt__circle--active {
+  stroke: var(--color-accent-shade-4);
+  stroke-width: 2;
+}
+
+.CircleArt--mode-draw {
+  & .CircleArt__circle {
+    fill: transparent;
+
+    &:hover {
+      stroke: var(--color-accent-shade-4);
+    }
+  }
+}