@geniee-inc/sfa-kit 1.6.0

package/src/lib/auth/keystone-auth.d.ts

@@ -0,0 +1,16 @@
+import type { AuthResult, SfaSession } from './types';
+/**
+ * @description Returns a 30s timeout AbortSignal for auth fetch calls, or
+ * undefined in runtimes that lack AbortSignal.timeout (e.g. jsdom in tests).
+ */
+export declare function authTimeoutSignal(): AbortSignal | undefined;
+/**
+ * @description Authenticate against Keystone's POST /v1/auth/token.
+ * When organizationId is omitted and the account belongs to multiple
+ * organizations, the API responds 409 with available_organizations.
+ * In that case we return a 'choose_organization' result so the caller
+ * can present a picker and retry with the chosen org.
+ */
+export declare function authenticate(apiBase: string, email: string, password: string, organizationId?: number): Promise<AuthResult>;
+export declare function isSessionExpired(session: SfaSession): boolean;
+export declare function decodeJwtPayload(token: string): Record<string, unknown>;

package/src/lib/auth/keystone-auth.js

@@ -0,0 +1,84 @@
+import { __awaiter } from "tslib";
+const AUTH_TIMEOUT_MS = 30000;
+/**
+ * @description Returns a 30s timeout AbortSignal for auth fetch calls, or
+ * undefined in runtimes that lack AbortSignal.timeout (e.g. jsdom in tests).
+ */
+export function authTimeoutSignal() {
+    if (typeof AbortSignal.timeout === 'function') {
+        return AbortSignal.timeout(AUTH_TIMEOUT_MS);
+    }
+    return undefined;
+}
+/**
+ * @description Authenticate against Keystone's POST /v1/auth/token.
+ * When organizationId is omitted and the account belongs to multiple
+ * organizations, the API responds 409 with available_organizations.
+ * In that case we return a 'choose_organization' result so the caller
+ * can present a picker and retry with the chosen org.
+ */
+export function authenticate(apiBase, email, password, organizationId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const authUrl = `${apiBase}/v1/auth/token`;
+        const body = { email, password };
+        if (organizationId != null) {
+            body['organization_id'] = organizationId;
+        }
+        const response = yield globalThis.fetch(authUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+            signal: authTimeoutSignal(),
+        });
+        if (response.status === 409) {
+            const data = (yield response.json());
+            const organizations = (_a = data.available_organizations) !== null && _a !== void 0 ? _a : [];
+            if (organizations.length === 0) {
+                throw new Error('Auth returned 409 but no available organizations');
+            }
+            return {
+                status: 'choose_organization',
+                availableOrganizations: organizations,
+            };
+        }
+        if (!response.ok) {
+            const text = yield response.text().catch(() => '');
+            throw new Error(`Auth failed: ${response.status} ${response.statusText}${text ? ` — ${text}` : ''}`);
+        }
+        const data = (yield response.json());
+        if (!data.access_token || typeof data.expires_in !== 'number') {
+            throw new Error('Auth response missing access_token or expires_in');
+        }
+        const claims = decodeJwtPayload(data.access_token);
+        return {
+            status: 'authenticated',
+            session: {
+                accessToken: data.access_token,
+                expiresAt: Date.now() + data.expires_in * 1000,
+                organizationId: String((_c = (_b = claims['organization_id']) !== null && _b !== void 0 ? _b : organizationId) !== null && _c !== void 0 ? _c : ''),
+                email,
+            },
+        };
+    });
+}
+export function isSessionExpired(session) {
+    // NOTE: expiresAt が NaN/undefined だとこの比較は常に false を返し、
+    // セッションが永久に有効と判定されてしまう。安全側に倒して期限切れとする
+    if (!Number.isFinite(session.expiresAt))
+        return true;
+    return Date.now() >= session.expiresAt - 60000;
+}
+export function decodeJwtPayload(token) {
+    const parts = token.split('.');
+    const payload = parts[1];
+    if (!payload)
+        return {};
+    try {
+        const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));
+        return JSON.parse(decoded);
+    }
+    catch (_a) {
+        return {};
+    }
+}

