@truecodeio/sdk-react 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# @boko/sdk-react
+
+## 0.2.2
+
+### Patch Changes
+
+- change package name
+- Updated dependencies
+  - @truecodeio/sdk-core@0.2.2
+
+## 0.2.1
+
+### Patch Changes
+
+- Override access property
+- Updated dependencies
+  - @boko/sdk-core@0.2.1
+
+## 0.2.0
+
+### Minor Changes
+
+- Init packages
+
+### Patch Changes
+
+- Updated dependencies
+  - @boko/sdk-core@0.2.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@truecodeio/sdk-react",
+  "version": "0.2.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "access": "public",
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0",
+    "@boko/tsconfig": "^1.0.0",
+    "@truecodeio/sdk-core": "0.2.2"
+  },
+  "dependencies": {
+    "@boko/client-shared": "^1.0.0",
+    "@boko/server": "^1.0.0",
+    "@boko/common": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "@truecodeio/sdk-core": "0.2.2"
+  },
+  "scripts": {
+    "format:prettier:fix:all": "prettier --cache --write ./src",
+    "lint:eslint:fix:all": "eslint --cache --fix ./src"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,135 @@
+import { createContext, use, useEffect, useState } from "react";
+import type { createBokoClient, EligibleCampaign } from "@truecodeio/sdk-core";
+import type { NodeT } from "@boko/client-shared/schemas/tree-nodes";
+import { assertedNonNull } from "@boko/common/typescript/utils/non-nullable";
+
+type ClientContextValue = {
+  client: ReturnType<typeof createBokoClient>;
+};
+
+const ClientContext = createContext<ClientContextValue | null>(null);
+
+export const ClientProvider = ({
+  children,
+  client,
+}: React.PropsWithChildren<{
+  client: ReturnType<typeof createBokoClient>;
+}>) => {
+  return <ClientContext value={{ client }}>{children}</ClientContext>;
+};
+
+export const useClient = () => {
+  return assertedNonNull(use(ClientContext)).client;
+};
+
+export const Renderer = () => {
+  const [campaign, setCampaign] = useState<EligibleCampaign | null>(null);
+
+  const client = useClient();
+
+  useEffect(() => {
+    // TODO: Replace with tanstack query
+    const fetchCampaign = async () => {
+      try {
+        const response = await client.getEligibleCampaign();
+
+        setCampaign(response);
+      } catch (error) {
+        console.error("Error fetching campaign:", error);
+      }
+    };
+
+    void fetchCampaign();
+  }, []);
+
+  const renderCampaign = () => {
+    if (!campaign) {
+      return null;
+    }
+
+    const renderNode = (node: NodeT) => {
+      switch (node.type) {
+        case "root": {
+          return (
+            <div style={{ color: node.props.color }}>
+              {node.children.map(renderNode)}
+            </div>
+          );
+        }
+        case "row": {
+          return (
+            <div
+              style={{
+                display: "flex",
+                backgroundColor: node.props.background.color,
+                paddingLeft: node.props.padding.left,
+                paddingRight: node.props.padding.right,
+                paddingTop: node.props.padding.top,
+                paddingBottom: node.props.padding.bottom,
+              }}
+              key={node.id}
+            >
+              {node.children.map(renderNode)}
+            </div>
+          );
+        }
+        case "column": {
+          return (
+            <div style={{ flex: 1 }} key={node.id}>
+              {node.children.map(renderNode)}
+            </div>
+          );
+        }
+        case "button": {
+          return (
+            <button type="button" key={node.id}>
+              {node.props.title}
+            </button>
+          );
+        }
+        case "text": {
+          switch (node.props.type) {
+            case "paragraph": {
+              return <p key={node.id}>{node.props.content}</p>;
+            }
+            case "heading-1": {
+              return <h1 key={node.id}>{node.props.content}</h1>;
+            }
+            case "heading-2": {
+              return <h2 key={node.id}>{node.props.content}</h2>;
+            }
+            case "heading-3": {
+              return <h3 key={node.id}>{node.props.content}</h3>;
+            }
+            case "heading-4": {
+              return <h4 key={node.id}>{node.props.content}</h4>;
+            }
+            case "heading-5": {
+              return <h5 key={node.id}>{node.props.content}</h5>;
+            }
+            case "heading-6": {
+              return <h6 key={node.id}>{node.props.content}</h6>;
+            }
+
+            default: {
+              return node.props.type satisfies never;
+            }
+          }
+        }
+        case "spacer": {
+          return <div style={{ height: node.props.size }} key={node.id}></div>;
+        }
+
+        default: {
+          return node satisfies never;
+        }
+      }
+    };
+
+    return renderNode(campaign.template.content);
+  };
+
+  return renderCampaign();
+};
+
+export { createBokoClient } from "@truecodeio/sdk-core";

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@boko/tsconfig",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "moduleResolution": "bundler",
+    "module": "ES2022",
+    "jsx": "react-jsx",
+    "paths": {
+      "@truecodeio/sdk-react/*": ["./src/*"],
+      "@truecodeio/sdk-core": ["../sdk-core/src"],
+      "@truecodeio/sdk-core/*": ["../sdk-core/src/*"],
+      "@boko/client-shared/*": ["../client-shared/src/*"],
+      "@boko/common/*": ["../common/src/*"],
+      "@boko/server": ["../../apps/server/src"],
+      "@boko/server/*": ["../../apps/server/src/*"]
+    }
+  },
+  "include": ["src"]
+}