mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
* Port Storybook * Remove extrablatt * Improve cluster * Magic Johnson * Remove mentions of Plumage And delete some unnecessary stuff * Hä * I have changed the code files * Reexports for typeahead * Bring Select back * Fix dark mode of select * Move out react-aria * Export select properly * Make select work I guess
127 lines
3.6 KiB
Plaintext
127 lines
3.6 KiB
Plaintext
module Story.Yoga.Block.Atom.Layout
|
|
( default
|
|
, layout
|
|
) where
|
|
|
|
import Yoga.Prelude.Style
|
|
|
|
import Data.Tuple.Nested ((/\))
|
|
import Effect.Unsafe (unsafePerformEffect)
|
|
import Fahrtwind as F
|
|
import Fahrtwind as FW
|
|
import React.Basic (JSX, element, fragment)
|
|
import React.Basic.DOM as R
|
|
import React.Basic.Emotion as E
|
|
import React.Basic.Hooks as React
|
|
import Storybook (Meta, meta, metaDecorator)
|
|
import Yoga ((</>))
|
|
import Yoga.Block as Block
|
|
import Yoga.Block.Atom.Button.Types (ButtonShape(..), ButtonType(..))
|
|
import Yoga.Block.Container.Style as Styles
|
|
import Yoga.Block.Layout.Types (AlignItems(..), JustifyContent(..))
|
|
|
|
default ∷ Meta {}
|
|
default = meta
|
|
{ title: "layout"
|
|
, component: mempty
|
|
, decorators:
|
|
[ metaDecorator \storyFn →
|
|
fragment
|
|
[ element E.global
|
|
{ styles: Styles.global
|
|
<> css { "highlight-col": str "#ec0" }
|
|
}
|
|
, storyFn
|
|
]
|
|
]
|
|
}
|
|
|
|
bg = FW.background'
|
|
|
|
colBox co = Block.box { css: FW.roundedDefault <> bg co }
|
|
|
|
mainContent = Block.stack
|
|
{ space: sizeStyle.s
|
|
, css: FW.background' col.backgroundLayer1
|
|
, splitAfter: 3
|
|
}
|
|
[ colBox col.backgroundLayer1
|
|
[ Block.cluster
|
|
{ space: size.m
|
|
, rowSpace: size.s
|
|
, justifyContent: JEnd
|
|
, alignItems: ACenter
|
|
}
|
|
[ Block.button
|
|
{ buttonType: Primary
|
|
}
|
|
[ R.text "Sign up" ]
|
|
, Block.button {} [ R.text "Sign in" ]
|
|
]
|
|
]
|
|
, Block.box_
|
|
[ Block.grid { min: "150px" }
|
|
[ colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
]
|
|
]
|
|
, Block.box_
|
|
[ Block.cluster { space: size.s, rowSpace: size.xs }
|
|
[ colBox col.backgroundLayer4 [ R.text "Child Row 2 1" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Child Row 2 2" ]
|
|
]
|
|
]
|
|
, Block.box_
|
|
[ Block.switcher { rowGap: "8px" }
|
|
[ colBox col.backgroundLayer4 [ R.text "Switch me up" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Switch me too" ]
|
|
, colBox col.backgroundLayer4 [ R.text "Switchy" ]
|
|
]
|
|
]
|
|
]
|
|
|
|
leftSidebar = Block.sidebar
|
|
{ sidebar: Block.stack
|
|
{ space: sizeStyle.xxs
|
|
, splitAfter: 1
|
|
}
|
|
[ Block.button
|
|
{ buttonShape: Flat
|
|
, css: widthFull
|
|
, backgroundCol: col.backgroundLayer4
|
|
, hoverBackgroundCol: col.backgroundLayer5
|
|
, textCol: str (colour.text)
|
|
, ripple: colourWithAlpha.text 0.3
|
|
}
|
|
[ Block.box
|
|
{ css: textLeft <> widthFull
|
|
, padding: str "4px 0"
|
|
}
|
|
[ R.text "Sidebar First" ]
|
|
]
|
|
, colBox col.backgroundLayer3 [ R.text "Sidebar Second" ]
|
|
]
|
|
, space: "8px"
|
|
, sideWidth: size."3xl"
|
|
, css: heightFull
|
|
}
|
|
|
|
layout ∷ Effect JSX
|
|
layout = pure $ layoutCompo </> {}
|
|
|
|
layoutCompo =
|
|
unsafePerformEffect $ React.reactComponent "LayoutExample" \_ → React.do
|
|
modalVisible /\ setModalVisible ← React.useState false
|
|
pure $ Block.box
|
|
{ css: heightFull
|
|
<> background' col.backgroundBright3
|
|
}
|
|
[ leftSidebar [ mainContent ]
|
|
]
|