diff --git a/example/.gitignore b/dev-flows/.gitignore similarity index 100% rename from example/.gitignore rename to dev-flows/.gitignore diff --git a/example/README.md b/dev-flows/README.md similarity index 100% rename from example/README.md rename to dev-flows/README.md diff --git a/example/package-lock.json b/dev-flows/package-lock.json similarity index 100% rename from example/package-lock.json rename to dev-flows/package-lock.json diff --git a/example/package.json b/dev-flows/package.json similarity index 95% rename from example/package.json rename to dev-flows/package.json index da6cd466..3cfbcea4 100644 --- a/example/package.json +++ b/dev-flows/package.json @@ -1,5 +1,5 @@ { - "name": "react-flow-examples", + "name": "react-flow-tests", "version": "0.1.0", "private": true, "dependencies": { diff --git a/example/public/_redirects b/dev-flows/public/_redirects similarity index 100% rename from example/public/_redirects rename to dev-flows/public/_redirects diff --git a/dev-flows/public/favicon.ico b/dev-flows/public/favicon.ico new file mode 100644 index 00000000..731acd59 Binary files /dev/null and b/dev-flows/public/favicon.ico differ diff --git a/example/public/index.html b/dev-flows/public/index.html similarity index 55% rename from example/public/index.html rename to dev-flows/public/index.html index 6e06a78f..f49c16b5 100644 --- a/example/public/index.html +++ b/dev-flows/public/index.html @@ -4,12 +4,10 @@ - - - React Flow Examples + + React Flow - Test Flows -
diff --git a/example/public/robots.txt b/dev-flows/public/robots.txt similarity index 100% rename from example/public/robots.txt rename to dev-flows/public/robots.txt diff --git a/example/src/Basic/index.js b/dev-flows/src/Basic/index.js similarity index 100% rename from example/src/Basic/index.js rename to dev-flows/src/Basic/index.js diff --git a/example/src/CustomConnectionLine/ConnectionLine.js b/dev-flows/src/CustomConnectionLine/ConnectionLine.js similarity index 100% rename from example/src/CustomConnectionLine/ConnectionLine.js rename to dev-flows/src/CustomConnectionLine/ConnectionLine.js diff --git a/example/src/CustomConnectionLine/index.js b/dev-flows/src/CustomConnectionLine/index.js similarity index 100% rename from example/src/CustomConnectionLine/index.js rename to dev-flows/src/CustomConnectionLine/index.js diff --git a/example/src/CustomNode/ColorSelectorNode.js b/dev-flows/src/CustomNode/ColorSelectorNode.js similarity index 100% rename from example/src/CustomNode/ColorSelectorNode.js rename to dev-flows/src/CustomNode/ColorSelectorNode.js diff --git a/example/src/CustomNode/index.js b/dev-flows/src/CustomNode/index.js similarity index 100% rename from example/src/CustomNode/index.js rename to dev-flows/src/CustomNode/index.js diff --git a/example/src/EdgeTypes/index.js b/dev-flows/src/EdgeTypes/index.js similarity index 100% rename from example/src/EdgeTypes/index.js rename to dev-flows/src/EdgeTypes/index.js diff --git a/example/src/EdgeTypes/utils.js b/dev-flows/src/EdgeTypes/utils.js similarity index 100% rename from example/src/EdgeTypes/utils.js rename to dev-flows/src/EdgeTypes/utils.js diff --git a/example/src/Edges/CustomEdge.js b/dev-flows/src/Edges/CustomEdge.js similarity index 100% rename from example/src/Edges/CustomEdge.js rename to dev-flows/src/Edges/CustomEdge.js diff --git a/example/src/Edges/index.js b/dev-flows/src/Edges/index.js similarity index 100% rename from example/src/Edges/index.js rename to dev-flows/src/Edges/index.js diff --git a/example/src/Empty/index.js b/dev-flows/src/Empty/index.js similarity index 100% rename from example/src/Empty/index.js rename to dev-flows/src/Empty/index.js diff --git a/example/src/Hidden/index.js b/dev-flows/src/Hidden/index.js similarity index 100% rename from example/src/Hidden/index.js rename to dev-flows/src/Hidden/index.js diff --git a/example/src/Interaction/index.js b/dev-flows/src/Interaction/index.js similarity index 100% rename from example/src/Interaction/index.js rename to dev-flows/src/Interaction/index.js diff --git a/example/src/Overview/index.js b/dev-flows/src/Overview/index.js similarity index 100% rename from example/src/Overview/index.js rename to dev-flows/src/Overview/index.js diff --git a/example/src/Provider/Sidebar.js b/dev-flows/src/Provider/Sidebar.js similarity index 100% rename from example/src/Provider/Sidebar.js rename to dev-flows/src/Provider/Sidebar.js diff --git a/example/src/Provider/index.js b/dev-flows/src/Provider/index.js similarity index 100% rename from example/src/Provider/index.js rename to dev-flows/src/Provider/index.js diff --git a/example/src/Provider/provider.css b/dev-flows/src/Provider/provider.css similarity index 100% rename from example/src/Provider/provider.css rename to dev-flows/src/Provider/provider.css diff --git a/example/src/Stress/index.js b/dev-flows/src/Stress/index.js similarity index 100% rename from example/src/Stress/index.js rename to dev-flows/src/Stress/index.js diff --git a/example/src/Stress/utils.js b/dev-flows/src/Stress/utils.js similarity index 100% rename from example/src/Stress/utils.js rename to dev-flows/src/Stress/utils.js diff --git a/example/src/Validation/index.js b/dev-flows/src/Validation/index.js similarity index 100% rename from example/src/Validation/index.js rename to dev-flows/src/Validation/index.js diff --git a/example/src/Validation/validation.css b/dev-flows/src/Validation/validation.css similarity index 100% rename from example/src/Validation/validation.css rename to dev-flows/src/Validation/validation.css diff --git a/example/src/index.css b/dev-flows/src/index.css similarity index 94% rename from example/src/index.css rename to dev-flows/src/index.css index 8ad19a95..76f50147 100644 --- a/example/src/index.css +++ b/dev-flows/src/index.css @@ -1,7 +1,5 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); - body { - font-family: 'Roboto', sans-serif; + font-family: sans-serif; color: #111; } diff --git a/example/src/index.js b/dev-flows/src/index.js similarity index 79% rename from example/src/index.js rename to dev-flows/src/index.js index f90eee35..f056e2a9 100644 --- a/example/src/index.js +++ b/dev-flows/src/index.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter as Router, Route, Switch, NavLink, withRouter } from 'react-router-dom'; +import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom'; import Overview from './Overview'; import Basic from './Basic'; @@ -10,7 +10,6 @@ import Interaction from './Interaction'; import Empty from './Empty'; import Edges from './Edges'; import Validation from './Validation'; -import Horizontal from './Horizontal'; import Provider from './Provider'; import Hidden from './Hidden'; import EdgeTypes from './EdgeTypes'; @@ -34,11 +33,6 @@ const routes = [ component: CustomNode, label: 'CustomNode', }, - { - path: '/horizontal', - component: Horizontal, - label: 'Horizontal', - }, { path: '/validation', component: Validation, @@ -83,24 +77,13 @@ const routes = [ const navLinks = routes.filter((route) => route.label); -const SourceDisplay = withRouter(({ location }) => { - const route = routes.find((route) => route.path === location.pathname); - const sourceLink = `https://github.com/wbkd/react-flow/tree/main/example/src/${route.label}/index.js`; - - return ( - - {''} - - ); -}); - const Header = () => { const [menuOpen, setMenuOpen] = useState(); return (
- React Flow + React Flow Dev - - - - - + diff --git a/website/src/components/Page/Doc.js b/website/src/components/Page/Doc.js index f2cd7592..1736d24a 100644 --- a/website/src/components/Page/Doc.js +++ b/website/src/components/Page/Doc.js @@ -9,15 +9,11 @@ const Wrapper = styled(Flex)` border-top: 1px solid ${(p) => p.theme.colors.silverLighten30}; `; -const left = - typeof window !== 'undefined' && window.innerWidth > 1000 - ? Math.min(350, window.innerWidth * 0.3) / 2 - : 0; - const DocWrapper = styled(Box)` max-width: 620px; margin: 0 auto; position: relative; + padding: 0 16px; `; export default ({ children, menu = [], ...rest }) => ( diff --git a/website/src/components/Sidebar/index.js b/website/src/components/Sidebar/index.js index 5069c06f..b6e9960a 100644 --- a/website/src/components/Sidebar/index.js +++ b/website/src/components/Sidebar/index.js @@ -1,14 +1,54 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import Link from 'gatsby-link'; import styled from '@emotion/styled'; +import { Flex } from 'reflexbox'; -import { getThemeColor, getThemeSpacePx } from 'utils/css-utils'; +import Icon from 'components/Icon'; +import Close from 'components/Close'; +import useMenuHeight from 'hooks/useMenuHeight'; +import { getThemeColor, getThemeSpacePx, device, px } from 'utils/css-utils'; const Aside = styled.aside` - width: 30%; - max-width: 300px; - padding: 16px; - border-right: 1px solid ${getThemeColor('silverLighten30')}; + display: ${(p) => (p.isOpen ? 'block' : 'none')}; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: ${(p) => px(p.height)}; + overflow-y: auto; + background: white; + z-index: 400; + + @media ${device.tablet} { + width: 30%; + max-width: 300px; + padding: 16px; + border-right: 1px solid ${getThemeColor('silverLighten30')}; + display: block; + position: relative; + height: auto; + + .mobile { + display: none; + } + } +`; + +const AsideInner = styled.div``; + +const MobileButton = styled(Flex)` + z-index: 10; + background: ${getThemeColor('violetLighten5')}; + position: fixed; + right: 16px; + bottom: 16px; + color: white; + border-radius: 100%; + width: 36px; + height: 36px; + cursor: pointer; + justify-content: center; + align-items: center; `; const MenuLink = styled(Link)` @@ -53,10 +93,34 @@ const SideBarParts = ({ items, level }) => }); const Sidebar = ({ menu }) => { + const [isOpen, setIsOpen] = useState(false); + const menuHeight = useMenuHeight(); + + const toggleSidebar = () => { + const nextMenuOpen = !isOpen; + + document.body.classList.toggle('noscroll', nextMenuOpen); + + setIsOpen(nextMenuOpen); + }; + return ( - + <> + + + + + ); }; diff --git a/website/src/hooks/useMenuHeight.js b/website/src/hooks/useMenuHeight.js new file mode 100644 index 00000000..61a6ad5f --- /dev/null +++ b/website/src/hooks/useMenuHeight.js @@ -0,0 +1,23 @@ +import { useState, useEffect } from 'react'; + +const getInnerHeight = () => { + return typeof window !== 'undefined' ? window.innerHeight : 0; +}; + +export default function useMenuHeight() { + const [menuHeight, setMenuHeight] = useState(getInnerHeight()); + + useEffect(() => { + const onResize = () => { + setMenuHeight(getInnerHeight()); + }; + + window.addEventListener('resize', onResize); + + return () => { + window.removeEventListener('resize', onResize); + }; + }); + + return menuHeight; +} diff --git a/website/src/markdown/docs/getting-started/index.js b/website/src/markdown/docs/getting-started/index.js index 06bd1960..74aed01f 100644 --- a/website/src/markdown/docs/getting-started/index.js +++ b/website/src/markdown/docs/getting-started/index.js @@ -2,14 +2,34 @@ import React from 'react'; import ReactFlow from 'react-flow-renderer'; const elements = [ - { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, - // you can also pass a React component as a label - { id: '2', data: { label:
Node 2
}, position: { x: 100, y: 100 } }, + // input node + { + id: '1', + type: 'input', + data: { label: 'Input Node' }, + position: { x: 250, y: 25 }, + }, + // default node + { + id: '2', + // you can also pass a React component as a label + data: { label:
Default Node
}, + position: { x: 100, y: 125 }, + }, + // output node + { + id: '3', + type: 'output', + // you can also pass a React component as a label + data: { label: 'Output Node' }, + position: { x: 250, y: 250 }, + }, { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e2-3', source: '2', target: '3' }, ]; export default () => ( -
+
); diff --git a/website/src/markdown/docs/getting-started/index.md b/website/src/markdown/docs/getting-started/index.md index 3baf4bc4..0eff4c11 100644 --- a/website/src/markdown/docs/getting-started/index.md +++ b/website/src/markdown/docs/getting-started/index.md @@ -25,10 +25,31 @@ import React from 'react'; import ReactFlow from 'react-flow-renderer'; const elements = [ - { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, - // you can also pass a React component as a label - { id: '2', data: { label:
Node 2
}, position: { x: 100, y: 100 } }, + // input node + { + id: '1', + type: 'input', + data: { label: 'Input Node' }, + position: { x: 250, y: 25 }, + }, + // default node + { + id: '2', + // you can also pass a React component as a label + data: { label:
Default Node
}, + position: { x: 100, y: 125 }, + }, + // output node + { + id: '3', + type: 'output', + // you can also pass a React component as a label + data: { label: 'Output Node' }, + position: { x: 250, y: 250 }, + }, + // animated edge { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e2-3', source: '2', target: '3' }, ]; const BasicFlow = () => ; diff --git a/website/src/pages/index.js b/website/src/pages/index.js index df03a015..22ec8269 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -100,7 +100,7 @@ const Home = () => { { > Documentation - + Examples { return ( - + {content} - + ); };