package/src/lib/auth/session-store.d.ts

@@ -0,0 +1,19 @@
+import type { SfaSession } from './types';
+/**
+ * @description Loads the saved session from sessionStorage.
+ * Returns null if no session exists or if the token has expired.
+ */
+export declare function loadSession(): SfaSession | null;
+export declare function saveSession(session: SfaSession): void;
+export declare function clearSession(): void;
+/**
+ * @description Persists the last successfully authenticated org ID to
+ * localStorage. Used to pre-fill the org ID field and auto-select the
+ * correct org on subsequent logins, even after the session expires.
+ */
+export declare function saveLastOrgId(orgId: string): void;
+/**
+ * @description Loads the last successfully authenticated org ID from
+ * localStorage. Returns null if none is stored.
+ */
+export declare function loadLastOrgId(): string | null;

package/src/lib/auth/session-store.js

@@ -0,0 +1,73 @@
+import { isSessionExpired } from './keystone-auth';
+const STORAGE_KEY = 'sfa-kit-session';
+const LAST_ORG_KEY = 'sfa-kit-last-org';
+/**
+ * @description Loads the saved session from sessionStorage.
+ * Returns null if no session exists or if the token has expired.
+ */
+export function loadSession() {
+    var _a;
+    try {
+        const stored = (_a = globalThis.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(STORAGE_KEY);
+        if (!stored)
+            return null;
+        const session = JSON.parse(stored);
+        if (!session.accessToken || isSessionExpired(session)) {
+            clearSession();
+            return null;
+        }
+        return session;
+    }
+    catch (_b) {
+        return null;
+    }
+}
+export function saveSession(session) {
+    var _a;
+    try {
+        (_a = globalThis.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(STORAGE_KEY, JSON.stringify(session));
+    }
+    catch (_b) {
+        // sessionStorage not available
+    }
+    // Persist org ID to localStorage so it survives across sessions
+    if (session.organizationId) {
+        saveLastOrgId(session.organizationId);
+    }
+}
+export function clearSession() {
+    var _a;
+    try {
+        (_a = globalThis.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(STORAGE_KEY);
+    }
+    catch (_b) {
+        // sessionStorage not available
+    }
+}
+/**
+ * @description Persists the last successfully authenticated org ID to
+ * localStorage. Used to pre-fill the org ID field and auto-select the
+ * correct org on subsequent logins, even after the session expires.
+ */
+export function saveLastOrgId(orgId) {
+    var _a;
+    try {
+        (_a = globalThis.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(LAST_ORG_KEY, orgId);
+    }
+    catch (_b) {
+        // localStorage not available
+    }
+}
+/**
+ * @description Loads the last successfully authenticated org ID from
+ * localStorage. Returns null if none is stored.
+ */
+export function loadLastOrgId() {
+    var _a, _b;
+    try {
+        return (_b = (_a = globalThis.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(LAST_ORG_KEY)) !== null && _b !== void 0 ? _b : null;
+    }
+    catch (_c) {
+        return null;
+    }
+}

package/src/lib/auth/types.d.ts

@@ -0,0 +1,33 @@
+export interface KeystoneTokenResponse {
+    readonly access_token: string;
+    readonly token_type: string;
+    readonly expires_in: number;
+}
+export interface OrganizationChoice {
+    readonly organization_id: number;
+    readonly name: string;
+}
+/**
+ * @description Persisted session state (sessionStorage).
+ * The JWT itself carries org_id/user_id in its claims.
+ */
+export interface SfaSession {
+    readonly accessToken: string;
+    readonly expiresAt: number;
+    readonly organizationId: string;
+    readonly email?: string;
+    readonly apiBase?: string;
+}
+/**
+ * @description Discriminated result from authenticate().
+ * 'authenticated' means a token was issued.
+ * 'choose_organization' means the account spans multiple orgs
+ * and the caller must retry with one of the listed choices.
+ */
+export type AuthResult = {
+    readonly status: 'authenticated';
+    readonly session: SfaSession;
+} | {
+    readonly status: 'choose_organization';
+    readonly availableOrganizations: readonly OrganizationChoice[];
+};

package/src/lib/auth/types.js

@@ -0,0 +1 @@
+export {};

package/src/lib/auth/useEmbedContext.d.ts

@@ -0,0 +1,22 @@
+import type { EmbedContext } from './embed-protocol';
+/**
+ * @description React context carrying the runtime embed context
+ * (object_key and optional record_id) injected by the SFA/CRM host.
+ * Only populated when running inside an iframe via the postMessage flow.
+ */
+export declare const EmbedContextValue: import("react").Context<EmbedContext | null>;
+/**
+ * @description Returns the embed context (object_key, record_id) from the
+ * active runtime environment. Checks two sources in priority order:
+ *
+ * 1. Embed context (iframe postMessage flow) - set by the SFA/CRM host.
+ * 2. Standalone preview context (DevToolbar) - set by the user in preview mode.
+ *
+ * Returns null only when neither context is available.
+ *
+ * ```tsx
+ * const ctx = useEmbedContext();
+ * const { record } = useRecord(ctx?.object_key ?? '', ctx?.record_id ?? '');
+ * ```
+ */
+export declare function useEmbedContext(): EmbedContext | null;

package/src/lib/auth/useEmbedContext.js

@@ -0,0 +1,31 @@
+import { createContext, useContext } from 'react';
+import { StandalonePreviewCtx } from './StandalonePreviewContext';
+/**
+ * @description React context carrying the runtime embed context
+ * (object_key and optional record_id) injected by the SFA/CRM host.
+ * Only populated when running inside an iframe via the postMessage flow.
+ */
+export const EmbedContextValue = createContext(null);
+/**
+ * @description Returns the embed context (object_key, record_id) from the
+ * active runtime environment. Checks two sources in priority order:
+ *
+ * 1. Embed context (iframe postMessage flow) - set by the SFA/CRM host.
+ * 2. Standalone preview context (DevToolbar) - set by the user in preview mode.
+ *
+ * Returns null only when neither context is available.
+ *
+ * ```tsx
+ * const ctx = useEmbedContext();
+ * const { record } = useRecord(ctx?.object_key ?? '', ctx?.record_id ?? '');
+ * ```
+ */
+export function useEmbedContext() {
+    const embed = useContext(EmbedContextValue);
+    const standalone = useContext(StandalonePreviewCtx);
+    if (embed)
+        return embed;
+    if (standalone === null || standalone === void 0 ? void 0 : standalone.state)
+        return standalone.state;
+    return null;
+}

package/src/lib/components/EmptyState.d.ts

@@ -0,0 +1,18 @@
+interface EmptyStateProps {
+    /** Primary message displayed to the user. */
+    readonly message?: string;
+    /** Secondary hint or instructions. */
+    readonly hint?: string;
+}
+/**
+ * @description Baseline placeholder for pages that have no data to display.
+ * Renders a centered, non-alarming message. Use this as the default when
+ * a record ID is missing, a list returns zero results, or a page hasn't
+ * been configured yet.
+ *
+ * ```tsx
+ * if (!ctx?.record_id) return <EmptyState message="レコードが指定されていません" />;
+ * ```
+ */
+export declare function EmptyState({ message, hint, }: EmptyStateProps): JSX.Element;
+export {};

package/src/lib/components/EmptyState.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { color, font, space, baseContainerStyle } from '../theme';
+/**
+ * @description Baseline placeholder for pages that have no data to display.
+ * Renders a centered, non-alarming message. Use this as the default when
+ * a record ID is missing, a list returns zero results, or a page hasn't
+ * been configured yet.
+ *
+ * ```tsx
+ * if (!ctx?.record_id) return <EmptyState message="レコードが指定されていません" />;
+ * ```
+ */
+export function EmptyState({ message = 'データがありません', hint, }) {
+    return (_jsxs("div", { style: styles.container, children: [_jsx("div", { style: styles.icon, children: "\uD83D\uDCCB" }), _jsx("p", { style: styles.message, children: message }), hint && _jsx("p", { style: styles.hint, children: hint })] }));
+}
+const styles = {
+    container: Object.assign(Object.assign({}, baseContainerStyle), { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: `${space.xl * 2}px ${space.xl}px`, textAlign: 'center', minHeight: 200 }),
+    icon: {
+        fontSize: 32,
+        marginBottom: space.md,
+        opacity: 0.6,
+    },
+    message: {
+        fontSize: font.sizeXl,
+        fontWeight: font.weightMedium,
+        color: color.textSecondary,
+        margin: `0 0 ${space.xs}px`,
+    },
+    hint: {
+        fontSize: font.sizeMd,
+        color: color.textMuted,
+        margin: 0,
+        maxWidth: 400,
+        lineHeight: 1.5,
+    },
+};

package/src/lib/components/ErrorBoundary.d.ts

@@ -0,0 +1,31 @@
+import { Component } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    /** Content to render when no error has occurred. */
+    readonly children: ReactNode;
+    /** Optional custom fallback. Receives the error for display. */
+    readonly fallback?: (error: Error, reset: () => void) => ReactNode;
+}
+interface ErrorBoundaryState {
+    readonly error: Error | null;
+}
+/**
+ * @description Catches uncaught errors in the component tree below it and
+ * renders a friendly fallback instead of a blank page. Provides a "再読み込み"
+ * (reload) button so the user can retry without losing the DevToolbar.
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary>
+ *   <RecordView collection="companies" recordId={id} />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    private handleReset;
+    render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
+}
+export {};

package/src/lib/components/ErrorBoundary.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { color, font, radius, space, baseContainerStyle } from '../theme';
+import { SFA_KIT_VERSION } from '../version';
+/**
+ * @description Catches uncaught errors in the component tree below it and
+ * renders a friendly fallback instead of a blank page. Provides a "再読み込み"
+ * (reload) button so the user can retry without losing the DevToolbar.
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary>
+ *   <RecordView collection="companies" recordId={id} />
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.handleReset = () => {
+            this.setState({ error: null });
+        };
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        // Log to console so Sentry or other monitors can pick it up.
+        // eslint-disable-next-line no-console
+        console.error('[sfa-kit] ErrorBoundary caught:', error, info.componentStack);
+    }
+    render() {
+        const { error } = this.state;
+        const { children, fallback } = this.props;
+        if (error) {
+            if (fallback)
+                return fallback(error, this.handleReset);
+            return _jsx(DefaultErrorFallback, { error: error, onReset: this.handleReset });
+        }
+        return children;
+    }
+}
+function DefaultErrorFallback({ error, onReset, }) {
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsx("h3", { style: styles.title, children: "\u8868\u793A\u30A8\u30E9\u30FC" }), _jsx("p", { style: styles.message, children: "\u30B3\u30F3\u30C6\u30F3\u30C4\u306E\u8868\u793A\u4E2D\u306B\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002\u518D\u8AAD\u307F\u8FBC\u307F\u3092\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002" }), _jsx("pre", { style: styles.detail, children: error.message }), _jsx("button", { type: "button", style: styles.retryButton, onClick: onReset, children: "\u518D\u8AAD\u307F\u8FBC\u307F" }), _jsxs("div", { style: styles.footer, children: ["@geniee-inc/sfa-kit v", SFA_KIT_VERSION] })] }) }));
+}
+const styles = {
+    container: Object.assign(Object.assign({}, baseContainerStyle), { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: space.xl, minHeight: 200 }),
+    card: {
+        maxWidth: 520,
+        width: '100%',
+        padding: space.lg,
+        backgroundColor: color.bgSurface,
+        border: `1px solid ${color.border}`,
+        borderRadius: radius.sm,
+        textAlign: 'center',
+    },
+    title: {
+        fontSize: font.sizeXl,
+        fontWeight: font.weightMedium,
+        color: color.error,
+        margin: `0 0 ${space.sm}px`,
+    },
+    message: {
+        fontSize: font.sizeMd,
+        color: color.textSecondary,
+        margin: `0 0 ${space.md}px`,
+        lineHeight: 1.5,
+    },
+    detail: {
+        fontSize: font.sizeSm,
+        fontFamily: 'monospace',
+        color: color.textMuted,
+        backgroundColor: color.bgDefault,
+        padding: space.sm,
+        borderRadius: radius.sm,
+        overflow: 'auto',
+        maxHeight: 120,
+        textAlign: 'left',
+        margin: `0 0 ${space.md}px`,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all',
+    },
+    retryButton: {
+        padding: '8px 20px',
+        fontSize: font.sizeMd,
+        fontFamily: font.family,
+        fontWeight: font.weightMedium,
+        color: color.white,
+        backgroundColor: color.primary,
+        border: 'none',
+        borderRadius: radius.sm,
+        cursor: 'pointer',
+    },
+    footer: {
+        fontSize: font.sizeXs,
+        color: color.textMuted,
+        marginTop: space.sm,
+    },
+};

package/src/lib/components/FieldRenderer.d.ts

@@ -0,0 +1,11 @@
+import type { SfaFieldValue } from '../provider/types';
+interface FieldRendererProps {
+    readonly fieldValue: SfaFieldValue;
+    readonly fieldName?: string;
+}
+/**
+ * @description Renders a single field value based on its normalized kind.
+ * Uses `label` for display (pre-formatted by the API), falls back to `value`.
+ */
+export declare function FieldRenderer({ fieldValue, fieldName }: FieldRendererProps): JSX.Element;
+export {};

package/src/lib/components/FieldRenderer.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @description Renders a single field value based on its normalized kind.
+ * Uses `label` for display (pre-formatted by the API), falls back to `value`.
+ */
+export function FieldRenderer({ fieldValue, fieldName }) {
+    var _a;
+    const display = (_a = fieldValue.label) !== null && _a !== void 0 ? _a : formatFallback(fieldValue);
+    if (display == null || display === '') {
+        return _jsx("span", { style: styles.empty, children: "\u2014" });
+    }
+    if (fieldValue.kind === 'text' && typeof fieldValue.value === 'string') {
+        if (isMultiline(fieldValue.value)) {
+            return _jsx("span", { style: styles.preWrap, children: display });
+        }
+        const link = detectLink(fieldValue.value);
+        if (link) {
+            return (_jsx("a", { href: link.href, style: styles.link, target: "_blank", rel: "noopener noreferrer", children: display }));
+        }
+    }
+    return _jsx("span", { "data-field": fieldName, children: display });
+}
+function formatFallback(field) {
+    if (field.value == null)
+        return null;
+    if (typeof field.value === 'number')
+        return field.value.toLocaleString('ja-JP');
+    if (typeof field.value === 'string')
+        return field.value;
+    if (Array.isArray(field.value))
+        return field.value.join(', ');
+    return String(field.value);
+}
+function isMultiline(value) {
+    return value.includes('\n');
+}
+function detectLink(value) {
+    if (/^https?:\/\//.test(value))
+        return { href: value };
+    if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+        return { href: `mailto:${value}` };
+    if (/^[\d+][\d\-().+\s]{7,}$/.test(value))
+        return { href: `tel:${value.replace(/[\s()-]/g, '')}` };
+    return null;
+}
+const styles = {
+    empty: {
+        color: '#94a3b8',
+    },
+    preWrap: {
+        whiteSpace: 'pre-wrap',
+    },
+    link: {
+        color: '#3867D1',
+        textDecoration: 'none',
+    },
+};

package/src/lib/components/RecordList.d.ts

@@ -0,0 +1,20 @@
+import type { SfaListParams, SfaRecord } from '../provider/types';
+interface RecordListColumn {
+    readonly fieldName: string;
+    readonly header?: string;
+    readonly width?: string;
+}
+interface RecordListProps {
+    readonly collection: string;
+    readonly columns?: readonly RecordListColumn[];
+    readonly params?: SfaListParams;
+    readonly pageSize?: number;
+    readonly showPagination?: boolean;
+    readonly onRowClick?: (record: SfaRecord) => void;
+    readonly onError?: (error: Error) => void;
+}
+/**
+ * @description Fetches and displays a paginated list of SFA/CRM records as a table.
+ */
+export declare function RecordList({ collection, columns, params, pageSize, showPagination, onRowClick, onError, }: RecordListProps): JSX.Element;
+export {};