gridaco / code Goto Github PK
View Code? Open in Web Editor NEWDesign to Code Engine
Home Page: https://grida.co/code
License: Apache License 2.0
Design to Code Engine
Home Page: https://grida.co/code
License: Apache License 2.0
(design from 100 days of ui challenge)
Env
It's rare to have a dedicated constraints on image, but for scenario like below, we need to specify the image's object-position so that targeted inner graphic content can be always visible.
to best match the "visual" factor of testing, we might need other option than jest
wip - searching for better solutions.
The new version of autolayout has been for a few weeks. learn more here
This enables us to make layout-perfect interpreting logic wihout infering from context, but as-is designed by designers.
We will now support plain html + css for starters, interpreting auto layout to flexbox properties.
We might also need global interpreter (reflect layouts) in which for converting layout configurations to flutter, web, and many other platforms in an intuitive way, through the unified logic gate.
Will not have much of a usecase, but would be a fun and inspiring approack for building GUIs for native python interface.
This feature is for 3rd party apps that only require snippet-level of style code. e.g. the images below
Gradients is often use as non variable, which is mostly used as highlight visual effects. - which also gets changed often to get the maximum blending visual. There are also cases gradient is almost constant, i.e. on a button, or when used as a branding identity.
Extracting non-registered gradient style as variable, making accessible to developers will have lot of benefits.
/* e.g. */
:root {
--one-shot-linear-gradient-tangerine-to-yellow-45: linear-gradient(#e66465, #9198e5);
}
// 1. using ready to use css snippet
const __one_shot_linear_gradient_tangerine_to_yellow_45 = `linear-gradient(#e66465, #9198e5)`
const GradientBG = styled.div`
background: ${__one_shot_linear_gradient_tangerine_to_yellow_45};
`
// 2. using custom injector
const __one_shot_linear_gradient_tangerine_to_yellow_45 = new LinearGradient("#e66465", "#9198e5");
const GradientBG = styled.div`
background: ${css.lineargradient(__one_shot_linear_gradient_tangerine_to_yellow_45)};
`
This also applies to colors, long texts, spacing rules. While we are starting with gradient.
Site reference: Stripe landing page gradient animation is done by html5 canvas (to boost the performance)
rich text support with multiple colors and styles.
currently rich text is returned as black text.
Prettier for JS/TS, Dart format for dart, requires different modules, which can bring the default app size to increase. this formatter will be provided by remote api, but also can provide custom static formatter via local execution method.
example long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a. Vestibulum
cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam convallis, luctus
purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur aliquam arcu.
Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper sapien. Nunc
fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae luctus quam.
Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat, lacus purus
viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec consectetur
libero ex, eu iaculis ex semper vitae.
rather than
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a. Vestibulum
cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam convallis, luctus
purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur aliquam arcu.
Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper sapien. Nunc
fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae luctus quam.
Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat, lacus purus
viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec consectetur
libero ex, eu iaculis ex semper vitae.</Text>
would be better
const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus feugiat erat, vel molestie justo congue a.
Vestibulum cursus, dui eu mattis ultricies, lacus diam pulvinar nunc, ac commodo leo enim tincidunt ligula. Cras id quam
convallis, luctus purus sed, facilisis velit. Donec non dignissim tellus. Cras magna odio, ullamcorper sed hendrerit a, efficitur
aliquam arcu. Fusce congue malesuada iaculis. Nullam in sem sem. Nunc sed tellus feugiat, scelerisque tellus et, ullamcorper
sapien. Nunc fringilla luctus tristique. Sed viverra ornare dui, id vehicula leo feugiat scelerisque. Cras quis egestas leo, vitae
luctus quam. Mauris vulputate vulputate justo, vel commodo eros vestibulum vel. Duis cursus, ante id malesuada placerat,
lacus purus viverra libero, ut ornare ante dui ac purus. Cras congue leo quis felis bibendum, at finibus ex egestas. Donec
consectetur libero ex, eu iaculis ex semper vitae.`
<Text>{ text }</Text>
It mostly prevented by explicit logic gate, but sometimes text with undefined text value happens.
and the flutter-builder prevents this, since flutter does not accepts empty text also.
This first happened while converting figma to flutter with this node
Add google fonts link import to web platforms, if available.
<!-- e.g. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
References
CLI & API Capability
Related - vuejs/core#4633
name | react | vue | svelte | vanilla | supported? |
---|---|---|---|---|---|
autofocus | autoFocus |
autofocus |
autofocus |
✅ | |
autocomplete | autoComplete |
aria-autocomplete (?) |
autocomplete |
❌ (dprecated) | |
disabled | disabled |
disabled |
disabled |
✅ | |
form (#1) | form |
form |
form |
✅ | |
formaction | formAction |
formaction |
formaction |
✅ | |
formenctype | formEncType |
formenctype |
formenctype |
✅ | |
formmethod | formMethod |
formmethod |
formmethod |
✅ | |
formnovalidate | formNoValidate |
formnovalidate |
formnovalidate |
✅ | |
name | name |
name |
name |
✅ | |
type | type |
type |
type |
✅ | |
value | value |
value |
value |
✅ |
// from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean | undefined;
disabled?: boolean | undefined;
form?: string | undefined;
formAction?: string | undefined;
formEncType?: string | undefined;
formMethod?: string | undefined;
formNoValidate?: boolean | undefined;
formTarget?: string | undefined;
name?: string | undefined;
type?: 'submit' | 'reset' | 'button' | undefined;
value?: string | ReadonlyArray<string> | number | undefined;
}
<button
autofocus
aria-autocomplete=""
disabled="false"
form=""
formaction=""
formenctype=""
formmethod=""
formnovalidate
name=""
type=""
value=""
>
Vue Button attributes demo
</button>
backdrop-fliter
is not supported in firefox
, background-blur
does not work
in firefox ❌
Converting original data to reflect format, detecting elements and converting it to code is a heavy work.
We need cache of each process and need to provide it as a option for user to enable use-cache option.
Generation of documentation outside of the executable code (comment), A README.md
or component.stories.mdx
With preview included will help developers to manage their project structure & component hierarchy.
References
There are two types of comment,
(suggestion) The syntax might look like,
import React from "react";
/**
* ---------
* https://code.grida.co/t/:p/:f/:id
* [click to open design](https://code.grida.co/t/:p/:f/?redirect=design-origin)
* [share this component](https://code.grida.co/t/:p/:f/?redirect=share-me)
* (do not modify)
* ---------
*/
function MyComponent(){
return (
<Wrapper>
My component
</Wrapper>
);
}
/**
* ---------
* https://code.grida.co/t/:p/:f/:id
* (do not modify)
* ---------
*/
const Wrapper = styled.div`
height: 100vh;
width: 100vw;
`;
Support - https://tailwindcss.com/ for web (css) platforms
tailwind.config.js
tailwind css color references can be found here. (naming) https://tailwindcss.com/docs/customizing-colors
e.g. usage (background)
env
reporduce
svg with linear gradient fill
Blur for text in figma is not working properly.
right: in figma, left: in chrome(web)
The reason is that the method of applying blur to text is different from other methods.
In general, you need to do something other than css filter
, backdrop-filter
, or blur()
.
// const
const Container = () => { return <></>; }
// function
function Container () { return <></>; }
subset of react, with different imports handling
react vs preact - the differences
References
Flutter support has different qualifications. Since it was supported before any others, we shall focus on supporting all previous highlight features.
Theme.of(context).textStyle.style
supportColors.name
Named color supportFlatButton
supportCenter
supportLinearGradient
supportIcons.icon_name
supportStrutStyle.height
support(update 21.10.06)
background
or background-image
<GroupWrapper>
// has size // has not size
<Rectangle1 />
<Rectangle2 />
</GroupWrapper>
box-shadow: -7px -9px 3px rgba(98, 71, 20, 0.25), inset 9px 9px 12px rgba(40, 22, 4, 0.25);
mix-blend-mode: color-dodge;
shapes/ellipse/Ellipse 11
)shapes/ellipse/Ellipse 15
)shapes/ellipse/Ellipse 16
)<hr />
or
width: 837px;
height: 0px;
border: 1px solid #000000;
box-shadow: 0px 4px 24px rgba(255, 0, 0, 0.25), 0px 4px 4px rgba(255, 153, 0, 0.25);
Thanks what i meant was to make a UI builder app that is simpler and inspired by WINDOWS.forms builder but for mobiles
Gradient in figma is bit different on render-styling (css) If you have LinearGradient - [(black 1) at 0%, (red 0) at 100%]
Representation in css would be linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,0,0,0) 100%);
, you might think. But this is incorrect.
To match a visually identical gradient, you need to have multiple gradient per colors. (Even if it is in a single fill item)
.single-fill-item {
background: linear-gradient(90deg, black, transparent), linear-gradient(90deg, rgba(255, 0, 0, 1), transparent);
}
This is a technical issue, we will add support for complex gradient in the future.
Since perfectly providing a visually identical style code is redundant, we provide a fallback on complex gradient. (svg on web, png(optionally) on flutter)
Fallback cases
Explicit overflow:hidden
by user
Although, we CAN'T always set overflow: hidden for clip content layout. this is because overflow property is also used for specifying scroll behavior on other logic gate (not sure with the execution order or importance between those two.)
The non-conflicting way is to use explicit clip-path
just to specify the clipping behavior, eliminating possibility of logic conflict with scroll
The easy way to do this is using shared component as instance, redrawing layout with switch-case like tree.
More mature & complex way to do is assigning layers id, calculating and generalizing their transforms.
Support line node
on figma as Divider if within divider detection. under (packages/detection/divider)
Related: gridaco/assistant#17
Reference
https://github.com/colorjs/color-namer (not sure if we'll use this. comment if better package available.)
Window message transporting is required for injecting custom vanilla html with interaction logics
E.g layer selection
flutter does not support built in textVerticalAlign support for widget "Text", but we can wrap with sizedbox and align. for to do this. we'll have to inspect parent of the text. But more importantly, the main problem is that we cannot know if text is vertically aligned and, + fitted to the box, if we can't know this, only option is to wrap all text -- which will get our generated code supre drity.
This is a thread for tracking package size & optimization strategy.
Current total packaging of @designto/code
takes up 1.5mb
(not accurate)
Our goal is to keep it under 1mb
for in-browser & local use
Current output
const RootWrapperCheckingExistingComponents = styled.span`
color: rgba(193, 193, 193, 1);
text-overflow: ellipsis;
font-size: 16px;
font-family: Helvetica Neue;
font-weight: 400;
text-align: left;
min-height: 19px;
width: 265px;
`;
font-family: Helvetica Neue;
should be
font-family: "Helvetica Neue";
Expected - the result on preview to have exact text "> Select Workspace"
rather than jsx version of it - "{"> Select Workspace"}"
Text will special characters will be formatted via jsx text formatter, but since jsx text formatter is for react-only, for vue, html, and other native web-standard frameworks shall have a different text formatter.
e.g. vanilla-text-formatter
or html-text-formatter
This shall be first implemented via CoLI
Test case - here
Not all browsers have this same ua stylesheet, so we'll need some extra configuration of ua override / handling for web-css
Support detected named material icons support with font
https://developers.google.com/fonts/docs/material_icons
<span class="material-icons md-24">face</span>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.