Completed Live Chat

week10/ryan_ahn/my_app/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

week10/ryan_ahn/my_app/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# docs:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+    allow:
+      - dependency-name: '@xyflow/react'

week10/ryan_ahn/my_app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

week10/ryan_ahn/my_app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 webkid GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

week10/ryan_ahn/my_app/README.md

@@ -0,0 +1,54 @@
+![](https://github.com/xyflow/web/blob/main/assets/codesandbox-header-ts.png?raw=true)
+
+# React Flow starter (Vite + TS)
+
+We've put together this template to serve as a starting point for folks
+interested in React Flow. You can use this both as a base for your own React
+Flow applications, or for small experiments or bug reports.
+
+**TypeScript not your thing?** We also have a vanilla JavaScript starter template,
+just for you!
+
+## Getting up and running
+
+You can get this template without forking/cloning the repo using `degit`:
+
+```bash
+npx degit xyflow/vite-react-flow-template your-app-name
+```
+
+The template contains mostly the minimum dependencies to get up and running, but
+also includes eslint and some additional rules to help you write React code that
+is less likely to run into issues:
+
+```bash
+npm install # or `pnpm install` or `yarn install`
+```
+
+Vite is a great development server and build tool that we recommend our users to
+use. You can start a development server with:
+
+```bash
+npm run dev
+```
+
+While the development server is running, changes you make to the code will be
+automatically reflected in the browser!
+
+## Things to try:
+
+- Create a new custom node inside `src/nodes/` (don't forget to export it from `src/nodes/index.ts`).
+- Change how things look by [overriding some of the built-in classes](https://reactflow.dev/learn/customization/theming#overriding-built-in-classes).
+- Add a layouting library to [position your nodes automatically](https://reactflow.dev/learn/layouting/layouting)
+
+## Resources
+
+Links:
+
+- [React Flow - Docs](https://reactflow.dev)
+- [React Flow - Discord](https://discord.com/invite/Bqt6xrs)
+
+Learn:
+
+- [React Flow – Custom Nodes](https://reactflow.dev/learn/customization/custom-nodes)
+- [React Flow – Layouting](https://reactflow.dev/learn/layouting/layouting)

week10/ryan_ahn/my_app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Flow Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>
+