Skip to content

Commit 23d0a0f

Browse files
boygao1992boygao1992
committed
add make format-ui-guide and format
1 parent 37f7d6c commit 23d0a0f

27 files changed

+3888
-3879
lines changed

‎Makefile

+15-1
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ PACKAGE_LOCK := $(ROOT_DIR)/package-lock.json
2525

2626
FORMAT_SRC_PURS_TIDY_STAMP := $(BUILD_DIR)/.format-src-purs-tidy-stamp
2727
FORMAT_TEST_PURS_TIDY_STAMP := $(BUILD_DIR)/.format-test-purs-tidy-stamp
28+
FORMAT_UI_GUIDE_PURS_TIDY_STAMP := $(BUILD_DIR)/.format-ui-guide-purs-tidy-stamp
2829

2930
FORMAT_DEPENDENCIES := \
3031
$(FORMAT_SRC_PURS_TIDY_STAMP) \
31-
$(FORMAT_TEST_PURS_TIDY_STAMP)
32+
$(FORMAT_TEST_PURS_TIDY_STAMP) \
33+
$(FORMAT_UI_GUIDE_PURS_TIDY_STAMP)
3234

3335
# Colors for printing
3436
CYAN := \033[0;36m
@@ -88,6 +90,10 @@ $(FORMAT_TEST_PURS_TIDY_STAMP): $(TEST_FILES) $(NODE_MODULES_STAMP) | $(BUILD)
8890
$(PURS_TIDY) $(PURS_TIDY_CMD) $(TEST_DIR)
8991
@touch $@
9092

93+
$(FORMAT_UI_GUIDE_PURS_TIDY_STAMP): $(TEST_FILES) $(NODE_MODULES_STAMP) | $(BUILD)
94+
$(PURS_TIDY) $(PURS_TIDY_CMD) $(UI_GUIDE_DIR)
95+
@touch $@
96+
9197
$(NODE_MODULES): $(PACKAGE_JSON) $(PACKAGE_LOCK)
9298
npm install
9399
touch $@
@@ -116,6 +122,10 @@ check-format-src: $(FORMAT_SRC_PURS_TIDY_STAMP) ## Validate formatting of the `s
116122
check-format-test: PURS_TIDY_CMD=check
117123
check-format-test: $(FORMAT_TEST_PURS_TIDY_STAMP) ## Validate formatting of the `test` directory
118124

125+
.PHONY: check-format-ui-guide
126+
check-format-ui-guide: PURS_TIDY_CMD=check
127+
check-format-ui-guide: $(FORMAT_UI-GUIDE_PURS_TIDY_STAMP) ## Validate formatting of the `test` directory
128+
119129
.PHONY: clean
120130
clean: $(CLEAN_DEPS) ## Remove all dependencies and build artifacts, starting with a clean slate
121131
rm -fr \
@@ -138,6 +148,10 @@ format-src: $(FORMAT_SRC_PURS_TIDY_STAMP) ## Format the `src` directory
138148
format-test: PURS_TIDY_CMD=format-in-place
139149
format-test: $(FORMAT_TEST_PURS_TIDY_STAMP) ## Format the `test` directory
140150

151+
.PHONY: format-ui-guide
152+
format-ui-guide: PURS_TIDY_CMD=format-in-place
153+
format-ui-guide: $(FORMAT_UI_GUIDE_PURS_TIDY_STAMP) ## Format the `test` directory
154+
141155
.PHONY: help
142156
help: $(BUILD_DIR)/help ## Display this help message
143157
@awk 'BEGIN {FS = ":.*?## "}; {printf "$(CYAN)%-30s$(RESET) %s\n", $$1, $$2}' $<

‎ui-guide/App/App.purs

+83-81
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,16 @@ instance showGroup :: Show Group where
6565
type HTML m = H.ComponentHTML Action Slots m
6666

6767
type Slots =
68-
( child :: H.Slot (Const Void) Void String )
68+
(child :: H.Slot (Const Void) Void String)
69+
6970
_child = Proxy :: Proxy "child"
7071

7172
-- | Takes stories config and mount element, and renders the storybook.
72-
runStorybook
73-
:: Stories Aff
74-
-> Array Group
75-
-> HTMLElement
76-
-> Aff Unit
73+
runStorybook ::
74+
Stories Aff ->
75+
Array Group ->
76+
HTMLElement ->
77+
Aff Unit
7778
runStorybook stories groups body = do
7879
app' <- runUI app { stories, groups } body
7980
void $ H.liftEffect $ hashes $ \_ next ->
@@ -84,7 +85,7 @@ type Input m =
8485
, groups :: Array Group
8586
}
8687

