docs: electron react example

README.md

@@ -41,12 +41,15 @@ This repository contains the SDKs for Flows and accompanying built-in components
 We provide a set of templates to help you get started with Flows.
 
 - [Next.js template](./examples/react/next)
-- [Vite template](./examples/react/vite)
+- [React Vite template](./examples/react/vite)
 - [Vue Nuxt template](./examples/vue/nuxt)
 - [Angular template](./examples/angular)
 - [Svelte template](./examples/svelte)
 - [Lit template](./examples/lit)
 - [SolidJS template](./examples/solid)
+- [Ember template](./examples/ember)
+- [Astro template](./examples/astro)
+- [Electron React template](./examples/electron/electron-forge-react)
 
 ## Get started for free
 

cspell.json

@@ -34,6 +34,7 @@
     "jest.config.js",
     "package.json",
     "pnpm-*.yaml",
-    "test-results"
+    "test-results",
+    "out"
   ]
 }

examples/README.md

@@ -11,6 +11,9 @@ This directory contains examples of flows that can be used as a starting point f
 - [SvelteKit](./svelte) - A simple example of how to use Flows with SvelteKit.
 - [Lit](./lit) - A simple example of how to use Flows with Lit.
 - [SolidJS](./solid) - A simple example of how to use Flows with SolidJS.
