@indietabletop/appkit 6.1.5 → 7.0.0-0

package/dist/ShareButton/test.css.d.ts

@@ -0,0 +1 @@
+export declare const test: string;

package/dist/SubscribeCard/LetterheadInfoCard.d.ts

@@ -0,0 +1,2 @@
+import { ViewContent } from './SubscribeByPledgeCard.tsx';
+export declare function LetterheadInfoCard(props: ViewContent): import("react/jsx-runtime").JSX.Element;

package/dist/SubscribeCard/SubscribeByEmailCard.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+type SubscribeStep = {
+    type: "SUBSCRIBE";
+} | {
+    type: "SUBMIT_CODE";
+    email: string;
+    tokenId: string;
+} | {
+    type: "SUBSCRIBE_SUCCESS";
+};
+type ViewContent = {
+    title: ReactNode;
+    description: ReactNode;
+};
+/**
+ * Allows users to sign up to the newsletter using an arbitrary email.
+ *
+ * Signups are verified using an one-time code, which is sent to the supplied
+ * email address.
+ */
+export declare function SubscribeByEmailCard(props: {
+    content: Record<Exclude<SubscribeStep["type"], "SUBMIT_CODE">, ViewContent>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/SubscribeCard/SubscribeByEmailCard.stories.d.ts

@@ -0,0 +1,10 @@
+export declare const Default: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        content: Record<Exclude<"SUBMIT_CODE" | "SUBSCRIBE" | "SUBSCRIBE_SUCCESS", "SUBMIT_CODE">, {
+            title: import('react').ReactNode;
+            description: import('react').ReactNode;
+        }>;
+    };
+}, {}>;

package/dist/SubscribeCard/SubscribeByPledgeCard.d.ts

@@ -0,0 +1,36 @@
+import { RedeemedPledge } from '@indietabletop/types';
+import { ReactNode } from 'react';
+type Pledge = Pick<RedeemedPledge, "id" | "email" | "contactSubscribed">;
+type SubscribeStep = "PREVIOUSLY_SUBSCRIBED" | "SUBSCRIBE" | "SUBSCRIBE_SUCCESS";
+export type ViewContent = {
+    title: ReactNode;
+    description: ReactNode;
+};
+/**
+ * Allows users to sign up to the newsletter using the email associated with
+ * their pledge ID.
+ *
+ * Emails are not verified using a one-time code, as the user has just
+ * implicitly verified their address by navigating to the page with the unique
+ * pledge ID.
+ */
+export declare function SubscribeByPledgeCard(props: {
+    /**
+     * The pledge data that will be used to determine whether the user should
+     * be prompted for signup.
+     */
+    pledge: Pledge;
+    /**
+     * Content for each of the subscribe steps. You probably want to customize it
+     * for each step, so it is left to be defined at point of usage.
+     *
+     * If the `description` is a string, it will be wrapped in
+     * `<LetterheadParagraph>`, otherwise it will be left as is.
+     */
+    content: Record<SubscribeStep, ViewContent>;
+}): import("react/jsx-runtime").JSX.Element;
+export { 
+/**
+ * @deprecated Use {@link SubscribeByPledgeCard}
+ */
+SubscribeByPledgeCard as SubscribeCard, };

package/dist/SubscribeCard/SubscribeByPledgeCard.stories.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The default case, in which the user is not yet subscribed to ITC's newsletter
+ * and the submission is successful.
+ */
+export declare const Default: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        pledge: {
+            id: string;
+            email: string;
+            contactSubscribed: boolean;
+        };
+        content: Record<"PREVIOUSLY_SUBSCRIBED" | "SUBSCRIBE" | "SUBSCRIBE_SUCCESS", import('./SubscribeByPledgeCard.tsx').ViewContent>;
+    };
+}, {}>;
+/**
+ * Same like the default case, but the form submission fails. Errors are
+ * differentiated using the `getSubmitFailureMessage` helper, so all the basics
+ * should be covered, as this page doesn't have special cases.
+ */
+export declare const FailureOnSubmit: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        pledge: {
+            id: string;
+            email: string;
+            contactSubscribed: boolean;
+        };
+        content: Record<"PREVIOUSLY_SUBSCRIBED" | "SUBSCRIBE" | "SUBSCRIBE_SUCCESS", import('./SubscribeByPledgeCard.tsx').ViewContent>;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                subscribeByPledgeId: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the email address associated with this user account is
+ * already subscribed to our newsletter.
+ */
+export declare const AlreadySubscribed: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        pledge: {
+            id: string;
+            email: string;
+            contactSubscribed: boolean;
+        };
+        content: Record<"PREVIOUSLY_SUBSCRIBED" | "SUBSCRIBE" | "SUBSCRIBE_SUCCESS", import('./SubscribeByPledgeCard.tsx').ViewContent>;
+    };
+}, {
+    args: {
+        pledge: {
+            contactSubscribed: true;
+            id: string;
+            email: string;
+        };
+    };
+}>;

package/dist/SubscribeCard/style.css.d.ts

@@ -0,0 +1,4 @@
+export declare const card: {
+    heading: string;
+    form: string;
+};

package/dist/account/AccountIssueView.d.ts

