@shiftengineering/folio 0.0.76

package/README.md

@@ -0,0 +1,211 @@
+# @shiftengineering/folio
+
+A React component library for embedding and interacting with Folio documents, projects, and files in your application.
+
+## Installation
+
+```bash
+# Using npm
+npm install @shiftengineering/folio
+
+# Using yarn
+yarn add @shiftengineering/folio
+
+# Using pnpm
+pnpm add @shiftengineering/folio
+```
+
+## Usage
+
+This package exports three main features:
+
+1. `FolioProvider` - Context provider for Folio connections
+2. `FolioEmbed` - React component to embed Folio in an iframe
+3. `useFolio` - React hook for interacting with Folio data
+
+### Basic Setup
+
+First, wrap your application with the `FolioProvider`:
+
+```jsx
+import { FolioProvider } from "@shiftengineering/folio";
+import App from "./App";
+
+// Optional: custom authentication function
+const getToken = async () => {
+  // Fetch or generate your authentication token
+  return "your-auth-token";
+};
+
+ReactDOM.render(
+  <FolioProvider
+    host="http://your-folio-server.com"
+    port={5174}
+    getToken={getToken}
+  >
+    <App />
+  </FolioProvider>,
+  document.getElementById("root"),
+);
+```
+
+### Embedding Folio
+
+Use the `FolioEmbed` component to embed Folio in your application:
+
+```jsx
+import { FolioEmbed } from "@shiftengineering/folio";
+
+function MyFolioPage() {
+  return (
+    <div className="folio-page">
+      <h1>My Folio Documents</h1>
+      <FolioEmbed
+        width="100%"
+        height="800px"
+        className="my-custom-class"
+        style={{ border: "1px solid #ccc" }}
+      />
+    </div>
+  );
+}
+```
+
+### Interacting with Folio Data
+
+Use the `useFolio` hook to get and manipulate Folio data:
+
+```jsx
+import { useFolio } from "@shiftengineering/folio";
+
+function FolioProjectManager() {
+  const {
+    isLoading,
+    error,
+    getProjectsForUser,
+    addProjectForUser,
+    getFilesForProject,
+    addFilesToProject,
+  } = useFolio();
+  const [projects, setProjects] = useState([]);
+  const [files, setFiles] = useState([]);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
+
+  useEffect(() => {
+    // Load user's projects when component mounts
+    const loadProjects = async () => {
+      const userProjects = await getProjectsForUser();
+      setProjects(userProjects);
+    };
+
+    loadProjects();
+  }, []);
+
+  const handleCreateProject = async () => {
+    const newProject = await addProjectForUser("My New Project");
+    if (newProject) {
+      setProjects([...projects, newProject]);
+    }
+  };
+
+  const handleSelectProject = async (projectId) => {
+    setSelectedProjectId(projectId);
+    const projectFiles = await getFilesForProject(projectId);
+    setFiles(projectFiles);
+  };
+
+  const handleAddFile = async () => {
+    if (!selectedProjectId) return;
+
+    const newFiles = await addFilesToProject(selectedProjectId, [
+      { path: "/path/to/file.pdf", name: "My Document.pdf" },
+    ]);
+
+    if (newFiles) {
+      setFiles([...files, ...newFiles]);
+    }
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <button onClick={handleCreateProject}>Create New Project</button>
+
+      <h2>Your Projects</h2>
+      <ul>
+        {projects.map((project) => (
+          <li key={project.id} onClick={() => handleSelectProject(project.id)}>
+            {project.name}
+          </li>
+        ))}
+      </ul>
+
+      {selectedProjectId && (
+        <>
+          <h2>Project Files</h2>
+          <button onClick={handleAddFile}>Add File</button>
+          <ul>
+            {files.map((file) => (
+              <li key={file.id}>{file.name}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### FolioProvider
+
+Context provider that manages Folio application connection settings.
+
+| Prop       | Type     | Default                             | Description                                               |
+| ---------- | -------- | ----------------------------------- | --------------------------------------------------------- |
+| `host`     | string   | `'http://localhost'`                | Host for the Folio API and iframe                         |
+| `port`     | number   | `5174`                              | Port for the Folio API and iframe                         |
+| `getToken` | function | `() => 'dev-jwt-token-for-testing'` | Function to get the authentication token for API requests |
+
+### FolioEmbed
+
+React component to embed Folio in an iframe.
+
+| Prop          | Type             | Default                                                             | Description                                     |
+| ------------- | ---------------- | ------------------------------------------------------------------- | ----------------------------------------------- |
+| `width`       | string \| number | `'100%'`                                                            | Width of the iframe                             |
+| `height`      | string \| number | `'100vh'`                                                           | Height of the iframe                            |
+| `allow`       | string           | `'camera; microphone; clipboard-read; clipboard-write; fullscreen'` | Allow attributes for the iframe                 |
+| `style`       | object           | `{}`                                                                | Additional styles for the iframe container      |
+| `className`   | string           | `''`                                                                | Additional class names for the iframe container |
+| `iframeProps` | object           | `{}`                                                                | Additional props to pass to the iframe          |
+
+### useFolio
+
+Hook for interacting with the Folio application.
+
+| Property             | Type          | Description                              |
+| -------------------- | ------------- | ---------------------------------------- |
+| `isLoading`          | boolean       | Indicates if an operation is in progress |
+| `error`              | Error \| null | Error from the last operation if any     |
+| `getProjectsForUser` | function      | Get all projects for the current user    |
+| `addProjectForUser`  | function      | Add a new project for the current user   |
+| `addFilesToProject`  | function      | Add files to an existing project         |
+| `getFilesForProject` | function      | Get all files for a specific project     |
+
+## Types
+
+The library exports these TypeScript types:
+
+| Type              | Description                        |
+| ----------------- | ---------------------------------- |
+| `FolioFile`       | Represents a file in Folio         |
+| `FolioProject`    | Represents a project in Folio      |
+| `FolioEmbedProps` | Props for the FolioEmbed component |
+
+## License
+
+[YOUR LICENSE HERE]

package/dist-embed-component/favicon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="577" height="483"><svg width="577" height="483" viewBox="0 0 577 483" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_27)">
+<rect y="88.6035" width="125.465" height="340.807" transform="rotate(-44.9265 0 88.6035)" fill="#1D4ED8"></rect>
+<rect x="239.677" y="152.027" width="125.465" height="340.807" transform="rotate(44.5184 239.677 152.027)" fill="#1D4ED8"></rect>
+<rect x="247" y="88.6035" width="125.465" height="340.807" transform="rotate(-44.9265 247 88.6035)" fill="#1D4ED8"></rect>
+<rect x="486.677" y="152.027" width="125.465" height="340.807" transform="rotate(44.5184 486.677 152.027)" fill="#1D4ED8"></rect>
+</g>
+<defs>
+<clipPath id="SvgjsClipPath1031">
+<rect width="576.509" height="483" fill="white"></rect>
+</clipPath>
+</defs>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>