📌 [Roadmap] January 2022 - React / Components / Responsive / Flags / WasmWorkers

[softmarshmallow]

January 2022 Update - Powerful Flags, Responsive Web development, Reliable Editor

Working Draft of January Release, targeting Jan 25, tops. This will be the main roadmap in entire Grida subprojects for Dec-Jan

This Release will contain following key features & concepts

• More powerful design with flags
• Component / Instance Support
• Run Realtime React App on Web with Webworkers & Wasm integ.
• Complete Lints for - Layouting, Naming, Flags annotations.
• Documentations for Design Guide, Flags Demo
• Full Example Project

Related

• Grida Assistant Dec Release - Assistant January Release v2022.0.1 assistant#186

New Features

New Flags

h1 - h6 & p - text element preference flags - #106

• --as-h1
• --as-h2
• --as-h3
• --as-h4
• --as-h5
• --as-h6
• --as-p
• --as-span

min/max/fix width height declaration flags - #106

• --width
• --height
• --max-width
• --min-width
• --max-height
• --min-height
• --fix-height
• --fix-width

WIP - #107

• --module
• --text-template
• --video
• --is-input-caret
• --break-component
• --as-modal
• --motion-on-hover
• --ignore
• --hash
• --motion
• --as-input
• --as-button
• --onclick
• --cursor
• --href
• --id

Proposal Work in progress

• [Web/css] image selection option as flag --no-drag #91
• Add --as-prop (--as-arg) flag #92

New Lints

• Suggestion: Use Autolayout
• Warning: Avoid using Group (Use Frames Instead)

Fixes

• Alignment Lint should be silenced in autolayout

Improvements

• Warning: DefaultNameUsage to include suggestion

New Widgets

• Button for Web, html5 <button> - Support web buttons #108
• TextField for Web, html5 <input type="text">
• Checkbox for Web, html5 <input type="checkbox"> reference
• Form for Web, html5 <form>
• Anchor (Link) for Web, html4 <a>
  • alternative Link for NextJS
• Modal for Web
  • React
    • react-modal
    • @mui/base/Modal
    • @radix-ui/react-dialog
  • Vanilla
    • WIP
• MouseRegion for Universal cursor & mouse event handling

Motions

• React - framer-motion
• Vanilla - popmotion

on Events

• onClick
• onHover

Fix of Known Issues

• Incomplete Flex Support with Figma Autolayout
  • Explicit flex-grow support not just flex #99
  • [Web/css/figma] Figma autolayout stretch with padding, the padding should not effect the final size. while flex: 1 #93
  • Auto layout & flex limitations #32
• Dart Formatting Issue
• Dart lang & Flutter Support based on CoLI
• Text font-weight mapper mismatching style - from 📌 [Roadmap] Figma to Web - Missing features #27

Indeterminate

Below features are not critically related to this milestone, but are highly likely to be implemented if the schedule allow us.

• Complete Variant Support
• Realtime In-browser React Compiler
• html5 Form support
• React Modal support
• Frame with border-radius & clip content not clipping content on web (css) #86
• [Feature Request] Readme generation (Semi Storybook support?) #88
• [Feature Request] Functional Token-indicating In-line documentation (a.k.a comments) #89
• Escaping text for vanilla html #72
• <b> tag support for mixed content with bold text for web #59

Will not be supported

• Non tracked, non standard Component instantiation (Custom overrides on Instance)
• Remote Components from Shared Library
• Flutter Updates - this Milestone is focused on Responsive Web dev with ReactJS. It will contain minimal Flutter updates.

Editor Updates

• Assets download interface & asset management / preference
• New Look & Workspace for Responsive Web development
• Framework Configuration
• Architecture & Project Configuration Menu
• Design Lint support on editor (previously only available via Grida Assistant)
• Readonly Full scale canvas support like Figma & Framer #113

Docs & Examples Updates

docs/guides to be added

• Design Responsive Page with Breakpoints
• Design Responsive Component with Variants

Examples to be added

• example design of spa landingpage + repo