[NOT MERGING YET] make details animation smoother

.storybook/main.ts

@@ -9,20 +9,16 @@ const config: StorybookConfig = {
     {
       name: "@storybook/addon-svelte-csf",
       options: {
-        legacyTemplate: true,
+        legacyTemplate: false,
       },
     },
   ],
   framework: "@storybook/svelte-vite",
-  docs: {
-    autodocs: "tag",
-  },
+  docs: {},
   env: (config) => ({
     ...config,
     VITE_STORYBOOK_PUBLISHABLE_API_KEY:
       process.env.VITE_STORYBOOK_PUBLISHABLE_API_KEY || "",
-    VITE_STORYBOOK_RESTRICTED_SECRET:
-      process.env.VITE_STORYBOOK_RESTRICTED_SECRET || "",
     VITE_STORYBOOK_ACCOUNT_ID: process.env.VITE_STORYBOOK_ACCOUNT_ID || "",
   }),
 };

.storybook/preview.ts

@@ -2,13 +2,32 @@ import type { Preview } from "@storybook/svelte";
 
 const preview: Preview = {
   parameters: {
+    layout: "fullscreen",
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: {
+            width: "375px",
+            height: "667px",
+          },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "900px",
+          },
+        },
+      },
+    },
   },
 };
 

README.md

@@ -82,13 +82,9 @@ Internal team members can find the required environment variables in 1Password.
 ### Option 2: Setup Manually
 
 1. Create a test account in Stripe
-2. Go to settings, API keys, and create a restricted key with the following permissions:
-   - Setup intent (read/write)
-   - Payment methods (read/write)
-3. Create a `.env.development.local` file and set the following variables:
+2. Create a `.env.development.local` file and set the following variables:
 
 ```bash
-VITE_STORYBOOK_RESTRICTED_SECRET="sk_test_1234567890"
 VITE_STORYBOOK_PUBLISHABLE_API_KEY="pk_test_1234567890"
 VITE_STORYBOOK_ACCOUNT_ID="acct_1234567890"
 ```
@@ -119,7 +115,7 @@ npm run extract-api
 ```
 
 This will update the files in `api-report` with the latest public API.
-If it has uncommited changes, CI tests will fail. Run this command and commit the changes if
+If it has uncommitted changes, CI tests will fail. Run this command and commit the changes if
 they are expected.
 
 # Publishing a new version

api-report/purchases-js.api.json

@@ -173,6 +173,267 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Interface",
+          "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance:interface",
+          "docComment": "/**\n * `BrandingAppearance` defines the appearance settings of an app's branding configuration.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare interface BrandingAppearance "
+            }
+          ],
+          "fileUrlPath": "dist/Purchases.es.d.ts",
+          "releaseTag": "Public",
+          "name": "BrandingAppearance",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_accent:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_accent: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_accent",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_buttons_primary:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_buttons_primary: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_buttons_primary",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_error:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_error: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_error",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_form_bg:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_form_bg: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_form_bg",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_page_bg:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_page_bg: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_page_bg",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#color_product_info_bg:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "color_product_info_bg: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "color_product_info_bg",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#font:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "font: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "font",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#shapes:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "shapes: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "\"default\" | \"rectangle\" | \"rounded\" | \"pill\""
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "shapes",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@revenuecat/purchases-js!BrandingAppearance#show_product_description:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "show_product_description: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "show_product_description",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            }
+          ],
+          "extendsTokenRanges": []
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@revenuecat/purchases-js!CustomerInfo:interface",

api-report/purchases-js.api.md

@@ -6,6 +6,28 @@
 
 import { PaywallData } from '@revenuecat/purchases-ui-js';
 
+// @public
+export interface BrandingAppearance {
+    // (undocumented)
+    color_accent: string;
+    // (undocumented)
+    color_buttons_primary: string;
+    // (undocumented)
+    color_error: string;
+    // (undocumented)
+    color_form_bg: string;
+    // (undocumented)
+    color_page_bg: string;
+    // (undocumented)
+    color_product_info_bg: string;
+    // (undocumented)
+    font: string;
+    // (undocumented)
+    shapes: "default" | "rectangle" | "rounded" | "pill";
+    // (undocumented)
+    show_product_description: boolean;
+}
+
 // @public
 export interface CustomerInfo {
     readonly activeSubscriptions: Set<string>;