rescriptbr / ancestor Goto Github PK
View Code? Open in Web Editor NEW:skull: UI primitives for ReScript and React
Home Page: https://ancestor.netlify.app
:skull: UI primitives for ReScript and React
Home Page: https://ancestor.netlify.app
Spacing
Radius
Length.t
float
or int
bgSize
cover
bgImage
none
initial
Nowadays, the gap
prop is the only spacing prop typed as Length.t
, but should be typed as Spacing.t
(now Config.spacing
).
โ ๏ธ This will be a breaking change, so we should provide a migration guide on the release notes.
Nowadays, we don't support all CSS props. We can improve by supporting props like overflow
, list-style
, outline
, etc.
gap
list-style
list-style-type
list-style-position
list-style-image
outline
text-decoration
background-size
background-position
background-image
Nowadays, the module Spacing (and Radius) is using an int
type to represent the scale factor. Sometimes, the design team defines scale factor that allows something 1.25x
of spacing/radius. Ancestor doesn't have support for this kind of value since the Spacing.t (and Radius.t) is just a type alias for int
.
We should allow user set a custom type for these modules. This is probably a breaking change, but we can also provide a migration guide on the release notes.
TBD
<Stack />
Color.t
vs Config.colors
)useResponsiveValue(...)
The current color API is based on the Color.t
module. We could provide a feature that relies on the module functor to create a variant based approach like Chakra UI
or Material UI
.
module Ancestor = Ancestor.Make({
type color = [
| #gray100
| #gray200
| #primary100
| #primary200
]
let colors = color => switch color {
| #gray100 => "#caca"
| #gray200 => "#cecece"
| #primary100 => "#f36"
| #primary200 => "#f33"
}
})
// Usage
<Box bgColor=[xs(#gray100)] color=[xs(#100)]>
</Box>
<Stack />
N/A
open Ancestor
<Stack gap=[xxs(2)] align=[xxs(#center), md(#"flex-end")]>
....
</Stack>
We need a tool to create the documentation website.
opacity
bgRepeat
bgAttachment
columnCount
(#53)boxSize
verticalAlign
fontStyle
Add a js mode to the Hidden component.
open Ancestor
// Mode / Implementation type
type mode = [#js | #css]
// Usage
<Hidden on=[#xs(true), #md(false)] mode=#js>
....
</Hidden>
Closed by #86
<Hidden />
Responsively toggle the visibility of components.
open Ancestor
<Hidden in=[#xxs(true), #md(false)] implementation=#css>
.....
</Hidden>
There are properties of the API that we want to make "customizable".
Add CSS column-count Property.
๐ง๐ท Adicionar a Propriedade de contagem de colunas CSS (column-cout).
We don't support all CSS units like vh
, vw
or em
, pc
.
We could add a dedicated to page to explain how the responsive styles works and how to use with interactive examples.
I saw you invested a lot of effort into writing your own emotion wrapper.
I'm curious if you considered building on top of bs-css? And if so, why you didn't?
.js
config file (ancestor.config.js
)Generating the customization file using a .js
config file.
// ancestor.config.js
export default {
breakpoints: {
xs: 0,
sm: 400,
lg: 720,
},
spacing: v => v * 8,
zIndex: {
base: 0,
above: 5,
aboveAll,
}
}
// Ancestor.res
module AncestorX = Ancestor.Make({
type breakpoints<'a> = {
xs?: 'a,
sm?: 'a,
lg?: 'a,
}
type fields = Xs | Sm | Lg
let encode = breakpoints => [
(Xs, breakpoints.xs),
(Sm, breakpoints.sm),
(Lg, breakpoints.lg),
]
let sizeByBreakpoints = breakpoint =>
switch breakpoint {
| Xs => 0
| Sm => 400
| Lg => 1280
}
type zIndex = [ #base | #above | #aboveAll]
let zIndex = v => switch v {
| #base => 0
| #above => 5
| #aboveAll => 10
}
type colors = Ancestor_Css.Color.t
let colors = v => v
type spacing = int
let spacing = spacing => #px(spacing * 8)
type radius = int
let radius = radius => #px(radius * 8)
let css = Ancestor_Emotion.css
})
Generating the breakpoints record using a PPX.
// Ancestor.res
module AncestorX = Ancestor.Make({
@ancestor.breakpoints
type breakpoints = Xs | Sm | Lg
let sizeByBreakpoints = breakpoint =>
switch breakpoint {
| Xs => 0
| Sm => 400
| Lg => 1280
}
type zIndex = [ #base | #above | #aboveAll]
let zIndex = v => switch v {
| #base => 0
| #above => 5
| #aboveAll => 10
}
type colors = Ancestor_Css.Color.t
let colors = v => v
type spacing = int
let spacing = spacing => #px(spacing * 8)
type radius = int
let radius = radius => #px(radius * 8)
let css = Ancestor_Emotion.css
})
Nowadays, we don't support all CSS props. We can improve by supporting props like overflow
, list-style
, outline
, etc.
cursor
overflow
overflow-x
overflow-y
visibility
list-style
list-style-type
outline
outline-style
text-decoration
text-decoration-style
background-size
background-position
background-cover
transform
border-(top|bottom|left|right)-style
border-(top|bottom|left|right)-width
border-(top|bottom|left|right)-color
Add snapshot tests using jest + emotion-jest.
Support all HTML tags as a prop of Base
component.
Allow customize the CSS in JS library through module functors.
module CustomAncestor = Ancestor.Make({
...
// Custom CSS function (e.g @emotion/css, styled-components, goober)
@module("goober") external css: string => string = "css"
})
<Box
_hover=style(~bgColor=[xs(Colors.red)], ())
_active=style(
~color=[xs(Colors.gray),
~bgColor=[xs(Colors.red],
(),
)
/>
// Using new optional fields API
<Box
_hover={ "bgColor": { "xs": Colors.red } }
_active={
"color": { "xs" : Colors.gray },
"bgColor": { "xs": Colors.red }
}
/>
We need to create documentation for the library. Since we're using ReScript it will be greater if we have a simple way to create documentation about the library's components, props, functions, and types.
Add all CSS grid properties to the Base
component.
Support all CSS props related to layout primitives.
font-size
letter-spacing
text-align
font-weight
border-radius
background-color
๐กcolor
๐กborder
(*-top
,*-left
, etc) ๐กlist-style
flex-flow
flex-grow
align-content
align-self
justify-self
๐ก - Analysis
Hi,
I saw you are using @greenlabs/ppx-ts/ppx
(keyOf
) only at core/Ancestor.res#5.
I'm wondering if it would make sense to just hard-code this one type manually?
Personally - as a future ancestor user - I'd like to see as few ppx's involved as possible. - for the sake of simplicity and performance
We could add support for custom tokens related to font properties:
line-height
font-family
font-size
font-weight
letter-spacing
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.