Skip to content
Permalink
Browse files

feat: multistory flow

  • Loading branch information...
dariocravero committed Jun 16, 2019
1 parent c4d45c0 commit aef4ab23537ff1e23c532e22a166bb882a4a9efc
Showing with 999 additions and 8,212 deletions.
  1. +0 −7,256 __tests__/__snapshots__/react.js.snap
  2. +0 −1 __tests__/app/.gitignore
  3. +82 −0 __tests__/app/Buttons/Button.view.js
  4. +64 −0 __tests__/app/Buttons/ButtonIcon.view.js
  5. +37 −0 __tests__/app/Captures/CaptureEmail.view.js
  6. +14 −0 __tests__/app/EmptyView.view.js
  7. +2 −2 __tests__/app/Stories/App.view
  8. +72 −0 __tests__/app/Stories/App.view.js
  9. +1 −1 __tests__/app/Stories/App.view.logic.js
  10. +1 −1 __tests__/app/Stories/App/Settings.view
  11. +50 −0 __tests__/app/Stories/App/Settings.view.js
  12. +53 −0 __tests__/app/Stories/App/Users.view.js
  13. +26 −0 __tests__/app/Stories/App/Users/Name.view.js
  14. +26 −0 __tests__/app/Stories/App/Users/Surname.view.js
  15. +83 −0 __tests__/app/Svgs/ArrowLeft.view.js
  16. +83 −0 __tests__/app/Svgs/ArrowRight.view.js
  17. +4 −2 __tests__/app/package.json
  18. +0 −62 __tests__/app/use-flow.js
  19. +163 −0 __tests__/app/useFlow.js
  20. +4 −0 __tests__/app/useIsBefore.js
  21. +10 −5 __tests__/app/useIsMedia.js
  22. +17 −4 __tests__/app/yarn.lock
  23. +0 −54 __tests__/react.js
  24. +0 −1 __tests__/views/.views.json
  25. +0 −11 __tests__/views/Action.view
  26. +0 −61 __tests__/views/ActionSelected.view
  27. +0 −5 __tests__/views/ActionUseDiv.view
  28. +0 −21 __tests__/views/AnimatedButton.view
  29. +0 −5 __tests__/views/AnimatedButtonHoverOnly.view
  30. +0 −7 __tests__/views/AnimatedButtonScopeOnly.view
  31. +0 −4 __tests__/views/AppRegionDrag.view
  32. +0 −5 __tests__/views/BackgroundImage.view
  33. +0 −23 __tests__/views/Border.view
  34. +0 −3 __tests__/views/ClassName.view
  35. +0 −6 __tests__/views/Code.view
  36. +0 −5 __tests__/views/DefaultProps.view
  37. +0 −2 __tests__/views/Display.view
  38. +0 −2 __tests__/views/DynamicCaptureType.view
  39. +0 −16 __tests__/views/DynamicFontProps.view
  40. +0 −4 __tests__/views/DynamicStylesApplyToBasicBlocksOnly.view
  41. +0 −2 __tests__/views/DynamicWidth.view
  42. +0 −2 __tests__/views/EmptyText.view
  43. +0 −5 __tests__/views/FlatListPass.view
  44. +0 −16 __tests__/views/Fragment.view
  45. +0 −4 __tests__/views/GoTo.view
  46. +0 −13 __tests__/views/Hover.view
  47. +0 −7 __tests__/views/HyphenatedProps.view
  48. +0 −23 __tests__/views/Indented.view
  49. +0 −2 __tests__/views/JustText.view
  50. +0 −3 __tests__/views/Lazy.view
  51. +0 −10 __tests__/views/ListOfSomething.view
  52. +0 −4 __tests__/views/ListPass.view
  53. +0 −4 __tests__/views/ListWhen.view
  54. +0 −4 __tests__/views/ListWithKey.view
  55. +0 −4 __tests__/views/LocalImage.view
  56. +0 −4 __tests__/views/LocalImageSvg.view
  57. +0 −2 __tests__/views/LocalImageWithDefault.view
  58. +0 −2 __tests__/views/LocalOrRemoteImageWhenCode.view
  59. +0 −17 __tests__/views/Locals.view
  60. +0 −13 __tests__/views/LocalsFormat.view
  61. +0 −2 __tests__/views/NameIsType.view
  62. +0 −3 __tests__/views/NegativeNumber.view
  63. +0 −9 __tests__/views/NestedRoutes.view
  64. +0 −25 __tests__/views/Proxy.view
  65. +0 −12 __tests__/views/Scope.view
  66. +0 −10 __tests__/views/ScopeOnCustomView.view
  67. +0 −9 __tests__/views/ScopePopup.view
  68. +0 −17 __tests__/views/ScopePopup2.view
  69. +0 −10 __tests__/views/ScopedShadows.view
  70. +0 −7 __tests__/views/ScrollableList.view
  71. +0 −13 __tests__/views/Shadow.view
  72. +0 −4 __tests__/views/SlotOnBaseAndValueOnScope.view
  73. +0 −14 __tests__/views/SomeMissingStyle.view
  74. +0 −4 __tests__/views/Teleport.view
  75. +0 −8 __tests__/views/TestIds.view
  76. +0 −20 __tests__/views/Transform.view
  77. +0 −13 __tests__/views/UseCaptureEmail.view
  78. +0 −2 __tests__/views/UseCaptureFile.view
  79. +0 −2 __tests__/views/UseCaptureNumber.view
  80. +0 −2 __tests__/views/UseCapturePhone.view
  81. +0 −2 __tests__/views/UseCaptureSecure.view
  82. +0 −5 __tests__/views/UseCaptureText.view
  83. +0 −1 __tests__/views/UseCaptureTextArea.view
  84. +0 −3 __tests__/views/UseCaptureTextManagedFromOutside.view
  85. +0 −4 __tests__/views/UseHorizontal.view
  86. +0 −4 __tests__/views/UseImage.view
  87. +0 −16 __tests__/views/UseModal.view
  88. +0 −3 __tests__/views/UseProxy.view
  89. +0 −20 __tests__/views/UseRouter.view
  90. +0 −20 __tests__/views/UseSvg.view
  91. +0 −34 __tests__/views/UseTable.view
  92. +0 −27 __tests__/views/UseTableOnWhen.view
  93. +0 −9 __tests__/views/UseText.view
  94. +0 −18 __tests__/views/UseTextCustomFont.view
  95. +0 −2 __tests__/views/UseVertical.view
  96. +0 −4 __tests__/views/ViewAndBlockSameName.view
  97. +0 −3 __tests__/views/ViewNameIsntUsedInStyle.view
  98. +0 −4 __tests__/views/When.view
  99. +0 −3 __tests__/views/WhenTopLevel.view
  100. BIN __tests__/views/chopper.jpg
  101. +150 −44 ensure-flow.js
  102. +4 −0 ensure-is-before.js
  103. +10 −5 ensure-is-media.js
  104. +1 −1 make-get-system-import.js
  105. +0 −42 morph/__snapshots__/inline-svg.test.js.snap
  106. +2 −1 morph/react-dom.js
  107. +3 −3 morph/react-dom/block-name.js
  108. +4 −7 morph/react-dom/get-value-for-property.js
  109. +2 −1 morph/react-native.js
  110. +3 −3 morph/react-native/block-name.js
  111. +4 −7 morph/react-native/block-wrap.js
  112. +4 −7 morph/react-native/get-value-for-property.js
  113. +1 −1 morph/react/block-off-when.js
  114. +7 −11 morph/react/get-body.js
  115. +1 −1 package.json
  116. +3 −0 parse-views.js
  117. +7 −0 parse/index.js
  118. +1 −0 process-files.js

