airbnb/react-sketchapp

Introduce `Page.Container` component

Open

#342 opened on May 30, 2018

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (14,970 stars) (900 forks)batch import
enhancementgood first issuehelp wanted

Description

Right now the Page component acts a flex container, allowing to render Artboard's and SymbolMaster's in either a column or a row.

I'd like however to have unlimited flexibility rendering Pages by composing Flex components. By having some sort of arbitrary Flex container, I could layout items on a Page in complex grids if necessary.

This would require us introducing a new Component that can be utilized to compute Yoga layout, but doesn't actually result in any backed rendering.

@mathieudutour - I know this goes against some of your comments in #291, but I'm not sure how else to achieve this.

note: it doesn't need to be called Flex.

Contributor guide

Tech stack
reacttypescript
Domain
frontenddesign
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactTypeScriptreact sketchapp API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Examine the existing Page component in react sketchapp to understand its current flex container behavior. Review the discussion in issue #291 about layout flexibility, especially comments from @mathieudutour. The goal is to create a new container component (e.g., Flex) that computes Yoga layout without rendering anything. Look at the Yoga layout integration in the codebase, likely in the yoga layout package, and consider naming and API design.