rescriptbr / ancestor Goto Github PK

References

• https://chakra-ui.com/docs/components/center

Add CSS column-count Property.
🇧🇷 Adicionar a Propriedade de contagem de colunas CSS (column-cout).

Description

Add all CSS grid properties to the Base component.

References

MDN Documentation - CSS Grid

Description

Support all HTML tags as a prop of Base component.

Tags

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element

Description

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.

Proposal

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.

Draft

TBD

Feature: <Stack />

N/A

Draft

open Ancestor

<Stack gap=[xxs(2)] align=[xxs(#center), md(#"flex-end")]>
....
</Stack>

References

• Braid's Stack
• Chakra UI's Stack

Description

Nowadays, we don't support all CSS props. We can improve by supporting props like overflow, list-style, outline, etc.

Props

• gap
• list-style
• list-style-type
• list-style-position
• list-style-image
• outline
• text-decoration
• background-size
• background-position
• background-image

Description

Support all CSS props related to layout primitives.

Texts

• font-size
• letter-spacing
• text-align
• font-weight

General

• border-radius
• background-color💡
• color💡
• border (*-top,*-left, etc) 💡

Lists

• list-style

Flex

• flex-flow
• flex-grow
• align-content
• align-self
• justify-self

Notes

💡 - Analysis

References

• https://chakra-ui.com/docs/components/center

Description

Add a js mode to the Hidden component.

Draft

open Ancestor

// Mode / Implementation type
type mode = [#js | #css]

// Usage 
<Hidden on=[#xs(true), #md(false)] mode=#js>
....
</Hidden>

Description

We don't support all CSS units like vh, vwor em, pc.

Units

• em
• ch
• rem
• vw
• vh
• vmin
• vmax
• %
• cm
• mm
• in
• px
• pt
• pc

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

bgSize

• cover

bgImage

• none
• initial

Description

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.

References

• https://chakra-ui.com/docs/components/center

Description

We could add support for custom tokens related to font properties:

• line-height
• font-family
• font-size
• font-weight
• letter-spacing

Color/ Background

• opacity
• bgRepeat
• bgAttachment
• columnCount(#53)

Layout

• boxSize
• verticalAlign

Font / Typography

• fontStyle

• <Stack />
• Style props (Color.t vs Config.colors)
• Customization (zIndex, colors, etc)
• useResponsiveValue(...)

TODO

• New API using the experimental optional fields (ReScript @ v10) ➡️ #72
• New customization API ➡️ #73

Customization API

• Spacing
• Border Radius
• Breakpoints
• ZIndex
• CSS in JS Library

Drafts

1. Using a .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
})

2. Using a PPX

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
})

Description

Allow customize the CSS in JS library through module functors.

Draft

module CustomAncestor = Ancestor.Make({
  ...
  // Custom CSS function (e.g @emotion/css, styled-components, goober)
 @module("goober") external css: string => string = "css"
})

References:

• https://chakra-ui.com/docs/hooks/use-breakpoint-value
• https://seek-oss.github.io/braid-design-system/components/useResponsiveValue

Description

Nowadays, we don't support all CSS props. We can improve by supporting props like overflow, list-style, outline, etc.

Props

• 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

Description

We need a tool to create the documentation website.

Options

• Docusaurus
• Storybook
• Docz

Description

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.

Draft

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>

Feature: <Hidden />

Responsively toggle the visibility of components.

Draft

open Ancestor

<Hidden in=[#xxs(true), #md(false)] implementation=#css>
  .....
</Hidden>

References

• Hidden from Material UI

Todo

• Spacing
• Radius
• Usage of Length.t
• Usage of float or int

Closed by #86

Description

Add snapshot tests using jest + emotion-jest.

Modules / Components

• Hidden
• Base
• Box
• Grid

Description

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.

Tasks

• Translate from pt-br to en-us
• "What and Why?" section
• Installation section
• Getting started section
• Documentation of all responsive props
• Examples section
• Documentation of all components and props
• Documentation of all functions and types

System props

• borderRadius
• border
• borderRight
• borderLeft
• borderTop
• borderBottom
• bgColor
• color
• display
• justifyContent
• flexDirection
• alignItems
• flexBasis
• flexWrap
• flexGrow
• alignContent
• alignSelf
• justifySelf
• flexFlow
• p
• px
• py
• pt
• pb
• pl
• pr
• m
• mx
• my
• mt
• mb
• ml
• mr
• textAlign
• fontWeight
• fontSize
• letterSpacing
• lineHeight
• width
• height
• minW
• minH
• maxW
• maxH
• position
• top
• bottom
• left
• right
• zIndex
• boxSizing

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?

Description

We could add a dedicated to page to explain how the responsive styles works and how to use with interactive examples.

Draft

<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 } 
   }
/>

Description

There are properties of the API that we want to make "customizable".

Tasks

• Allow spacing customization
• Allow breakpoints customization