This file was deleted.

@@ -1,4 +1,3 @@
**/*.view.js
dist
node_modules
*.log
@@ -0,0 +1,82 @@
// This file is auto-generated. Edit Button.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import '../Fonts/Montserrat-400.js'
import React from 'react'
import { animated, useSpring } from 'react-spring'
import { css } from 'emotion'

let styles = {}
styles.Vertical = css({
label: 'Vertical',
opacity: 1,
paddingBottom: 12,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 12,
userSelect: 'none',
'&:hover:enabled': {
backgroundColor: '#ff8300',
opacity: 0.85,
},
'&:focus:enabled': {
backgroundColor: '#ffff00',
},
'&:disabled': {
opacity: 0.2,
},
transition: 'opacity 75ms ease-out',
willChange: 'background-color, opacity',
alignSelf: 'var(--alignSelf)',
backgroundColor: 'var(--backgroundColor)',
marginLeft: 'var(--marginLeft)',
})
styles.Text = css({
label: 'Text',
color: '#ffffff',
fontFamily: 'Montserrat, sans-serif',
fontWeight: 400,
fontSize: 12,
[`.${styles.Vertical}:hover:enabled &`]: {
color: '#323232',
},
[`.${styles.Vertical}:focus:enabled &`]: {
color: '#323232',
},
})

let Button = props => {
let animatedVertical = useSpring({
config: {
tension: 170,
friction: 26,
},
from: { backgroundColor: '#ff8383' },
to: { backgroundColor: props.isSelected ? '#ff8383' : '#323232' },
})

return (
<React.Fragment>
<animated.button
data-testid="Button.Vertical"
disabled={props.isDisabled}
onClick={props.onClick}
style={{
'--backgroundColor': animatedVertical.backgroundColor,
'--alignSelf': props.alignSelf,
'--marginLeft':
typeof props.marginLeft === 'number'
? `${props.marginLeft}px`
: props.marginLeft,
}}
className={`views-block ${styles.Vertical}`}
>
<span data-testid="Button.Text" className={`views-text ${styles.Text}`}>
{props.text}
</span>
</animated.button>
{props.children}
</React.Fragment>
)
}
Button.defaultProps = { alignSelf: 'auto', marginLeft: 0, text: 'label' }
export default Button
@@ -0,0 +1,64 @@
// This file is auto-generated. Edit ButtonIcon.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import ArrowLeft from '../Svgs/ArrowLeft.view.js'
import React from 'react'
import { css } from 'emotion'

let styles = {}
styles.ButtonIcon1 = css({
label: 'ButtonIcon1',
flexDirection: 'row',
alignItems: 'center',
cursor: 'pointer',
justifyContent: 'center',
paddingBottom: 4,
paddingLeft: 4,
paddingRight: 4,
paddingTop: 4,
borderColor: '#ebebeb',
borderStyle: 'solid',
borderWidth: 1,
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
userSelect: 'none',
alignSelf: 'var(--alignSelf)',
marginLeft: 'var(--marginLeft)',
})

let ButtonIcon = props => {
return (
<React.Fragment>
<button
data-testid="ButtonIcon.ButtonIcon"
onClick={props.onClick}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
style={{
'--alignSelf': props.alignSelf,
'--marginLeft':
typeof props.marginLeft === 'number'
? `${props.marginLeft}px`
: props.marginLeft,
}}
className={`views-block ${styles.ButtonIcon1}`}
>
<props.proxyArrowLeft
data-testid="ButtonIcon.ArrowLeft"
proxy={true}
width={15}
height={15}
stroke="#404040"
/>
</button>
{props.children}
</React.Fragment>
)
}
ButtonIcon.defaultProps = {
alignSelf: 'auto',
marginLeft: 0,
proxyArrowLeft: ArrowLeft,
}
export default ButtonIcon
@@ -0,0 +1,37 @@
// This file is auto-generated. Edit CaptureEmail.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import React from 'react'
import { css } from 'emotion'

let styles = {}
styles.Capture = css({
label: 'Capture',
color: '#404040',
'&:hover:enabled': {
color: '#808080',
},
'&:focus:enabled': {
color: '#a0a0a0',
},
'&::placeholder': {
color: '#323232',
},
})

let CaptureEmail = props => {
return (
<React.Fragment>
<input
type="email"
data-testid="CaptureEmail.Capture"
onChange={props.onChange}
placeholder="Type an email"
value={props.value}
className={`views-capture ${styles.Capture}`}
/>
{props.children}
</React.Fragment>
)
}

export default CaptureEmail
@@ -0,0 +1,14 @@
// This file is auto-generated. Edit EmptyView.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import React from 'react'

let EmptyView = props => {
return (
<EmptyView
data-testid={`${props['data-testid'] || 'EmptyView'}`}
className="views-block"
/>
)
}

export default EmptyView
@@ -16,15 +16,15 @@ App View
when <isMediaMobile
backgroundColor #AABBCC
Button
onClick <flowSetState
onClick <setFlow
onClickId /App/Users
text Go to users
width 300
when <isMediaMobile
width 400
Button
marginLeft 8
onClick <flowSetState
onClick <setFlow
onClickId /App/Settings
text Go to settings
Button
@@ -0,0 +1,72 @@
// This file is auto-generated. Edit App.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import * as fromFlow from '../useFlow.js'
import Button from '../Buttons/Button.view.js'
import React from 'react'
import Settings from './App/Settings.view.js'
import Users from './App/Users.view.logic.js'
import useIsMedia from '../useIsMedia.js'
import { css } from 'emotion'

let styles = {}
styles.Topbar = css({
label: 'Topbar',
flexDirection: 'row',
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
marginBottom: 8,
marginLeft: 8,
marginRight: 8,
marginTop: 8,
paddingLeft: 24,
paddingRight: 24,
backgroundColor: 'var(--backgroundColor)',
})

let App = props => {
let isMedia = useIsMedia()

let flow = fromFlow.useFlow()
let setFlow = fromFlow.useSetFlow()

return (
<React.Fragment>
<div
data-testid="App.Topbar"
style={{
'--backgroundColor': `${isMedia.mobile ? '#AABBCC' : '#404040'}`,
}}
className={`views-block ${styles.Topbar}`}
>
<Button
data-testid="App.Button"
onClick={() => setFlow('/App/Users')}
onClickId="/App/Users"
text="Go to users"
width={isMedia.mobile ? 400 : 300}
/>
<Button
data-testid="App.Button:1"
marginLeft={8}
onClick={() => setFlow('/App/Settings')}
onClickId="/App/Settings"
text="Go to settings"
/>
<Button
data-testid="App.Button:2"
isDisabled={true}
text="Disabled button"
/>
</div>
{flow.has('/App/Users') ? <Users data-testid="App.Users" /> : null}
{flow.has('/App/Settings') ? (
<Settings data-testid="App.Settings" />
) : null}
{props.children}
</React.Fragment>
)
}

export default App
@@ -1,4 +1,4 @@
import { Flow } from '../use-flow.js'
import { Flow } from '../useFlow.js'
import App from './App.view.js'
import React from 'react'

@@ -4,7 +4,7 @@ Settings View
marginLeft 8
ButtonIcon
alignSelf flexStart
onClick <flowSetState
onClick <setFlow
onClickId /App/Users
text Go to users
ArrowRight ArrowLeft
@@ -0,0 +1,50 @@
// This file is auto-generated. Edit Settings.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys */
import '../../Fonts/WonderUnitSans-300.js'
import * as fromFlow from '../../useFlow.js'
import ArrowLeft from '../../Svgs/ArrowLeft.view.js'
import ButtonIcon from '../../Buttons/ButtonIcon.view.js'
import React from 'react'
import { css } from 'emotion'

let styles = {}
styles.Vertical = css({ label: 'Vertical', marginLeft: 8 })
styles.Text = css({
label: 'Text',
color: 'deepskyblue',
fontFamily: 'WonderUnitSans',
fontSize: 28,
fontWeight: 300,
marginTop: 24,
})

let Settings = props => {
let setFlow = fromFlow.useSetFlow()

return (
<React.Fragment>
<div
data-testid="Settings.Vertical"
className={`views-block ${styles.Vertical}`}
>
<ButtonIcon
proxyArrowRight={ArrowLeft}
data-testid="Settings.ButtonIcon"
alignSelf="flex-start"
onClick={() => setFlow('/App/Users')}
onClickId="/App/Users"
text="Go to users"
/>
<span
data-testid="Settings.Text"
className={`views-text ${styles.Text}`}
>
Settings
</span>
</div>
{props.children}
</React.Fragment>
)
}

export default Settings

0 comments on commit aef4ab2

Please sign in to comment.
You can’t perform that action at this time.