@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.1

package/lib/Sync/SyncIcon.stories.tsx

@@ -0,0 +1,67 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import preview from "../../.storybook/preview.tsx";
+import { SyncIcon } from "./SyncIcon.tsx";
+import { syncTheme } from "./style.css.ts";
+
+const meta = preview.meta({
+  title: "Components/SyncIcon",
+  component: SyncIcon,
+});
+
+export const Inactive = meta.story({
+  args: {
+    status: "INACTIVE",
+  },
+});
+
+export const Authenticating = meta.story({
+  args: {
+    status: "AUTHENTICATING",
+  },
+});
+
+export const Idle = meta.story({
+  args: {
+    status: "IDLE",
+  },
+});
+
+export const Error = meta.story({
+  args: {
+    status: "ERROR",
+  },
+});
+
+export const Syncing = meta.story({
+  args: {
+    status: "SYNCING",
+  },
+});
+
+export const Waiting = meta.story({
+  args: {
+    status: "WAITING",
+  },
+});
+
+export const Overrides = meta.story({
+  args: {
+    status: "AUTHENTICATING",
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div
+          style={assignInlineVars(syncTheme, {
+            idle: "black",
+            inactive: "black",
+            syncing: "black",
+            error: "black",
+          })}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+});

package/lib/Sync/SyncIcon.tsx

@@ -0,0 +1,102 @@
+import { cx } from "../class-names.ts";
+import type { SyncState } from "../store/index.tsx";
+import { icon, syncTheme } from "./style.css.ts";
+
+export { syncTheme };
+
+function Icon(props: { variant: SyncState }) {
+  switch (props.variant) {
+    case "IDLE": {
+      return (
+        <g className={icon.group}>
+          <circle className={icon.idle} />
+
+          <path
+            d="M9.0026 14L16.0737 6.92893L14.6595 5.51472L9.0026 11.1716L6.17421 8.3431L4.75999 9.7574L9.0026 14Z"
+            className={icon.shape}
+          />
+        </g>
+      );
+    }
+
+    case "AUTHENTICATING":
+    case "WAITING": {
+      return (
+        <g className={icon.group}>
+          <circle className={icon.syncing} />
+
+          <g>
+            <circle cx="14" cy="10" className={icon.bounce} />
+            <circle cx="10" cy="10" className={icon.bounce} />
+            <circle cx="6" cy="10" className={icon.bounce} />
+          </g>
+        </g>
+      );
+    }
+
+    case "SYNCING": {
+      return (
+        <g className={icon.group}>
+          <circle className={icon.idle} />
+
+          <path
+            d="M14.8201 15.0761C16.1628 13.8007 17 11.9981 17 10C17 6.13401 13.866 3 10 3C8.9391 3 7.9334 3.23599 7.03241 3.65834L8.0072 5.41292C8.6177 5.14729 9.2917 5 10 5C12.7614 5 15 7.23858 15 10H12L14.8201 15.0761ZM12.9676 16.3417L11.9928 14.5871C11.3823 14.8527 10.7083 15 10 15C7.23858 15 5 12.7614 5 10H8L5.17993 4.92387C3.83719 6.19929 3 8.0019 3 10C3 13.866 6.13401 17 10 17C11.0609 17 12.0666 16.764 12.9676 16.3417Z"
+            className={icon.shape}
+          />
+        </g>
+      );
+    }
+
+    case "ERROR": {
+      return (
+        <g className={icon.group}>
+          <circle className={icon.error} />
+
+          <path
+            d="M10 8.58579L7.17157 5.75735L5.75736 7.17156L8.5858 9.99999L5.75736 12.8284L7.17157 14.2426L10 11.4142L12.8284 14.2426L14.2426 12.8284L11.4142 9.99999L14.2426 7.17156L12.8284 5.75735L10 8.58579Z"
+            className={icon.shape}
+          />
+        </g>
+      );
+    }
+
+    case "INACTIVE": {
+      return (
+        <g className={icon.group}>
+          <circle className={icon.inactive} />
+
+          <path
+            d="M9 13V15H11V13H9ZM11 11.3551C12.4457 10.9248 13.5 9.5855 13.5 8C13.5 6.067 11.933 4.5 10 4.5C8.302 4.5 6.88637 5.70919 6.56731 7.31346L8.5288 7.70577C8.6656 7.01823 9.2723 6.5 10 6.5C10.8284 6.5 11.5 7.17157 11.5 8C11.5 8.8284 10.8284 9.5 10 9.5C9.4477 9.5 9 9.9477 9 10.5V12H11V11.3551Z"
+            className={icon.shape}
+          />
+        </g>
+      );
+    }
+
+    default: {
+      return null;
+    }
+  }
+}
+
+export function SyncIcon(props: {
+  status: SyncState;
+  title?: string;
+  className?: string;
+}) {
+  const { status, title } = props;
+
+  return (
+    <svg
+      {...cx(props, icon.container({ rotate: status === "SYNCING" }))}
+      width="20px"
+      height="20px"
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>{title}</title>
+      <Icon variant={status} />
+    </svg>
+  );
+}

package/lib/Sync/SyncLog.tsx

@@ -0,0 +1,222 @@
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureProvider,
+} from "@ariakit/react";
+import { useAppConfig } from "../AppConfig/AppConfig.tsx";
+import {
+  useLastSuccessfulSyncTs,
+  useSyncLog,
+  useSyncState,
+  type SyncState,
+} from "../store/index.tsx";
+import type { SyncAttempt } from "../store/types.ts";
+import type { FailurePayload } from "../types.ts";
+import { log } from "./style.css.ts";
+import { SyncIcon } from "./SyncIcon.tsx";
+
+function SyncActionSuccess(props: {
+  heading: string;
+  items: { id: string; name: string; deleted: boolean }[];
+}) {
+  const { heading, items } = props;
+
+  return (
+    <div>
+      <div>
+        <strong>{heading}</strong>
+      </div>
+
+      <div style={{ marginBlockStart: "0.25rem" }}>
+        {items.length > 0 ?
+          <ul
+            style={{
+              listStyle: "initial",
+              paddingInlineStart: "1.5rem",
+            }}
+          >
+            {items.map((item) => {
+              const name = item.name || "Unnamed item";
+
+              if (item.deleted) {
+                return (
+                  <li key={item.id}>
+                    Synced deletion of {name} (<code>{item.id}</code>)
+                  </li>
+                );
+              }
+
+              return (
+                <li key={item.id}>
+                  Synced {name} (<code>{item.id}</code>)
+                </li>
+              );
+            })}
+          </ul>
+        : <div style={{ opacity: 0.5 }}>
+            <em>Everything up to date.</em>
+          </div>
+        }
+      </div>
+    </div>
+  );
+}
+
+const failureToLabel: Record<FailurePayload["type"], string> = {
+  NETWORK_ERROR: "A network error occurred.",
+  API_ERROR: "Server responded with error ",
+  UNKNOWN_ERROR: "An unexpected error ocurred. Try restarting the app.",
+  VALIDATION_ERROR: "Data validation error occurred. Try restarting the app.",
+};
+
+function SyncActionFailure(props: {
+  heading: string;
+  failure: FailurePayload;
+}) {
+  const { heading, failure } = props;
+  const label = failureToLabel[failure.type];
+  return (
+    <div>
+      {heading}
+      {": "}
+      {failure.type === "API_ERROR" ?
+        ` ${label} ${failure.code}.`
+      : ` ${label}`}
+    </div>
+  );
+}
+
+const syncStateToLabel: Record<SyncState, string> = {
+  WAITING: "Waiting for additional changes...",
+  IDLE: "Sync enabled. Waiting for changes.",
+  AUTHENTICATING: "Verifying identity...",
+  ERROR: "Last sync unsuccessful. Waiting for changes.",
+  INACTIVE: "Sync not enabled. Log in or join to enable.",
+  SYNCING: "Syncing...",
+};
+
+export function SyncLogList(props: {
+  syncState: SyncState;
+  syncLog: SyncAttempt[];
+  lastSuccessfulSyncTs: number | null;
+}) {
+  const { syncLog, syncState, lastSuccessfulSyncTs } = props;
+  const { fmt } = useAppConfig();
+
+  return (
+    <div>
+      <div className={log.item}>
+        <SyncIcon status={syncState} />
+
+        <div>
+          <div>{syncStateToLabel[syncState]}</div>
+
+          <div className={log.itemTimestamp}>
+            {lastSuccessfulSyncTs ?
+              `Last successful sync at: ${fmt.dateTime(lastSuccessfulSyncTs)}`
+            : "Not synced yet."}
+          </div>
+        </div>
+      </div>
+
+      {syncLog.map((logItem) => {
+        const isFailure =
+          logItem.pull?.type === "FAILURE" || logItem.push?.type == "FAILURE";
+
+        const itemsSynced =
+          (logItem.pull?.type === "SUCCESS" ?
+            logItem.pull.value.pulled.length
+          : 0) +
+          (logItem.push?.type === "SUCCESS" ?
+            logItem.push.value.pushed.length + logItem.push.value.pulled.length
+          : 0);
+
+        return (
+          <DisclosureProvider key={logItem.startedTs}>
+            <Disclosure className={log.item}>
+              {isFailure ?
+                <>
+                  <SyncIcon status="ERROR" />
+                  <div>
+                    Sync attempt failed
+                    <div className={log.itemTimestamp}>
+                      {fmt.dateTime(logItem.startedTs)}
+                    </div>
+                  </div>
+                </>
+              : <>
+                  <SyncIcon status="IDLE" />
+                  <div>
+                    {"Sync successful. "}
+                    {itemsSynced === 0 ?
+                      "Everything up to date."
+                    : fmt.plural(itemsSynced, {
+                        one: "1 item synced.",
+                        other: "# items synced.",
+                      })
+                    }
+                    <div className={log.itemTimestamp}>
+                      {fmt.dateTime(logItem.startedTs)}
+                    </div>
+                  </div>
+                </>
+              }
+            </Disclosure>
+
+            <DisclosureContent className={log.disclosureContent}>
+              {logItem.pull && (
+                <>
+                  {logItem.pull.type === "SUCCESS" ?
+                    <SyncActionSuccess
+                      heading="Pull successful"
+                      items={logItem.pull.value.pulled}
+                    />
+                  : <SyncActionFailure
+                      heading="Pull failed"
+                      failure={logItem.pull.failure}
+                    />
+                  }
+                </>
+              )}
+
+              {logItem.push && (
+                <>
+                  {logItem.push.type === "SUCCESS" ?
+                    <>
+                      <SyncActionSuccess
+                        heading="Push successful"
+                        items={logItem.push.value.pushed}
+                      />
+                      <SyncActionSuccess
+                        heading="Patch successful"
+                        items={logItem.push.value.pulled}
+                      />
+                    </>
+                  : <SyncActionFailure
+                      heading="Push failed"
+                      failure={logItem.push.failure}
+                    />
+                  }
+                </>
+              )}
+            </DisclosureContent>
+          </DisclosureProvider>
+        );
+      })}
+    </div>
+  );
+}
+
+export function SyncLog() {
+  const syncState = useSyncState();
+  const syncLog = useSyncLog();
+  const lastSuccessfulSyncTs = useLastSuccessfulSyncTs();
+
+  return (
+    <SyncLogList
+      syncState={syncState}
+      syncLog={syncLog}
+      lastSuccessfulSyncTs={lastSuccessfulSyncTs}
+    />
+  );
+}

