Skip to content

Commit 1de919d

Browse files
maddie927maddie927
authored
Update to react-basic 15 (#165)
* Update to react-basic 15 * react basic dom v2 * react-basic-dnd v7 * Fix import
1 parent c3e6779 commit 1de919d

File tree

136 files changed

+6396
-3981
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+6396
-3981
lines changed

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"arrowParens": "avoid",
3+
"trailingComma": "none"
4+
}

‎bower.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,17 @@
2929
"purescript-prelude": "^4.0.1",
3030
"purescript-profunctor-lenses": ">=4.0.0 <7.0.0",
3131
"purescript-random": "^4.0.0",
32-
"purescript-react-basic": "^13.0.0",
33-
"purescript-react-basic-emotion": "^4.2.1",
34-
"purescript-react-basic-hooks": "^4.1.1",
35-
"purescript-react-dnd-basic": "^6.1.4",
32+
"purescript-react-basic": "^15.0.0",
33+
"purescript-react-basic-dom": "lumihq/purescript-react-basic-dom#^2.0.0",
34+
"purescript-react-basic-classic": "lumihq/purescript-react-basic-classic#^1.0.1",
35+
"purescript-react-basic-emotion": "^4.2.2",
36+
"purescript-react-basic-hooks": "^6.0.0",
37+
"purescript-react-dnd-basic": "^7.0.0",
3638
"purescript-record": ">= 1.0.0 < 3.0.0",
3739
"purescript-simple-json": ">=4.0.0 <7.0.0",
3840
"purescript-strings": "^4.0.0",
3941
"purescript-tuples": "^5.0.0",
4042
"purescript-unsafe-reference": "^3.0.1",
41-
"purescript-web-html": ">=1.0.0 <3.0.0",
42-
"purescript-web-storage": ">=2.0.0 <4.0.0",
4343
"purescript-validation": "^4.0.0",
4444
"purescript-js-timers": "^4.0.1",
4545
"purescript-heterogeneous": ">=0.3.0 <0.5.0",

‎docs/App.jsx

+16-20
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import React, { Component, useState, useEffect } from "react";
55
import { Link, NavLink, Redirect, Route, Switch } from "react-router-dom";
66
import Media from "react-media";
77
import Loadable from "react-loadable";
8-
import changeCase from "change-case";
8+
import { paramCase } from "change-case";
99

