diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..639900d
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..0f09acb
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/ry-blocks.iml b/.idea/ry-blocks.iml
new file mode 100644
index 0000000..d6ebd48
--- /dev/null
+++ b/.idea/ry-blocks.iml
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.purs-repl b/.purs-repl
deleted file mode 100644
index 6802fc7..0000000
--- a/.purs-repl
+++ /dev/null
@@ -1 +0,0 @@
-import Prelude
diff --git a/README.md b/README.md
index 391c0ff..8a00e7e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,24 @@
+# PureScript Yoga Blocks
+
+> *Ring the bells that still can ring*
+> *Forget your perfect offering*
+> *There is a crack in everything*
+> *That's how the light gets in* * — Leonard Cohen, Anthem *
+
+## Digital User Interfaces
+
+### Producing information
+
+- Familiar
+- Intuitive
+- Quick
+- Clear (not confusing)
+
+### Creating and changing information
+
+- Familiar
+- Intuitive
+
## Adding new icons
Place the svg in `src/Yoga/Blocks/Icon/SVG
diff --git a/shit.html b/shit.html
deleted file mode 100644
index bc407df..0000000
--- a/shit.html
+++ /dev/null
@@ -1,43 +0,0 @@
-
Google Pixel 2 screen resolution - Google Suche Klicke hier , wenn du nach einigen Sekunden nicht automatisch weitergeleitet wirst.
Pixel 2 - 5-inch 16:9 AMOLED, 1920 x 1080 pixels (441 ppi), 67.9% screen-to-body ratio, Corning Gorilla Glass 5, 95% DCI-P3 coverage.
Google Pixel 2 ; Display, Type ; Size, 5.0 inches, 68.9 cm2 (~67.9% screen-to-body ratio) ; Resolution, 1080 x 1920 pixels, 16:9 ratio (~441 ppi density).
Size: 5.0 inches, 68.9 cm2 (~67.9% screen-to-body ratio) Resolution: 1080 x 1920 pixels, 16:9 ratio (~441 ppi density) Internal: 64GB 4GB RAM, 128GB 4GB RAM Camera: Photo / Video
Is the Google pixel 2 4K?
Is Google pixel screen 4K?
How big is a Pixel 2 screen?
Google Pixel 2 have 5.0" physical screen size and its resolution is about 1080x1920 Pixels with approximately 441 PPI pixel density. Google Pixel 2 has viewport ...
Pixel 2 ; 12.2 MP ; 1.4 µm pixel size ; HD 720p (up to 240 FPS) ; FHD 1080p video (up to 120 FPS) ; 4K 2160p video (up to 30 FPS) ...
Display:
Pixel 2: 5 in (130 mm) FHD AMOLED , 1920 × 1080 (441 ppi); Pixel 2 XL: 6 in (150 mm) QHD P-OLED , 2880 × 1440 (538 ... Front camera:
8 MP; Sony Exmor IMX179; 1.4 µm pixel size; f/2.4 aperture Rear camera:
Sony Exmor IMX362; 12.2 MP; 1.4 µm pixel size; f/1.8 aperture; Phase-detection autofocus and laser autofocus; H... Model:
G011A (Pixel 2); G011C (Pixel 2 XL) 17.10.2017 · Google Pixel 2 has a 5.0-inch screen with a screen size (resolution): 1080px × 1920px, 412px × 732px viewport1, and a CSS Pixel Ratio of 2.6.
Bewertung 8,6/10
· Rezension von Lynn La 06.06.2018 · The Pixel 2 XL has a bigger 6-inch display and a higher resolution than the 5-inch Pixel 2. It also uses a plastic-OLED (POLED) display, while ...
Display size, resolution: 5-inch AMOLED; 1,920x1080 pixels Pixel density: 441 ppi Dimensions (inches): 5.7x2.7x0.3 in Dimensions (millimeters): 145.7x69.7x7.8 mm
screen-size:5.0Inch (127mm); Resolution:1080 x 1920; depth:7.8mm (0.31Inch); height:145.7mm (5.74Inch); width:69.7mm (2.74Inch) ...
Resolution: 1080 x 1920 Height: 145.7mm (5.74Inch) Width: 69.7mm (2.74Inch) Depth: 7.8mm (0.31Inch)
The Google Pixel 2 XL (2nd Gen) has height of 6.22” (157.9 mm), width of 3.02” (76.7 mm), depth of .31” (7.9 mm), and weighs 6.17 oz (175 g). The screen size is ...
16.01.2021 · Google Pixel 2 XL, CSS viewport resolution, pixel density, screen size, media queries. All the information to define CSS breakpoints and ...
Google Pixel 2 specifications - Display: 5.0 inches AMOLED; Camera: 12.2 MP (OIS, Laser and PDAF, CMOS image sensor); Processor: Qualcomm Snapdragon 835 ...
Size: 5.0 inches Resolution: 1920 x 1080 pixels, 16:9 ratio, 441 PPI Features: Scratch-resistant glass (Corning Gorilla Glass 5), Ambient light sensor, Proximity sensor
\ No newline at end of file
diff --git a/src/React/Downshift.purs b/src/React/Downshift.purs
deleted file mode 100644
index e0054b0..0000000
--- a/src/React/Downshift.purs
+++ /dev/null
@@ -1,43 +0,0 @@
-module React.Downshift where
-
-import Prelude
-import Data.Maybe (Maybe)
-import Effect (Effect)
-import Effect.Uncurried (runEffectFn1)
-import Prim.Row (class Union)
-import React.Basic.Hooks (Hook, unsafeHook)
-import React.Downshift.Internal (useSelectImpl)
-import React.Downshift.Types (UseSelectDataImpl, UseSelectPropsImpl)
-import React.Downshift.Types.StateChangeType (StateChangeType)
-import Unsafe.Coerce (unsafeCoerce)
-import Yoga.Block.Internal (OptionalProp, Id)
-
-type UseSelectPropsR f a =
- ( items ∷ Array a
- , itemToString ∷ f (a -> String)
- , onSelectedItemChange ∷ f ({ type ∷ StateChangeType, selectedItem ∷ Maybe a } -> Effect Unit)
- )
-
-type UseSelectProps f a =
- Record (UseSelectPropsR f a)
-
-type UseSelectData a =
- UseSelectDataImpl a
-
--- https://gist.github.com/reactormonk/974797077929efd5ae899b9e8eaac65d
-useSelect ∷ ∀ a p q. Union p q (UseSelectPropsR Id a) => { items ∷ Array a | p } -> Hook (UseSelect a) (UseSelectData a)
-useSelect props =
- map toUseSelectData
- $ unsafeHook
- $ runEffectFn1 useSelectImpl (toUseSelectProps props)
-
-toUseSelectData ∷ ∀ a. UseSelectDataImpl a -> UseSelectData a
-toUseSelectData = identity
-
-toUseSelectProps ∷ ∀ a. ∀ p q. Union p q (UseSelectPropsR Id a) => { items ∷ Array a | p } -> UseSelectPropsImpl a
-toUseSelectProps realProps = unsafeCoerce props
- where
- props ∷ { | UseSelectPropsR OptionalProp a }
- props = unsafeCoerce realProps
-
-foreign import data UseSelect ∷ Type -> Type -> Type
diff --git a/src/React/Downshift/Internal.js b/src/React/Downshift/Internal.js
deleted file mode 100644
index 22d0cf6..0000000
--- a/src/React/Downshift/Internal.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { useSelect } from "downshift"
-export const useSelectImpl = useSelect
diff --git a/src/React/Downshift/Internal.purs b/src/React/Downshift/Internal.purs
deleted file mode 100644
index 4237804..0000000
--- a/src/React/Downshift/Internal.purs
+++ /dev/null
@@ -1,10 +0,0 @@
-module React.Downshift.Internal where
-
-import Effect.Uncurried (EffectFn1)
-import React.Downshift.Types (UseSelectPropsImpl, UseSelectDataImpl)
-
-foreign import useSelectImpl
- ∷ ∀ a
- . EffectFn1
- (UseSelectPropsImpl a)
- (UseSelectDataImpl a)
diff --git a/src/React/Downshift/Types.purs b/src/React/Downshift/Types.purs
deleted file mode 100644
index b90d9de..0000000
--- a/src/React/Downshift/Types.purs
+++ /dev/null
@@ -1,54 +0,0 @@
-module React.Downshift.Types where
-
-import Prelude
-import Data.Nullable (Nullable)
-import Effect (Effect)
-import Effect.Uncurried (EffectFn1)
-import Foreign (Foreign)
-import React.Downshift.Types.StateChangeType (StateChangeType)
-
-type UseSelectDataImpl a =
- { isOpen ∷ Boolean
- , selectedItem ∷ a
- , closeMenu ∷ Effect Unit
- , getItemProps ∷ { item ∷ a, index ∷ Int } -> Foreign
- , getLabelProps ∷ Foreign --ƒ (labelProps)
- , getMenuProps ∷ Foreign -- ƒ (_temp, _temp2)
- , getToggleButtonProps ∷ Foreign -- ƒ (_temp3, _temp4)
- , highlightedIndex ∷ Int
- , inputValue ∷ String
- , isOpen ∷ Boolean
- , openMenu ∷ Effect Unit
- , reset ∷ Effect Unit
- , selectItem ∷ EffectFn1 a Unit
- , selectedItem ∷ Nullable a
- , setHighlightedIndex ∷ EffectFn1 Int Unit
- , setInputValue ∷ EffectFn1 String Unit
- , toggleMenu ∷ Effect Unit
- }
-
-type A11yMessageInfoImpl a =
- { highlightedIndex ∷ Int
- , highlightedItem ∷ Nullable a
- , inputValue ∷ String
- , isOpen ∷ Boolean
- , itemToString ∷ a -> String
- , previousResultCount ∷ Int
- , resultCount ∷ Int
- , selectedItem ∷ Nullable a
- }
-
-type UseSelectPropsImpl a =
- { items ∷ Array a
- , itemToString ∷ a -> String
- , onSelectedItemChange ∷ EffectFn1 { type ∷ StateChangeType, selectedItem ∷ Nullable a } Unit
- , initialSelectedItem ∷ a -- defaults to null
- , initialIsOpen ∷ Boolean -- defaults to false
- , initialHighlightedIndex ∷ Int -- defaults to -1
- , defaultSelectedItem ∷ a -- defaults to null
- , defaultIsOpen ∷ Boolean -- defaults to false
- , defaultHighlightedIndex ∷ Int -- defaults to -1
- , getA11yStatusMessage ∷ Foreign -> Foreign -- defaults to undefined
- , getA11ySelectionMessage ∷ Foreign -> Foreign -- defaults to undefined
- , onHighlightedIndexChange ∷ Foreign -> Foreign -- defaults to undefined
- }
diff --git a/src/React/Downshift/Types/StateChangeType.js b/src/React/Downshift/Types/StateChangeType.js
deleted file mode 100644
index c331b6d..0000000
--- a/src/React/Downshift/Types/StateChangeType.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const stateChangeTypes = require("downshift").useSelect.stateChangeTypes
-
-export const menuKeyDownArrowDown = stateChangeTypes.MenuKeyDownArrowDown
-export const menuKeyDownArrowUp = stateChangeTypes.MenuKeyDownArrowUp
-export const menuKeyDownEscape = stateChangeTypes.MenuKeyDownEscape
-export const menuKeyDownHome = stateChangeTypes.MenuKeyDownHome
-export const menuKeyDownEnd = stateChangeTypes.MenuKeyDownEnd
-export const menuKeyDownEnter = stateChangeTypes.MenuKeyDownEnter
-export const menuKeyDownSpaceButton = stateChangeTypes.MenuKeyDownSpaceButton
-export const menuKeyDownCharacter = stateChangeTypes.MenuKeyDownCharacter
-export const menuBlur = stateChangeTypes.MenuBlur
-export const menuMouseLeave = stateChangeTypes.MenuMouseLeave
-export const itemMouseMove = stateChangeTypes.ItemMouseMove
-export const itemClick = stateChangeTypes.ItemClick
-export const toggleButtonClick = stateChangeTypes.ToggleButtonClick
-export const toggleButtonKeyDownCharacter =
- stateChangeTypes.ToggleButtonKeyDownCharacter
-export const toggleButtonKeyDownArrowDown =
- stateChangeTypes.ToggleButtonKeyDownArrowDown
-export const toggleButtonKeyDownArrowUp =
- stateChangeTypes.ToggleButtonKeyDownArrowUp
-export const functionToggleMenu = stateChangeTypes.FunctionToggleMenu
-export const functionOpenMenu = stateChangeTypes.FunctionOpenMenu
-export const functionCloseMenu = stateChangeTypes.FunctionCloseMenu
-export const functionSetHighlightedIndex =
- stateChangeTypes.FunctionSetHighlightedIndex
-export const functionSelectItem = stateChangeTypes.FunctionSelectItem
-export const functionSetInputValue = stateChangeTypes.FunctionSetInputValue
-export const functionReset = stateChangeTypes.FunctionReset
diff --git a/src/React/Downshift/Types/StateChangeType.purs b/src/React/Downshift/Types/StateChangeType.purs
deleted file mode 100644
index 13326b5..0000000
--- a/src/React/Downshift/Types/StateChangeType.purs
+++ /dev/null
@@ -1,49 +0,0 @@
-module React.Downshift.Types.StateChangeType where
-
-foreign import data StateChangeType ∷ Type
-
-foreign import menuKeyDownArrowDown ∷ StateChangeType
-
-foreign import menuKeyDownArrowUp ∷ StateChangeType
-
-foreign import menuKeyDownEscape ∷ StateChangeType
-
-foreign import menuKeyDownHome ∷ StateChangeType
-
-foreign import menuKeyDownEnd ∷ StateChangeType
-
-foreign import menuKeyDownEnter ∷ StateChangeType
-
-foreign import menuKeyDownSpaceButton ∷ StateChangeType
-
-foreign import menuKeyDownCharacter ∷ StateChangeType
-
-foreign import menuBlur ∷ StateChangeType
-
-foreign import menuMouseLeave ∷ StateChangeType
-
-foreign import itemMouseMove ∷ StateChangeType
-
-foreign import itemClick ∷ StateChangeType
-
-foreign import toggleButtonClick ∷ StateChangeType
-
-foreign import toggleButtonKeyDownCharacter ∷ StateChangeType
-
-foreign import toggleButtonKeyDownArrowDown ∷ StateChangeType
-
-foreign import toggleButtonKeyDownArrowUp ∷ StateChangeType
-
-foreign import functionToggleMenu ∷ StateChangeType
-
-foreign import functionOpenMenu ∷ StateChangeType
-
-foreign import functionCloseMenu ∷ StateChangeType
-
-foreign import functionSetHighlightedIndex ∷ StateChangeType
-
-foreign import functionSelectItem ∷ StateChangeType
-
-foreign import functionSetInputValue ∷ StateChangeType
-
-foreign import functionReset ∷ StateChangeType
diff --git a/src/Yoga/Block/Atom/Button/Story.purs b/src/Yoga/Block/Atom/Button/Story.purs
index 0ebe03b..751de90 100644
--- a/src/Yoga/Block/Atom/Button/Story.purs
+++ b/src/Yoga/Block/Atom/Button/Story.purs
@@ -33,6 +33,7 @@ default =
]
}
+
button ∷ Effect JSX
button = do
pure
diff --git a/src/Yoga/Block/Atom/CodeInput.purs b/src/Yoga/Block/Atom/CodeInput.purs
deleted file mode 100644
index 4c8ead9..0000000
--- a/src/Yoga/Block/Atom/CodeInput.purs
+++ /dev/null
@@ -1,5 +0,0 @@
-module Yoga.Block.Atom.CodeInput
- ( module Yoga.Block.Atom.CodeInput.View
- ) where
-
-import Yoga.Block.Atom.CodeInput.View (component, Props)
diff --git a/src/Yoga/Block/Atom/CodeInput/Spec.purs b/src/Yoga/Block/Atom/CodeInput/Spec.purs
deleted file mode 100644
index cbe7a3d..0000000
--- a/src/Yoga/Block/Atom/CodeInput/Spec.purs
+++ /dev/null
@@ -1,20 +0,0 @@
-module Yoga.Block.Atom.CodeInput.Spec where
-
-import Yoga.Prelude.Spec
-import Foreign.Object as Object
-import Yoga.Block.Atom.CodeInput as CodeInput
-
-spec ∷ Spec Unit
-spec =
- after_ cleanup do
- describe "The codeInput" do
- it "renders without errors" do
- renderComponent CodeInput.component {} # void
- it "accepts input props" do
- { findByTestId } <-
- renderComponent CodeInput.component
- { disabled: true
- , _data: Object.singleton "testid" "code-input"
- }
- elem <- findByTestId "code-input"
- elem `shouldHaveAttribute` "disabled"
diff --git a/src/Yoga/Block/Atom/CodeInput/Story.purs b/src/Yoga/Block/Atom/CodeInput/Story.purs
deleted file mode 100644
index fc4a199..0000000
--- a/src/Yoga/Block/Atom/CodeInput/Story.purs
+++ /dev/null
@@ -1,83 +0,0 @@
-module Yoga.Block.Atom.CodeInput.Story where
-
-import Prelude
-import Control.Monad.Maybe.Trans (lift, runMaybeT)
-import Data.Foldable (traverse_)
-import Data.Newtype (wrap)
-import Data.Nullable as Nullable
-import Data.Tuple.Nested ((/\))
-import Effect (Effect)
-import Effect.Unsafe (unsafePerformEffect)
-import React.Basic (JSX, element, elementKeyed, fragment)
-import React.Basic.DOM as R
-import React.Basic.DOM.Events (targetValue)
-import React.Basic.Emotion as E
-import React.Basic.Events (handler)
-import React.Basic.Hooks (reactComponent)
-import React.Basic.Hooks as React
-import Web.HTML.HTMLElement (focus)
-import Web.HTML.HTMLElement as HTMLElement
-import Yoga.Block.Atom.CodeInput as CodeInput
-import Yoga.Block.Container.Style as Styles
-
-default ∷
- { decorators ∷ Array (Effect JSX -> JSX)
- , title ∷ String
- }
-default =
- { title: "Atom/CodeInput"
- , decorators:
- [ \storyFn ->
- R.div_
- [ element E.global { styles: Styles.global }
- , unsafePerformEffect storyFn
- ]
- ]
- }
-
-codeInput ∷ Effect JSX
-codeInput = do
- pure
- $ fragment
- [ R.h2_ [ R.text "No Options" ]
- , element CodeInput.component
- {}
- , element CodeInput.component
- { maxLength: 3 }
- , React.element refCompo {}
- , React.element controlled {}
- ]
- where
- refCompo =
- unsafePerformEffect
- $ reactComponent "Code Input Story" \{} -> React.do
- ref <- React.useRef Nullable.null
- React.useEffectAlways
- $ do
- _ <-
- runMaybeT do
- node <- React.readRefMaybe ref # wrap
- elem <- HTMLElement.fromNode node # pure # wrap
- focus elem # lift
- mempty
- pure
- $ fragment
- [ R.h2_ [ R.text "With Ref" ]
- , element CodeInput.component
- { ref
- }
- ]
-
- controlled =
- unsafePerformEffect
- $ reactComponent "Code Input Controlled Story" \{} -> React.do
- text /\ setText <- React.useState' ""
- pure
- $ fragment
- [ R.h2_ [ R.text "Controlled" ]
- , elementKeyed CodeInput.component
- { value: text
- , onChange: handler targetValue (traverse_ setText)
- , key: "robinson-crusoe"
- }
- ]
diff --git a/src/Yoga/Block/Atom/CodeInput/Style.purs b/src/Yoga/Block/Atom/CodeInput/Style.purs
deleted file mode 100644
index f2f4689..0000000
--- a/src/Yoga/Block/Atom/CodeInput/Style.purs
+++ /dev/null
@@ -1,54 +0,0 @@
-module Yoga.Block.Atom.CodeInput.Style where
-
-import Yoga.Prelude.Style
-import Data.Interpolate (i)
-import Yoga.Block.Container.Style (colour)
-
-type Props :: forall k. (Type -> k) -> Row k -> Row k
-type Props f r =
- ( css ∷ f Style
- | r
- )
-
-codeInput ∷ ∀ p. { maxLength ∷ OptionalProp Int | Props OptionalProp p } -> Style
-codeInput props = styles <>? props.css
- where
- styles =
- overflowVisible <>
- css
- { boxSizing: borderBox
- , verticalAlign: baseline
- , background: str colour.inputBackground
- , border: str $ i "solid 1px " colour.inputBorder
- , borderRadius: str "var(--s-2)"
- , fontFamily: str "var(--mono-font)"
- , fontSize: str "var(--s0)"
- , lineHeight: str "var(--s0)"
- , width: str $ i "calc(" (props.maxLength ?|| 10) "ch + 4.3 * var(--s-5))"
- , padding: str "calc(var(--s-4) - 1px)"
- , color: str colour.text
- , "&:focus":
- nest
- { outline: none
- }
- , "&:focus-visible":
- nest
- { animation: plopAnimation <> str " 260ms ease-in"
- , border: str $ "solid var(--s-4) " <> colour.highlight
- , padding: _0
- }
- }
-
-plopAnimation ∷ StyleProperty
-plopAnimation =
- keyframes
- $
- { "from": css { transform: str "scale3d(0.85,0.85,0.85)" }
- , "33%": css { transform: str "scale3d(1.07,1.07,1.07)" }
- , "67.7%": css { transform: str "scale3d(0.93,0.93,0.93)" }
- , "86.7%": css { transform: str "scale3d(1.02,1.02,1.02)" }
- , "to": css { transform: str "scale3d(1,1,1)" }
- }
-
-codeInputWrapper ∷ Style
-codeInputWrapper = inlineBlock
diff --git a/src/Yoga/Block/Atom/CodeInput/View.purs b/src/Yoga/Block/Atom/CodeInput/View.purs
deleted file mode 100644
index fd8aeb2..0000000
--- a/src/Yoga/Block/Atom/CodeInput/View.purs
+++ /dev/null
@@ -1,42 +0,0 @@
-module Yoga.Block.Atom.CodeInput.View
- ( component
- , Props
- , PropsF
- , EmotionProps
- ) where
-
-import Yoga.Prelude.View
-import React.Basic.Emotion (Style)
-import Yoga.Block.Atom.CodeInput.Style as Style
-
-type PropsF f =
- (
- | Style.Props f (InputWritablePropsF f EmotionProps)
- )
-
-type Props =
- PropsF Id
-
-type PropsOptional =
- PropsF OptionalProp
-
-type EmotionProps =
- ( className ∷ String, css ∷ Style )
-
-component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
-component = rawComponent
-
-rawComponent ∷ ∀ r. ReactComponent { | r }
-rawComponent =
- mkForwardRefComponent "CodeInput" do
- \(props ∷ { | PropsOptional }) ref -> React.do
- pure
- $ emotionInput ref
- props
- { className: "ry-inline-code"
- , css: Style.codeInput props
- , spellCheck: false
- , autoComplete: "false"
- , autoCorrect: "off"
- , autoCapitalize: "off"
- }
diff --git a/src/Yoga/Block/Molecule/TableOfContents.purs b/src/Yoga/Block/Molecule/TableOfContents.purs
deleted file mode 100644
index 50960ed..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents.purs
+++ /dev/null
@@ -1,5 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents
- ( module Yoga.Block.Molecule.TableOfContents.View
- ) where
-
-import Yoga.Block.Molecule.TableOfContents.View (component, Props, MandatoryProps)
diff --git a/src/Yoga/Block/Molecule/TableOfContents/Spec.purs b/src/Yoga/Block/Molecule/TableOfContents/Spec.purs
deleted file mode 100644
index 6682783..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents/Spec.purs
+++ /dev/null
@@ -1,14 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents.Spec where
-
-import Yoga.Prelude.Spec
-import Yoga.Block.Molecule.TableOfContents as TableOfContents
-
-spec ∷ Spec Unit
-spec =
- after_ cleanup do
- describe "The tableOfContents" do
- it "renders without errors" do
- void
- $ renderComponent TableOfContents.component
- { items: []
- }
diff --git a/src/Yoga/Block/Molecule/TableOfContents/Story.purs b/src/Yoga/Block/Molecule/TableOfContents/Story.purs
deleted file mode 100644
index 37a3873..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents/Story.purs
+++ /dev/null
@@ -1,101 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents.Story where
-
-import Prelude
-import Control.Comonad.Cofree as Cofree
-import Data.Array (foldMap)
-import Data.Foldable (fold)
-import Data.Tuple.Nested ((/\))
-import Data.Monoid (power)
-import Data.Traversable (traverse)
-import Yoga.Tree (Forest, Tree, mkLeaf, mkTree)
-import Effect (Effect)
-import Effect.Unsafe (unsafePerformEffect)
-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 Yoga ((/>), ())
-import Yoga.Block.Container.Style as Styles
-import Yoga.Block.Internal (createRef)
-import Yoga.Block.Molecule.TableOfContents as TableOfContents
-
-default
- ∷ { decorators ∷ Array (Effect JSX -> JSX)
- , title ∷ String
- }
-default =
- { title: "Molecule/TableOfContents"
- , decorators:
- [ \storyFn ->
- R.div_
- [ element E.global { styles: Styles.global }
- , unsafePerformEffect storyFn
- ]
- ]
- }
-
-tableOfContents ∷ Effect JSX
-tableOfContents = do
- example <- mkBasicExample
- pure
- $ fragment
- [ R.div_
- [ R.h2_ [ R.text "Table of Contents" ]
- , element example {}
- ]
- ]
- where
- mkBasicExample =
- React.reactComponent "TableOfContents example" \_ -> React.do
- let
- startHeadings ∷ Forest { label ∷ String }
- startHeadings =
- [ mkTree { label: "Heading 1" }
- [ mkTree { label: "SubHeading 1" }
- [ mkLeaf { label: "SubsubHeading 1.1" }
- , mkLeaf { label: "SubsubHeading 1.2" }
- ]
- ]
- , mkTree { label: "Heading 2" } []
- ]
- (tocData ∷ (Forest ({ label ∷ String, ref ∷ _ }))) /\ setTocData <- React.useState' []
- React.useEffectOnce do
- (newHeadings ∷ Forest { label ∷ String, ref ∷ _ }) <-
- startHeadings
- # (traverse >>> traverse) \{ label } -> do
- createRef # map { label, ref: _ }
- setTocData newHeadings
- mempty
- pure do
- let toc = element TableOfContents.component { items: tocData }
- let
- treeToHeading ∷ Tree _ -> JSX
- treeToHeading = go 1
- where
- go ∷ Int -> Tree _ -> JSX
- go depth tree = case Cofree.head tree, Cofree.tail tree of
- { label, ref }, children -> do
- let
- heading = case depth of
- 1 -> R.h1'
- 2 -> R.h2'
- 3 -> R.h3'
- _ -> R.h4'
- (fragment [ heading { ref } /> [ R.text label ], blabla depth ])
- <> foldMap (go (depth + 1)) children
-
- content ∷ Array JSX
- content = tocData <#> treeToHeading
- toc <> fold content
-
-blabla ∷ Int -> JSX
-blabla n =
- R.p_
- [ R.text
- ( n
- # power
- """
- As a follow up to my post about Zippers for lists and binary trees, I wanted to create a zipper for a slightly more complex data structure. The Rose Tree is a tree structure where the number of branches a node may have is variable. An example of a rose tree would be the directory structure on your computer: each directory may contain 0 or more sub directories which, in turn, may contain addition subdirectories. With this example in mind, the zipper is analagous to you moving through your computers file system: starting at the root directory and using cd to move down a branch and cd .. to move back.
- """
- )
- ]
diff --git a/src/Yoga/Block/Molecule/TableOfContents/Style.purs b/src/Yoga/Block/Molecule/TableOfContents/Style.purs
deleted file mode 100644
index ae13aa3..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents/Style.purs
+++ /dev/null
@@ -1,93 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents.Style where
-
-import Yoga.Prelude.Style
-import Yoga.Block.Container.Style (colour)
-
-type Props :: forall k. (Type -> k) -> Row k -> Row k
-type Props f r =
- ( css ∷ f Style
- , backgroundLeft ∷ f Color
- , backgroundRight ∷ f Color
- | r
- )
-
-button ∷ Style
-button =
- css
- { position: relative
- , "&:focus": nest { outline: str "none" }
- , border: str $ "1px solid " <> colour.backgroundLayer2
- , "&:focus-visible":
- nest
- { boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
- }
- , borderRadius: str "calc(var(--s2) / 2)"
- , height: var "--s2"
- , width: str "calc(var(--s2) + var(--s1))"
- , margin: _0
- , padding: _0
- }
-
-tableOfContentsLeft ∷ String
-tableOfContentsLeft = "calc(var(--s-2) * 0.3)"
-
-dragWidthDelta ∷ Number
-dragWidthDelta = 10.0
-
-theTableOfContents ∷ Style
-theTableOfContents =
- css
- { width: str "calc(var(--s2) * 0.85)"
- , height: str "calc(var(--s2) * 0.85)"
- , background: str $ colour.backgroundLayer4
- , border: none
- , borderRadius: str $ "calc(var(--s2) / 2)"
- , position: absolute
- , top: str "calc(var(--s-2) * 0.35)"
- , left: str tableOfContentsLeft
- , margin: _0
- , boxShadow: str "0 0.5px 3px rgba(0,0,0,0.50)"
- }
-
-tableOfContentsTextContainer ∷ Style
-tableOfContentsTextContainer =
- flex <>
- css
- { width: _100percent
- , border: none
- , fontWeight: str "bold"
- , position: absolute
- , top: str "1px"
- , fontSize: str "calc(var(--s2) * 0.5)"
- , lineHeight: str "calc(var(--s2) * 0.5)"
- , textAlign: center
- , height: var "--s2"
- , justifyContent: center
- , alignItems: center
- , margin: _0
- , padding: _0
- }
-
-successTextColour ∷ StyleProperty
-successTextColour = str colour.successText
-
-disabledTextColour ∷ StyleProperty
-disabledTextColour = str colour.interfaceTextDisabled
-
-tableOfContentsText ∷ Style
-tableOfContentsText =
- flex <>
- css
- { textAlign: str "left"
- , margin: _0
- , padding: _0
- , width: str "50%"
- , height: str "100%"
- , justifyContent: center
- , alignItems: center
- , color: disabledTextColour
- , "& > *":
- nest
- { color: successTextColour
- }
- }
diff --git a/src/Yoga/Block/Molecule/TableOfContents/Types.purs b/src/Yoga/Block/Molecule/TableOfContents/Types.purs
deleted file mode 100644
index 16986af..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents/Types.purs
+++ /dev/null
@@ -1,18 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents.Types where
-
-import Prelude
-
-data TableOfContentsPosition
- = TableOfContentsIsLeft
- | TableOfContentsIsRight
-derive instance eqTableOfContentsPosition ∷ Eq TableOfContentsPosition
-
-instance showTableOfContentsPosition ∷ Show TableOfContentsPosition where
- show = case _ of
- TableOfContentsIsLeft -> "TableOfContentsIsLeft"
- TableOfContentsIsRight -> "TableOfContentsIsRight"
-
-flipTableOfContents ∷ TableOfContentsPosition -> TableOfContentsPosition
-flipTableOfContents = case _ of
- TableOfContentsIsLeft -> TableOfContentsIsRight
- TableOfContentsIsRight -> TableOfContentsIsLeft
diff --git a/src/Yoga/Block/Molecule/TableOfContents/View.purs b/src/Yoga/Block/Molecule/TableOfContents/View.purs
deleted file mode 100644
index 69b932a..0000000
--- a/src/Yoga/Block/Molecule/TableOfContents/View.purs
+++ /dev/null
@@ -1,68 +0,0 @@
-module Yoga.Block.Molecule.TableOfContents.View
- ( component
- , MandatoryProps
- , Props
- , PropsF
- ) where
-
-import Yoga.Tree (Forest)
-import React.Basic.DOM (css)
-import React.Basic.DOM as R
-import Yoga.Block.Container.Style (colour)
-import Yoga.Block.Molecule.TableOfContents.Style as Style
-import Yoga.Prelude.View (class Union, Id, InputWritableProps, JSX, NodeRef, OptionalProp, ReactComponent, mkForwardRefComponent, pure, (/>), ())
-
-type PropsF f =
- ( className ∷ f String
- , left ∷ f JSX
- , right ∷ f JSX
- | Style.Props f (MandatoryProps InputWritableProps)
- )
-
-type MandatoryProps r =
- ( items ∷ Forest { label ∷ String, ref ∷ NodeRef }
- | r
- )
-
-type Props =
- PropsF Id
-
-type PropsOptional =
- PropsF OptionalProp
-
-component ∷ ∀ p q. Union p q Props => ReactComponent { | MandatoryProps p }
-component = rawComponent
-
-rawComponent ∷ ∀ p. ReactComponent (Record p)
-rawComponent =
- mkForwardRefComponent "TableOfContents" do
- \(_ ∷ { | PropsOptional }) ref -> React.do
- pure do
- R.div'
-
- { style:
- css
- { position: "fixed"
- , background: colour.backgroundLayer2
- , padding: 0
- , margin: 0
- }
- , ref
- }
- />
- [ R.div'
-
- { style:
- css
- { display: "flex"
- , flexDirection: "row"
- , alignItems: "stretch"
- , justifyContent: "flex-start"
- , padding: 0
- , margin: 0
- }
- }
- />
- [ R.text "Hi"
- ]
- ]