+- [Ember](./ember) - A simple example of how to use Flows with Ember.
+- [Astro](./astro) - A simple example of how to use Flows with Astro.
+- [Electron React](./electron//electron-forge-react) - A simple example of how to use Flows with Electron and React - based on Electron Forge with Webpack and React.
 - [JavaScript CDN](./js/cdn) - A simple example of how to use Flows with JavaScript without NPM by loading global script from CDN.
 
 ## Reporting Issues

examples/electron/electron-forge-react/.gitignore

@@ -0,0 +1,94 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Webpack
+.webpack/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/
+
+package-lock.json

examples/electron/electron-forge-react/README.md

@@ -0,0 +1,31 @@
+# Flows Electron Forge with React example
+
+An example project showcasing how to use Flows with Electron Forge with React to build native product growth experiences.
+
+![Cover](./cover.png)
+
+This example extends the Electron Forge Webpack + TypeScript starter project with React install with the [`@flows/react`](https://www.npmjs.com/package/@flows/react) and [`@flows/react-components`](https://www.npmjs.com/package/@flows/react-components) packages to demonstrate how to integrate Flows into your application.
+
+## Features
+
+### Flows component
+
+In [`flows.tsx`](./src/app/flows.tsx) you can example implementation of the FlowsProvider. In [`layout.tsx`](./src/app/layout.tsx) the Flows component is Rendered.
+
+### Pre-built components
+
+The `@flows/react-components` package includes ready-to-use components to build in-app experiences. Refer to [`flows.tsx`](./src/app/flows.tsx) to learn how to import and use these components.
+
+### Custom components
+
+Extend Flows by creating your own components for workflows and tours. Refer to [Next.js example](../../react/next/README.md) for more info.
+
+Note that to use these custom components you need to define them in your Flows organization with the same properties and exit nodes. For detailed instructions on building custom components, see the [custom components documentation](https://flows.sh/docs/components/custom).
+
+### Flows slots
+
+The `<flows-slot>` element lets you render Flows UI elements dynamically within your application. You can add placeholder UI for empty states. See [`page.tsx`](./src/app/page.tsx) for an example.
+
+## Documentation
+
+Learn more about Flows and how to use its features in the [official Flows documentation](https://flows.sh/docs).

examples/electron/electron-forge-react/forge.config.ts

@@ -0,0 +1,61 @@
+// cspell:words asar
+
+import type { ForgeConfig } from "@electron-forge/shared-types";
+import { MakerSquirrel } from "@electron-forge/maker-squirrel";
+import { MakerZIP } from "@electron-forge/maker-zip";
+import { MakerDeb } from "@electron-forge/maker-deb";
+import { MakerRpm } from "@electron-forge/maker-rpm";
+import { AutoUnpackNativesPlugin } from "@electron-forge/plugin-auto-unpack-natives";
+import { WebpackPlugin } from "@electron-forge/plugin-webpack";
+import { FusesPlugin } from "@electron-forge/plugin-fuses";
+import { FuseV1Options, FuseVersion } from "@electron/fuses";
+
+import { mainConfig } from "./webpack.main.config";
+import { rendererConfig } from "./webpack.renderer.config";
+
+const cspHeader = `
+  default-src 'self' 'unsafe-inline' data:;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' data:;
+  connect-src 'self' https://api.flows-cloud.com wss://api.flows-cloud.com;
+`;
+
+const config: ForgeConfig = {
+  packagerConfig: {
+    asar: true,
+  },
+  rebuildConfig: {},
+  makers: [new MakerSquirrel({}), new MakerZIP({}, ["darwin"]), new MakerRpm({}), new MakerDeb({})],
+  plugins: [
+    new AutoUnpackNativesPlugin({}),
+    new WebpackPlugin({
+      mainConfig,
+      devContentSecurityPolicy: cspHeader.replace(/\n/g, ""),
+      renderer: {
+        config: rendererConfig,
+        entryPoints: [
+          {
+            html: "./src/index.html",
+            js: "./src/renderer.ts",
+            name: "main_window",
+            preload: {
+              js: "./src/preload.ts",
+            },
+          },
+        ],
+      },
+    }),
+    // Fuses are used to enable/disable various Electron functionality
+    // at package time, before code signing the application
+    new FusesPlugin({
+      version: FuseVersion.V1,
+      [FuseV1Options.RunAsNode]: false,
+      [FuseV1Options.EnableCookieEncryption]: true,
+      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+      [FuseV1Options.EnableNodeCliInspectArguments]: false,
+      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+      [FuseV1Options.OnlyLoadAppFromAsar]: true,
+    }),
+  ],
+};
+
+export default config;

examples/electron/electron-forge-react/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "electron-forge-react",
+  "productName": "electron-forge-react",
+  "version": "1.0.0",
+  "description": "My Electron application description",
+  "main": ".webpack/main",
+  "private": true,
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
+    "publish": "electron-forge publish",
+    "tsc": "tsc"
+  },
+  "devDependencies": {
+    "@electron-forge/cli": "^7.11.1",
+    "@electron-forge/maker-deb": "^7.11.1",
+    "@electron-forge/maker-rpm": "^7.11.1",
+    "@electron-forge/maker-squirrel": "^7.11.1",
+    "@electron-forge/maker-zip": "^7.11.1",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
+    "@electron-forge/plugin-fuses": "^7.11.1",
+    "@electron-forge/plugin-webpack": "^7.11.1",
+    "@electron/fuses": "^1.8.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vercel/webpack-asset-relocator-loader": "^1.7.3",
+    "css-loader": "^6.11.0",
+    "electron": "42.0.0",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
+    "node-loader": "^2.1.0",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.7",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@flows/react": "^1.22.2",
+    "@flows/react-components": "^2.9.0",
+    "electron-squirrel-startup": "^1.0.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  }
+}

examples/electron/electron-forge-react/src/app.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import { Layout } from "./app/layout";
+import { HomePage } from "./app/page";
+
+const root = createRoot(document.body);
+root.render(
+  <Layout>
+    <HomePage />
+  </Layout>,
+);

examples/electron/electron-forge-react/src/app/flows.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { FlowsProvider } from "@flows/react";
+import * as components from "@flows/react-components";
+import * as tourComponents from "@flows/react-components/tour";
+import * as surveyComponents from "@flows/react-components/survey";
+import "@flows/react-components/index.css";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const Flows: FC<Props> = ({ children }) => {
+  return (
+    <FlowsProvider
+      organizationId="YOUR_ORGANIZATION_ID"
+      userId="YOUR_USER_ID"
+      environment="production"
+      components={{
+        ...components,
+      }}
+      tourComponents={{
+        ...tourComponents,
+      }}
+      surveyComponents={{
+        ...surveyComponents,
+      }}
+    >
+      {children}
+    </FlowsProvider>
+  );
+};

examples/electron/electron-forge-react/src/app/layout.tsx

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from "react";
+import { Flows } from "./flows";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const Layout: FC<Props> = ({ children }) => {
+  return <Flows>{children}</Flows>;
+};

examples/electron/electron-forge-react/src/app/page.tsx

@@ -0,0 +1,19 @@
+import { FlowsSlot } from "@flows/react";
+import { FC } from "react";
+
+export const HomePage: FC = () => {
+  return (
+    <>
+      <h1>Welcome to home page!</h1>
+
+      <FlowsSlot
+        id="my-slot"
+        placeholder={
+          <div>
+            <p>Slot content will be displayed here</p>
+          </div>
+        }
+      />
+    </>
+  );
+};

examples/electron/electron-forge-react/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

examples/electron/electron-forge-react/src/index.css

@@ -0,0 +1,8 @@
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  margin: auto;
+  max-width: 38rem;
+  padding: 2rem;
+}

examples/electron/electron-forge-react/src/index.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello World!</title>
+  </head>
+  <body></body>
+</html>