8000 Merge branch 'staging' of https://github.com/gridaco/designto-code in… · gridaco/code@f34a11d · GitHub
[go: up one dir, main page]
Skip to content

Commit f34a11d

Browse files
softmarshmallowsoftmarshmallow
committed
Merge branch 'staging' of https://github.com/gridaco/designto-code into support-module
2 parents fd72126 + 501aed9 commit f34a11d
  • init-config-designsource.ts
  • init-grida.config.js.ts
  • init-package.json.ts
  • init-pubspec.yaml.ts
  • jest.config.js
  • lint
  • logger
  • npm
  • package.json
  • project
  • pub
  • tsconfig.json
  • update
  • version
  • yarn.lock
  • editor
  • editor-packages
  • examples
  • externals
  • lerna.json
  • package.json
  • packages

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    308 files changed

    +24215
    -18386
    lines changed

    ‎.gitignore

    Lines changed: 3 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -107,6 +107,9 @@ dist
    107107
    .DS_Store
    108108

    109109

    110+
    # turbo
    111+
    .turbo
    112+
    110113
    # ------- docs related -------
    111114
    ## Learn more at scripts/docs-copy/flags-api-docs.js
    112115
    # flags api docs

    ‎.gitmodules

    Lines changed: 1 addition & 16 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,18 +1,3 @@
    1-
    [submodule "packages/reflect-detection"]
    2-
    path = packages/reflect-detection
    3-
    url = https://github.com/bridgedxyz/reflect-detection
    41
    [submodule "ui/editor-ui"]
    52
    path = ui/editor-ui
    6-
    url = https://github.com/bridgedxyz/reflect-editor-ui
    7-
    [submodule "editor-packages/base-sdk"]
    8-
    path = editor-packages/base-sdk
    9-
    url = https://github.com/gridaco/base-sdk
    10-
    [submodule "externals/coli"]
    11-
    path = externals/coli
    12-
    url = https://github.com/gridaco/coli
    13-
    [submodule "externals/design-sdk"]
    14-
    path = externals/design-sdk
    15-
    url = https://github.com/gridaco/design-sdk
    16-
    [submodule "externals/reflect-core"]
    17-
    path = externals/reflect-core
    18-
    url = https://github.com/reflect-ui/reflect-core-ts
    3+
    url = https://github.com/reflect-ui/reflect-editor-ui

    ‎README.md

    Lines changed: 150 additions & 34 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,41 +1,58 @@
    1-
    # Design to code
    1+
    <center>
    22

    3-
    https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov
    3+
    </center>
    4+
    5+
    <p align="center">
    6+
    <a href="https://code.grida.co">
    7+
    <image src="./branding/gh-artwork.png" />
    8+
    <h3 align="center">Design to Code</h3>
    9+
    </a>
    10+
    </p>
    411

    5-
    Design to code engine. A design ✌️ code standard.
    12+
    <p align="center">
    13+
    Design to code engine. A design ✌️ code standard.
    14+
    </p>
    615

    716
    > Grida's Design to code core library. Convert your figma, sketch and adobe xd design to flutter, react, vue and more.
    817
    9-
    ## Demo
    18+
    ```
    19+
    npx designto react https://www.figma.com/files/XXX
    20+
    ```
    1021

    11-
    for the demo, please visit [assistant](https://github.com/gridaco/assistant)
    22+
    **Or.. [👩‍💻 Try designto-code from browser IDE](https://code.grida.co)**
    1223

    13-
    For the fully integrated working demo, visit [grida.co](https://grida.co)
    24+
    ## Usage
    1425

    15-
    ### Run it your own
    26+
    ```bash
    27+
    npm i -g @designto/cli
    1628

    29+
    # react + figma example
    30+
    designto react https://www.figma.com/files/XXX -o mypage.tsx
    1731
    ```
    18-
    git clone https://github.com/gridaco/designto-code.git
    1932

    20-
    cd designto-code
    21-
    yarn
    22-
    yarn editor
    23-
    # visit http://localhost:6626
    24-
    ```
    33+
    Integrated usage
    2534

    26-
    update pulling - `git submodule update --init --recursive`
    35+
    - Assistant (Figma plugin) - visit [assistant](https://github.com/gridaco/assistant)
    36+
    - [code.grida.co](https://code.grida.co) (Web IDE for frontend development)
    37+
    - [grida CLI](https://github.com/gridaco/cli)
    38+
    - [@designto/cli](./cli)
    2739

    2840
    ## Platforms / Frameworks
    2941

    30-
    | **Frameworks** | |
    31-
    | ------------------ | :---: |
    32-
    | ReactJS | ✅ |
    33-
    | Flutter | ✅ |
    34-
    | React Native | ✅ |
    35-
    | SolidJS | ✅ |
    36-
    | Vanilla (html/css) | ✅ |
    37-
    | Svelte | ✅ |
    38-
    | Vue | (wip) |
    42+
    | **Frameworks** | | channel | bundler | reflect-ui | material-ui | tailwind | packager |
    43+
    | ------------------ | :---: | -------- | --------------- | ---------- | ------------ | -------- | ---------------------- |
    44+
    | ReactJS | ✅ | `stable` | `esbuild` | (wip) | (wip) | (wip) | `npm`, `local`, `git` |
    45+
    | Flutter | ✅ | `beta` | `dart-services` | (wip) | Yes (native) | No | `pub`, `local`, `git` |
    46+
    | React Native | ✅ | `beta` | `expo` | (wip) | No | No | `expo`, `local`, `git` |
    47+
    | SolidJS | ✅ | `beta` | `esbuild` | (wip) | No | (wip) | `npm`, `local`, `git` |
    48+
    | Vanilla (html/css) | ✅ | `stable` | `vanilla` | (wip) | No | (wip) | `local`, `cdn` |
    49+
    | Svelte | ✅ | `beta` | `svelte` | (wip) | No | (wip) | `npm`, `local`, `git` |
    50+
    | Vue | (wip) | `dev` | `vue` | (wip) | No | (wip) | `npm`, `local`, `git` |
    51+
    | Android (Jetpack) | (wip) | `dev` | Not supported | (wip) | Yes (native) | No | `local`, `git` |
    52+
    | iOS (SwiftUI) | (wip) | `dev` | Not supported | (wip) | No | No | `local`, `git` |
    53+
    54+
    <details>
    55+
    <summary>React</summary>
    3956

    4057
    | **ReactJS** | |
    4158
    | ------------------- | :---: |
    @@ -47,6 +64,11 @@ update pulling - `git submodule update --init --recursive`
    4764
    | breakpoints | (wip) |
    4865
    | components | (wip) |
    4966

    67+
    </details>
    68+
    69+
    <details>
    70+
    <summary>ReactNative</summary>
    71+
    5072
    | **ReactNative** | |
    5173
    | ------------------------------ | :---: |
    5274
    | `StyleSheet` | ✅ |
    @@ -56,62 +78,150 @@ update pulling - `git submodule update --init --recursive`
    5678
    | `react-native-svg` | (wip) |
    5779
    | `expo` | (wip) |
    5880

    81+
    </details>
    82+
    83+
    <details>
    84+
    <summary>Vanilla (html/css)</summary>
    85+
    5986
    | **Vanilla** | |
    6087
    | ----------- | :-----------: |
    6188
    | reflect-ui | right-aligned |
    6289
    | css | ✅ |
    6390
    | scss | are neat |
    6491

    92+
    </details>
    93+
    94+
    <details>
    95+
    <summary>Flutter</summary>
    96+
    6597
    | **Flutter** | |
    6698
    | ----------- | :---: |
    6799
    | material | ✅ |
    68100
    | cupertino | (wip) |
    69101
    | reflect-ui | (wip) |
    70102

    103+
    </details>
    104+
    105+
    <details>
    106+
    <summary>Svelte</summary>
    107+
    71108
    | **Svelte** | |
    72109
    | ------------------- | :---: |
    73110
    | `styled-components` | ✅ |
    74111
    | `@mui/material` | (wip) |
    75112

    113+
    </details>
    114+
    115+
    <details>
    116+
    <summary>Vue3</summary>
    117+
    76118
    | **Vue** | |
    77119
    | ------------------- | :---: |
    78120
    | `styled-components` | ✅ |
    79121
    | `@mui/material` | (wip) |
    80122

    123+
    </details>
    124+
    125+
    <details>
    126+
    <summary>SolidJS</summary>
    127+
    81128
    | **Solid** | |
    82129
    | ------------------------- | :-: |
    83130
    | `solid-styled-components` | ✅ |
    84131
    | `inline-css` | ✅ |
    85132

    133+
    </details>
    134+
    135+
    <details>
    136+
    <summary>iOS Native</summary>
    137+
    86138
    | **iOS** | |
    87139
    | ------- | :---: |
    88140
    | SwiftUI | (wip) |
    89141

    142+
    </details>
    143+
    144+
    <details>
    145+
    <summary>Android Native</summary>
    146+
    90147
    | **Android** | |
    91148
    | --------------- | :---: |
    92149
    | Jetpack Compose | (wip) |
    93150

    94-
    ## What does it mean?
    151+
    </details>
    152+
    153+
    ## Usage
    154+
    155+
    Linting
    156+
    Custom Tokenizer
    157+
    Custom Assets Repository
    158+
    Custom Cache
    159+
    Custom Cursor
    160+
    Plugins
    161+
    162+
    ### Local development
    163+
    164+
    ```
    165+
    git clone https://github.com/gridaco/designto-code.git
    166+
    cd designto-code
    167+
    168+
    yarn
    169+
    yarn editor
    170+
    # visit http://localhost:6626
    171+
    ```
    172+
    173+
    <details>
    174+
    <summary>Trouble shooting</summary>
    175+
    176+
    - update pulling - `git submodule update --init --recursive`
    177+
    178+
    </details>
    179+
    180+
    ## Features
    181+
    182+
    - preprocessing
    183+
    - lint
    184+
    - layout lint
    185+
    - naming lint
    186+
    - design
    187+
    - layouts
    188+
    - animations
    189+
    - constraints
    190+
    - breakpoints
    191+
    - code
    192+
    - documentation
    193+
    - tsdoc
    194+
    - single-file module
    195+
    - multi-file module
    95196

    96-
    ### By "design". What does it mean?
    197+
    <details>
    198+
    <summary>Layouts</summary>
    97199

    98-
    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)
    200+
    </details>
    99201

    100-
    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)
    202+
    <details>
    203+
    <summary>Animations (motions)</summary>
    101204

    102-
    TL;DR -- You can convert your design to code from Figma, Sketch, a 10000 nd XD.
    205+
    </details>
    103206

    104-
    ### By "code". What does it mean?
    207+
    <details>
    208+
    <summary>Constraints</summary>
    105209

    106-
    The term `code` here stands for some language or syntax tree that is adoptable for standard development environment. We supprort Flutter, React, HTML/CSS, Vuew, Svelte.
    210+
    </details>
    107211

    108-
    Taking more deeper look, Reflect Core DSL represents the layout, component, data, styling as a single tree.
    212+
    <details>
    213+
    <summary>Breakpoints</summary>
    109214

    110-
    ### How does it work?
    215+
    </details>
    111216

    112-
    Read [how-it-all-works.md](./how-it-all-works.md)
    217+
    ### Editor (web IDE)
    113218

    114-
    ### Visualization
    219+
    https://user-images.githubusercontent.com/16307013/145498355-58fb2cf3-a6a0-44a3-8515-3859b048c3a4.mov
    220+
    221+
    Visit project ([`./editor`](./editor/))
    222+
    223+
    <details>
    224+
    <summary>Visualization</summary>
    115225

    116226
    ![](./branding/shot-1.png)
    117227

    @@ -126,3 +236,9 @@ Read [how-it-all-works.md](./how-it-all-works.md)
    126236
    ![](./branding/shot-5.png)
    127237

    128238
    ![Grida's design to code. design node visualization snapshot](./branding/example-visualization-design-nodes.png)
    239+
    240+
    </details>
    241+
    242+
    ## Architecture
    243+
    244+
    Read [architecture.md](./architecture.md)

    ‎how-it-all-works.md renamed to ‎architecture.md

    File renamed without changes.

    ‎branding/gh-artwork.png

    36.1 KB
    Loading

    ‎cli/README.md

    Lines changed: 37 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,3 +1,38 @@
    1-
    # Using Design-to-code via cli
    1+
    # A `grida code` CLI member of [`grida cli`](https://github.com/gridaco/cli)
    22

    3-
    Under development.
    3+
    ## Installation
    4+
    5+
    ```
    6+
    npm install -g @designto/cli
    7+
    ```
    8+
    9+
    ## Commands
    10+
    11+
    | Commands | |
    12+
    | -------------------- | --------------------------------------- | ---------------------------------------------------- |
    13+
    | `grida code react` | convert input uri (file or url) to code | `designto react https://www.figma.com/files/XXX` |
    14+
    | `grida code rn` | convert input uri (file or url) to code | `designto rn https://www.figma.com/files/XXX` |
    15+
    | `grida code vue` | convert input uri (file or url) to code | `grida code vue https://www.figma.com/files/XXX` |
    16+
    | `grida code svelte` | convert input uri (file or url) to code | `grida code svelte https://www.figma.com/files/XXX` |
    17+
    | `grida code solid` | convert input uri (file or url) to code | `grida code flutter https://www.figma.com/files/XXX` |
    18+
    | `grida code flutter` | help | `designto flutter https://www.figma.com/files/XXX` |
    19+
    | `grida code auth` | signin to design services | `auto` \| `figma` \| `sketch` \| `xd` |
    20+
    | `grida code init` | configure the preferences |
    21+
    22+
    ## Args
    23+
    24+
    | Flags | | | |
    25+
    | ------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | --- |
    26+
    | `--framework` | specify the target framework | `flutter` \| `react` \| `react-native` \| `svelte` \| `vue` \| `vanilla` | \* |
    27+
    | `--config` | specify the framework config json file | framework.config.json | |
    28+
    | `--design-origin` | specify the input design origin | `auto` \| `figma` \| `sketch` \| `xd` | |
    29+
    | `--personal-access-token` | access token | | |
    30+
    | `--user` | account name if signed-in with multiple accounts |
    31+
    32+
    ## Output
    33+
    34+
    `--output, -o <path>`
    35+
    36+
    - `<path>`: the output file path
    37+
    - `<dir>`: the output files dir
    38+
    - dry : do not write files. log the output

    0 commit comments

    Comments
     (0)
    0