├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE.md ├── README.md ├── archive ├── docs │ ├── .gitattributes │ ├── .gitignore │ ├── LICENSE │ ├── archive │ │ ├── events-old.mdx │ │ ├── learn │ │ │ ├── actions.mdx │ │ │ ├── async-events.mdx │ │ │ ├── auto-events.mdx │ │ │ ├── basics.mdx │ │ │ ├── conditions.mdx │ │ │ ├── data.mdx │ │ │ ├── event-handlers.mdx │ │ │ ├── events.mdx │ │ │ ├── intro.mdx │ │ │ ├── repeat-events.mdx │ │ │ ├── results.mdx │ │ │ ├── state.mdx │ │ │ ├── states.mdx │ │ │ ├── tips-and-tricks.mdx │ │ │ ├── transition-events.mdx │ │ │ ├── transitions.mdx │ │ │ ├── type-support.png │ │ │ └── values.mdx │ │ ├── react-hook.mdx │ │ ├── state.mdx │ │ ├── states-old-1.mdx │ │ ├── states-old.mdx │ │ ├── the-problem.mdx │ │ ├── tips.mdx │ │ └── updates.mdx │ ├── content │ │ ├── definitions │ │ │ ├── action.mdx │ │ │ ├── active.mdx │ │ │ ├── async.mdx │ │ │ ├── auto-event.mdx │ │ │ ├── branch-state.mdx │ │ │ ├── condition.mdx │ │ │ ├── configuration.mdx │ │ │ ├── data.mdx │ │ │ ├── do.mdx │ │ │ ├── event-handler.mdx │ │ │ ├── event.mdx │ │ │ ├── if-any.mdx │ │ │ ├── if.mdx │ │ │ ├── inactive.mdx │ │ │ ├── initial-state.mdx │ │ │ ├── is-in.mdx │ │ │ ├── machine.mdx │ │ │ ├── on-enter.mdx │ │ │ ├── on-event-complete.mdx │ │ │ ├── on-event.mdx │ │ │ ├── on-exit.mdx │ │ │ ├── parallel-state.mdx │ │ │ ├── payload.mdx │ │ │ ├── previous.mdx │ │ │ ├── repeat.mdx │ │ │ ├── restore.mdx │ │ │ ├── result.mdx │ │ │ ├── send.mdx │ │ │ ├── state-tree.mdx │ │ │ ├── state.mdx │ │ │ ├── transition.mdx │ │ │ ├── unless.mdx │ │ │ ├── update.mdx │ │ │ └── when-in.mdx │ │ ├── designing-state.mdx │ │ ├── docs │ │ │ ├── api │ │ │ │ ├── createDesign.mdx │ │ │ │ ├── createSelectorHook.mdx │ │ │ │ ├── createState.mdx │ │ │ │ ├── design │ │ │ │ │ ├── event-handlers.mdx │ │ │ │ │ ├── index.mdx │ │ │ │ │ └── state-nodes.mdx │ │ │ │ ├── state │ │ │ │ │ └── index.mdx │ │ │ │ ├── useSelector.mdx │ │ │ │ └── useStateDesigner.mdx │ │ │ ├── concepts.mdx │ │ │ ├── examples.mdx │ │ │ ├── framer-motion.mdx │ │ │ ├── glossary.mdx │ │ │ ├── packages │ │ │ │ ├── core.mdx │ │ │ │ └── react.mdx │ │ │ ├── quick-start.mdx │ │ │ └── usage │ │ │ │ ├── javascript.mdx │ │ │ │ ├── react.mdx │ │ │ │ └── typescript.mdx │ │ ├── examples │ │ │ ├── breakout.mdx │ │ │ ├── calculator.mdx │ │ │ ├── counter.mdx │ │ │ ├── dogs.mdx │ │ │ ├── drawing.mdx │ │ │ ├── input-save-cancel.mdx │ │ │ ├── input.mdx │ │ │ ├── localStorageCounter.mdx │ │ │ ├── snake.mdx │ │ │ ├── stopwatch.mdx │ │ │ ├── tetris.mdx │ │ │ ├── tiles.mdx │ │ │ ├── timer.mdx │ │ │ ├── todo.mdx │ │ │ ├── todos.mdx │ │ │ └── toggle.mdx │ │ ├── index.mdx │ │ └── nav │ │ │ ├── 404.mdx │ │ │ ├── footer.mdx │ │ │ ├── header.mdx │ │ │ └── sidebar.mdx │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── gatsby-ssr.js │ ├── index.js │ ├── package.json │ ├── src │ │ ├── components.js │ │ ├── components │ │ │ ├── .eslintrc │ │ │ ├── 404.js │ │ │ ├── CodeBlock.js │ │ │ ├── codesandbox.js │ │ │ ├── counter-toggle.js │ │ │ ├── doc.js │ │ │ ├── footer.js │ │ │ ├── header-link.js │ │ │ ├── header.js │ │ │ ├── inline-link.js │ │ │ ├── layout.js │ │ │ ├── live-view.js │ │ │ ├── lockup.svg │ │ │ ├── menu-button.js │ │ │ ├── nav-link.js │ │ │ ├── page-links.js │ │ │ ├── seo.js │ │ │ ├── sidebar-link.js │ │ │ ├── sidenav.js │ │ │ ├── snippets.js │ │ │ └── youtube.js │ │ ├── hooks │ │ │ └── useScrollPosition.js │ │ ├── index.js │ │ ├── styles.css │ │ ├── templates │ │ │ ├── 404.js │ │ │ └── doc.js │ │ └── theme.js │ └── static │ │ ├── atarist8x16systemfont.ttf │ │ └── icon.png ├── editor │ └── editor │ │ ├── ActionOptionsButton.tsx │ │ ├── CodeEditor.tsx │ │ ├── CollectionsPanel.tsx │ │ ├── ConditionOptionsButton.tsx │ │ ├── DragDropList.tsx │ │ ├── EventOptionsButton.tsx │ │ ├── Segment.tsx │ │ ├── Simulation.tsx │ │ ├── StateListItem.tsx │ │ ├── StateOptionsButton.tsx │ │ ├── ValueOptionsButton.tsx │ │ ├── content-panel │ │ ├── ContentPanel.tsx │ │ ├── DataEditor.tsx │ │ ├── EventItem.tsx │ │ └── StateBranchItem.tsx │ │ ├── index.tsx │ │ ├── panel │ │ ├── Panel.tsx │ │ ├── PanelHeading.tsx │ │ ├── PanelItem.tsx │ │ ├── PanelSelectItem.tsx │ │ ├── ResizePanel.tsx │ │ └── ResizePanelRight.tsx │ │ ├── shared.tsx │ │ ├── state-panel │ │ ├── StateEditor.tsx │ │ ├── StateNode.tsx │ │ ├── StatePanel.tsx │ │ └── event-handler │ │ │ ├── EventHandler.tsx │ │ │ ├── EventHandlerLink.tsx │ │ │ └── HandlerOptionsButton.tsx │ │ ├── state.ts │ │ ├── theme.tsx │ │ └── types.ts ├── example │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── fonts │ │ │ └── gameboy.ttf │ │ ├── images │ │ │ ├── bricks.svg │ │ │ ├── ghost.svg │ │ │ ├── i.svg │ │ │ ├── j.svg │ │ │ ├── l.svg │ │ │ ├── o.svg │ │ │ ├── s.svg │ │ │ ├── t.svg │ │ │ └── z.svg │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── Matrix │ │ │ │ ├── Cell.tsx │ │ │ │ ├── Container.tsx │ │ │ │ ├── FallingPiece.tsx │ │ │ │ ├── GhostPiece.tsx │ │ │ │ └── NextPiece.tsx │ │ │ ├── Next.tsx │ │ │ ├── Playfield.tsx │ │ │ └── Stats.tsx │ │ ├── game │ │ │ ├── index.ts │ │ │ ├── static.ts │ │ │ └── types.ts │ │ ├── index.tsx │ │ ├── react-app-env.d.ts │ │ ├── scenes │ │ │ ├── Playing.tsx │ │ │ ├── Start.tsx │ │ │ ├── Tests │ │ │ │ ├── Nested.tsx │ │ │ │ ├── Switches.tsx │ │ │ │ └── Todo.tsx │ │ │ └── Todos.tsx │ │ └── styles.css │ └── tsconfig.json ├── tutorials │ ├── .gitignore │ ├── jest.config.js │ ├── jsconfig.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ ├── lockup-dark.svg │ │ └── lockup-light.svg │ ├── sandbox.config.json │ └── src │ │ ├── App.js │ │ ├── components │ │ └── index.js │ │ ├── index.js │ │ ├── routes.js │ │ ├── setupTests.js │ │ ├── theme.js │ │ ├── tutorials │ │ ├── 1_counter │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 2_toggle │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 3_input │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 4_todo │ │ │ ├── complete │ │ │ │ ├── Todo.js │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ ├── Todo.js │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 5_todos │ │ │ ├── complete │ │ │ │ ├── Todo.js │ │ │ │ ├── globalState.js │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ ├── Todo.js │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 6_stopwatch │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 7_timer │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── 8_tiles │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── breakout │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── calculator │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── dogs │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── dopewars │ │ │ ├── complete │ │ │ │ ├── game.js │ │ │ │ ├── index.js │ │ │ │ └── static.js │ │ │ ├── starter │ │ │ │ ├── Todo.js │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── drawing │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── player │ │ │ ├── complete │ │ │ │ └── index.js │ │ │ ├── starter │ │ │ │ └── index.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ ├── snake │ │ │ ├── complete │ │ │ │ ├── index.js │ │ │ │ └── input.js │ │ │ ├── starter │ │ │ │ ├── index.js │ │ │ │ └── input.js │ │ │ └── tests │ │ │ │ ├── complete.test.js │ │ │ │ ├── index.js │ │ │ │ └── starter.test.js │ │ └── tetris │ │ │ ├── complete │ │ │ ├── game.js │ │ │ ├── index.js │ │ │ └── static.js │ │ │ ├── starter │ │ │ ├── index.js │ │ │ └── static.js │ │ │ └── tests │ │ │ ├── complete.test.js │ │ │ ├── index.js │ │ │ └── starter.test.js │ │ └── utils.js └── viewer │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── auth │ ├── firebaseAdmin.tsx │ ├── initFirebase.tsx │ └── useUser.tsx │ ├── decs.d.ts │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── [oid] │ │ └── [pid] │ │ │ ├── chart.tsx │ │ │ ├── index.tsx │ │ │ ├── preview.tsx │ │ │ └── static-preview.tsx │ ├── _app.js │ ├── _document.js │ ├── admin.tsx │ ├── api │ │ ├── [oid] │ │ │ ├── [pid] │ │ │ │ └── index.tsx │ │ │ └── index.tsx │ │ └── admin.tsx │ ├── auth.tsx │ ├── index.tsx │ ├── styles.css │ └── user.tsx │ ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── cursor.svg │ ├── discord-large.svg │ ├── discord.svg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── lockup_dark.svg │ ├── lockup_light.svg │ ├── mstile-150x150.png │ ├── safari-pinned-tab.svg │ ├── sd-icon.svg │ ├── site.webmanifest │ ├── splash_dark.png │ ├── splash_light.png │ └── vercel.svg │ ├── site │ ├── 404.tsx │ ├── admin │ │ └── index.tsx │ ├── app │ │ ├── components │ │ │ ├── chart │ │ │ │ ├── branch-node.tsx │ │ │ │ ├── canvas-overlay.tsx │ │ │ │ ├── canvas.tsx │ │ │ │ ├── helpers.ts │ │ │ │ ├── index.tsx │ │ │ │ ├── initial-marker.tsx │ │ │ │ ├── leaf-node.tsx │ │ │ │ ├── node-events.tsx │ │ │ │ ├── node-heading.tsx │ │ │ │ ├── parallel-divider.tsx │ │ │ │ ├── parallel-node.tsx │ │ │ │ └── state-node.tsx │ │ │ ├── code │ │ │ │ ├── code-editor.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── jsx-editor.tsx │ │ │ │ ├── monaco.tsx │ │ │ │ ├── save-row.tsx │ │ │ │ ├── state-editor.tsx │ │ │ │ ├── static-editor.tsx │ │ │ │ ├── tabbed-editor.tsx │ │ │ │ ├── tests-editor.tsx │ │ │ │ └── theme-editor.tsx │ │ │ ├── color-mode-toggle.tsx │ │ │ ├── column.tsx │ │ │ ├── content │ │ │ │ ├── content-row-item.tsx │ │ │ │ ├── content-section.tsx │ │ │ │ ├── event-item.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── payload.tsx │ │ │ │ └── state-item.tsx │ │ │ ├── controls.tsx │ │ │ ├── details │ │ │ │ ├── data.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── log.tsx │ │ │ │ ├── tests │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── test.tsx │ │ │ │ └── values.tsx │ │ │ ├── drag-handle-horizontal.tsx │ │ │ ├── drag-handle-vertical.tsx │ │ │ ├── drag-handle.tsx │ │ │ ├── footer-column.tsx │ │ │ ├── icon-select.tsx │ │ │ ├── layout.tsx │ │ │ ├── main │ │ │ │ ├── index.tsx │ │ │ │ └── reset-button.tsx │ │ │ ├── menu.tsx │ │ │ ├── preview │ │ │ │ └── index.tsx │ │ │ ├── tabs.tsx │ │ │ ├── title.tsx │ │ │ └── value-input.tsx │ │ ├── hooks │ │ │ ├── gestures.tsx │ │ │ └── useFirebaseCode.tsx │ │ ├── index.tsx │ │ ├── states │ │ │ ├── createCodeEditorState.tsx │ │ │ ├── createSimpleEditorState.tsx │ │ │ ├── highlights.tsx │ │ │ └── index.tsx │ │ └── utils.tsx │ ├── chart-page │ │ └── index.tsx │ ├── firebase-auth.tsx │ ├── index.tsx │ ├── landing-page │ │ └── index.tsx │ ├── loading-screen.tsx │ ├── not-found.tsx │ ├── preview-page │ │ └── index.tsx │ ├── static-preview-page │ │ └── index.tsx │ ├── static │ │ ├── colors.tsx │ │ ├── defaults.tsx │ │ ├── example-links.tsx │ │ ├── examples.tsx │ │ ├── monaco-theme.json │ │ └── scope-utils.tsx │ ├── user │ │ ├── index.tsx │ │ └── layout.tsx │ └── viewer.tsx │ ├── theme.tsx │ ├── todo.md │ ├── tsconfig.json │ ├── typings.worker.ts │ └── utils │ └── firebase.tsx ├── example ├── LICENSE.md ├── README.md ├── package.json ├── scripts │ └── dev.mjs ├── src │ ├── app.tsx │ ├── constants.ts │ ├── index.html │ ├── index.tsx │ ├── state.ts │ └── styles.css ├── tsconfig.json └── yarn.lock ├── lerna.json ├── package.json ├── packages ├── core │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── docs │ │ ├── .nojekyll │ │ ├── assets │ │ │ ├── highlight.css │ │ │ ├── icons.css │ │ │ ├── icons.png │ │ │ ├── icons@2x.png │ │ │ ├── main.js │ │ │ ├── search.js │ │ │ ├── style.css │ │ │ ├── widgets.png │ │ │ └── widgets@2x.png │ │ ├── index.html │ │ └── modules.html │ ├── package.json │ ├── scripts │ │ ├── build.js │ │ └── dev.js │ ├── src │ │ ├── createDesign.ts │ │ ├── createEventChain.ts │ │ ├── createState.ts │ │ ├── customError.ts │ │ ├── decs.d.ts │ │ ├── getStateTreeFromDesign.ts │ │ ├── index.ts │ │ ├── stateTree.ts │ │ ├── test │ │ │ ├── createDesign.spec.ts │ │ │ ├── createState.spec.ts │ │ │ └── shared.ts │ │ ├── testEventHandlerConditions.ts │ │ ├── types.ts │ │ └── utils.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── react │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── card-repo.png │ ├── docs │ │ ├── .nojekyll │ │ ├── assets │ │ │ ├── highlight.css │ │ │ ├── icons.css │ │ │ ├── icons.png │ │ │ ├── icons@2x.png │ │ │ ├── main.js │ │ │ ├── search.js │ │ │ ├── style.css │ │ │ ├── widgets.png │ │ │ └── widgets@2x.png │ │ ├── enums │ │ │ └── S.VerboseType.html │ │ ├── index.html │ │ ├── interfaces │ │ │ ├── S.Design.html │ │ │ ├── S.DesignOptions.html │ │ │ ├── S.DesignWithHelpers.html │ │ │ ├── S.DesignedState.html │ │ │ ├── S.State.html │ │ │ └── S.StateDesign.html │ │ ├── modules.html │ │ └── modules │ │ │ └── S.html │ ├── package.json │ ├── scripts │ │ ├── build.js │ │ └── dev.js │ ├── src │ │ ├── StateGraph.tsx │ │ ├── createSelectorHook.tsx │ │ ├── index.ts │ │ ├── useGlobalState.tsx │ │ ├── useLocalState.tsx │ │ ├── useSelector.tsx │ │ └── useStateDesigner.tsx │ ├── tsconfig.build.json │ └── tsconfig.json └── state-designer │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── docs │ ├── .nojekyll │ ├── assets │ │ ├── highlight.css │ │ ├── icons.css │ │ ├── icons.png │ │ ├── icons@2x.png │ │ ├── main.js │ │ ├── search.js │ │ ├── style.css │ │ ├── widgets.png │ │ └── widgets@2x.png │ ├── enums │ │ └── S.VerboseType.html │ ├── index.html │ ├── interfaces │ │ ├── S.Design.html │ │ ├── S.DesignOptions.html │ │ ├── S.DesignWithHelpers.html │ │ ├── S.DesignedState.html │ │ ├── S.State.html │ │ └── S.StateDesign.html │ ├── modules.html │ └── modules │ │ └── S.html │ ├── package.json │ ├── scripts │ ├── build.js │ └── dev.js │ ├── src │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── setupTests.ts ├── tsconfig.base.json ├── tsconfig.json └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [steveruizok] 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | docs 4 | .DS_Store 5 | coverage 6 | *.log 7 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Stephen Ruiz Ltd 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /archive/docs/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /archive/docs/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Steve Ruiz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/async-events.mdx: -------------------------------------------------------------------------------- 1 | # Async Events 2 | 3 | You can wait on promises with async events. 4 | 5 | ```jsx 6 | async: { 7 | await: () => fetch("https://dog.ceo/api/breeds/image/random"), 8 | onResolve: { 9 | do: (data, payload, result) => console.log("Got an image: " + result), 10 | }, 11 | onReject: { 12 | do: (data, payload, result) => console.log("Had a problem!", result), 13 | } 14 | } 15 | ``` 16 | 17 | 23 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/conditions.mdx: -------------------------------------------------------------------------------- 1 | # Conditions 2 | 3 | You can control how an event handler works with **conditions**. 4 | 5 | ```jsx 6 | { 7 | if: () => Math.random() > .5, 8 | do: () => console.log("heads!"), 9 | elseDo: () => console.log("tails!") 10 | } 11 | ``` 12 | 13 | 19 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/data.mdx: -------------------------------------------------------------------------------- 1 | # Using Data 2 | 3 | In a State Designer's configuration, you can use the `data` property to store any type of data that you'd like to keep track of. 4 | 5 | > **Note:** The interactive examples on this page use the `useStateDesigner` hook from `@state-designer/react`. 6 | 7 | Let's start with a very simple state configuration: 8 | 9 | 10 | 11 | In this example, we've defined our state's `data` property as an object with a property, `value`. 12 | 13 | The `useStateDesigner` hook will return the current value of `data`. In the component's JSX, we're displaying `data.value` in a heading. 14 | 15 | > 🏆 Challenge 16 | > 17 | > In the playground above, can you set `data.value` to `"Hello world!"` instead? 18 | 19 | **Hint:** You'll be creating a _string_ here, so be sure to include both quotes! 20 | 21 | 27 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/intro.mdx: -------------------------------------------------------------------------------- 1 | # Intro 2 | 3 | Welcome to this guide to learning State Designer. In the following articles, you'll learn to configure a state and use it to power a user interface. By the end of the guide, you'll be able to create states for any project or component. 4 | 5 | Throughout this guide, you'll find **interactive examples** like the one below. 6 | 7 | 8 | 9 | In these examples, the React code in the example's bottom section will determine the output in the top section. You can interact with the output or change the code and see your changes right away. 10 | 11 | You'll also find **challenges** like this one: 12 | 13 | > 🏆 **Challenge** 14 | > 15 | > Can you change the example's code so that the alert says `"Hello!"` instead? 16 | 17 | Go ahead and give it a shot! 18 | 19 | When you're ready to continue, click the link below. 20 | 21 | 22 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/repeat-events.mdx: -------------------------------------------------------------------------------- 1 | # Repeat Events 2 | 3 | You can use a **repeat event** to run the same event automatically on a regular interval while a state is active. When the state becomes inactive, the interval will automatically end. 4 | 5 | ```jsx 6 | repeat: { 7 | event: { 8 | do: () => console.log("tick!"), 9 | delay: 1 10 | } 11 | } 12 | ``` 13 | 14 | The delay is measured in seconds. If you leave out the delay, the event will run on every animation frame. 15 | 16 | ```jsx 17 | repeat: { 18 | event: { 19 | do: () => console.log("tick!"), 20 | delay: 1 21 | } 22 | } 23 | ``` 24 | 25 | In both cases, the event's initial result will include the total duration of the event as well as the elapsed time since the last time it ran. 26 | 27 | ```jsx 28 | repeat: { 29 | event: { 30 | do: (data, payload, result) => { 31 | console.log("It's been " + result.duration + " since this timer started.") 32 | console.log("It's been " + result.elapsed + " since this function last ran.") 33 | }, 34 | delay: 1 35 | } 36 | } 37 | ``` 38 | 39 | 45 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/results.mdx: -------------------------------------------------------------------------------- 1 | # Results 2 | 3 | You can compute properties within an event handler using **conditions**. 4 | 5 | ```jsx 6 | ASKED_THE_TIME: { 7 | get: () => Date.now(), 8 | do: (data, payload, result) => console.log("the time and date is ", result), 9 | } 10 | ``` 11 | 12 | 18 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/state.mdx: -------------------------------------------------------------------------------- 1 | # State 2 | 3 | At the heart of State Designer is the **state**. A state stores information about a user interface and controls how and when that information should change. It also provides tools to help you use the state in your project. 4 | 5 | > 🏆 **Challenge** 6 | > 7 | > Can you change the example's code so that the count starts at 10? 8 | 9 | ### Creating a State 10 | 11 | To create a state, pass a **configuration** object to the [`useStateDesigner`](/docs/api/useStateDesigner) hook. 12 | 13 | 14 | 15 | A state's configuration contains everything about the state: its initial data and all of its events, child states, and collections. We'll learn about each part of a state's configuration in the following articles. 16 | 17 | > **Tip:** If you want to use the same state with more than one component, you can create a state with the [`createState`](/docs/api/useStateDesigner) function, then pass the state to the `useStateDesigner` hook. To learn more, check out the [`useStateDesigner`](/docs/api/useStateDesigner) article. 18 | 19 | In the next article, we'll learn how to configure a state to respond to events. 20 | 21 | 27 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/tips-and-tricks.mdx: -------------------------------------------------------------------------------- 1 | # Tips and Tricks 2 | 3 | Coming soon! 4 | 5 | 6 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/transition-events.mdx: -------------------------------------------------------------------------------- 1 | # Transition Events 2 | 3 | You can fire **transition events** automatically as you transition between states. 4 | 5 | ```jsx 6 | onEnter: { do: () => console.log("Entered the state!") }, 7 | onExit: { do: () => console.log("Left the state!") }, 8 | onEvent: { do: () => console.log("Something happened while I was active!") } 9 | ``` 10 | 11 | 17 | -------------------------------------------------------------------------------- /archive/docs/archive/learn/type-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/state-designer/7c02166c43eba5f3b11d23fcfbae47f3cddfd901/archive/docs/archive/learn/type-support.png -------------------------------------------------------------------------------- /archive/docs/archive/learn/values.mdx: -------------------------------------------------------------------------------- 1 | # Values 2 | 3 | Depending on what you're building, the values you're interested in might not be the same as the values that you store in `data`. To make this easier, you can add a `values` object to your configuration. 4 | 5 | 6 | 7 | The `values` object is an object made up of functions that, like actions, accept the state's current `data`. Unlike actions, what matters here is what the function returns. 8 | 9 | Each time the state is ready to update, it will run all of its `values` functions and return a new object—also named `values`—that contains whatever each function returned. 10 | 11 | 17 | -------------------------------------------------------------------------------- /archive/docs/archive/the-problem.mdx: -------------------------------------------------------------------------------- 1 | # The Problem 2 | 3 | As developers, our understanding of how a system works is often very different than the code that we write to implement that system. 4 | 5 | This can lead to several problems. 6 | 7 | 1. As a system's complexity increases, so too does the _mental effort_ required to keep the system's model in mind. 8 | 2. New developers, unfamiliar with the system, must work backward from the code itself in order to _derive_ the system's model. 9 | 3. Communicating how a system works requires _separate documentation_: graphs, charts or descriptions that must be authored alongside the system's implementation. 10 | 11 | In the sections below, I will use [React](https://reactjs.com) to demonstrate this pattern in several components of a user interface. I will then argue in favor of more explicit implementations—of which State Designer is one example. 12 | 13 | ## The Counter 14 | 15 | Let's consider this counter. 16 | 17 | An implementation in React might look like this: 18 | 19 | ```jsx 20 | // counter.js 21 | 22 | const Counter = () => { 23 | const [count, setCount] = React.useState(0) 24 | 25 | return ( 26 | 27 | 34 | {count} 35 | 42 | 43 | ) 44 | } 45 | ``` 46 | -------------------------------------------------------------------------------- /archive/docs/archive/updates.mdx: -------------------------------------------------------------------------------- 1 | # Updates 2 | 3 | In State Designer, we call a state's changes **updates**. You can **subscribe** to a state's updates by passing a callback function to the state's `onUpdate` method. 4 | 5 | ```js 6 | state.onUpdate(() => { 7 | countElement.textContent = state.data.count 8 | }) 9 | ``` 10 | 11 | The state will call this function each time it updates. In the function's body, you can use the state's current information to update other parts of your project. To learn more about the `onUpdate` method, see [its page](/docs/api/onUpdate) in the API section. 12 | 13 | So far we've been learning to use State Designer in a regular JavaScript project. In the next article, we'll learn to use State Designer in a **React** project with the `useStateDesigner` hook. 14 | 15 | 21 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/action.mdx: -------------------------------------------------------------------------------- 1 | ## Action 2 | 3 | A function that receives the machine's current `data`, `payload`, and `result` as arguments, and that may mutate the machine's [data](#data). 4 | 5 | ```jsx 6 | const machine = createState({ 7 | data: { count: 0 }, 8 | on: { 9 | PLUS_CLICKED: "incrementCount", 10 | }, 11 | actions: { 12 | // highlight-start 13 | incrementCount(data, payload, result) { 14 | data.count++ 15 | }, 16 | // highlight-end 17 | }, 18 | }) 19 | ``` 20 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/active.mdx: -------------------------------------------------------------------------------- 1 | ## Active 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/async.mdx: -------------------------------------------------------------------------------- 1 | ## Async 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/auto-event.mdx: -------------------------------------------------------------------------------- 1 | ## Auto Event 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/branch-state.mdx: -------------------------------------------------------------------------------- 1 | ## Branch State 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/condition.mdx: -------------------------------------------------------------------------------- 1 | ## Condition 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/configuration.mdx: -------------------------------------------------------------------------------- 1 | ## Configuration 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/data.mdx: -------------------------------------------------------------------------------- 1 | ## Data 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/do.mdx: -------------------------------------------------------------------------------- 1 | ## Do 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/event-handler.mdx: -------------------------------------------------------------------------------- 1 | # Event Handler 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/event.mdx: -------------------------------------------------------------------------------- 1 | # Event 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/if-any.mdx: -------------------------------------------------------------------------------- 1 | # If Any 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/if.mdx: -------------------------------------------------------------------------------- 1 | # If 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/inactive.mdx: -------------------------------------------------------------------------------- 1 | # Inactive 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/initial-state.mdx: -------------------------------------------------------------------------------- 1 | # Initial State 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/is-in.mdx: -------------------------------------------------------------------------------- 1 | # Is In 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/machine.mdx: -------------------------------------------------------------------------------- 1 | # Machine 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/on-enter.mdx: -------------------------------------------------------------------------------- 1 | # onEnter 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/on-event-complete.mdx: -------------------------------------------------------------------------------- 1 | # onEventComplete 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/on-event.mdx: -------------------------------------------------------------------------------- 1 | # onEvent 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/on-exit.mdx: -------------------------------------------------------------------------------- 1 | # onExit 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/parallel-state.mdx: -------------------------------------------------------------------------------- 1 | # Parallel State 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/payload.mdx: -------------------------------------------------------------------------------- 1 | # Payload 2 | 3 | > _n._ The second (optional) argument of a machine's `send` method, containing a value that will be passed to all event handler functions. 4 | 5 | [Learn more](docs/api/events#payload) 6 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/previous.mdx: -------------------------------------------------------------------------------- 1 | # Previous 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/repeat.mdx: -------------------------------------------------------------------------------- 1 | # Repeat 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/restore.mdx: -------------------------------------------------------------------------------- 1 | # Restore 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/result.mdx: -------------------------------------------------------------------------------- 1 | # Result 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/send.mdx: -------------------------------------------------------------------------------- 1 | # Send 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/state-tree.mdx: -------------------------------------------------------------------------------- 1 | # State Tree 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/state.mdx: -------------------------------------------------------------------------------- 1 | # State 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/transition.mdx: -------------------------------------------------------------------------------- 1 | # Transition 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/unless.mdx: -------------------------------------------------------------------------------- 1 | # Unless 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/update.mdx: -------------------------------------------------------------------------------- 1 | # Update 2 | -------------------------------------------------------------------------------- /archive/docs/content/definitions/when-in.mdx: -------------------------------------------------------------------------------- 1 | # When In 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/api/createDesign.mdx: -------------------------------------------------------------------------------- 1 | # `createDesign` 2 | 3 | If you want to use the same design for multiple states, but still get the same TypeScript support while you construct the design object, you can use the `createDesign` function. 4 | 5 | ```js 6 | const design = createDesign({ ... }) 7 | ``` 8 | 9 | The `createDesign` function doesn't do anything special—it just returns the same object that you've passed to the function. Its only purpose is to provide type support as you construct a design. 10 | 11 | However, having a separate design object might be useful in certain circumstances—and it's much easier to write a state with type support than without it. 12 | 13 | ```js 14 | const design = createDesign({ 15 | data: { 16 | score: 0, 17 | lives: 3, 18 | }, 19 | on: { ... }, 20 | }) 21 | 22 | function createStateWithCustomScore(score) { 23 | return createState({ 24 | ...design, 25 | data: { 26 | ...design.data, 27 | score, 28 | }, 29 | }) 30 | } 31 | 32 | function createStateWithCustomLives(lives) { 33 | return createState({ 34 | ...design, 35 | data: { 36 | ...design.data, 37 | lives, 38 | }, 39 | }) 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /archive/docs/content/docs/api/createSelectorHook.mdx: -------------------------------------------------------------------------------- 1 | # useStateDesigner 2 | 3 | ```js 4 | const useSelector = createSelectorHook(state) 5 | ``` 6 | 7 | This is a helper that will generate a selector hook from a state. Unlike the library's regular `useSelector` hook, the hook returned by `createSelectorHook` does not require you to provide the state as a first argument. 8 | 9 | ```js 10 | import { createState, createSelectorHook } from '@state-designer/react' 11 | 12 | const state = createState({ ... }) 13 | 14 | const useSelector = createSelectorHook(state) 15 | ``` 16 | 17 | See the `useSelector` article for more on how to use selectors. 18 | -------------------------------------------------------------------------------- /archive/docs/content/docs/api/createState.mdx: -------------------------------------------------------------------------------- 1 | # `createState` 2 | 3 | You can create a state by passing a [design object](/docs/api/design/) to the `createState` function. 4 | 5 | ```js 6 | const state = createState({ ... }) 7 | ``` 8 | 9 | You can use and interact with the resulting state using the [state](/docs/api/state) API. 10 | -------------------------------------------------------------------------------- /archive/docs/content/docs/api/design/event-handlers.mdx: -------------------------------------------------------------------------------- 1 | # Event Handlers 2 | 3 | Conditions: 4 | 5 | - `if` 6 | - `ifAny` 7 | - `unless` 8 | - `unlessAny` 9 | 10 | Actions: 11 | 12 | - `do` 13 | - `secretlyDo` 14 | 15 | Transitions: 16 | 17 | - `to` 18 | - `secretlyTo` 19 | 20 | Misc: 21 | 22 | - `send` 23 | - `wait` 24 | 25 | Control flow: 26 | 27 | - `else` 28 | - `then` 29 | - `break` 30 | -------------------------------------------------------------------------------- /archive/docs/content/docs/framer-motion.mdx: -------------------------------------------------------------------------------- 1 | # Framer Motion 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/packages/core.mdx: -------------------------------------------------------------------------------- 1 | # @state-designer/core 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/packages/react.mdx: -------------------------------------------------------------------------------- 1 | # @state-designer/react 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/quick-start.mdx: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | On this page, you'll find links to tutorial videos showing how you might use State Designer. 4 | 5 | ## Counter Tutorial 6 | 7 | [Starter File](https://codesandbox.io/s/state-designer-counter-starter-u0g28) 8 | 9 | 10 | 11 | --- 12 | 13 | ## Toggle Tutorial 14 | 15 | [Starter File](https://codesandbox.io/s/state-designer-counter-starter-u0g28) 16 | 17 | 18 | -------------------------------------------------------------------------------- /archive/docs/content/docs/usage/javascript.mdx: -------------------------------------------------------------------------------- 1 | # Using in JavaScript 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/usage/react.mdx: -------------------------------------------------------------------------------- 1 | # Using in React 2 | -------------------------------------------------------------------------------- /archive/docs/content/docs/usage/typescript.mdx: -------------------------------------------------------------------------------- 1 | # Using in TypeScript 2 | -------------------------------------------------------------------------------- /archive/docs/content/examples/breakout.mdx: -------------------------------------------------------------------------------- 1 | # Breakout 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/calculator.mdx: -------------------------------------------------------------------------------- 1 | # Calculator 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/counter.mdx: -------------------------------------------------------------------------------- 1 | # Counter 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/dogs.mdx: -------------------------------------------------------------------------------- 1 | # Dogs 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/drawing.mdx: -------------------------------------------------------------------------------- 1 | # Drawing 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/input-save-cancel.mdx: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/input.mdx: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/localStorageCounter.mdx: -------------------------------------------------------------------------------- 1 | # Local Storage Counter 2 | 3 | ```tsx 4 | import React from "react" 5 | import { useStateDesigner } from "@state-designer/react" 6 | 7 | function saveCounterData(data) { 8 | const string = JSON.stringify(data) 9 | localStorage.setItem("counter_data", string) 10 | } 11 | 12 | function localCounterData() { 13 | const string = localStorage.getItem("counter_data") 14 | return string && JSON.parse(string) 15 | } 16 | 17 | export function Counter({ id, onClick }) { 18 | const { data, send, onUpdate } = useStateDesigner({ 19 | data: localCounterData() || { count: 0 }, 20 | on: { 21 | CLICKED: (data) => data.count++, 22 | }, 23 | }) 24 | 25 | // highlight-start 26 | React.useEffect(() => { 27 | const cancelFunction = onUpdate(({ data }) => { 28 | saveCounterData(data) 29 | }) 30 | return cancelFunction 31 | }, []) 32 | // highlight-end 33 | 34 | return ( 35 |
36 | 37 |
38 | ) 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /archive/docs/content/examples/snake.mdx: -------------------------------------------------------------------------------- 1 | # Snake 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/stopwatch.mdx: -------------------------------------------------------------------------------- 1 | # Stopwatch 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/tetris.mdx: -------------------------------------------------------------------------------- 1 | # Tetris 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/tiles.mdx: -------------------------------------------------------------------------------- 1 | # Tiles 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/timer.mdx: -------------------------------------------------------------------------------- 1 | # Timer 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/todo.mdx: -------------------------------------------------------------------------------- 1 | # Todo 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/todos.mdx: -------------------------------------------------------------------------------- 1 | # Todos 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/examples/toggle.mdx: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | 4 | -------------------------------------------------------------------------------- /archive/docs/content/nav/404.mdx: -------------------------------------------------------------------------------- 1 | # Page not found 2 | 3 | Sorry, we weren't able to find a page at that URL. 4 | -------------------------------------------------------------------------------- /archive/docs/content/nav/footer.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/state-designer/7c02166c43eba5f3b11d23fcfbae47f3cddfd901/archive/docs/content/nav/footer.mdx -------------------------------------------------------------------------------- /archive/docs/content/nav/header.mdx: -------------------------------------------------------------------------------- 1 | - [](https://github.com/steveruizok/state-designer) 2 | - [](https://twitter.com/steveruizok) 3 | -------------------------------------------------------------------------------- /archive/docs/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src' 2 | -------------------------------------------------------------------------------- /archive/docs/gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | export { wrapRootElement } from './src' 2 | -------------------------------------------------------------------------------- /archive/docs/index.js: -------------------------------------------------------------------------------- 1 | // Noop 2 | -------------------------------------------------------------------------------- /archive/docs/src/components/.eslintrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/steveruizok/state-designer/7c02166c43eba5f3b11d23fcfbae47f3cddfd901/archive/docs/src/components/.eslintrc -------------------------------------------------------------------------------- /archive/docs/src/components/404.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from 'theme-ui' 3 | import { MDXProvider } from '@mdx-js/react' 4 | import Layout from './layout' 5 | 6 | import Content from '../../content/nav/404.mdx' 7 | 8 | export default () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /archive/docs/src/components/codesandbox.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | export default function({ name, number }) { 4 | let path = number ? `${number}_${name}` : name 5 | 6 | return ( 7 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /archive/docs/src/components/footer.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, Container } from "theme-ui" 3 | import { MDXProvider } from "@mdx-js/react" 4 | // @ts-ignore 5 | import Content from "../../content/nav/footer.mdx" 6 | 7 | export default () => { 8 | return ( 9 |
10 | 17 | 18 | 19 | 20 | 21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /archive/docs/src/components/header-link.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "theme-ui" 3 | import NavLink from "./nav-link" 4 | 5 | export default ({ ...props }) => { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /archive/docs/src/components/inline-link.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "theme-ui" 3 | import { Link } from "gatsby-plugin-modal-routing" 4 | import isAbsoluteURL from "is-absolute-url" 5 | 6 | export default ({ href, children, ...props }) => { 7 | const isExternal = isAbsoluteURL(href || "") 8 | 9 | if (isExternal) { 10 | return ( 11 | 12 | {children} 13 | 14 | ) 15 | } 16 | 17 | const to = props.to || href 18 | 19 | const isModal = to.includes("definitions") 20 | 21 | return ( 22 | 28 | {children} 29 | 30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /archive/docs/src/components/menu-button.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from 'theme-ui' 3 | 4 | const Burger = ({ size = '1em' }) => ( 5 | 16 | 17 | 18 | ) 19 | 20 | export default (props) => ( 21 | 43 | ) 44 | -------------------------------------------------------------------------------- /archive/docs/src/components/nav-link.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "theme-ui" 3 | import { Link } from "gatsby" 4 | import isAbsoluteURL from "is-absolute-url" 5 | 6 | export default ({ href, style, children, silent = false, ...props }) => { 7 | const isExternal = isAbsoluteURL(href || "") 8 | 9 | const styles = { 10 | display: "block", 11 | px: 0, 12 | color: silent ? "text" : "primary", 13 | textDecoration: "none", 14 | fontSize: 3, 15 | fontFamily: "heading", 16 | fontWeight: "bold", 17 | "&.active": { 18 | color: "primary", 19 | }, 20 | "&.visited": { 21 | color: "primary", 22 | }, 23 | "&:hover": { 24 | textDecoration: "underline", 25 | }, 26 | ...style, 27 | } 28 | 29 | if (isExternal) { 30 | return ( 31 | 32 | {children} 33 | 34 | ) 35 | } 36 | 37 | const to = props.to || href 38 | 39 | return ( 40 | 41 | {children} 42 | 43 | ) 44 | } 45 | -------------------------------------------------------------------------------- /archive/docs/src/components/page-links.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, Flex } from "theme-ui" 3 | import NavLink from "./nav-link" 4 | 5 | export default ({ backTo, back, nextTo, next }) => { 6 | return ( 7 | 18 | {back && « Back to {back}} 19 | {next && ( 20 | 21 | Continue to {next} » 22 | 23 | )} 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /archive/docs/src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useStaticQuery, graphql } from 'gatsby' 3 | import { Helmet } from 'react-helmet' 4 | 5 | export default ({ title, description }) => { 6 | const { 7 | site: { siteMetadata }, 8 | } = useStaticQuery(graphql` 9 | { 10 | site { 11 | siteMetadata { 12 | title 13 | description 14 | } 15 | } 16 | } 17 | `) 18 | 19 | const fullTitle = title 20 | ? `${title} | ${siteMetadata.title}` 21 | : siteMetadata.title 22 | 23 | return ( 24 | 25 | {fullTitle} 26 | 27 | 31 | 32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /archive/docs/src/components/sidebar-link.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "theme-ui" 3 | import { Link } from "gatsby" 4 | import isAbsoluteURL from "is-absolute-url" 5 | 6 | const styles = { 7 | display: "block", 8 | mx: -2, 9 | px: 2, 10 | py: 0, 11 | borderRadius: 4, 12 | lineHeight: 2, 13 | color: "text", 14 | textDecoration: "none", 15 | fontSize: [4, 1], 16 | fontFamily: "body", 17 | fontWeight: 2, 18 | color: "code", 19 | "&.active": { 20 | color: "text", 21 | backgroundColor: "muted", 22 | }, 23 | "&.visited": {}, 24 | "&:hover": { 25 | color: "text", 26 | backgroundColor: "muted", 27 | }, 28 | "& code": { 29 | mx: -1, 30 | fontSize: [4, 0], 31 | }, 32 | } 33 | 34 | export default ({ href, children, ...props }) => { 35 | const isExternal = isAbsoluteURL(href || "") 36 | 37 | if (isExternal) { 38 | return ( 39 | 40 | {children} 41 | 42 | ) 43 | } 44 | 45 | const to = props.to || href 46 | 47 | return ( 48 | 49 | {children} 50 | 51 | ) 52 | } 53 | -------------------------------------------------------------------------------- /archive/docs/src/components/sidenav.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from "react" 3 | import { jsx } from "theme-ui" 4 | import { Sidenav } from "@theme-ui/sidenav" 5 | 6 | import { useScrollPosition } from "../hooks/useScrollPosition" 7 | import SidebarLink from "./sidebar-link" 8 | import Content from "../../content/nav/sidebar.mdx" 9 | 10 | export default React.forwardRef((props, ref) => { 11 | const scrollProps = useScrollPosition() 12 | 13 | return ( 14 |
29 | 59 | 60 | 61 |
62 | ) 63 | }) 64 | -------------------------------------------------------------------------------- /archive/docs/src/components/youtube.js: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | export default function ({ id }) { 4 | return ( 5 |
13 |