fix(create-mechanic): removes unused files and declarations, and form…

…ats files
designsystemsinternational · Jun 23, 2023 · 3c99e16 · 3c99e16
1 parent 77174d3
commit 3c99e16
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 98 deletions.
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf b/packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js
@@ -4,7 +4,7 @@ export const Column = ({ width, height, x, y, showGrid, children }) => {
   return (
     <>
       <foreignObject width={width} height={height} x={x} y={y}>
-        <div className={"column"}>{children}</div>
+        <div className="column">{children}</div>
       </foreignObject>
 
       {showGrid && (

diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js
@@ -11,7 +11,7 @@ export const Image = ({
   height,
   gutterRatio,
   filterOpacity,
-  gridColor,
+  gridColor
 }) => {
   const imageHref = image ? (href ? href : "") : defaultUrl;
 

diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js b/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js
@@ -10,7 +10,7 @@ export const usePotentialRandomValue = (
   return value.current;
 };
 
-export const useImageHref = (image) => {
+export const useImageHref = image => {
   const [href, setHref] = useState("");
 
   useEffect(() => {

diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/index.js b/packages/create-mechanic/function-examples/adaptive-grid/function/index.js
@@ -7,7 +7,7 @@ import {
   getRandomInt,
   getRandomSign,
   getRandomColor,
-  brightnessByColor,
+  brightnessByColor
 } from "./utils";
 
 import "./styles.css";
@@ -27,7 +27,7 @@ export const handler = ({ inputs, mechanic }) => {
     title,
     image,
     filterOpacity,
-    titleSizeAdjust,
+    titleSizeAdjust
   } = inputs;
 
   const canvasRatio = width / height;
@@ -101,12 +101,12 @@ export const handler = ({ inputs, mechanic }) => {
     canvasRatio >= 0.75
       ? twoWidth + gutterRatio
       : twoWidth + gutterRatio * 0.5 + borderRatio,
-    threeWidth + borderRatio + borderRatio * 0.5,
+    threeWidth + borderRatio + borderRatio * 0.5
   ];
   const chooseX = [
     0,
     borderRatio + gutterRatio * 0.5 + oneWidth,
-    borderRatio + gutterRatio * 1.5 + oneWidth + twoWidth,
+    borderRatio + gutterRatio * 1.5 + oneWidth + twoWidth
   ];
   const cropWidth = chooseW[imageColumn - 1];
   const cropX = chooseX[imageColumn - 1];
@@ -134,7 +134,7 @@ export const handler = ({ inputs, mechanic }) => {
     fontFamily: "Object Sans",
     whiteSpace: "pre-wrap",
     overflowWrap: "anywhere",
-    hyphens: "auto",
+    hyphens: "auto"
   };
 
   const textStyle = {
@@ -143,7 +143,7 @@ export const handler = ({ inputs, mechanic }) => {
     fontFamily: "Object Sans",
     whiteSpace: "pre-wrap",
     overflowWrap: "anywhere",
-    hyphens: "auto",
+    hyphens: "auto"
   };
 
   const href = useImageHref(image);
@@ -249,11 +249,11 @@ export const handler = ({ inputs, mechanic }) => {
 export const inputs = {
   width: {
     type: "number",
-    default: 1000,
+    default: 1000
   },
   height: {
     type: "number",
-    default: 1000,
+    default: 1000
   },
   randomRatio: {
     type: "groupToggle",
@@ -266,49 +266,49 @@ export const inputs = {
         default: 2,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       columnTwoRatio: {
         type: "number",
         slider: true,
         default: 2,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       columnThreeRatio: {
         type: "number",
         slider: true,
         default: 1,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       border: {
         type: "number",
         slider: true,
         default: 15,
         min: 1,
         max: 100,
-        step: 1,
+        step: 1
       },
       gutter: {
         type: "number",
         slider: true,
         default: 15,
         min: 1,
         max: 100,
-        step: 1,
+        step: 1
       },
       imageColumn: {
         type: "number",
         slider: true,
         default: 1,
         min: 1,
         max: 3,
-        step: 1,
-      },
-    },
+        step: 1
+      }
+    }
   },
   randomColor: {
     type: "groupToggle",
@@ -318,94 +318,94 @@ export const inputs = {
       backgroundColor: {
         type: "color",
         model: "hex",
-        default: "#000000",
+        default: "#000000"
       },
       textColor: {
         type: "color",
         model: "hex",
-        default: "#ffffff",
+        default: "#ffffff"
       },
       titleColor: {
         type: "color",
         model: "hex",
-        default: "#E94825",
-      },
-    },
+        default: "#E94825"
+      }
+    }
   },
   image: {
     type: "image",
-    multiple: false,
+    multiple: false
   },
   filterOpacity: {
     type: "number",
     default: 20,
     min: 0,
     max: 100,
     step: 1,
-    slider: true,
+    slider: true
   },
   textSize: {
     type: "number",
-    default: 20,
+    default: 20
   },
   titleSizeAdjust: {
     type: "number",
     slider: true,
     default: 0,
     min: -5,
     max: 15,
-    step: 1,
+    step: 1
   },
   title: {
     type: "text",
-    default: "Mechanic",
+    default: "Mechanic"
   },
   textOne: {
     type: "text",
-    default: "MUNUS SHIH",
+    default: "MUNUS SHIH"
   },
   textTwo: {
     type: "text",
-    default: "MECHANIC.DESIGN INFO@MECHANIC.DESIGN",
+    default: "MECHANIC.DESIGN INFO@MECHANIC.DESIGN"
   },
   textThree: {
     type: "text",
-    default: "@MECHANIC 781 12TH ST, 8A, NEW YORK, NY 10003",
+    default: "@MECHANIC 781 12TH ST, 8A, NEW YORK, NY 10003"
   },
   textFour: {
     type: "text",
-    default: "MUNUS@MECHANIC.DESIGN",
+    default: "MUNUS@MECHANIC.DESIGN"
   },
   grid: {
     type: "boolean",
-    default: false,
-  },
+    default: false
+  }
 };
 
 export const presets = {
   "Instagram Story": {
     width: 1080,
-    height: 1920,
+    height: 1920
   },
   "Instagram Post": {
     width: 1080,
-    height: 1080,
+    height: 1080
   },
   Poster: {
     width: 812,
-    height: 1148,
+    height: 1148
   },
   Banner: {
     width: 1640,
-    height: 624,
+    height: 624
   },
   Ticket: {
     width: 394,
-    height: 1126,
-  },
+    height: 1126
+  }
 };
 
 export const settings = {
   engine: require("@mechanic-design/engine-react"),
-  showMultipleExports: true,
+  showMultipleExports: true
 };
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css b/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css
@@ -10,73 +10,54 @@
  * or check ./assets/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf
  * Alex Slobzheninov https://www.behance.net/slobzheninov
  * ---------------------------------------------------------------------------
- */
+*/
 
 @font-face {
-    font-family: "Futura";
-    src: url("./assets/FuturaStd-Bold.otf") format("opentype");
+  font-family: "Object Sans";
+  src: url("./assets/PPObjectSans-Regular.otf") format("opentype");
 }
 
 @font-face {
-    font-family: "Object Sans";
-    src: url("./assets/PPObjectSans-Regular.otf") format("opentype");
+  font-family: "Object Sans Italic";
+  src: url("./assets/PPObjectSans-Slanted.otf") format("opentype");
+  font-style: italic;
 }
 
 @font-face {
-    font-family: "Object Sans Italic";
-    src: url("./assets/PPObjectSans-Slanted.otf") format("opentype");
-    font-style: italic;
+  font-family: "Object Sans Heavy";
+  src: url("./assets/PPObjectSans-Heavy.otf") format("opentype");
+  font-weight: bold;
 }
 
 @font-face {
-    font-family: "Object Sans Heavy";
-    src: url("./assets/PPObjectSans-Heavy.otf") format("opentype");
-    font-weight: bold;
+  font-family: "Object Sans Slanted";
+  src: url("./assets/PPObjectSans-HeavySlanted.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
 }
 
-@font-face {
-    font-family: "Object Sans Slanted";
-    src: url("./assets/PPObjectSans-HeavySlanted.otf") format("opentype");
-    font-weight: bold;
-    font-style: italic;
-}
-
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.gutter{
-    background:white;
-}
-
-.darkGrid {
-    outline: #000 solid 1px;
-    outline-offset: -1px;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
-/* 
-.lightGrid {
-    outline: #fff solid 1px;
-    outline-offset: -1px;
-} */
 
-.column{
-    height: 100%;
-    position: relative;
-    padding: 10px;
+.column {
+  height: 100%;
+  position: relative;
+  padding: 10px;
 }
 
 .top {
-    position: absolute;
-    top: 0;
-    padding-top: 10px;
-    padding-right: 10px;
+  position: absolute;
+  top: 0;
+  padding-top: 10px;
+  padding-right: 10px;
 }
 
 .bottom {
-    position: absolute;
-    bottom: 0;
-    padding-bottom: 10px;
-    padding-right: 10px;
-}
+  position: absolute;
+  bottom: 0;
+  padding-bottom: 10px;
+  padding-right: 10px;
+}