From 12380cadc4e24e5632fd89d5786539d8a4d89878 Mon Sep 17 00:00:00 2001 From: Mark Eibes Date: Wed, 26 Oct 2022 12:43:13 +0200 Subject: [PATCH] Updates --- .idea/.gitignore | 3 + .idea/misc.xml | 6 ++ .idea/modules.xml | 8 ++ .idea/ry-blocks.iml | 9 ++ .idea/vcs.xml | 6 ++ .purs-repl | 1 - README.md | 21 ++++ shit.html | 43 -------- src/React/Downshift.purs | 43 -------- src/React/Downshift/Internal.js | 2 - src/React/Downshift/Internal.purs | 10 -- src/React/Downshift/Types.purs | 54 ---------- src/React/Downshift/Types/StateChangeType.js | 29 ----- .../Downshift/Types/StateChangeType.purs | 49 --------- src/Yoga/Block/Atom/Button/Story.purs | 1 + src/Yoga/Block/Atom/CodeInput.purs | 5 - src/Yoga/Block/Atom/CodeInput/Spec.purs | 20 ---- src/Yoga/Block/Atom/CodeInput/Story.purs | 83 -------------- src/Yoga/Block/Atom/CodeInput/Style.purs | 54 ---------- src/Yoga/Block/Atom/CodeInput/View.purs | 42 -------- src/Yoga/Block/Molecule/TableOfContents.purs | 5 - .../Block/Molecule/TableOfContents/Spec.purs | 14 --- .../Block/Molecule/TableOfContents/Story.purs | 101 ------------------ .../Block/Molecule/TableOfContents/Style.purs | 93 ---------------- .../Block/Molecule/TableOfContents/Types.purs | 18 ---- .../Block/Molecule/TableOfContents/View.purs | 68 ------------ 26 files changed, 54 insertions(+), 734 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/ry-blocks.iml create mode 100644 .idea/vcs.xml delete mode 100644 .purs-repl delete mode 100644 shit.html delete mode 100644 src/React/Downshift.purs delete mode 100644 src/React/Downshift/Internal.js delete mode 100644 src/React/Downshift/Internal.purs delete mode 100644 src/React/Downshift/Types.purs delete mode 100644 src/React/Downshift/Types/StateChangeType.js delete mode 100644 src/React/Downshift/Types/StateChangeType.purs delete mode 100644 src/Yoga/Block/Atom/CodeInput.purs delete mode 100644 src/Yoga/Block/Atom/CodeInput/Spec.purs delete mode 100644 src/Yoga/Block/Atom/CodeInput/Story.purs delete mode 100644 src/Yoga/Block/Atom/CodeInput/Style.purs delete mode 100644 src/Yoga/Block/Atom/CodeInput/View.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents/Spec.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents/Story.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents/Style.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents/Types.purs delete mode 100644 src/Yoga/Block/Molecule/TableOfContents/View.purs 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
Google
×
AlleShoppingNewsVideos Bilder Maps Bücher
Suchoptionen
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.
8. Okt. 2017
Google Pixel 2 Vs Pixel 2 XL: What's The Difference? - Forbes
www.forbes.com › sites › gordonkelly › 2017/10/08 › google-pixel-2-vs-p...
Hervorgehobene Snippets

Google Pixel 2 - Full phone specifications - GSMArena.com

www.gsmarena.com › google_pixel_2-8733
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).
Pictures · Compare specs · Review · User opinions and reviews
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
Ähnliche Fragen

Google Pixel 2 viewport size, resolution, PPI, screen specs and CSS ...

yesviz.com › devices › google-pixel2
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 - Wikipedia

en.wikipedia.org › wiki › Pixel_2
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) ...
History · Specifications · Reception · Issues
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)

Google Pixel 2: viewport, screen size, CSS pixel ratio, cross-browser ...

blisk.io › devices › details › google-pixel-2
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.

Google Pixel 2 review (updated): Pixel 2 still great, but a ... - CNET

www.cnet.com › reviews › google-pixel-2-review
Bewertung · 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

Actual size of Google Pixel 2 - PiliApp

www.piliapp.com › actual-size › google-pixel-2
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)

Google Pixel 2 XL (2nd Gen) - 2017 Dimensions & Drawings

www.dimensions.com › element › google-pixel-2-xl...
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 ...

Google Pixel 2 XL, CSS viewport resolution, pixel density, screen ...

www.webmobilefirst.com › devices › google-pixel-...
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 specs - PhoneArena

www.phonearena.com › Google Phones
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
Ähnliche Suchanfragen
Google Pixel 2 XL
Google Pixel 6
Google Pixel 2 Test
Google Pixel 2 Android Version
Pixel 2 screen width
Google Pixel 2 2021
Google pixel 2 release date
Google Pixel 2 größe
\ 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 ((/>), ( 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 [ 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, (/>), ( ReactComponent { | MandatoryProps p } -component = rawComponent - -rawComponent ∷ ∀ p. ReactComponent (Record p) -rawComponent = - mkForwardRefComponent "TableOfContents" do - \(_ ∷ { | PropsOptional }) ref -> React.do - pure do - R.div' - - [ R.div' - - [ R.text "Hi" - ] - ]