1010
import { colors, colorNames } from "purs/Lumi.Components.Color";
1111
import { column, column_ } from "purs/Lumi.Components.Column";
12+
import { divider_ } from "purs/Lumi.Components.Divider";
1213
import { row, row_ } from "purs/Lumi.Components.Row";
1314
import {
1415
text,
@@ -47,7 +48,7 @@ const fromComponentPath = title => ({
4748
loading: () => null // these load quickly enough that a noisy loader makes it look slower
4849
}),
4950
title,
50-
path: `/${changeCase.hyphen(title)}`,
51+
path: `/${paramCase(title)}`,
5152
componentSource: `${repoSourceBasePath}/src/Lumi/Components/${title}.purs`,
5253
exampleSource: `${repoSourceBasePath}/docs/Examples/${title}.example.purs`,
5354
apiReference: `${pursuitBasePath}/docs/Lumi.Components.${title}`
@@ -64,7 +65,7 @@ const fromComponentPathv2 = title => ({
6465
loading: () => null // these load quickly enough that a noisy loader makes it look slower
6566
}),
6667
title,
67-
path: `/v2/${changeCase.hyphen(title)}`,
68+
path: `/v2/${paramCase(title)}`,
6869
componentSource: `${repoSourceBasePath}/src/Lumi/Components2/${title}.purs`,
6970
exampleSource: `${repoSourceBasePath}/docs/Examples2/${title}.example.purs`,
7071
apiReference: `${pursuitBasePath}/docs/Lumi.Components2.${title}`
@@ -212,24 +213,16 @@ const renderRoute = component => (
212213
render={() =>
213214
column_([
214215
row({
215-
style: {
216-
alignItems: "center",
217-
marginBottom: "24px",
218-
flexWrap: "wrap"
219-
},
216+
style: { alignItems: "baseline", flexWrap: "wrap" },
220217
children: [
221-
h1_(component.title),
222218
<a
223219
className="lumi"
224220
target="_blank"
225221
rel="noopener noreferrer"
226222
href={component.componentSource}
227-
style={{
228-
marginLeft: "8px",
229-
marginRight: "8px"
230-
}}
223+
style={{ marginRight: "8px" }}
231224
>
232-
Component Source
225+
{body_("Component Source")}
233226
</a>,
234227
"|",
235228
<a
@@ -242,7 +235,7 @@ const renderRoute = component => (
242235
marginRight: "8px"
243236
}}
244237
>
245-
Example Source
238+
{body_("Example Source")}
246239
</a>,
247240
"|",
248241
<a
@@ -254,7 +247,7 @@ const renderRoute = component => (
254247
marginLeft: "8px"
255248
}}
256249
>
257-
API Reference
250+
{body_("API Reference")}
258251
</a>,
259252
<div
260253
style={{
@@ -271,6 +264,9 @@ const renderRoute = component => (
271264
</div>
272265
]
273266
}),
267+
divider_,
268+
<div style={{ height: 20 }} />,
269+
h1_(component.title),
274270
<component.docs />
275271
])
276272
}
@@ -329,7 +325,7 @@ const Header = ({ isMobile, toggleMenu }) =>
329325
style: {
330326
position: "fixed",
331327
top: 0,
332-
zIndex: 1,
328+
zIndex: 100,
333329
height: 60,
334330
width: "100%",
335331
justifyContent: "center",
@@ -424,15 +420,15 @@ const ExampleArea = ({ children }) =>
424420
children,
425421
style: {
426422
width: "100%",
427-
padding: "20px"
423+
padding: "0 20px 40px"
428424
}
429425
});
430426

431427
class ErrorBoundary extends Component {
432428
state = { error: null };
433429

434-
componentWillReceiveProps() {
435-
this.setState({ error: null });
430+
static getDerivedStateFromProps() {
431+
return { error: null };
436432
}
437433

438434
componentDidCatch(error, info) {

‎docs/AppSetup.purs

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module AppSetup where
22

3-
import React.Basic (JSX)
4-
import React.Basic.ReactDND (createDragDropContext)
3+
import React.Basic.Classic (JSX)
4+
import React.Basic.ReactDND (dndProvider)
55
import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
66

77
dragDropContext :: JSX -> JSX
8-
dragDropContext = createDragDropContext html5Backend
8+
dragDropContext = dndProvider html5Backend

‎docs/Example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Lumi.Components.Column (column)
1616
import Lumi.Components.Tab (TabId(..), TabKey(..), tabs, urlParts)
1717
import Lumi.Components.Text (body, text)
1818
import Lumi.Components.Utility.ReactRouter (RouterProps, withRouter)
19-
import React.Basic (Component, JSX, createComponent, element, empty, toReactComponent)
19+
import React.Basic.Classic (Component, JSX, createComponent, element, empty, toReactComponent)
2020
import React.Basic.DOM (css, mergeStyles)
2121
import React.Basic.DOM as R
2222
import Web.HTML.History (URL(..))

‎docs/Examples/Badge.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Lumi.Components.Color (colors)
55
import Lumi.Components.Column (column_)
66
import Lumi.Components.Spacing (Space(..), vspace)
77
import Lumi.Components.Text (nbsp)
8-
import React.Basic (JSX)
8+
import React.Basic.Classic (JSX)
99
import React.Basic.DOM as R
1010

1111
docs :: JSX

‎docs/Examples/Border.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Lumi.Components.Border (borderBottom, borderRound, borderSquare, borderSq
66
import Lumi.Components.Column (column, column_)
77
import Lumi.Components.Example (example)
88
import Lumi.Components.Text (h2_)
9-
import React.Basic (JSX)
9+
import React.Basic.Classic (JSX)
1010
import React.Basic.DOM as R
1111

1212
docs :: JSX

‎docs/Examples/Breadcrumb.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Lumi.Components.Breadcrumb (breadcrumb, compactBreadcrumb)
99
import Lumi.Components.Column (column_)
1010
import Lumi.Components.Text (h2_)
1111
import Lumi.Components.Example (example)
12-
import React.Basic (JSX)
12+
import React.Basic.Classic (JSX)
1313
import Web.HTML.History (URL(..))
1414

1515
docs :: JSX

‎docs/Examples/Button.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Lumi.Components.Column (column_)
1212
import Lumi.Components.Icon (IconType(..))
1313
import Lumi.Components.Text (h2_, h4_)
1414
import Lumi.Components.Example (example)
15-
import React.Basic (JSX)
15+
import React.Basic.Classic (JSX)
1616
import React.Basic.DOM (css)
1717
import React.Basic.DOM as R
1818

‎docs/Examples/ButtonGroup.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Lumi.Components.Column (column_)
1010
import Lumi.Components.NativeSelect (nativeSelect, defaults)
1111
import Lumi.Components.Text (h2_)
1212
import Lumi.Components.Example (example)
13-
import React.Basic (JSX)
13+
import React.Basic.Classic (JSX)
1414
import React.Basic.DOM as R
1515

1616
docs :: JSX

‎docs/Examples/Card.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Lumi.Components.Row (row_)
1111
import Lumi.Components.Spacing (Space(..), hspace)
1212
import Lumi.Components.Text (h2_)
1313
import Lumi.Components.Example (example)
14-
import React.Basic (JSX)
14+
import React.Basic.Classic (JSX)
1515
import React.Basic.DOM as R
1616
import Web.HTML.History (URL(..))
1717

‎docs/Examples/CardGrid.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Lumi.Components.CardGrid (cardGrid)
1111
import Lumi.Components.Column (column_)
1212
import Lumi.Components.Text (h2_, p_)
1313
import Lumi.Components.Example (example)
14-
import React.Basic (JSX, createComponent, make)
14+
import React.Basic.Classic (JSX, createComponent, make)
1515
import React.Basic.DOM as R
1616
import Web.HTML.History (URL(..))
1717

‎docs/Examples/Color.example.purs

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Lumi.Components.Column (column, column_)
1313
import Lumi.Components.Row (row, row_)
1414
import Lumi.Components.Size (Size(..))
1515
import Lumi.Components.Text (body, body_, subtext, text)
16-
import React.Basic (JSX)
16+
import React.Basic.Classic (JSX)
1717
import React.Basic.DOM (css)
1818
import React.Basic.DOM as R
1919

@@ -85,15 +85,15 @@ links"""
8585
"""Input dropdown row hover background color
8686
selected table row background color"""
8787
, colorPanel _.accent1 "Accent 1" """Indicates good or complete status"""
88-
, colorPanel _.accent11 "Accent 1 - 60%" """Faded for focus borders/backgrounds"""
88+
, colorPanel _.accent11 "Accent 1 - 60%" """Faded for focus borders/backgrounds"""
8989
, colorPanel _.accent12 "Accent 1 - 30%" """Status pills, small accent backgrounds"""
9090
, colorPanel _.accent13 "Accent 1 - 20%" """Banner backgrounds, large accent backgrounds"""
9191
, colorPanel _.accent2 "Accent 2" """Indicates pending, needs attention"""
9292
, colorPanel _.accent21 "Accent 2 - 60%" """Faded for focus borders/backgrounds"""
9393
, colorPanel _.accent22 "Accent 2 - 30%" """Status pills, small accent backgrounds"""
9494
, colorPanel _.accent23 "Accent 2 - 20%" """Banner backgrounds"""
9595
, colorPanel _.accent3 "Accent 3" """Indicates a problem, warning"""
96-
, colorPanel _.accent31 "Accent 3 - 60%" """Faded for focus borders/backgrounds"""
96+
, colorPanel _.accent31 "Accent 3 - 60%" """Faded for focus borders/backgrounds"""
9797
, colorPanel _.accent32 "Accent 3 - 30%" """Status pills, small accent backgrounds"""
9898
, colorPanel _.accent33 "Accent 3 - 20%" """Banner backgrounds, large accent backgrounds"""
9999
, colorPanel _.white "White" """Primary button text"""

‎docs/Examples/Column.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Lumi.Components.Button (button, primary)
66
import Lumi.Components.Column (column_, responsiveColumn_)
77
import Lumi.Components.Text (h2_, p_)
88
import Lumi.Components.Example (example)
9-
import React.Basic (JSX)
9+
import React.Basic.Classic (JSX)
1010

1111
docs :: JSX
1212
docs =

‎docs/Examples/Details.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Lumi.Components.Icon as Icon
1111
import Lumi.Components.Row (row)
1212
import Lumi.Components.Spacing (Space(..), hspace, vspace)
1313
import Lumi.Components.Text (body_, h2_, subsectionHeader_)
14-
import React.Basic (JSX)
14+
import React.Basic.Classic (JSX)
1515
import React.Basic.DOM as R
1616

1717
docs :: JSX

‎docs/Examples/Divider.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Lumi.Components.Divider (divider_, flexDivider_)
77
import Lumi.Components.Example (example)
88
import Lumi.Components.Row (row)
99
import Lumi.Components.Text as T
10-
import React.Basic (Component, JSX, createComponent, makeStateless)
10+
import React.Basic.Classic (Component, JSX, createComponent, makeStateless)
1111
import React.Basic.DOM as R
1212

1313
component :: Component Unit

‎docs/Examples/DropdownButton.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Lumi.Components.Input (input, text_)
1616
import Lumi.Components.InputGroup (inputGroup)
1717
import Lumi.Components.Spacing (Space(..), vspace)
1818
import Lumi.Components.Text (body_, h2_)
19-
import React.Basic (JSX)
19+
import React.Basic.Classic (JSX)
2020
import React.Basic.DOM as R
2121

2222
docs :: JSX

‎docs/Examples/EditableTable.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import Lumi.Components.Link as Link
2424
import Lumi.Components.Row (row_)
2525
import Lumi.Components.Spacing (Space(..), hspace)
2626
import Lumi.Components.Text (body, body_, nbsp, p_, text)
27-
import React.Basic (Component, JSX, createComponent, make)
27+
import React.Basic.Classic (Component, JSX, createComponent, make)
2828
import React.Basic.DOM as R
2929
import React.Basic.DOM.Events (stopPropagation, targetChecked, targetValue)
3030
import React.Basic.Events (handler)

‎docs/Examples/FixedPrecisionInput.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Lumi.Components.Column (column_)
1010
import Lumi.Components.Text (h3_, subtext_)
1111
import Lumi.Components.FixedPrecisionInput (defaults, fixedPrecisionInput)
1212
import Lumi.Components.Example (example)
13-
import React.Basic (Component, JSX, createComponent, make)
13+
import React.Basic.Classic (Component, JSX, createComponent, make)
1414

1515
component :: Component Unit
1616
component = createComponent "FixedPrecisionInputExample"

‎docs/Examples/Form.example.purs

+9-12
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import Data.Nullable as Nullable
1717
import Data.String as String
1818
import Data.String.NonEmpty (NonEmptyString, appendString, length, toString)
1919
import Data.Symbol (SProxy(..))
20-
import Effect (Effect)
2120
import Effect.Aff (Milliseconds(..), delay, error, throwError)
2221
import Effect.Class (liftEffect)
2322
import Effect.Random (randomRange)
@@ -43,12 +42,12 @@ import React.Basic.DOM (css)
4342
import React.Basic.DOM as R
4443
import React.Basic.DOM.Events (preventDefault)
4544
import React.Basic.Events (handler, handler_)
46-
import React.Basic.Hooks (JSX, ReactComponent, component, element, useState, (/\))
45+
import React.Basic.Hooks (Component, JSX, component, useState, (/\))
4746
import React.Basic.Hooks as React
4847
import Web.File.File as File
4948

5049
docs :: JSX
51-
docs = flip element {} $ unsafePerformEffect do
50+
docs = unit # unsafePerformEffect do
5251

5352
userFormExample <- mkUserFormExample
5453

@@ -66,7 +65,7 @@ docs = flip element {} $ unsafePerformEffect do
6665
, children: [ form ]
6766
}
6867

69-
, example $ element userFormExample formData
68+
, example $ userFormExample formData
7069
]
7170

7271
-- | This form renders the toggles at the top of the example
@@ -102,14 +101,12 @@ metaForm = ado
102101
in unit
103102

104103
mkUserFormExample
105-
:: Effect
106-
( ReactComponent
107-
{ inlineTable :: Boolean
108-
, forceTopLabels :: Boolean
109-
, readonly :: Boolean
110-
, simulatePauses :: Boolean
111-
}
112-
)
104+
:: Component
105+
{ inlineTable :: Boolean
106+
, forceTopLabels :: Boolean
107+
, readonly :: Boolean
108+
, simulatePauses :: Boolean
109+
}
113110
mkUserFormExample = do
114111
component "UserFormExample" \props -> React.do
115112
userDialog /\ setUserDialog <- useState Nothing

‎docs/Examples/Icon.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Lumi.Components.Column (column_)
66
import Lumi.Components.Icon (IconType(..), icon_)
77
import Lumi.Components.Text (body, body_, text)
88
import Lumi.Components.Example (example)
9-
import React.Basic (JSX)
9+
import React.Basic.Classic (JSX)
1010

1111
docs :: JSX
1212
docs =

‎docs/Examples/Images.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Lumi.Components.Images (avatar_, productThumb_)
77
import Lumi.Components.Size (extraLarge, large, medium, small)
88
import Lumi.Components.Text (h2_)
99
import Lumi.Components.Example (example)
10-
import React.Basic (JSX)
10+
import React.Basic.Classic (JSX)
1111
import React.Basic.DOM as R
1212

1313
docs :: JSX

‎docs/Examples/Input.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Lumi.Components.Input (CheckboxState(..), alignToInput, checkbox, input,
99
import Lumi.Components.Row (row_)
1010
import Lumi.Components.Size (Size(..))
1111
import Lumi.Components.Text (body, h2_, h4_, p_, text)
12-
import React.Basic (JSX)
12+
import React.Basic.Classic (JSX)
1313
import React.Basic.DOM as R
1414

1515
docs :: JSX

‎docs/Examples/InputGroup.example.purs

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Lumi.Components.InputGroup (inputGroup)
1212
import Lumi.Components.Text (h2_)
1313
import Lumi.Components.DropdownButton (dropdownButton, dropdownButtonDefaults)
1414
import Lumi.Components.Example (example)
15-
import React.Basic (JSX)
15+
import React.Basic.Classic (JSX)
1616
import React.Basic.DOM as R
1717

1818
docs :: JSX

0 commit comments

Comments
 (0)