gridaco · softmarshmallow · Oct 6, 2021 · Oct 6, 2021 · Oct 6, 2021 · Oct 6, 2021
diff --git a/README.md b/README.md
@@ -2,20 +2,20 @@
 
 Design to code engine. A design ✌️ code standard.
 
-> Bridged's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.
+> Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.
 
 ## Demo
 
-for the demo, please visit [assistant](https://github.com/bridgedxyz/assistant)
+for the demo, please visit [assistant](https://github.com/gridaco/assistant)
 
-For the fully integrated working demo, visit [bridged.xyz](https://bridged.xyz)
+For the fully integrated working demo, visit [grida.co](https://grida.co)
 
 ### Run it your own
 
 ```
-git clone https://github.com/bridgedxyz/design-to-code.git
+git clone https://github.com/gridaco/designto-code.git
 
-cd design-to-code
+cd designto-code
 yarn
 yarn editor
 ```
@@ -26,9 +26,9 @@ update pulling - `git submodule update --init --recursive`
 
 ### By "design". What does it mean?
 
-The term `design` here stands for the UI/UX design source file made by human designers. There are various tools currently available such like Figma, Sketch, XD, and Upcomming [Bridged Studio](https://github.com/bridgedxyz/bridged)
+The term `design` here stands for the UI/UX design source file made by human designers. There are various tools currently available such like Figma, Sketch, XD, and Upcomming [Grida Studio](https://github.com/gridaco/grida)
 
-Taking more deeper look, the design data tree is represented with Reflect -- A design standard that bridged developed / adopted. (Yes, this is that Reflect that also provided as a UI Library)
+Taking more deeper look, the design data tree is represented with Reflect -- A design standard that grida developed / adopted. (Yes, this is that Reflect that also provided as a UI Library)
 
 TL;DR -- You can convert your design to code from Figma, Sketch, and XD.
 
@@ -56,4 +56,4 @@ Read [how-it-all-works.md](./how-it-all-works.md)
 
 ![](./branding/shot-5.png)
 
-![Bridged's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)
+![Grida's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)
diff --git a/docs/flags.md b/docs/flags.md
@@ -1,6 +1,8 @@
 # Flags (Proposal)
+
 > Flag feature is not ready to use
-----
+
+---
 
 > Flag is a strategy for specified extra context, passing arguments based on the node. Just like CLI, the syntax is `--flag-name` / `--flag-name=value` / `--flag-name value` / custom flags
 
@@ -52,8 +54,8 @@ flags shall be specified end of the node name like so - `"Header --fixed-positio
 
 ### Position
 
-- `--fixed-position`
-- `--fixed-position-override=bottom`
+- `--position-fixed`
+- `--position-fixed-override=bottom`
 
 ### Dimension
 
@@ -64,24 +66,27 @@ The dimension flags are for specifing the extra context of the layout, which are
 - `--max-height`
 - `--min-height`
 
+## Breakpoints
+
+- `@media`
+
 ### Embedding
 
 - `--as-media`
 - `--image-src` - `--image-src=https://example.com/example.png`
 - `--video-src` - `--video-src=https://youtube.com/watch?v=xQGEOsCzFJU`
 - `--webview-src` - `--webview-src=https://youtube.com/watch?v=xQGEOsCzFJU` (also knwon as iframe)
 
-
 ### Nested Scenario - on component-instance use
 
 <!-- WIP -->
+
 ```
 (WIP)
 Master - master-component --artwork
 Instance - master-component --dynamic-container
 ```
 
-
 ### Custom flags
 
 1. you can add your custom flag by using `---arg` instead of `--arg`
@@ -90,12 +95,15 @@ Instance - master-component --dynamic-container
 - `---custom-flag-name=value`
 
 ### Tesging
+
 for testing, you can temporarily disable flag input by changing `--flag` to `----flag`. by this our parser will understand that the `flag` is givven, but temporarily disabled. other than `----` might cause error since changing
+
 1. from `--first-flag=a --second-flag=b`
 2. to `--first-flag=a second-flag=b` (Don't)
-will cuase a parsing error & `first-flag`'s value will be interpreted as `"a second-flag=b"`
+   will cuase a parsing error & `first-flag`'s value will be interpreted as `"a second-flag=b"`
 
 **Best practice**
+
 1. from `--first-flag=a --second-flag=b`
 2. to `--first-flag=a ----second-flag=b` (Do)
 3. will cuase a parsing error & `first-flag`'s value will be interpreted as `"a"` as intended.
diff --git a/editor/next.config.js b/editor/next.config.js
@@ -13,11 +13,12 @@ const withTM = require("next-transpile-modules")([
   "@designto/react",
 
   "@code-features/assets",
+  "@code-features/flags",
   // -----------------------------
 
   // -----------------------------
   // region @design-sdk
-  "@design-sdk/key-annotations",
+  "@design-sdk/flags",
   "@design-sdk/core",
   "@design-sdk/core-types",
   "@design-sdk/universal",

diff --git a/packages/design-sdk b/packages/design-sdk
diff --git a/packages/designto-corpus/package.json → packages/designto-token-corpus/package.json b/packages/designto-corpus/package.json → packages/designto-token-corpus/package.json
diff --git a/packages/designto-lemma/package.json → packages/designto-token-lemma/package.json b/packages/designto-lemma/package.json → packages/designto-token-lemma/package.json
diff --git a/packages/designto-ngram/package.json → packages/designto-token-ngram/package.json b/packages/designto-ngram/package.json → packages/designto-token-ngram/package.json
diff --git a/...-frame-to-autolayout-if-possible/index.ts → ...-frame-to-autolayout-if-possible/index.ts b/...-frame-to-autolayout-if-possible/index.ts → ...-frame-to-autolayout-if-possible/index.ts
diff --git a/...sanitized/convert-group-to-frame/index.ts → ...sanitized/convert-group-to-frame/index.ts b/...sanitized/convert-group-to-frame/index.ts → ...sanitized/convert-group-to-frame/index.ts
diff --git a/...nvert-rect-shape-poligon-to-rect/index.ts → ...nvert-rect-shape-poligon-to-rect/index.ts b/...nvert-rect-shape-poligon-to-rect/index.ts → ...nvert-rect-shape-poligon-to-rect/index.ts
diff --git a/...th-others-as-new-frame-and-as-bg/index.ts → ...th-others-as-new-frame-and-as-bg/index.ts b/...th-others-as-new-frame-and-as-bg/index.ts → ...th-others-as-new-frame-and-as-bg/index.ts
diff --git a/...rt-to-container-if-single-child/README.md → ...rt-to-container-if-single-child/README.md b/...rt-to-container-if-single-child/README.md → ...rt-to-container-if-single-child/README.md
diff --git a/...ert-to-container-if-single-child/index.ts → ...ert-to-container-if-single-child/index.ts b/...ert-to-container-if-single-child/index.ts → ...ert-to-container-if-single-child/index.ts
diff --git a/...-sanitized/ignore-masking-nodes/README.md → ...-sanitized/ignore-masking-nodes/README.md b/...-sanitized/ignore-masking-nodes/README.md → ...-sanitized/ignore-masking-nodes/README.md
diff --git a/...o-sanitized/ignore-masking-nodes/index.ts → ...n-sanitized/ignore-masking-nodes/index.ts b/...o-sanitized/ignore-masking-nodes/index.ts → ...n-sanitized/ignore-masking-nodes/index.ts
diff --git a/packages/designto-sanitized/index.ts → packages/designto-token-sanitized/index.ts b/packages/designto-sanitized/index.ts → packages/designto-token-sanitized/index.ts
diff --git a/...h-fotter-constraint-to-bottom-example.png → ...h-fotter-constraint-to-bottom-example.png b/...h-fotter-constraint-to-bottom-example.png → ...h-fotter-constraint-to-bottom-example.png
diff --git a/...f-horizontal-long-scroll-design/README.md → ...f-horizontal-long-scroll-design/README.md b/...f-horizontal-long-scroll-design/README.md → ...f-horizontal-long-scroll-design/README.md
diff --git a/packages/designto-sanitized/package.json → ...ges/designto-token-sanitized/package.json b/packages/designto-sanitized/package.json → ...ges/designto-token-sanitized/package.json
diff --git a/...d/remove-position-if-not-needed/README.md → ...d/remove-position-if-not-needed/README.md b/...d/remove-position-if-not-needed/README.md → ...d/remove-position-if-not-needed/README.md
diff --git a/...ed/remove-position-if-not-needed/index.ts → ...ed/remove-position-if-not-needed/index.ts b/...ed/remove-position-if-not-needed/index.ts → ...ed/remove-position-if-not-needed/index.ts
diff --git a/.../designto-sanitized/sort-by-y-z/README.md → ...nto-token-sanitized/sort-by-y-z/README.md b/.../designto-sanitized/sort-by-y-z/README.md → ...nto-token-sanitized/sort-by-y-z/README.md
diff --git a/...s/designto-sanitized/sort-by-y-z/index.ts → ...gnto-token-sanitized/sort-by-y-z/index.ts b/...s/designto-sanitized/sort-by-y-z/index.ts → ...gnto-token-sanitized/sort-by-y-z/index.ts
diff --git a/packages/designto-stem/package.json → packages/designto-token-stem/package.json b/packages/designto-stem/package.json → packages/designto-token-stem/package.json
diff --git a/packages/designto-symantic/package.json → ...ages/designto-token-symantic/package.json b/packages/designto-symantic/package.json → ...ages/designto-token-symantic/package.json
diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts
@@ -26,6 +26,7 @@ import { wrap_with_stretched } from "./token-stretch";
 import { wrap_with_layer_blur } from "./token-effect/layer-blur";
 import { wrap_with_background_blur } from "./token-effect/background-blur";
 import { wrap_with_rotation } from "./token-rotation";
+import flags_handling_gate from "./token-flags-gate";
 
 export type { Widget };
 
@@ -149,6 +150,10 @@ function handleNode(node: nodes.ReflectSceneNode): Widget {
       node as MaskingItemContainingNode
     );
   }
+
+  if (!tokenizedTarget) {
+    tokenizedTarget = flags_handling_gate(node);
+  }
   //
   // -------------------------------------------------------------------------
   //

diff --git a/packages/designto-token/token-flags-gate/index.ts b/packages/designto-token/token-flags-gate/index.ts
@@ -0,0 +1,24 @@
+import { parse } from "@code-features/flags";
+import type { ReflectSceneNode } from "@design-sdk/figma";
+import { tokenizeGraphics } from "..";
+
+export default function (node: ReflectSceneNode) {
+  const flags = parse(node.name);
+  return handle_with_flags(node, flags);
+}
+
+function handle_with_flags(node, flags) {
+  if (
+    flags["artwork"] ||
+    flags["export-as"] ||
+    flags["export-as-png"] ||
+    flags["export-as-svg"] ||
+    flags["export-as-pdf"] ||
+    flags["export-as-jpg"] ||
+    flags["export-as-webp"] ||
+    flags["export-as-jpeg"] ||
+    flags["export-as-gif"]
+  ) {
+    return tokenizeGraphics.fromAnyNode(node);
+  }
+}
diff --git a/...es/strategy-item-spacing/item-spacing-as-empty-spaced-item-on-between/README.md b/...es/strategy-item-spacing/item-spacing-as-empty-spaced-item-on-between/README.md
@@ -0,0 +1 @@
+# ItemSpacing strategy: Token modifier - item spacing as empty spaced item on between
diff --git a/packages/strategy-item-spacing/item-spacing-as-margin-or-padding-on-each/README.md b/packages/strategy-item-spacing/item-spacing-as-margin-or-padding-on-each/README.md
@@ -0,0 +1 @@
+# ItemSpacing strategy: Token modifier - item spacing as margin or padding on each
diff --git a/packages/support-flags/----disable/README.md b/packages/support-flags/----disable/README.md
@@ -0,0 +1 @@
+# `----<flag>` - Commenting a flag
diff --git a/packages/support-flags/---custom/index.ts b/packages/support-flags/---custom/index.ts
diff --git a/packages/support-flags/--action/README.md b/packages/support-flags/--action/README.md
@@ -0,0 +1 @@
+# `--action=<name>` - Action flag
diff --git a/packages/support-flags/--artwork/index.ts b/packages/support-flags/--artwork/index.ts
@@ -0,0 +1,6 @@
+export const artwork_flag_key = "artwork";
+
+export interface ArtworkFlag {
+  flag: typeof artwork_flag_key;
+  value?: boolean;
+}
diff --git a/packages/support-flags/--as-avatar/README.md b/packages/support-flags/--as-avatar/README.md
@@ -0,0 +1,6 @@
+# `--as=avatar` - [Reflect UI](https://reflect-ui.com) Avatar Widget Indication Flag
+
+## Syntax
+
+- `--as-avatar`
+- `--as=avatar`
diff --git a/packages/support-flags/--as-button/README.md b/packages/support-flags/--as-button/README.md
@@ -0,0 +1,6 @@
+# `--as=button` - [Reflect UI](https://reflect-ui.com) Button Widget Indication Flag
+
+## Syntax
+
+- `--as-button`
+- `--as=button`
diff --git a/packages/support-flags/--as-checkbox/README.md b/packages/support-flags/--as-checkbox/README.md
@@ -0,0 +1,7 @@
+# `--as=checkbox` - [Reflect UI](https://reflect-ui.com) Checkbox Widget Indication Flag
+
+## Syntax
+
+- `--as-checkbox`
+- `--as-checkbox=true`
+- `--as=checkbox`
diff --git a/packages/support-flags/--as-divider/README.md b/packages/support-flags/--as-divider/README.md
@@ -0,0 +1,7 @@
+# `--as=divider` - [Reflect UI](https://reflect-ui.com) Divider Widget Indication Flag
+
+## Syntax
+
+- `--as-divider`
+- `--as-divider=true`
+- `--as=divider`
diff --git a/packages/support-flags/--as-h1/README.md b/packages/support-flags/--as-h1/README.md
diff --git a/packages/support-flags/--as-h2/README.md b/packages/support-flags/--as-h2/README.md
diff --git a/packages/support-flags/--as-h3/README.md b/packages/support-flags/--as-h3/README.md
diff --git a/packages/support-flags/--as-h4/README.md b/packages/support-flags/--as-h4/README.md
diff --git a/packages/support-flags/--as-h5/README.md b/packages/support-flags/--as-h5/README.md
diff --git a/packages/support-flags/--as-h6/README.md b/packages/support-flags/--as-h6/README.md
diff --git a/packages/support-flags/--as-input/README.md b/packages/support-flags/--as-input/README.md
@@ -0,0 +1,7 @@
+# `--as=input` - [Reflect UI](https://reflect-ui.com) Input (TextField) Widget Indication Flag
+
+## Syntax
+
+- `--as-input`
+- `--as-input=true`
+- `--as=input`
diff --git a/packages/support-flags/--as-list/README.md b/packages/support-flags/--as-list/README.md
@@ -0,0 +1,7 @@
+# `--as=list` - [Reflect UI](https://reflect-ui.com) ListView Widget Indication Flag
+
+## Syntax
+
+- `--as-list`
+- `--as-list=true`
+- `--as=list`
diff --git a/packages/support-flags/--as-mdi/README.md b/packages/support-flags/--as-mdi/README.md
@@ -0,0 +1,11 @@
+# `--as=mdi` - [Reflect UI](https://reflect-ui.com) Material Design Icon Widget Indication Flag
+
+## Syntax
+
+- `--as-mdi`
+- `--as-mdi=true`
+- `--as=mdi`
+
+## Fallback
+
+- `--as-icon`
diff --git a/packages/support-flags/--as-modal/README.md b/packages/support-flags/--as-modal/README.md
@@ -0,0 +1,7 @@
+# `--as=modal` - [Reflect UI](https://reflect-ui.com) Modal Widget Indication Flag
+
+## Syntax
+
+- `--as-modal`
+- `--as-modal=true`
+- `--as=modal`
diff --git a/packages/support-flags/--as-p/README.md b/packages/support-flags/--as-p/README.md
diff --git a/packages/support-flags/--as-resizable/README.md b/packages/support-flags/--as-resizable/README.md
@@ -0,0 +1 @@
+# Resizable widget indication
diff --git a/packages/support-flags/--as-slider/README.md b/packages/support-flags/--as-slider/README.md
@@ -0,0 +1,7 @@
+# `--as=slider` - [Reflect UI](https://reflect-ui.com) Slider Widget Indication Flag
+
+## Syntax
+
+- `--as-slider`
+- `--as-slider=true`
+- `--as=slider`
diff --git a/packages/support-flags/--as-toggle/README.md b/packages/support-flags/--as-toggle/README.md
@@ -0,0 +1,7 @@
+# `--as=toggle` - [Reflect UI](https://reflect-ui.com) Toggle Widget Indication Flag
+
+## Syntax
+
+- `--as-toggle`
+- `--as-toggle=true`
+- `--as=toggle`
diff --git a/packages/support-flags/--as-wrap/README.md b/packages/support-flags/--as-wrap/README.md
@@ -0,0 +1,15 @@
+# `--as=wrap` - flexbox / Wrap / [Reflect UI](https://reflect-ui.com) Wrap Widget Indication Flag
+
+(describing based on figma) Since no major design tool supports wrapping behaviour of the layout, we can use --as-wrap flag to indicate nested autolayout (e.g. `row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)`
+
+## Syntax
+
+- `--as-wrap`
+- `--as-wrap=true`
+- `--as=wrap`
+
+## Can be
+
+- flexbox on css
+- Wrap on flutter
+- Wrap with reflect-ui
diff --git a/packages/support-flags/--break-color/README.md b/packages/support-flags/--break-color/README.md
@@ -0,0 +1,8 @@
+# `--break-color` - Break Color (A.k.a Raw Color)
+
+Breaks the color style constraints.
+
+```
+input: colorstyle=primary-light-blue
+output: rgb(173, 216, 230)
+```
diff --git a/packages/support-flags/--break-component/README.md b/packages/support-flags/--break-component/README.md
@@ -0,0 +1,8 @@
+# `--break-component` - Break Component (A.k.a Raw View)
+
+Breaks the component constraints, interpret it as a raw copy of the instance view
+
+```
+origianlly: <AppHeaderBar>
+wouldbe: <div id="app-header-bar-1">...</div>
+```
diff --git a/packages/support-flags/--camera-display/README.md b/packages/support-flags/--camera-display/README.md
@@ -0,0 +1,10 @@
+# Camera display
+
+## Platforms
+
+- web
+  - uses: webcam
+  - @reflect-ui/universal-camera-view
+- flutter
+  - uses: device cam[0]
+  - flutter-universal-camera-view by reflect-ui
diff --git a/packages/support-flags/--class/README.md b/packages/support-flags/--class/README.md
@@ -0,0 +1,7 @@
+# Custom css class indication (extends)
+
+```
+origainally: class="container"
+input: class=custom-big-box
+outpug: class="container custom-big-box"
+```
diff --git a/packages/support-flags/--cursor/README.md b/packages/support-flags/--cursor/README.md
@@ -0,0 +1,12 @@
+# Mouse cursor indication
+
+- `--cursor=pointer`
+- `--cursor=wait`
+- `--cursor=text`
+- `--cursor=ew-resize`
+- `--cursor=url(https://example.com/cursor.png)`
+- and any other standard css cursor value from [CSS#Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
+
+## Fallbacks to
+
+- `--cursor=auto`
diff --git a/packages/support-flags/--dynamic-container/README.md b/packages/support-flags/--dynamic-container/README.md
diff --git a/packages/support-flags/--dynamic-item/README.md b/packages/support-flags/--dynamic-item/README.md
diff --git a/packages/support-flags/--empty-content/README.md b/packages/support-flags/--empty-content/README.md
@@ -0,0 +1,8 @@
+# Empty (command) A Content
+
+> This does not indicate that current view has a empty content, but indicates that it **should** have a empty content.
+
+## See also
+
+- [`--dynamic-item`](../--dynamic-item/README.md)
+- [`--dynamic-content`](../--dynamic-container/README.md)
diff --git a/packages/support-flags/--export-as/index.ts b/packages/support-flags/--export-as/index.ts
@@ -0,0 +1,10 @@
+export interface ExportAsFlag {
+  /**
+   * --export-as=<value>
+   */
+  name: "export-as";
+  /**
+   * @required
+   */
+  value: "png" | "svg" | "jpg" | "pdf";
+}
diff --git a/packages/support-flags/--export-gif/README.md b/packages/support-flags/--export-gif/README.md
@@ -0,0 +1,5 @@
+# Export as gif
+
+## For non-gif-origin-content
+
+We'll create a 10 frame dummy gif based on the origin snapshot png, with a simple scale + shake animation
diff --git a/packages/support-flags/--export-jpg/README.md b/packages/support-flags/--export-jpg/README.md
diff --git a/packages/support-flags/--export-pdf/README.md b/packages/support-flags/--export-pdf/README.md
diff --git a/packages/support-flags/--export-png/README.md b/packages/support-flags/--export-png/README.md
diff --git a/packages/support-flags/--export-svg/README.md b/packages/support-flags/--export-svg/README.md
diff --git a/packages/support-flags/--export/README.md b/packages/support-flags/--export/README.md
diff --git a/packages/support-flags/--href/README.md b/packages/support-flags/--href/README.md
@@ -0,0 +1,10 @@
+# Link (Href) data provider
+
+_Examples_
+
+- `--link=https://grida.co`
+- `--link=/signup`
+
+## Disclaimer
+
+We choosed name `link` instead of `href` since it is more intuitive across non web developers. Also NextJS has a component named `<Link/>` which suggested us the idea.
diff --git a/packages/support-flags/--id/README.md b/packages/support-flags/--id/README.md
@@ -0,0 +1,10 @@
+# ID Flag
+
+## When to use and what can it do?
+
+by specifing the id flag, you can take advantage in below scenarios.
+
+- Same vector, two different component, one for hover, one for default, only svg color is different. - in this case, you can set the id for both layer as same, so that the component code generation will not include the duplicated svg data / placeholder code.
+- id="value" on generated html output.
+
+<!-- TODO: provide more realworld usecase -->
diff --git a/packages/support-flags/--ignore/README.md b/packages/support-flags/--ignore/README.md
@@ -0,0 +1,11 @@
+# Ignore the target property
+
+As a design choice, for example, a designer can add a boxshadow & radius to the frame of a website design frame. In this case, human developers can easily know that the boxshadow and the raius is a non relavent value and must be ignored. the `--ignore=<property>` flag can be used useful for this case.
+
+---
+
+e.g.
+
+- `--ignore=*` - same as [`//@ignore`](../@ignore/README.md)
+- `--ignore=effects`
+- `--ignore=border-radius`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		# ItemSpacing strategy: Token modifier - item spacing as empty spaced item on between