diff --git a/CHANGELOG.md b/CHANGELOG.md index d2b47374..bb962612 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ > implemented, and next-releasing features - [toolbox/meta-editor] Meta data editor of root (file)'s metadata single property editor available for developer experience. (you can manually set files property to mock or give context to assistant which this design system holds as a data. e.g. - uses-designsystem=material-design) -- [linter/textstyles] `MissingTextStyleWarning` : New Linter added. this lints the design warning the plain text with no textstyle specified. [PR](https://github.com/bridgedxyz/assistant/pull/80) +- [linter/textstyles] `MissingTextStyleWarning`: New Linter added. this lints the design warning the plain text with no textstyle specified. [PR](https://github.com/bridgedxyz/assistant/pull/80) - [assistant/ux] Resizing added. Now you can resize the plugin as you want. starting on figma platform. ([#107](https://github.com/bridgedxyz/assistant/pull/107)) ### Will be added @@ -30,14 +30,14 @@ ## [2022.4.0.3] - 2022-04-29 -- New feature : Publish as website +- New feature: Publish as website ## [2022.4.0.2] - 2022-04-28 - PR: https://github.com/gridaco/assistant/pull/197 - Add “Open in Grida” action in design/preview screen like as in code/preview screen. -- update design preview screen to show preview in a more isolated way - (hide tab bars while previewing) -- update filekey input to be more visible +- Update design preview screen to show preview in a more isolated way - (hide tab bars while previewing) +- Update filekey input to be more visible ## [2022.4.0.1] - 2022-04-08 @@ -47,7 +47,7 @@ ## [2022.3.4] - 2022-03-30 -- fix incomplete autolayout flex mapping +- Fix incomplete autolayout flex mapping - D2C Module Update - with embeddings support - Instant prototyping with instant previews of components and embeddings (checkbox, button, progress, slider, youtube, google maps and more) @@ -85,12 +85,12 @@ [PR#159](https://github.com/gridaco/assistant/pull/159) - Instant responsive preview - a realtime application from design, seriously, with a single click. -- adoped monaco editor -- semi-stable react support with styled-component -- minimalistic navigation with hide animation on focus mode +- Adopted Monaco Editor +- Semi-stable react support with styled-component +- Minimalistic navigation with hide animation on focus mode - (fix) wrong cache loading issue on boot -- prevent thread lock on big screen -- prevent thread lock on too many remote component screen +- Prevent thread lock on big screen +- Prevent thread lock on too many remote component screen ### [2021.9.1f1] - 2021-10-26 @@ -125,16 +125,16 @@ > cors issue hot fix. cors anywhere usage has been replaced with cors.bridged.cc -- [fix] cors related requests back online +- [fix] CORS related requests back online ## [2021.0.1f1] - 2021-1-31 > Update focused on UI improvement of icon list, Ant Icon, not just Material Icon, and search function has been changed in detail for Icon. -- [ui/icons] design/icon util screen design updated -- [ui/icons] icon variant, size filter added -- [ui/icons] ant-design-icons added as a default source -- [ui/icons] infinite scrolling of icons +- [ui/icons] `design/icon` util screen design updated +- [ui/icons] Icon variant, size filter added +- [ui/icons] `ant-design-icons` added as a default source +- [ui/icons] Infinite scrolling of icons - [ui/icons] Icons Drag & Drop Loading - Now you can import icons from assistant via Drag & Drop. ## [2021.0.1] - 2021-1-6 @@ -143,26 +143,26 @@ - [interpreter/text] Dart String escape optimized, and fixed with execution order - [packages/detection] Icon detection - determines if selected node should be considered as an icon or not. -- [packages/detection] chip detection - determines if selected node should be considered as an chip or not. -- [packages/detection] button detection - determines if selected node should be considered as an button or not. +- [packages/detection] Chip detection - determines if selected node should be considered as an chip or not. +- [packages/detection] Button detection - determines if selected node should be considered as an button or not. - [ui/tabs] New tabs are added (design, tools, contents) -- [ui/design] assistant design updated with clean and clear black theme. +- [ui/design] Assistant design updated with clean and clear black theme. ## [0.1.3] - 2020-11-08 > Update focused on quicklook and resolving flutter compile issues. - 3 major error causing building-logic is fixed. -- now there are know known compile issues. -- stack runtime error resolved. -- quicklook has major performance boost, up to 5 times faster loading time. -- dart character escape is implemented +- Now there are know known compile issues. +- Stack runtime error resolved. +- Quicklook has major performance boost, up to 5 times faster loading time. +- Dart character escape is implemented ## [0.1.2] - 2020-10-30 > Mainly update of quicklook feature. Make your design compiled within few seconds. -- [packages/design-sdk] using design SDK for better capability. +- [packages/design-sdk] Using design SDK for better capability. [features/quicklook] Newly added. ## [0.1.0] - 2020-10-23 (ETA) @@ -171,17 +171,17 @@ Initial release of Bridged's figma plugin (a.k.a assistant) > 0.1.0 focuses on flutter code generation feature. -- Figma plugin ui built with react + plain css -- Supported : Figma / Flutter +- Figma plugin UI built with React + plain CSS +- Supported: Figma / Flutter - Flutter code exporter built with [flutter-builder](https://github.com/bridgedxyz/flutter-builder) ### Info [v0.1.0] -**name** : Bridged (design to flutter) +**name**: Bridged (design to flutter) -**description** : +**description**: Bridged's assistant plugin that generates usable & readable flutter code for production. Run this plugin, Select any design of yours, It will generate ready-to-use formatted native flutter code for you. @@ -189,7 +189,7 @@ _Notice_ No matter how big and complex frame you select, it will generate the code. Anyway we recommend you to use it on a component level for best experience. Code may not be manageable if you are tring to build full-screen level code in one single code base. -contribute on [github](https://github.com/bridgedxyz/assistant) +Contribute on [github](https://github.com/bridgedxyz/assistant) **tags**: flutter, lint, code, figma to code, prototyping, hosting @@ -201,32 +201,32 @@ contribute on [github](https://github.com/bridgedxyz/assistant) **Initial Features** -- flutter widgets support - - figma to SingleChildScrollView - - figma to Column - - figma to Row - - figma to Text - - figma to SizedBox - - figma to Container - - figma to Color - - figma to BoxDecoration - - figma to Padding (EdgeInsets) - - figma to Transform - - figma to Gradient - - figma to Stack - - figma to Expanded - - figma to Opacity -- builder - - flutter widget builder with [flutter-builder](https://github.com/bridgedxyz/flutter-builder) v31 +- Flutter widgets support + - Figma to SingleChildScrollView + - Figma to Column + - Figma to Row + - Figma to Text + - Figma to SizedBox + - Figma to Container + - Figma to Color + - Figma to BoxDecoration + - Figma to Padding (EdgeInsets) + - Figma to Transform + - Figma to Gradient + - Figma to Stack + - Figma to Expanded + - Figma to Opacity +- Builder + - Flutter widget builder with [flutter-builder](https://github.com/bridgedxyz/flutter-builder) v31 - Theme TextStyle supported with textstyle name detection. H1 will give you `Theme.of(context).textTheme.heading1` -- ui - - preview interface -- shows the selected node's image on preview - - code section -- shows the generated code +- UI + - Preview Interface -- Shows the selected node's image on preview + - Code Section -- Shows the generated code ### Changed -N/A -- this is an initial release +N/A -- This is an initial release ### Removed -N/A -- this is an initial release +N/A -- This is an initial release diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a12a3919..6e8cdd77 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ -## [general contribution guideline](https://github.com/bridgedxyz/contributing-and-license) +## [General Contribution Guideline](https://github.com/bridgedxyz/contributing-and-license) -## access design (readonly) +## Access Design (readonly) **The plugin desing** @@ -11,9 +11,9 @@ The design of the plugin user interface. Here, you can find what to develop. Sample design is used for evaluating code generation quality check. Both good and bad examples are provided. [Link here](https://www.figma.com/file/iypAHagtcSp3Osfo2a7EDz/?node-id=164%3A2621). -## Writing ui codes (react). +## Writing UI codes (React) -if using material-ui, read the following [guidelines](https://material-ui.com/guides/minimizing-bundle-size/). +If using material-ui, read the following [guidelines](https://material-ui.com/guides/minimizing-bundle-size/). You can also run / inspect / develop the [ui](./ui) on the browser environment without design tools openned. Instructions available at [webdev](./webdev) diff --git a/README.md b/README.md index bab8fffe..92116960 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ platform: Android, iOS, Web, macOS, Linux, Windows title: Grida assistant for figma, sketch, xd --- - - - + + + ![Grida assistant](./branding/assistant-cover-v2021.8.0.png)
Grida Assistant - Figma 2 Flutter &React - Free & Opensource Design2Code Plugin with lot more features. | Product Hunt
@@ -18,7 +18,7 @@ title: Grida assistant for figma, sketch, xd ![Grida figma to code demo with live preview](docs/gifs/assistant-demo-2021.0.1.gif) - ✅ Human readable code generation. -- ✅ code generation built with CoLI, developed especially for assistant usage, ensuring the best code generation quality. +- ✅ Code generation built with CoLI, developed especially for assistant usage, ensuring the best code generation quality. - ✅ Slots support (Component with parameters) - ✅ Modularized code generation / readability. All production level code, code beign generated as Functions, Varables, Ect.. - ✅ Design Linting - Visaully makes sence, Structure made sence. @@ -28,13 +28,14 @@ title: Grida assistant for figma, sketch, xd ## Usage -> install figma plugin via below link. note that the published plugin is allways behind few new features behind this repository. for trying out the latest and mindblowing features, please build from your local environment directly. +> Install figma plugin via below link. Note that the published plugin is always behind few new features behind this repository. For trying out the latest and mindblowing features, please build from your local environment directly. + +Install via figma plugin [link here](https://www.figma.com/community/plugin/896445082033423994). -install via figma plugin [link here](https://www.figma.com/community/plugin/896445082033423994) +### Cloning and running the project: -> Cloning and running the project. -> we use yarn workspace for maintaining this project as monorepository. -> Some additional steps are required to run this project properly. +> - We use yarn workspace for maintaining this project as monorepo. +> - Some additional steps are required to run this project properly. ```shell # [REQUIRED] we use git submodules for `packages/`. you have to explicitly execute this command instead default clone. @@ -42,26 +43,26 @@ git clone --recurse-submodules https://github.com/gridaco/assistant.git cd assistant -# [REQUIRED] yarn will install dependencies, link packages, and generate compiled code of packages, so it can be referenced by root projects. +# [REQUIRED] Yarn will install dependencies, link packages, and generate compiled code of packages, so it can be referenced by root projects. yarn -# [OPTIONAL 1] run figma plugin in dev mode (use localhost server) (recommanded) +# [OPTIONAL 1] Run figma plugin in dev mode (use localhost server) (recommanded) yarn figma -# [OPTIONAL 1-2] run figma plugin in dev mode (native) +# [OPTIONAL 1-2] Run figma plugin in dev mode (native) yarn figma-native -# [OPTIONAL 2]run sketch plugin in dev mode +# [OPTIONAL 2] Run sketch plugin in dev mode yarn sketch -# [OPTIONAL 3 & Contributors only] run plugin ui in webdev mode +# [OPTIONAL 3 & Contributors only] Run plugin ui in webdev mode yarn web # visit http://localhost:3303/init-webdev to work on browser ``` -_soon as the subpackages are released as stable, we will remove git submodule dependency for ease of use. until then, this will be the primary repository and all the edits and PRs will be caused by this project._ - [Learn more here](https://github.com/bridgedxyz/.github/blob/main/contributing/working-with-submodules.md) +_Soon as the subpackages are released as stable, we will remove git submodule dependency for ease of use. until then, this will be the primary repository and all the edits and PRs will be caused by this project._ - [Learn more here](https://github.com/bridgedxyz/.github/blob/main/contributing/working-with-submodules.md) -> sometimes, when pulling this repo from remote, if new submodule package is added, you'll need to run below command to pull with updated submodules (we recommand you to know what this command actually does in a nut shell.) +> Sometimes, when pulling this repo from remote, if new submodule package is added, you'll need to run below command to pull with updated submodules (we recommand you to know what this command actually does in a nut shell.) ```shell git submodule update --init --recursive @@ -83,7 +84,7 @@ flutter widget builder is done by [figma/flutter](/flutter) and the core builder - ✅ `Colors.` Color support - ✅ Slots support (not static content) - ✅ Modularized builder functions - (not all-in-one widget tree) -- ✅ formatted dart code +- ✅ Formatted Dart code - ✅ Best code quality (I Assure,) in this planet ## Console & Cloud integrations @@ -96,7 +97,7 @@ Learn more at [console repository](https://github.com/gridaco/console.grida.co) ## UI Element Detection -> rule based button / input / icon detection with [@reflect-ui/detection](./packages/detection) +> Rule based button / input / icon detection with [@reflect-ui/detection](./packages/detection) > Higher quality ML based detection available at [Grida's context engine](https://github.com/bridgedxyz/context) ## Design Assistant @@ -121,12 +122,12 @@ Learn more at [console repository](https://github.com/gridaco/console.grida.co) ### Building the plugin -- figma: See [plugin README](/figma/README.md) -- sketch: `sketch platform will be available soon` +- Figma: See [plugin README](/figma/README.md) +- Sketch: `Sketch platform will be available soon` ### Running as Webdev -> webdev is a mode that you can run assistant as a standalone appliaction for ui development purpose of its' you can't acccess or call api to design tools. +> `webdev` is a mode that you can run assistant as a standalone appliaction for ui development purpose of its' you can't acccess or call api to design tools. Learn more at [./webdev](./webdev) @@ -160,15 +161,15 @@ And general Grida project contribution and collaboration guideline [here](https: **supported platforms and frameworks** -- ✅ [figma](./figma) -- ✅ [flutter](./core) -- ✅ [grida web](https://github.com/gridaco/console.grida.co) -- [sketch](./sketch) -- coming soon -- react -- coming soon & under [development](https://github.com/bridgedxyz/web-builder) -- vue -- coming soon & under [development](https://github.com/bridgedxyz/web-builder) -- css / sass -- coming soon & under [development](https://github.com/bridgedxyz/web-builder) -- [xd](./xd) -- coming soon -- [zeplin](./zeplin) -- coming soon +- ✅ [Figma](./figma) +- ✅ [Flutter](./core) +- ✅ [Grida Web](https://github.com/gridaco/console.grida.co) +- [Sketch](./sketch) -- Coming Soon +- React -- Coming Soon & Under [Development](https://github.com/bridgedxyz/web-builder) +- Vue -- Coming Soon & Under [Development](https://github.com/bridgedxyz/web-builder) +- CSS/SASS -- Coming Soon & Under [Development](https://github.com/bridgedxyz/web-builder) +- [Adobe XD](./xd) -- Coming Soon +- [Zeplin](./zeplin) -- Coming Soon ## Changelog @@ -189,13 +190,13 @@ All update logs available at [CHANGELOG.md](./CHANGELOG.md) **_to shortly brief,_** -- any form of modifing this software, including clone, fork, merge is allowed with no restrictions. -- making profit "by using" this software is allowed with no restrictions. -- making profit "by re-distributing" is not allowed. recap, you cannot publish this plugin as an alternative to this original plugin. - -- why is that? we are taking "minimum" profit from this software, we will prevent from other enterprise from copycatting this software. -- the code and packages distributed via this repository is free to use without any restrictions. -- code, design is free to use and modify. (just don't make any profits by re-distributing this plugin.) +- Any form of modifing this software, including clone, fork, merge is allowed with no restrictions. +- Making profit "by using" this software is allowed with no restrictions. +- Making profit "by re-distributing" is not allowed. Recap, you cannot publish this plugin as an alternative to this original plugin. + -- Why is that? We are taking "minimum" profit from this software, we will prevent from other enterprise from copycatting this software. +- The code and packages distributed via this repository is free to use without any restrictions. +- The code and design is free to use and modify. (Just don't make any profits by re-distributing this plugin.) ### DISCLAIMER -re-use of this software and it's license is overrided by [contributing-and-license](https://github.com/bridgedxyz/contributing-and-license) +Re-use of this software and it's license is overrided by [contributing-and-license](https://github.com/bridgedxyz/contributing-and-license) diff --git a/sketch/README.md b/sketch/README.md index 56bad036..c9da58f8 100644 --- a/sketch/README.md +++ b/sketch/README.md @@ -102,9 +102,9 @@ You will need to specify a `repository` in the `package.json`: ```diff ... -+ "repository" : { ++ "repository": { + "type": "git", + "url": "git+https://github.com/ORG/NAME.git" -+ } ++ } ... ```