@@ -0,0 +1,3 @@
+export declare function AccountIssueView(props: {
+    reload: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/AlreadyLoggedInView.d.ts

@@ -0,0 +1,5 @@
+import { CurrentUser } from '../types.ts';
+export declare function AlreadyLoggedInView(props: {
+    currentUser: CurrentUser;
+    reload: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/account/CurrentUserFetcher.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+type CurrentUserFetcherProps = {
+    children: ReactNode;
+};
+/**
+ * Fetches fresh current user data if a local user exists in the app store.
+ *
+ * This component uses the Indie Tabletop Client under the hood, so if new
+ * data is successfully fetched, the onCurrentUser callback will be invoked,
+ * and it is up to the configuration of the client to store the data.
+ *
+ * Importantly, this component also handles the various user account issues
+ * that we could run into: expired session, user mismatch and account deletion.
+ *
+ * All other errors are ignored. This allows users to use the app in offline
+ * mode, and doesn't interrupt their session if some unexpected error happens,
+ * which they cannot do anything about anyways.
+ */
+export declare function CurrentUserFetcher(props: CurrentUserFetcherProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/account/CurrentUserFetcher.stories.d.ts

@@ -0,0 +1,136 @@
+/**
+ * The default case, in which a local user is provided (so they have previously
+ * logged in), and the current user request returns the same user as is
+ * the local user (determined by the user id).
+ */
+export declare const Default: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, no local user is provided and the component simply renders
+ * its children. There should be no network request in this case.
+ */
+export declare const NoLocalUser: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {}>;
+/**
+ * In this case, the local user is provided and the current user request returns
+ * error 401. The user should supply their credentials again.
+ */
+export declare const SessionExpired: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the local user is provided and the current user request returns
+ * a different user (determined by user ID).
+ *
+ * This case can happen when user A logs into app X, then user B logs into
+ * app Y. Returning to app X, user B will be logged into ITC with their account
+ * but local data belong to user A.
+ *
+ * In practice this should be a rare case, but with unpleasant circumstances
+ * if not handled correctly.
+ */
+export declare const UserMismatch: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ */
+export declare const UserUnverified: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+                requestVerify: import('msw').HttpHandler;
+                verify: import('msw').HttpHandler;
+                refreshTokens: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the local user is provided and the current user request returns
+ * 404, indicating that the current user no longer exists.
+ *
+ * This can happen if users delete their accounts but
+ */
+export declare const UserNotFound: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export declare const UnknownFailure: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        children: import('react').ReactNode;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                getCurrentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;

package/dist/account/FailureFallbackView.d.ts

@@ -0,0 +1 @@
+export declare function FailureFallbackView(): import("react/jsx-runtime").JSX.Element;

package/dist/account/JoinCard.d.ts

@@ -0,0 +1,14 @@
+import { DefaultFormValues } from './types.ts';
+export type JoinCardProps = {
+    defaultValues?: DefaultFormValues;
+};
+/**
+ * Allows the user to join Indie Tabletop Club.
+ *
+ * Will automatically use the `redirectTo` query param value as the redirect
+ * location once the user creates and verifies their account.
+ *
+ * Otherwise a success screen will be shown and the user will be directed to
+ * the dashboard.
+ */
+export declare function JoinCard(props: JoinCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/account/JoinCard.stories.d.ts

@@ -0,0 +1,143 @@
+/**
+ * The default case in which all steps of the flow succeed.
+ */
+export declare const Success: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {}>;
+/**
+ * In this case, the initial step fails because the email address is associated
+ * with an existing user.
+ */
+export declare const EmailTakenOnJoin: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                join: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the initial step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export declare const UnknownFailureOnJoin: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                join: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the verify step fails because the token has expired,
+ * or is incorrect.
+ */
+export declare const NotFoundOrExpiredOnVerify: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                verify: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * In this case, the verify step fails for a reason that doesn't have any
+ * special handling in this location. E.g. network error, server error, etc.
+ */
+export declare const UnknownFailureOnVerify: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                verify: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user-session check returns a user account.
+ *
+ * The user can continue to use the app, or log out.
+ */
+export declare const AlreadyLoggedIn: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                currentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user session check has failed due to connection issues.
+ */
+export declare const NoConnection: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                currentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export declare const UnknownFailure: import('@storybook/react').ReactStory<import('@storybook/react').ReactTypes & import('@storybook/addon-docs').DocsTypes & {
+    csf4: true;
+} & {
+    args: {
+        defaultValues?: import('./types.ts').DefaultFormValues | undefined;
+    };
+}, {
+    parameters: {
+        msw: {
+            handlers: {
+                currentUser: import('msw').HttpHandler;
+            };
+        };
+    };
+}>;

package/dist/account/LoadingView.d.ts

@@ -0,0 +1 @@
+export declare function LoadingView(): import("react/jsx-runtime").JSX.Element;

package/dist/account/LoginCard.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { AuthEventHandler, DefaultFormValues } from './types.ts';
+export type LoginCardProps = {
+    /**
+     * A description that will appear in the default login case (i.e. when an
+     * unauthenticated user is prompted to log in).
+     *
+     * This should reinforce to the user the benefits that they are going to
+     * get by signing in. Every app has slightly different capabilities, so this
+     * should be tailored for each individual app.
+     */
+    description: ReactNode;
+    /**
+     * Default values for the login form.
+     *
+     * You might want to provide a value from history state or query param, so
+     * that if a user jumps between multiple pages with email field, the email
+     * address is maintained across these locations.
+     */
+    defaultValues?: DefaultFormValues;
+    /**
+     * Called when the login action succeeds.
+     *
+     * If no handler is provided, the component will will navigate to the
+     * dashboard (as determined by `appConfig.hrefs.dashboard()` return value),
+     * or a location provided in `redirectTo` query param if it is a valid
+     * local path.
+     */
+    onLogin?: AuthEventHandler;
+};
+/**
+ * Allows the user to log into Indie Tabletop Club.
+ *
+ * Will automatically use the `redirectTo` query param value as the redirect
+ * location after successful login.
+ *
+ * Otherwise, the user will be redirected to the app's dashboard.
+ */
+export declare function LoginCard(props: LoginCardProps): import("react/jsx-runtime").JSX.Element;