diff --git a/website/gatsby-config.js b/website/gatsby-config.js index fe99dfaa..d46e72a8 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -13,6 +13,13 @@ module.exports = { path: `${__dirname}/src/pages`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: 'exampleflows', + path: `${__dirname}/src/example-flows`, + }, + }, { resolve: `gatsby-source-filesystem`, options: { diff --git a/website/gatsby-node.js b/website/gatsby-node.js index d20773b9..ec1d2f61 100644 --- a/website/gatsby-node.js +++ b/website/gatsby-node.js @@ -2,13 +2,15 @@ const path = require('path'); const { createFilePath } = require('gatsby-source-filesystem'); const docsGenerator = require('./generators/docs'); +const exampleGenerator = require('./generators/examples'); exports.createPages = ({ graphql, actions }) => { const { createPage } = actions; const generateDocs = docsGenerator(createPage, graphql); + const generateExamples = exampleGenerator(createPage, graphql); - return Promise.all([generateDocs]); + return Promise.all([generateDocs, generateExamples]); }; exports.onCreateNode = ({ node, actions, getNode }) => { diff --git a/website/generators/examples.js b/website/generators/examples.js new file mode 100644 index 00000000..4b978cbc --- /dev/null +++ b/website/generators/examples.js @@ -0,0 +1,55 @@ +const path = require('path'); + +const exampleTemplate = path.resolve('./src/templates/example-page.js'); + +const examplePagesQuery = `{ + allExamplesJson { + edges { + node { + slug + title + source + } + } + } +} +`; + +const createExamplePage = (createPage, examplePages) => { + examplePages.forEach((page) => { + const { slug, title, source } = page.node; + + createPage({ + path: slug, + component: exampleTemplate, + context: { + slug: slug, + title: title, + source: source, + sourceSlug: `/example-flows/${source}/`, + }, + }); + }); +}; + +const exampleGenerator = (createPage, graphql) => + new Promise((resolve, reject) => { + resolve( + graphql(examplePagesQuery).then((result) => { + if (result.errors) { + console.log(result.errors); + reject(result.errors); + } + + const pages = result.data.allExamplesJson.edges; + + try { + createExamplePage(createPage, pages); + } catch (e) { + console.log(e); + } + }) + ); + }); + +module.exports = exampleGenerator; diff --git a/website/package-lock.json b/website/package-lock.json index 8e2c1b3d..a8e2c00c 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -17547,7 +17547,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" }, "ow": { @@ -22622,7 +22622,7 @@ }, "through": { "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=" }, "through2": { diff --git a/website/src/assets/data/examples.json b/website/src/assets/data/examples.json new file mode 100644 index 00000000..a16358b0 --- /dev/null +++ b/website/src/assets/data/examples.json @@ -0,0 +1,57 @@ +[ + { + "title": "Overview", + "slug": "examples/", + "source": "Overview" + }, + { + "title": "Custom Node", + "slug": "examples/custom-node", + "source": "CustomNode" + }, + { + "title": "Edges", + "slug": "examples/edges", + "source": "Edges" + }, + { + "title": "Horizontal", + "slug": "examples/horizontal", + "source": "Horizontal" + }, + { + "title": "Interaction", + "slug": "examples/interaction", + "source": "Interaction" + }, + { + "title": "Provider", + "slug": "examples/provider", + "source": "Provider" + }, + { + "title": "Stress", + "slug": "examples/stress", + "source": "Stress" + }, + { + "title": "Validation", + "slug": "examples/validation", + "source": "Validation" + }, + { + "title": "Custom Connectionline", + "slug": "examples/custom-connectionline", + "source": "CustomConnectionLine" + }, + { + "title": "Edge Types", + "slug": "examples/edge-types", + "source": "EdgeTypes" + }, + { + "title": "Hidden", + "slug": "examples/hidden", + "source": "Hidden" + } +] diff --git a/website/src/components/CodeBlock/index.js b/website/src/components/CodeBlock/index.js index 9ce484c0..4da3c38f 100644 --- a/website/src/components/CodeBlock/index.js +++ b/website/src/components/CodeBlock/index.js @@ -7,7 +7,6 @@ import CodeBlock from './Mdx'; import { H4, AttributionText } from 'components/Typo'; const Wrapper = styled(Box)` - max-width: 750px; margin: 0 auto; padding: 5px 0; diff --git a/website/src/components/HeroFlow/index.js b/website/src/components/HeroFlow/index.js index 7cda301f..24173e0a 100644 --- a/website/src/components/HeroFlow/index.js +++ b/website/src/components/HeroFlow/index.js @@ -9,6 +9,8 @@ import ReactFlow, { import ColorPickerNode from './ColorPickerNode'; const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0; +const hasTouch = typeof window !== 'undefined' && 'ontouchstart' in window; + const isSmallScreen = windowWidth < 800; const getOffset = () => { @@ -139,6 +141,7 @@ export default () => { zoomOnScroll={false} nodeTypes={nodeTypes} onConnect={onConnect} + paneMoveable={!hasTouch} > diff --git a/website/src/components/Page/Example.js b/website/src/components/Page/Example.js index 8b8751d8..c55d1b24 100644 --- a/website/src/components/Page/Example.js +++ b/website/src/components/Page/Example.js @@ -1,20 +1,47 @@ import React from 'react'; import styled from '@emotion/styled'; -import { Flex } from 'reflexbox'; +import { Flex, Box } from 'reflexbox'; import Page from 'components/Page'; import Sidebar from 'components/Sidebar'; import useExamplePages from 'hooks/useExamplePages'; +import CodeBlock from 'components/CodeBlock'; +import { H4 } from 'components/Typo'; + +import 'example-flows/Overview'; const Wrapper = styled(Flex)` border-top: 1px solid ${(p) => p.theme.colors.silverLighten30}; flex-grow: 1; - position: absolute; - width: 100%; - height: 100%; `; -export default ({ children, title, slug }) => { +const ReactFlowWrapper = styled(Box)` + flex-grow: 1; + + .react-flow { + height: 65vh; + } +`; + +const SourceWrapper = styled(Box)` + border-top: 1px solid #eee; + max-width: 1000px; + margin: 0 auto; +`; + +const SourceCodeBlock = ({ absolutePath, internal }) => { + const splittedPath = absolutePath.split('/'); + const fileName = splittedPath[splittedPath.length - 1]; + + return ( + + {fileName} + + + ); +}; + +export default ({ children, title, slug, sourceCodeFiles = [] }) => { const menu = useExamplePages(); const metaTags = { @@ -23,11 +50,23 @@ export default ({ children, title, slug }) => { robots: 'index, follow', }; + const hasSource = sourceCodeFiles.length > 0; + return ( - {children} + + {children} + {hasSource && ( + +

Source Code

+ {sourceCodeFiles.map((source) => ( + + ))} + + )} + ); diff --git a/website/src/components/TeaserFlow/B.js b/website/src/components/TeaserFlow/B.js index e92bd4cc..94be3076 100644 --- a/website/src/components/TeaserFlow/B.js +++ b/website/src/components/TeaserFlow/B.js @@ -170,8 +170,6 @@ export default () => { setElements(initialElements); }, []); - console.log(elements); - return ( console.log('drag start', node); -const onNodeDragStop = (event, node) => console.log('drag stop', node); -const onSelectionDrag = (event, nodes) => console.log('selection drag', nodes); -const onSelectionDragStart = (event, nodes) => - console.log('selection drag start', nodes); -const onSelectionDragStop = (event, nodes) => - console.log('selection drag stop', nodes); -const onSelectionContextMenu = (event, nodes) => { - event.preventDefault(); - console.log('selection context menu', nodes); -}; -const onElementClick = (event, element) => - console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); -const onSelectionChange = (elements) => - console.log('selection change', elements); +import initialElements from './initial-elements'; + const onLoad = (reactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); reactFlowInstance.fitView(); }; -const onMoveEnd = (transform) => console.log('zoom/move end', transform); - -const initialElements = [ - { - id: '1', - type: 'input', - data: { - label: ( - <> - Welcome to React Flow! - - ), - }, - position: { x: 250, y: 0 }, - }, - { - id: '2', - data: { - label: ( - <> - This is a default node - - ), - }, - position: { x: 100, y: 100 }, - }, - { - id: '3', - data: { - label: ( - <> - This one has a custom style - - ), - }, - position: { x: 400, y: 100 }, - style: { - background: '#D6D5E6', - color: '#333', - border: '1px solid #222138', - width: 180, - }, - }, - { - id: '4', - position: { x: 250, y: 200 }, - data: { - label: 'Another default node', - }, - }, - { - id: '5', - data: { - label: 'Node id: 5', - }, - position: { x: 250, y: 325 }, - }, - { - id: '6', - type: 'output', - data: { - label: ( - <> - An output node - - ), - }, - position: { x: 100, y: 480 }, - }, - { - id: '7', - type: 'output', - data: { label: 'Another output node' }, - position: { x: 400, y: 450 }, - }, - { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' }, - { id: 'e1-3', source: '1', target: '3' }, - { - id: 'e3-4', - source: '3', - target: '4', - animated: true, - label: 'animated edge', - }, - { - id: 'e4-5', - source: '4', - target: '5', - arrowHeadType: 'arrowclosed', - label: 'edge with arrow head', - }, - { - id: 'e5-6', - source: '5', - target: '6', - type: 'smoothstep', - label: 'smooth step edge', - }, - { - id: 'e5-7', - source: '5', - target: '7', - type: 'step', - style: { stroke: '#f6ab6c' }, - label: 'a step edge', - animated: true, - labelStyle: { fill: '#f6ab6c', fontWeight: 700 }, - }, -]; - -const connectionLineStyle = { stroke: '#ddd' }; -const snapGrid = [16, 16]; - const OverviewFlow = () => { const [elements, setElements] = useState(initialElements); const onElementsRemove = (elementsToRemove) => @@ -151,21 +24,11 @@ const OverviewFlow = () => { return ( { diff --git a/website/src/example-flows/Overview/initial-elements.js b/website/src/example-flows/Overview/initial-elements.js new file mode 100644 index 00000000..2f2d1c75 --- /dev/null +++ b/website/src/example-flows/Overview/initial-elements.js @@ -0,0 +1,109 @@ +import React from 'react'; + +export default [ + { + id: '1', + type: 'input', + data: { + label: ( + <> + Welcome to React Flow! + + ), + }, + position: { x: 250, y: 0 }, + }, + { + id: '2', + data: { + label: ( + <> + This is a default node + + ), + }, + position: { x: 100, y: 100 }, + }, + { + id: '3', + data: { + label: ( + <> + This one has a custom style + + ), + }, + position: { x: 400, y: 100 }, + style: { + background: '#D6D5E6', + color: '#333', + border: '1px solid #222138', + width: 180, + }, + }, + { + id: '4', + position: { x: 250, y: 200 }, + data: { + label: 'Another default node', + }, + }, + { + id: '5', + data: { + label: 'Node id: 5', + }, + position: { x: 250, y: 325 }, + }, + { + id: '6', + type: 'output', + data: { + label: ( + <> + An output node + + ), + }, + position: { x: 100, y: 480 }, + }, + { + id: '7', + type: 'output', + data: { label: 'Another output node' }, + position: { x: 400, y: 450 }, + }, + { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' }, + { id: 'e1-3', source: '1', target: '3' }, + { + id: 'e3-4', + source: '3', + target: '4', + animated: true, + label: 'animated edge', + }, + { + id: 'e4-5', + source: '4', + target: '5', + arrowHeadType: 'arrowclosed', + label: 'edge with arrow head', + }, + { + id: 'e5-6', + source: '5', + target: '6', + type: 'smoothstep', + label: 'smooth step edge', + }, + { + id: 'e5-7', + source: '5', + target: '7', + type: 'step', + style: { stroke: '#f6ab6c' }, + label: 'a step edge', + animated: true, + labelStyle: { fill: '#f6ab6c', fontWeight: 700 }, + }, +]; diff --git a/website/src/example-flows/Stress/index.js b/website/src/example-flows/Stress/index.js index 0475b516..870aaab6 100644 --- a/website/src/example-flows/Stress/index.js +++ b/website/src/example-flows/Stress/index.js @@ -1,6 +1,13 @@ import React, { useState } from 'react'; -import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer'; +import ReactFlow, { + removeElements, + addEdge, + MiniMap, + isNode, + Controls, + Background, +} from 'react-flow-renderer'; import { getElements } from './utils'; const onLoad = (reactFlowInstance) => { @@ -12,7 +19,8 @@ const initialElements = getElements(10, 10); const StressFlow = () => { const [elements, setElements] = useState(initialElements); - const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); + const onElementsRemove = (elementsToRemove) => + setElements((els) => removeElements(elementsToRemove, els)); const onConnect = (params) => setElements((els) => addEdge(params, els)); const updatePos = () => { @@ -34,12 +42,20 @@ const StressFlow = () => { }; return ( - + - diff --git a/website/src/hooks/useExamplePages.js b/website/src/hooks/useExamplePages.js index 665136da..04a4a2b5 100644 --- a/website/src/hooks/useExamplePages.js +++ b/website/src/hooks/useExamplePages.js @@ -4,14 +4,11 @@ import { useStaticQuery, graphql } from 'gatsby'; export default function useFeaturedProjects() { const rawData = useStaticQuery(graphql` query ExamplePages { - allJavascriptFrontmatter { + allExamplesJson { edges { node { - frontmatter { - title - slug - order - } + title + slug } } } @@ -19,14 +16,10 @@ export default function useFeaturedProjects() { `); const data = useMemo(() => { - return rawData.allJavascriptFrontmatter.edges - .sort((a, b) => { - return a.node.frontmatter.order - b.node.frontmatter.order; - }) - .map(({ node }) => ({ - slug: `/examples/${node.frontmatter.slug}`, - title: node.frontmatter.title, - })); + return rawData.allExamplesJson.edges.map(({ node }) => ({ + slug: `/${node.slug}`, + title: node.title, + })); }, [rawData]); return data; diff --git a/website/src/pages/examples/custom-connectionline.js b/website/src/pages/examples/custom-connectionline.js deleted file mode 100644 index 111a890b..00000000 --- a/website/src/pages/examples/custom-connectionline.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/CustomConnectionLine'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Custom Connectionline', - slug: 'custom-connectionline', - order: 10, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/custom-node.js b/website/src/pages/examples/custom-node.js deleted file mode 100644 index 8992ac8c..00000000 --- a/website/src/pages/examples/custom-node.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/CustomNode'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Custom Node', - slug: 'custom-node', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/edge-types.js b/website/src/pages/examples/edge-types.js deleted file mode 100644 index 85642e0d..00000000 --- a/website/src/pages/examples/edge-types.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/EdgeTypes'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Edge Types', - slug: 'edge-types', - order: 11, -}; - -export default () => { - return ( - - - - {' '} - - ); -}; diff --git a/website/src/pages/examples/edges.js b/website/src/pages/examples/edges.js deleted file mode 100644 index 8560e073..00000000 --- a/website/src/pages/examples/edges.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Edges'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Edges', - slug: 'edges', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/hidden.js b/website/src/pages/examples/hidden.js deleted file mode 100644 index 76816c3a..00000000 --- a/website/src/pages/examples/hidden.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Hidden'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Hidden', - slug: 'hidden', - order: 12, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/horizontal.js b/website/src/pages/examples/horizontal.js deleted file mode 100644 index aced6a8b..00000000 --- a/website/src/pages/examples/horizontal.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Horizontal'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Horizontal', - slug: 'horizontal', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/index.js b/website/src/pages/examples/index.js deleted file mode 100644 index 4999a89b..00000000 --- a/website/src/pages/examples/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Overview'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Overview', - slug: '', - order: 0, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/interaction.js b/website/src/pages/examples/interaction.js deleted file mode 100644 index c5c4412f..00000000 --- a/website/src/pages/examples/interaction.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Interaction'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Interaction', - slug: 'interaction', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/provider.js b/website/src/pages/examples/provider.js deleted file mode 100644 index 8267d083..00000000 --- a/website/src/pages/examples/provider.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Provider'; - -export const frontmatter = { - title: 'Provider', - slug: 'provider', - order: 4, -}; - -export default () => { - return ( - - - - ); -}; diff --git a/website/src/pages/examples/stress.js b/website/src/pages/examples/stress.js deleted file mode 100644 index 1ab45a2d..00000000 --- a/website/src/pages/examples/stress.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Stress'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Stress', - slug: 'stress', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/pages/examples/validation.js b/website/src/pages/examples/validation.js deleted file mode 100644 index eabc7218..00000000 --- a/website/src/pages/examples/validation.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import ExamplePage from 'components/Page/Example'; -import Flow from 'example-flows/Validation'; -import { ReactFlowProvider } from 'react-flow-renderer'; - -export const frontmatter = { - title: 'Validation', - slug: 'validation', - order: 4, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/website/src/templates/example-page.js b/website/src/templates/example-page.js new file mode 100644 index 00000000..5e40bc01 --- /dev/null +++ b/website/src/templates/example-page.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from 'react'; + +import ExamplePage from 'components/Page/Example'; +import { ReactFlowProvider } from 'react-flow-renderer'; + +export default ({ data, pageContext }) => { + const [flow, setFlow] = useState(null); + const sourceCodeFiles = data?.allFile?.edges + ?.map(({ node }) => node) + .sort((a, b) => { + if (a.absolutePath.includes('index.js')) { + return -1; + } + }) + .filter((node) => node.internal.content); + + useEffect(() => { + const load = async () => { + const nextFlow = await import(`example-flows/${pageContext.source}`); + setFlow(nextFlow); + }; + + load(); + }, [pageContext]); + + console.log(pageContext, data); + + return ( + + {flow && } + + ); +}; + +export const pageQuery = graphql` + query SourceBySourceSlug($sourceSlug: String!) { + allFile(filter: { absolutePath: { regex: $sourceSlug } }) { + edges { + node { + id + absolutePath + internal { + content + } + } + } + } + } +`;