@@ -1,20 +1,116 @@
11module Yoga.InlineCode.Stories where
22
33import Prelude hiding (add)
4+import Data.Array (intercalate, length)
5+import Data.Either (Either(..))
46import Data.Maybe (Maybe(..))
7+import Data.String (Pattern(..), split, trim)
8+import Data.String.CodeUnits as String
9+import Data.Tuple.Nested ((/\))
10+import Debug.Trace (spy)
511import Effect (Effect)
12+import Effect.Aff (Aff)
613import Effect.Class.Console (log)
14+import Justifill (justifill)
15+import Milkis as M
16+import Milkis.Impl.Window (windowFetch)
17+import React.Basic (JSX, fragment)
718import React.Basic.DOM as R
19+import React.Basic.Extra.Hooks (useAffReducer)
20+import React.Basic.Helpers (jsx)
21+import React.Basic.Hooks (ReactComponent, component, element)
22+import React.Basic.Hooks as React
823import Storybook.Decorator.FullScreen (fullScreenDecorator)
924import Storybook.React (Storybook, add, addDecorator, storiesOf)
25+import Yoga.CompileEditor.Component (compileAndRun)
26+import Yoga.InlineCode.Component (Action(..))
1027import Yoga.InlineCode.Component as InlineCode
28+import Yoga.Modal.Component as Modal
1129
1230stories ∷ Effect Storybook
1331stories = do
1432 storiesOf "InlineCode" do
1533 addDecorator fullScreenDecorator
1634 add "The InlineCode" InlineCode.makeComponent
17− [ { dispatch: const $ log "hi"
18− , className: Nothing
35+ [ ( justifill
36+ { dispatch: \(_ ∷ InlineCode.Action) -> ((log "hi") ∷ Effect Unit)
37+ }
38+ )
39+ ]
40+ add "The InlineCode with some context" mkWrapper
41+ [ { inside:
42+ \inlineCode ->
43+ [ R.text "hi!"
44+ , element inlineCode (justifill { dispatch: \(_ ∷ InlineCode.Action) -> (log "Hi") ∷ Effect Unit })
45+ , R.text "hello again!"
46+ ]
47+ }
48+ ]
49+ add "The InlineCode with some code" mkWrapper
50+ [ { inside:
51+ \inlineCode ->
52+ [ R.code_ [ R.text "main = logShow \"" ]
53+ , element inlineCode (justifill { dispatch: \(_ ∷ InlineCode.Action) -> (log "Hi") ∷ Effect Unit })
54+ , R.code_ [ R.text "\"" ]
55+ ]
1956 }
2057 ]
58+ add "The InlineCode with some real code" mkRealWrapper
59+ [ {} ]
60+
61+codePrefix =
62+ """module Main where
63+import Batteries
64+
65+main = log """"
66+
67+codeSuffix = "\""
68+
69+renderCode c = intercalate [ R.br {} ] (toJSX <$> lines)
70+ where
71+ toJSX line = [ R.code_ [ R.text line ] ]
72+ lines = split (Pattern "\n") c
73+
74+mkWrapper ∷ Effect (ReactComponent { inside ∷ ReactComponent InlineCode.Props -> Array JSX })
75+mkWrapper = do
76+ inlineCode <- InlineCode.makeComponent
77+ component "InlineCodeWrapper" \{ inside } -> React.do
78+ pure
79+ $ R.div_ (inside inlineCode)
80+
81+type State
82+ = Maybe Boolean
83+
84+data RealAction
85+ = InlineCodeAction InlineCode.Action
86+ | CloseModal
87+
88+derive instance eqRealAction ∷ Eq RealAction
89+mkRealWrapper ∷ Effect (ReactComponent {})
90+mkRealWrapper = do
91+ inlineCode <- InlineCode.makeComponent
92+ modal <- Modal.makeComponent
93+ component "InlineCodeWrapper" \{} -> React.do
94+ state /\ dispatch <- useAffReducer Nothing realReducer
95+ pure
96+ $ R.div_
97+ [ R.h2_ [ R.text "Let's log some 'Magick'" ]
98+ , fragment $ renderCode codePrefix
99+ , element inlineCode (justifill { dispatch: dispatch <<< InlineCodeAction, width: String.length "Magick" })
100+ , fragment $ renderCode codeSuffix
101+ , R.br {}
102+ , case state of
103+ Just true -> element modal $ justifill { title: "Success!", content: R.text "You did it!", onClose: dispatch CloseModal }
104+ Just false -> element modal $ justifill { title: "Oh no!", content: R.text "Try again!", onClose: dispatch CloseModal }
105+ Nothing -> mempty
106+ ]
107+
108+realReducer ∷ State -> RealAction -> Aff State
109+realReducer state = case _ of
110+ CloseModal -> pure Nothing
111+ InlineCodeAction (CompileAndRunCode code) -> do
112+ res <- compileAndRun (M.fetch windowFetch) { code: codePrefix <> code <> codeSuffix }
113+ (pure <<< Just) case spy "res" res of
114+ Right { stdout }
115+ | String.dropRight 1 stdout == "Magick" -> true
116+ _ -> false