package/lib/Sync/SyncLogList.stories.tsx

@@ -0,0 +1,219 @@
+import preview from "../../.storybook/preview.tsx";
+import { Failure, Success } from "../async-op.ts";
+import { SyncLogList } from "./SyncLog.tsx";
+
+const meta = preview.meta({
+  title: "Components/SyncLogList",
+  component: SyncLogList,
+});
+
+export const Inactive = meta.story({
+  args: {
+    syncState: "INACTIVE",
+    lastSuccessfulSyncTs: null,
+    syncLog: [],
+  },
+});
+
+export const Syncing = meta.story({
+  args: {
+    syncState: "SYNCING",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: null,
+        push: new Success({
+          pushed: [
+            {
+              id: "123",
+              name: "Test Item",
+              updatedTs: 1773753718052,
+              deleted: false,
+            },
+          ],
+          pulled: [],
+        }),
+      },
+    ],
+  },
+});
+
+export const Idle = meta.story({
+  args: {
+    syncState: "IDLE",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [],
+  },
+});
+
+export const Waiting = meta.story({
+  args: {
+    syncState: "WAITING",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [],
+  },
+});
+
+export const Authenticating = meta.story({
+  args: {
+    syncState: "AUTHENTICATING",
+    lastSuccessfulSyncTs: null,
+    syncLog: [],
+  },
+});
+
+export const Error = meta.story({
+  args: {
+    syncState: "ERROR",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: null,
+        push: new Failure({ type: "API_ERROR" as const, code: 500 }),
+      },
+    ],
+  },
+});
+
+export const SuccessfulPullAndPush = meta.story({
+  args: {
+    syncState: "IDLE",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: new Success({
+          pulled: [
+            {
+              id: "p1",
+              name: "Pulled Item",
+              updatedTs: 1773753718052,
+              deleted: false,
+            },
+          ],
+        }),
+        push: new Success({
+          pushed: [
+            {
+              id: "s1",
+              name: "Pushed Item",
+              updatedTs: 1773753718052,
+              deleted: false,
+            },
+          ],
+          pulled: [
+            {
+              id: "s2",
+              name: "Patch Item",
+              updatedTs: 1773753718052,
+              deleted: false,
+            },
+          ],
+        }),
+      },
+    ],
+  },
+});
+
+export const AllUpToDate = meta.story({
+  args: {
+    syncState: "IDLE",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: new Success({ pulled: [] }),
+        push: new Success({ pushed: [], pulled: [] }),
+      },
+    ],
+  },
+});
+
+export const PullFailure = meta.story({
+  args: {
+    syncState: "ERROR",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: new Failure({ type: "NETWORK_ERROR" as const }),
+        push: null,
+      },
+    ],
+  },
+});
+
+export const DeletedAndUnnamedItems = meta.story({
+  args: {
+    syncState: "IDLE",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: null,
+        push: new Success({
+          pushed: [
+            {
+              id: "d1",
+              name: "Removed Campaign",
+              updatedTs: 1773753718052,
+              deleted: true,
+            },
+            {
+              id: "d2",
+              name: "",
+              updatedTs: 1773753718052,
+              deleted: false,
+            },
+          ],
+          pulled: [],
+        }),
+      },
+    ],
+  },
+});
+
+export const MultipleSyncEntries = meta.story({
+  args: {
+    syncState: "IDLE",
+    lastSuccessfulSyncTs: 1773753718052,
+    syncLog: [
+      {
+        startedTs: 1773753718052,
+        pull: new Success({ pulled: [] }),
+        push: new Success({ pushed: [], pulled: [] }),
+      },
+      {
+        startedTs: 1773753608052,
+        pull: new Success({
+          pulled: [
+            {
+              id: "m1",
+              name: "Synced Item",
+              updatedTs: 1773753608052,
+              deleted: false,
+            },
+          ],
+        }),
+        push: new Success({
+          pushed: [
+            {
+              id: "m2",
+              name: "Pushed Item",
+              updatedTs: 1773753608052,
+              deleted: false,
+            },
+          ],
+          pulled: [],
+        }),
+      },
+      {
+        startedTs: 1773753508052,
+        pull: new Failure({ type: "NETWORK_ERROR" as const }),
+        push: null,
+      },
+    ],
+  },
+});