docs(styleguide): auto-collapse Figma embed for known non-Codecademy-admin user

packages/styleguide/.storybook/components/Docs/DocsPage.tsx

@@ -1,7 +1,6 @@
 import { useContext } from 'react';
 import * as React from 'react';
 import { DocsContext, Title } from '@storybook/addon-docs/blocks';
-import { Figma } from 'storybook-addon-designs/blocks';
 
 import { Parameters } from '@storybook/addons';
 import { useNavigation } from '../Navigation/NavigationProvider';
@@ -18,6 +17,7 @@ import { BreadCrumbs } from '../Navigation/BreadCrumbs';
 import { OpenIcon } from '@codecademy/gamut-icons';
 import { StatusIndicator } from './StatusIndicator';
 import { Background } from '@codecademy/gamut-styles/src';
+import { FigmaEmbed } from './FigmaEmbed';
 
 const isLocalhost = globalThis.location?.toString().includes('localhost');
 
@@ -123,11 +123,7 @@ export const DocsPage: React.FC = ({ children }) => {
             </GridBox>
           </Background>
         )}
-        {design?.url && (
-          <GridBox mb={32}>
-            <Figma height="56.25%" collapsable url={design?.url} />
-          </GridBox>
-        )}
+        {design?.url && <FigmaEmbed url={design.url} />}
         {children}
       </ContentContainer>
     </Background>

packages/styleguide/.storybook/components/Docs/FigmaEmbed.tsx

@@ -0,0 +1,29 @@
+import { GridBox } from '@codecademy/gamut/src';
+import { Figma } from 'storybook-addon-designs/blocks';
+import { useCollapseFigmaEmbed } from './useCollapseFigmaEmbed';
+
+export interface FigmaEmbedProps {
+  url: string;
+}
+
+export const FigmaEmbed: React.FC<FigmaEmbedProps> = ({ url }) => {
+  const { defaultCollapsed /* , savePreference */ } = useCollapseFigmaEmbed();
+
+  return (
+    <GridBox
+      onClick={(event) => {
+        console.log("Without an onClick, is this where we'd save preference?");
+        console.log('DOM event:', event);
+      }}
+      mb={32}
+    >
+      <Figma
+        collapsable
+        defaultCollapsed={defaultCollapsed}
+        key={defaultCollapsed}
+        height="56.25%"
+        url={url}
+      />
+    </GridBox>
+  );
+};

packages/styleguide/.storybook/components/Docs/useCollapseFigmaEmbed.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+
+export interface WebUserRoles {
+  author?: boolean;
+  admin?: boolean;
+  pro?: boolean;
+}
+
+export interface WebUser {
+  roles: WebUserRoles;
+}
+
+const storageKey = 'figma-embed-key';
+
+export const useCollapseFigmaEmbed = () => {
+  const [preference, setPreference] = useState(
+    globalThis.localStorage?.getItem(storageKey)
+  );
+  const [user, setUser] = useState<WebUser>();
+
+  // 1. If we stored a preference, use that
+  // 2. If a user was loaded, collapse unless they're an admin
+  // 3. Otherwise, don't collapse (we're in loading state, so assume a Codecademite)
+  const defaultCollapsed = preference
+    ? JSON.parse(preference)
+    : user
+    ? !user.roles.admin
+    : false;
+
+  const savePreference = (newPreference: boolean) => {
+    const preferenceValue = JSON.stringify(newPreference);
+    localStorage.setItem(storageKey, preferenceValue);
+    setPreference(preferenceValue);
+  };
+
+  useEffect(() => {
+    if (preference) {
+      return;
+    }
+
+    if (user) {
+      savePreference(defaultCollapsed);
+      return;
+    }
+
+    const abortController = new AbortController();
+
+    fetch('https://codecademy.com/users/web', {
+      signal: abortController.signal,
+    })
+      .then(async (response) => setUser(await response.json()))
+      .catch(console.warn.bind(console, 'Error loading /users/web:'));
+
+    return () => abortController.abort();
+  }, [user]);
+
+  return { defaultCollapsed, savePreference };
+};