ThatBatLuna · ThatBatLuna · Jul 18, 2023 · Jul 18, 2023 · Jul 18, 2023 · Jul 18, 2023
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -1,15 +1,15 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # production
-/build
+/app/build
 
 # misc
 .DS_Store
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+    "printWidth": 140
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "auto-close-tag.disableOnLanguage": [
+    "php",
+    "javascript",
+    "typescript",
+    "plaintext"
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# Version 0.4
+
+Oh wow! This is a big one!
+
+Large parts of the underlying engine were rewritten to make way for a new plugin-based architecture.
+
+TODO The rest of what changed.
+
 # Version 0.3
 
 This update brings the first draft of a mobile interface, so you aren't bound to your PC anymore and can take the fun anywhere. You can create your flows using the web-app on a PC as usual and then transfer them to your mobile device using an exported json file or by simply pressing a button to Export it to [litterbox.catbox.moe](https://litterbox.catbox.moe).

diff --git a/app/.env b/app/.env
@@ -0,0 +1,6 @@
+VITE_APP_REMOTE_SERVER_URL="wss://beadi-serve.onrender.com:6969/"
+# REACT_APP_REMOTE_SERVER_URL="wss://stagingbeadi.onrender.com:6969/"
+VITE_APP_PUBLIC_URL="https://beadi.onrender.com/"
+VITE_APP_BETA_PUBLIC_URL="https://stagingbeadi.onrender.com/"
+# Will be overwritten in production
+VITE_APP_BRANCH="staging"
diff --git a/app/.eslintrc.cjs b/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 },
+    ],
+  },
+}
diff --git a/app/.gitignore b/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?
diff --git a/app/README.md b/app/README.md
@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "beadi",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "tsc": "tsc --noEmit --watch",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@beadi/components": "workspace:^",
+    "@beadi/engine": "workspace:^",
+    "@beadi/plugin-device-sensors": "workspace:^",
+    "@beadi/plugin-intiface": "workspace:^",
+    "@beadi/plugin-media": "workspace:^",
+    "@beadi/plugin-remote": "workspace:^",
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "=4.7.1",
+    "react-markdown": "=8.0.4",
+    "react-router-dom": "=6.14.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/lodash": "^4.14.191",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/app/postcss.config.js b/app/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/app/public/vite.svg b/app/public/vite.svg
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -0,0 +1,64 @@
+import { BeadiContext, BeadiContextProvider } from "@beadi/engine";
+import { intifacePlugin } from "@beadi/plugin-intiface";
+import { FunctionComponent } from "react";
+import { makeRemotePlugin } from "../../plugins/remote/src";
+import { beadiAppPlugin } from "./beadiAppPlugin";
+import { HomePage } from "./home/HomePage";
+import { ChangelogPage } from "./pages/Changelog";
+import { GuidePage } from "./pages/Guide";
+import { Introduction } from "./pages/Introduction";
+import { Privacy } from "./pages/Privacy";
+import { EditorPage } from "./editor/EditorPage";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+
+export const EDITOR_ROOT_URL = "/edit";
+
+const context = new BeadiContext({
+  rootUrl: EDITOR_ROOT_URL,
+  plugins: [
+    beadiAppPlugin,
+    makeRemotePlugin({
+      remoteServerUrl: import.meta.env.VITE_APP_REMOTE_SERVER_URL,
+    }),
+    intifacePlugin,
+  ],
+});
+const routes = [
+  {
+    path: "/",
+    element: <HomePage />,
+    children: [
+      {
+        path: "/",
+        element: <Introduction />,
+      },
+      {
+        path: "guide",
+        element: <GuidePage />,
+      },
+      {
+        path: "changelog",
+        element: <ChangelogPage />,
+      },
+      {
+        path: "privacy",
+        element: <Privacy />,
+      },
+    ],
+  },
+  {
+    path: EDITOR_ROOT_URL,
+    element: <EditorPage />,
+    children: context.createRoutes(),
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export const App: FunctionComponent = () => {
+  return (
+    <BeadiContextProvider context={context}>
+      <RouterProvider router={router}></RouterProvider>
+    </BeadiContextProvider>
+  );
+};
diff --git a/app/src/assets/HeroNodes.png b/app/src/assets/HeroNodes.png
diff --git a/app/src/assets/react.svg b/app/src/assets/react.svg
diff --git a/app/src/beadiAppPlugin/WelcomeNode.tsx b/app/src/beadiAppPlugin/WelcomeNode.tsx
@@ -0,0 +1,70 @@
+import { FunctionComponent, useCallback } from "react";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import { Button, NodeShell } from "@beadi/components";
+import { BeadiFileData, UnknownBeadiNodeProps, useFileStore } from "@beadi/engine";
+
+// import SimpleWaveExample from "EXAMPLES/SimpleNodes.json";
+
+// const examples = [
+//   {
+//     name: "Simple Wave",
+//     data: SimpleWaveExample,
+//   },
+//   {
+//     name: "Button Control",
+//     data: "",
+//   },
+// ];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const examples: Record<string, any> = {};
+
+//TODO Fix examples
+// function importAll(r: any) {
+//   r.keys().forEach((key: any) => (examples[key] = r(key)));
+// }
+// importAll((require as any).context("../../../examples", false, /\.json$/));
+
+export const ExampleList: FunctionComponent = () => {
+  const overwriteStore = useFileStore((it) => it.overwrite);
+  const loadExample = useCallback(
+    (data: BeadiFileData) => {
+      overwriteStore(data);
+    },
+    [overwriteStore]
+  );
+
+  return (
+    <ul className="flex flex-row flex-wrap gap-2">
+      {Object.entries(examples).map(([key, value]) => (
+        <li key={key}>
+          <Button onClick={() => loadExample(value)} className="text-purple-400 underline">
+            {value.name || key}
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const WelcomeNodeContent: FunctionComponent = () => {
+  //TODO Reintroduce Changelog
+  // const changelog = BEADI_CHANGELOG;
+  const changelog = "TODO CHANGELOG";
+
+  return (
+    <div className="flex flex-col gap-1 p-2">
+      <div className="p-2 overflow-y-scroll rounded-md shadow-inner max-h-52 bg-primary-1000 markdown">
+        <ReactMarkdown children={changelog}></ReactMarkdown>
+      </div>
+    </div>
+  );
+};
+
+export const WelcomeNode: FunctionComponent<UnknownBeadiNodeProps> = () => {
+  return (
+    <NodeShell title="Welcome to Beadi" color="#ffffff" style={{ width: 600 }}>
+      <WelcomeNodeContent></WelcomeNodeContent>
+    </NodeShell>
+  );
+};
diff --git a/app/src/beadiAppPlugin/index.ts b/app/src/beadiAppPlugin/index.ts
@@ -0,0 +1,9 @@
+import { plugin } from "@beadi/engine";
+import { WelcomeNode } from "./WelcomeNode";
+
+export const beadiAppPlugin = plugin({
+  id: "beadiApp",
+  extraNodeRenderers: {
+    welcome: WelcomeNode,
+  },
+});
diff --git a/app/src/components/Footer.tsx b/app/src/components/Footer.tsx
@@ -0,0 +1,36 @@
+import { VBar } from "@beadi/components";
+import { FunctionComponent } from "react";
+import { BsGithub, BsMastodon } from "react-icons/bs";
+import { Link } from "react-router-dom";
+
+export const Footer: FunctionComponent = () => {
+  return (
+    <div className="bg-black flex flex-row px-8 py-4 items-center">
+      <div className="flex flex-col gap-4">
+        <div>
+          <span className="font-bold">Beadi</span>
+          <VBar />
+          <span>Made with 💜 by That Bat Luna</span>
+        </div>
+        <div className="flex flex-row justify-center gap-4">
+          <Link to="https://github.com/ThatBatLuna/Beadi" target="_blank" rel="noreferrer">
+            <BsGithub className="w-6 h-6" />
+          </Link>
+          <Link to="https://thicc.horse/@thatbatluna" target="_blank" rel="noreferrer">
+            <BsMastodon className="w-6 h-6" />
+          </Link>
+        </div>
+      </div>
+      <div className="grow"></div>
+      <div>
+        <Link to="/imprint">Imprint/Impressum</Link>
+        <VBar />
+        <Link to="/privacy">Privacy Policy</Link>
+        <VBar />
+        <Link to="/cookies">Cookies</Link>
+        <VBar />
+        <div>© 2023 Mona Mayrhofer - Linz, Austria</div>
+      </div>
+    </div>
+  );
+};