TS: Support generics for layout breakpoints

[kettanaito]

What:

Need to support generics to specify the relevant breakpoint names of the layout.

Why:

To have better type checking and suggestions when dealing with breakpoint-based values (<Only/> component, Layout.configure).

How:

Draft

import Layout from 'atomic-layout'

type Breakpoints = 'retina' | 'mobile' | 'desktop'

Layout<Breakpoints>.configure({...})

[redraushan]

Hi @kettanaito,

To have better type checking and suggestions when dealing with breakpoint-based values (<Only/> component, Layout.configure).

What kind of betterment we are looking for type checking/suggestions if I consider <Only/> component ?

At the moment, <Only/> component has following props: for, from, to, and except.
Besides except props, all props are having BreakpointRef type.

Please help me to understand the task.
Thanks

[kettanaito]

Sure. Basically, you can propagate the breakpoints (strings) to such props as the Only component has. So when you type from=" you see the suggested breakpoint names:

xs
sm
md
lg
xl

Those values depend on the breakpoints you have specified in the Layout.configure(), so it may contain custom strings. This would affect any place you refer to the breakpoints.

This is possible to achieve by using generics (I had a PoC branch somewhere on local). However, I am not that strong with TypeScript, and would use some help. If it would be beneficial, I can push the PoC branch and you can follow from there.

[redraushan]

This is something new for me, reading suggestions from configuration looks really good. Could you please push your POC branch I’d love to take a look.

[kettanaito]

@redraushan here you go: https://github.com/kettanaito/atomic-layout/tree/99-ts-generics.