Skip to content
This repository has been archived by the owner on Jan 27, 2024. It is now read-only.

Commit

Permalink
chore: updating modules that uses Ancestor_Config.T
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmarcosp
vmarcosp committed Jul 12, 2022
1 parent d927284 commit 4e2d5bb
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 85 deletions.
7 changes: 4 additions & 3 deletions lib/src/Ancestor.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ include Ancestor_Core

module DefaultConfig = {
type breakpoints<'a> = [#xs('a) | #xs('a) | #sm('a) | #md('a) | #lg('a) | #xl('a)]
type spacing = int
type radius = int

let spacing = 8.0

let radius = 8.0
let spacing = spacing => #px(spacing * 8)
let radius = radius => #px(radius * 8)

let sizeByBreakpoints = values =>
switch values {
Expand Down
6 changes: 3 additions & 3 deletions lib/src/components/base/Ancestor_Base.res
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module Make = (Maker: Ancestor_StylesMaker.T) => {
module Styles = Ancestor_Styles.Make(Maker)
module Make = (Config: Ancestor_Config.T) => {
module Styles = Ancestor_Styles.Make(Config)

@react.component
let make = (
Expand Down Expand Up @@ -425,7 +425,7 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
~textDecoration?,
~transform?,
(),
)->Maker.css
)->Config.css

`${className} ${responsiveStyles}`
},
Expand Down
10 changes: 5 additions & 5 deletions lib/src/components/box/Ancestor_Box.res
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module Make = (Maker: Ancestor_StylesMaker.T) => {
module Styles = Ancestor_Styles.Make(Maker)
module Base = Ancestor_Base.Make(Maker)
module Make = (Config: Ancestor_Config.T) => {
module Styles = Ancestor_Styles.Make(Config)
module Base = Ancestor_Base.Make(Config)

type columns = [
| #1
Expand Down Expand Up @@ -28,7 +28,7 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
Styles.mediaQuery(
styles,
value,
`flex-basis: ${value->Maker.unboxBreakpointValue->basisFromFloat}`,
`flex-basis: ${value->Config.unboxBreakpointValue->basisFromFloat}`,
)

let sortValues = values =>
Expand Down Expand Up @@ -367,7 +367,7 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
<Base
className={
let boxClassName =
columns->Belt.Option.map(sortValues)->Belt.Option.getWithDefault("")->Maker.css
columns->Belt.Option.map(sortValues)->Belt.Option.getWithDefault("")->Config.css
`${boxClassName} ${className}`
}
?borderRadius
Expand Down
15 changes: 8 additions & 7 deletions lib/src/components/grid/Ancestor_Grid.res
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
module Make = (Maker: Ancestor_StylesMaker.T) => {
module Base = Ancestor_Base.Make(Maker)
module Styles = Ancestor_Styles.Make(Maker)
module Make = (Config: Ancestor_Config.T) => {
module Base = Ancestor_Base.Make(Config)
module Styles = Ancestor_Styles.Make(Config)

%%private(
let defaultStyles = Maker.css(`
let defaultStyles = Config.css(`
width: 100%;
flex-wrap: wrap;
display: flex;
`)

let createResponsiveStyles = (currentStyles, value) => {
let spacingInRem = value->Maker.unboxBreakpointValue->Styles.Spacing.make
let spacingInRem =
value->Config.unboxBreakpointValue->Config.spacing->Ancestor_Css.Length.toString

Styles.mediaQuery(
currentStyles,
Expand All @@ -37,7 +38,7 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
values
->Js.Array2.sortInPlaceWith(Styles.sortBySize)
->Belt.Array.reduce("", createResponsiveStyles)
->Maker.css
->Config.css
)
->Belt.Option.getWithDefault(defaultStyles)
)
Expand Down Expand Up @@ -134,7 +135,7 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
~textDecoration=?,
~transform=?,
// Grid props
~spacing: option<Styles.responsiveProp<int>>=?,
~spacing: option<Styles.responsiveProp<Config.spacing>>=?,
~tag: Ancestor_React.tags=#div,
// React props
~children=?,
Expand Down
10 changes: 5 additions & 5 deletions lib/src/components/hidden/Ancestor_Hidden.res
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
module Make = (Maker: Ancestor_StylesMaker.T) => {
module Styles = Ancestor_Styles.Make(Maker)
module Make = (Config: Ancestor_Config.T) => {
module Styles = Ancestor_Styles.Make(Config)

let createStyle = (styles, value) =>
Styles.mediaQuery(
styles,
value,
`
display: ${Maker.unboxBreakpointValue(value) ? "none" : "block"};
display: ${Config.unboxBreakpointValue(value) ? "none" : "block"};
`,
)

Expand All @@ -16,10 +16,10 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
values->Js.Array2.sortInPlaceWith(Styles.sortBySize)->Belt.Array.reduce("", createStyle)
)
->Belt.Option.getWithDefault("")
->Maker.css
->Config.css

@react.component
let make = (~on: option<array<Maker.breakpoints<bool>>>=?, ~children) => {
let make = (~on: option<array<Config.breakpoints<bool>>>=?, ~children) => {
<div className={createHiddenClassName(on)}> children </div>
}
}
6 changes: 4 additions & 2 deletions lib/src/core/Ancestor_Config.res
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
module type T = {
type breakpoints<'value>
let spacing: float
let radius: float
type spacing
type radius
let spacing: spacing => Ancestor_Css.Length.t
let radius: radius => Ancestor_Css.Length.t
let unboxBreakpointValue: breakpoints<'value> => 'value
let sizeByBreakpoints: breakpoints<'value> => int
let css: string => string
Expand Down
19 changes: 10 additions & 9 deletions lib/src/core/Ancestor_Core.res
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
module Make = (StylesMaker: Ancestor_StylesMaker.T) => {
module Styles = Ancestor_Styles.Make(StylesMaker)
module Base = Ancestor_Base.Make(StylesMaker)
module Box = Ancestor_Box.Make(StylesMaker)
module Grid = Ancestor_Grid.Make(StylesMaker)
module Hidden = Ancestor_Hidden.Make(StylesMaker)
module CssTypes = Ancestor_CssTypes
module Spacing = Styles.Spacing
module Radius = Styles.Radius
module Make = (Config: Ancestor_Config.T) => {
module Styles = Ancestor_Styles.Make(Config)
module Base = Ancestor_Base.Make(Config)
module Box = Ancestor_Box.Make(Config)
module Grid = Ancestor_Grid.Make(Config)
module Hidden = Ancestor_Hidden.Make(Config)
module Css = Ancestor_Css.Make({
type spacing = Config.spacing
let spacing = Config.spacing
})
module Typography = Base
}
106 changes: 55 additions & 51 deletions lib/src/core/Ancestor_Styles.res
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
module Make = (Maker: Ancestor_StylesMaker.T) => {
open Ancestor_CssTypes
module Make = (Config: Ancestor_Config.T) => {
module Css = Ancestor_Css.Make({
type spacing = Config.spacing
let spacing = Config.spacing
})

module Spacing = Ancestor_Spacing.Make(Maker)
module Radius = Ancestor_Radius.Make(Maker)
open Css

type responsiveProp<'a> = array<Maker.breakpoints<'a>>
let radius = v => v->Config.radius->Length.toString
let spacing = v => v->Config.spacing->Length.toString

let createBreakpointSize = device => `${device->Maker.sizeByBreakpoints->Belt.Int.toString}px`
type responsiveProp<'a> = array<Config.breakpoints<'a>>
let createBreakpointSize = device => `${device->Config.sizeByBreakpoints->Belt.Int.toString}px`

let mediaQuery = (current, device: Maker.breakpoints<'a>, styles) =>
let mediaQuery = (current, device: Config.breakpoints<'a>, styles) =>
`
${current}
@media (min-width: ${device->createBreakpointSize}) {
Expand All @@ -17,13 +21,13 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
`

let sortBySize = (first, second) =>
Maker.sizeByBreakpoints(first) - Maker.sizeByBreakpoints(second)
Config.sizeByBreakpoints(first) - Config.sizeByBreakpoints(second)

let mergeStyles = (cssKey, stringify, styles, breakpointValue) =>
mediaQuery(
styles,
breakpointValue,
`${cssKey}: ${breakpointValue->Maker.unboxBreakpointValue->stringify};`,
`${cssKey}: ${breakpointValue->Config.unboxBreakpointValue->stringify};`,
)

let createCssValueFromArray = (cssKey, maybeCssValues, stringify) =>
Expand All @@ -36,11 +40,11 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
->Belt.Option.getWithDefault("")

let createResponsiveStyles = (
~borderRadius: option<responsiveProp<Radius.t>>=?,
~borderTLRadius: option<responsiveProp<Radius.t>>=?,
~borderTRRadius: option<responsiveProp<Radius.t>>=?,
~borderBLRadius: option<responsiveProp<Radius.t>>=?,
~borderBRRadius: option<responsiveProp<Radius.t>>=?,
~borderRadius: option<responsiveProp<Config.radius>>=?,
~borderTLRadius: option<responsiveProp<Config.radius>>=?,
~borderTRRadius: option<responsiveProp<Config.radius>>=?,
~borderBLRadius: option<responsiveProp<Config.radius>>=?,
~borderBRRadius: option<responsiveProp<Config.radius>>=?,
~borderStyle: option<responsiveProp<BorderStyle.t>>=?,
~borderColor: option<responsiveProp<Color.t>>=?,
~borderWidth: option<responsiveProp<Length.t>>=?,
Expand Down Expand Up @@ -78,20 +82,20 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
~justifySelf: option<responsiveProp<JustifySelf.t>>=?,
~flexFlow: option<responsiveProp<FlexFlow.t>>=?,
~gap: option<responsiveProp<Gap.t>>=?,
~p: option<responsiveProp<Spacing.t>>=?,
~px: option<responsiveProp<Spacing.t>>=?,
~py: option<responsiveProp<Spacing.t>>=?,
~pt: option<responsiveProp<Spacing.t>>=?,
~pb: option<responsiveProp<Spacing.t>>=?,
~pl: option<responsiveProp<Spacing.t>>=?,
~pr: option<responsiveProp<Spacing.t>>=?,
~m: option<responsiveProp<Spacing.t>>=?,
~mx: option<responsiveProp<Spacing.t>>=?,
~my: option<responsiveProp<Spacing.t>>=?,
~mt: option<responsiveProp<Spacing.t>>=?,
~mb: option<responsiveProp<Spacing.t>>=?,
~ml: option<responsiveProp<Spacing.t>>=?,
~mr: option<responsiveProp<Spacing.t>>=?,
~p: option<responsiveProp<Config.spacing>>=?,
~px: option<responsiveProp<Config.spacing>>=?,
~py: option<responsiveProp<Config.spacing>>=?,
~pt: option<responsiveProp<Config.spacing>>=?,
~pb: option<responsiveProp<Config.spacing>>=?,
~pl: option<responsiveProp<Config.spacing>>=?,
~pr: option<responsiveProp<Config.spacing>>=?,
~m: option<responsiveProp<Config.spacing>>=?,
~mx: option<responsiveProp<Config.spacing>>=?,
~my: option<responsiveProp<Config.spacing>>=?,
~mt: option<responsiveProp<Config.spacing>>=?,
~mb: option<responsiveProp<Config.spacing>>=?,
~ml: option<responsiveProp<Config.spacing>>=?,
~mr: option<responsiveProp<Config.spacing>>=?,
~textAlign: option<responsiveProp<TextAlign.t>>=?,
~fontWeight: option<responsiveProp<FontWeight.t>>=?,
~fontSize: option<responsiveProp<Length.t>>=?,
Expand Down Expand Up @@ -128,11 +132,11 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
(),
) =>
[
createCssValueFromArray("border-radius", borderRadius, Radius.make),
createCssValueFromArray("border-top-left-radius", borderTLRadius, Radius.make),
createCssValueFromArray("border-top-right-radius", borderTRRadius, Radius.make),
createCssValueFromArray("border-bottom-left-radius", borderBLRadius, Radius.make),
createCssValueFromArray("border-bottom-right-radius", borderBRRadius, Radius.make),
createCssValueFromArray("border-radius", borderRadius, radius),
createCssValueFromArray("border-top-left-radius", borderTLRadius, radius),
createCssValueFromArray("border-top-right-radius", borderTRRadius, radius),
createCssValueFromArray("border-bottom-left-radius", borderBLRadius, radius),
createCssValueFromArray("border-bottom-right-radius", borderBRRadius, radius),
createCssValueFromArray("border-style", borderStyle, BorderStyle.toString),
createCssValueFromArray("border-color", borderColor, Color.toString),
createCssValueFromArray("border-width", borderWidth, Length.toString),
Expand Down Expand Up @@ -170,24 +174,24 @@ module Make = (Maker: Ancestor_StylesMaker.T) => {
createCssValueFromArray("justify-self", justifySelf, JustifySelf.toString),
createCssValueFromArray("flex-flow", flexFlow, FlexFlow.toString),
createCssValueFromArray("gap", gap, Gap.toString),
createCssValueFromArray("padding", p, Spacing.make),
createCssValueFromArray("padding-left", px, Spacing.make),
createCssValueFromArray("padding-right", px, Spacing.make),
createCssValueFromArray("padding-top", py, Spacing.make),
createCssValueFromArray("padding-bottom", py, Spacing.make),
createCssValueFromArray("padding-top", pt, Spacing.make),
createCssValueFromArray("padding-bottom", pb, Spacing.make),
createCssValueFromArray("padding-left", pl, Spacing.make),
createCssValueFromArray("padding-right", pr, Spacing.make),
createCssValueFromArray("margin", m, Spacing.make),
createCssValueFromArray("margin-left", mx, Spacing.make),
createCssValueFromArray("margin-right", mx, Spacing.make),
createCssValueFromArray("margin-top", my, Spacing.make),
createCssValueFromArray("margin-bottom", my, Spacing.make),
createCssValueFromArray("margin-top", mt, Spacing.make),
createCssValueFromArray("margin-bottom", mb, Spacing.make),
createCssValueFromArray("margin-left", ml, Spacing.make),
createCssValueFromArray("margin-right", mr, Spacing.make),
createCssValueFromArray("padding", p, spacing),
createCssValueFromArray("padding-left", px, spacing),
createCssValueFromArray("padding-right", px, spacing),
createCssValueFromArray("padding-top", py, spacing),
createCssValueFromArray("padding-bottom", py, spacing),
createCssValueFromArray("padding-top", pt, spacing),
createCssValueFromArray("padding-bottom", pb, spacing),
createCssValueFromArray("padding-left", pl, spacing),
createCssValueFromArray("padding-right", pr, spacing),
createCssValueFromArray("margin", m, spacing),
createCssValueFromArray("margin-left", mx, spacing),
createCssValueFromArray("margin-right", mx, spacing),
createCssValueFromArray("margin-top", my, spacing),
createCssValueFromArray("margin-bottom", my, spacing),
createCssValueFromArray("margin-top", mt, spacing),
createCssValueFromArray("margin-bottom", mb, spacing),
createCssValueFromArray("margin-left", ml, spacing),
createCssValueFromArray("margin-right", mr, spacing),
createCssValueFromArray("text-align", textAlign, TextAlign.toString),
createCssValueFromArray("font-weight", fontWeight, FontWeight.toString),
createCssValueFromArray("font-size", fontSize, Length.toString),
Expand Down

0 comments on commit 4e2d5bb

Please sign in to comment.