create-mechanic improvements

packages/create-mechanic/CHANGELOG.md

@@ -7,9 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Ability to copy template or examples that use custom inputs.
+- New Adaptive Grid design function (by @munusshih) added to examples
+- Adds base .gitignore to new projects
+- Tries to initialize a git repository for new projects
+- Right before trying to install dependencies of new project, it will list out which dependencies are being installed
+
 ### Fixed
 
 - Missing line break was added finalizing creating a DF.
+- Adds some line breaks across the CLI logs for reading room.
 
 ## 2.0.0-beta.10 - 2023-02-10
 

packages/create-mechanic/function-examples/adaptive-grid/dependencies.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@mechanic-design/engine-react": "^2.0.0-beta.10"
+  }
+}

packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const Column = ({ width, height, x, y, showGrid, children }) => {
+  return (
+    <>
+      <foreignObject width={width} height={height} x={x} y={y}>
+        <div className="column">{children}</div>
+      </foreignObject>
+
+      {showGrid && (
+        <rect
+          width={width}
+          height={height}
+          x={x}
+          y={y}
+          fill="none"
+          stroke="white"
+          strokeDasharray="10"
+        />
+      )}
+    </>
+  );
+};

packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js

@@ -0,0 +1,69 @@
+import React from "react";
+
+const defaultUrl =
+  "https://images.unsplash.com/photo-1568214697537-ace27ffd6cf3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80";
+
+export const Image = ({
+  image,
+  href,
+  x,
+  width,
+  height,
+  gutterRatio,
+  filterOpacity,
+  gridColor
+}) => {
+  const imageHref = image ? (href ? href : "") : defaultUrl;
+
+  return (
+    <>
+      <defs>
+        {/* mask to crop the image into rectangle */}
+        <mask id="image-mask">
+          <rect fill="#fff" width={width} height={height} x={x} />
+        </mask>
+      </defs>
+
+      {/* the image that will be cropped */}
+      <image
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMid slice"
+        mask="url(#image-mask)"
+        href={imageHref}
+      />
+
+      {/* filter applied over image */}
+      <rect
+        fill="#000"
+        width={width}
+        height={height}
+        x={x}
+        style={{ mixBlendMode: "multiply" }}
+        opacity={filterOpacity / 100}
+      />
+
+      {/* lines surrounding image */}
+
+      <line
+        strokeWidth="2"
+        opacity="0.7"
+        stroke={gridColor}
+        x1={x - gutterRatio / 2}
+        x2={x - gutterRatio / 2}
+        y1={0}
+        y2={height}
+      />
+
+      <line
+        strokeWidth="2"
+        opacity="0.7"
+        stroke={gridColor}
+        x1={x + width + gutterRatio / 2}
+        x2={x + width + gutterRatio / 2}
+        y1={0}
+        y2={height}
+      />
+    </>
+  );
+};

packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js

@@ -0,0 +1,39 @@
+import { useEffect, useState, useRef } from "react";
+
+export const usePotentialRandomValue = (
+  randomGenerator,
+  fixedFallback,
+  isRandom
+) => {
+  const randomValue = randomGenerator();
+  const value = useRef(isRandom ? randomValue : fixedFallback);
+  return value.current;
+};
+
+export const useImageHref = image => {
+  const [href, setHref] = useState("");
+
+  useEffect(() => {
+    let reader;
+    if (image) {
+      reader = new FileReader();
+
+      reader.readAsDataURL(image);
+
+      reader.onload = function () {
+        setHref(reader.result);
+      };
+
+      reader.onerror = function () {
+        console.error(reader.error);
+      };
+    }
+    return () => {
+      if (reader) {
+        reader.abort();
+      }
+    };
+  }, [image]);
+
+  return href;
+};