87-
app :: ∀ m. H.Component Query (Input m) Void m
88+
app :: forall m. H.Component Query (Input m) Void m
8889
app =
8990
H.mkComponent
9091
{ initialState
@@ -99,31 +100,32 @@ app =
99100
render :: State m -> HTML m
100101
render state =
101102
HH.body_
102-
[ HH.div
103-
[ HP.class_ $ HH.ClassName "min-h-screen" ]
104-
[ renderSidebar state
105-
, renderContainer state
103+
[ HH.div
104+
[ HP.class_ $ HH.ClassName "min-h-screen" ]
105+
[ renderSidebar state
106+
, renderContainer state
107+
]
106108
]
107-
]
108109

109110
renderContainer :: State m -> HTML m
110111
renderContainer state =
111112
HH.div
112-
[ HP.class_ $ HH.ClassName "md:ml-80" ]
113-
[ HH.div
114-
[ HP.class_ $ HH.ClassName "fixed w-full" ]
113+
[ HP.class_ $ HH.ClassName "md:ml-80" ]
115114
[ HH.div
116-
[ HP.class_ $ HH.ClassName "pin-t bg-white md:hidden relative border-b border-grey-light h-12 py-8 flex items-center" ]
117-
[ HH.a
118-
[ HP.class_ $ HH.ClassName "mx-auto inline-flex items-center"
119-
, HP.href "" ]
120-
[ HH.text "CitizenNet UI Guide" ]
121-
]
115+
[ HP.class_ $ HH.ClassName "fixed w-full" ]
116+
[ HH.div
117+
[ HP.class_ $ HH.ClassName "pin-t bg-white md:hidden relative border-b border-grey-light h-12 py-8 flex items-center" ]
118+
[ HH.a
119+
[ HP.class_ $ HH.ClassName "mx-auto inline-flex items-center"
120+
, HP.href ""
121+
]
122+
[ HH.text "CitizenNet UI Guide" ]
123+
]
124+
]
125+
, HH.div
126+
[ HP.class_ $ HH.ClassName "p-12 w-full container mx-auto" ]
127+
[ renderSlot state ]
122128
]
123-
, HH.div
124-
[ HP.class_ $ HH.ClassName "p-12 w-full container mx-auto" ]
125-
[ renderSlot state ]
126-
]
127129

128130
renderSlot :: State m -> HTML m
129131
renderSlot state =
@@ -135,71 +137,71 @@ app =
135137
renderSidebar :: State m -> HTML m
136138
renderSidebar state =
137139
Backdrop.backdrop
138-
[ HP.id "sidebar"
139-
, HP.classes
140-
( HH.ClassName <$>
141-
[ "hidden"
142-
, "fixed"
143-
, "pin-y"
144-
, "pin-l"
145-
, "overflow-y-auto"
146-
, "md:overflow-visible"
147-
, "scrolling-touch"
148-
, "md:scrolling-auto"
149-
, "w-4/5"
150-
, "md:w-full"
151-
, "md:max-w-xs"
152-
, "flex-none"
153-
-- , "border-r-2"
154-
-- , "border-grey-light"
155-
, "md:flex"
156-
, "flex-col"
157-
]
158-
)
159-
]
160-
[ HH.div
161-
[ HP.class_ $ HH.ClassName "flex-1 p-6 overflow-y-auto" ]
162-
[ HH.header_
163-
[ Format.heading
164-
[ HP.class_ $ HH.ClassName "flex" ]
165-
[ HH.img
166-
[ HP.class_ $ HH.ClassName "mr-2"
167-
, HP.src "https://citizennet.com/manager/images/logo.svg"
168-
]
169-
, HH.text "Ocelot"
140+
[ HP.id "sidebar"
141+
, HP.classes
142+
( HH.ClassName <$>
143+
[ "hidden"
144+
, "fixed"
145+
, "pin-y"
146+
, "pin-l"
147+
, "overflow-y-auto"
148+
, "md:overflow-visible"
149+
, "scrolling-touch"
150+
, "md:scrolling-auto"
151+
, "w-4/5"
152+
, "md:w-full"
153+
, "md:max-w-xs"
154+
, "flex-none"
155+
-- , "border-r-2"
156+
-- , "border-grey-light"
157+
, "md:flex"
158+
, "flex-col"
159+
]
160+
)
161+
]
162+
[ HH.div
163+
[ HP.class_ $ HH.ClassName "flex-1 p-6 overflow-y-auto" ]
164+
[ HH.header_
165+
[ Format.heading
166+
[ HP.class_ $ HH.ClassName "flex" ]
167+
[ HH.img
168+
[ HP.class_ $ HH.ClassName "mr-2"
169+
, HP.src "https://citizennet.com/manager/images/logo.svg"
170+
]
171+
, HH.text "Ocelot"
172+
]
173+
]
174+
, HH.nav
175+
[ HP.class_ $ HH.ClassName "text-base overflow-y-auto" ]
176+
(renderGroups state)
170177
]
171-
]
172-
, HH.nav
173-
[ HP.class_ $ HH.ClassName "text-base overflow-y-auto" ]
174-
(renderGroups state)
175178
]
176-
]
177179

178180
renderGroups :: State m -> Array (HTML m)
179181
renderGroups state =
180182
mapFlipped (M.toUnfoldable state.partitions) $ \(Tuple group stories) ->
181183
HH.div
182-
[ HP.class_ $ HH.ClassName "mb-6" ]
183-
[ Format.caption_
184-
[ HH.text $ show group ]
185-
, renderGroup state.route stories
186-
]
184+
[ HP.class_ $ HH.ClassName "mb-6" ]
185+
[ Format.caption_
186+
[ HH.text $ show group ]
187+
, renderGroup state.route stories
188+
]
187189

188190
renderGroup :: String -> Stories m -> HTML m
189191
renderGroup route stories =
190-
HH.ul [ HP.class_ $ HH.ClassName "list-reset" ] $
191-
mapFlipped (M.toUnfoldable stories) $ \(Tuple href { anchor }) ->
192-
HH.li
193-
[ HP.class_ $ HH.ClassName "mb-3" ]
194-
[ HH.a
195-
[ HP.classes $
196-
Format.linkClasses <>
197-
( if href == route then [ HH.ClassName "font-medium" ] else [] )
198-
, HP.href $ "#" <> unsafeEncodeURI href
199-
]
200-
[ HH.text anchor ]
201-
]
202-
192+
HH.ul [ HP.class_ $ HH.ClassName "list-reset" ]
193+
$ mapFlipped (M.toUnfoldable stories)
194+
$ \(Tuple href { anchor }) ->
195+
HH.li
196+
[ HP.class_ $ HH.ClassName "mb-3" ]
197+
[ HH.a
198+
[ HP.classes $
199+
Format.linkClasses <>
200+
(if href == route then [ HH.ClassName "font-medium" ] else [])
201+
, HP.href $ "#" <> unsafeEncodeURI href
202+
]
203+
[ HH.text anchor ]
204+
]
203205

204206
eval :: forall a. Query a -> H.HalogenM (State m) Action Slots Void m (Maybe a)
205207
eval (RouteChange route next) = do
@@ -209,7 +211,7 @@ app =
209211
----------
210212
-- Helpers
211213

212-
partitionByGroup :: ∀ m. Group -> Stories m -> Tuple Group (Stories m)
214+
partitionByGroup :: forall m. Group -> Stories m -> Tuple Group (Stories m)
213215
partitionByGroup g = Tuple g <<< M.filter (\{ group } -> group == g)
214216

215217
unsafeEncodeURI :: String -> String

0 commit comments

Comments
 (0)