-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
create-mechanic improvements #175
Open
fdoflorenzano
wants to merge
8
commits into
main
Choose a base branch
from
create-include-inputs
base: main
Could not load branches
Branch not found: {{ refName }}
Could not load tags
Nothing to show
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+939
−31
Open
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
2d1ab7d
feat(create-mechanic): create-mechanic supports creating design funct…
fdoflorenzano 145ba1e
feat(create-mechanic): create-mechanic also adds gitignore to new pro…
fdoflorenzano 14a0f2c
feat(create-mechanic): create-mechanic will try to initializing a git…
fdoflorenzano 8bd4c19
feat(create-mechanic): create-mechanic lists dependencies to install
fdoflorenzano 8a77762
fix(create-mechanic): adds some break lines to make cli more readable
fdoflorenzano f7b5042
Merge branch 'main' into create-include-inputs
fdoflorenzano 77174d3
docs(create-mechanic): updates changelog
fdoflorenzano 3c99e16
fix(create-mechanic): removes unused files and declarations, and form…
fdoflorenzano File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
5 changes: 5 additions & 0 deletions
5
packages/create-mechanic/function-examples/adaptive-grid/dependencies.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"dependencies": { | ||
"@mechanic-design/engine-react": "^2.0.0-beta.10" | ||
} | ||
} |
File renamed without changes.
Binary file added
BIN
+26.3 KB
packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf
Binary file not shown.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
23 changes: 23 additions & 0 deletions
23
packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
/> | ||
)} | ||
</> | ||
); | ||
}; |
69 changes: 69 additions & 0 deletions
69
packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
/> | ||
</> | ||
); | ||
}; |
39 changes: 39 additions & 0 deletions
39
packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should probably replaced by an open source font.
Hate to recommend poppins, but I think we can get away visually with replacing it with Poppins 😊
Other alternatives could be
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh yah tots agree. I remember I was only using Futura, because that was what was used on the original logo. But we should definitely replace it by an open source font.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry that this took so long for me to get back to! But I finally did!
Great catch @lucasdinonolte! Funnily enough, the one example selected to add here didn't actually use Futura. So for now it's enough to just remove the file and unused declaration.
Tho in the near future where we do add the other examples, we would need to replace Futura. @munusshih Do you have any font replacement preference for it? Lucas linked to some nice alternatives.