@strapi/admin 5.17.0 → 5.18.1

package/dist/admin/admin/src/components/Providers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Providers.mjs","sources":["../../../../../admin/src/components/Providers.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { QueryClient, QueryClientProvider } from 'react-query';\nimport { Provider } from 'react-redux';\n\nimport { AuthProvider } from '../features/Auth';\nimport { HistoryProvider } from '../features/BackButton';\nimport { ConfigurationProvider } from '../features/Configuration';\nimport { NotificationsProvider } from '../features/Notifications';\nimport { StrapiAppProvider } from '../features/StrapiApp';\nimport { TrackingProvider } from '../features/Tracking';\n\nimport { GuidedTourProvider } from './GuidedTour/Provider';\nimport { LanguageProvider } from './LanguageProvider';\nimport { Theme } from './Theme';\nimport { UnstableGuidedTourContext } from './UnstableGuidedTour/Context';\nimport { tours } from './UnstableGuidedTour/Tours';\n\nimport type { Store } from '../core/store/configure';\nimport type { StrapiApp } from '../StrapiApp';\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\ninterface ProvidersProps {\n  children: React.ReactNode;\n  strapi: StrapiApp;\n  store: Store;\n}\n\nconst Providers = ({ children, strapi, store }: ProvidersProps) => {\n  return (\n    <StrapiAppProvider\n      components={strapi.library.components}\n      customFields={strapi.customFields}\n      widgets={strapi.widgets}\n      fields={strapi.library.fields}\n      menu={strapi.router.menu}\n      getAdminInjectedComponents={strapi.getAdminInjectedComponents}\n      getPlugin={strapi.getPlugin}\n      plugins={strapi.plugins}\n      rbac={strapi.rbac}\n      runHookParallel={strapi.runHookParallel}\n      runHookWaterfall={(name, initialValue) => strapi.runHookWaterfall(name, initialValue, store)}\n      runHookSeries={strapi.runHookSeries}\n      settings={strapi.router.settings}\n    >\n      <Provider store={store}>\n        <QueryClientProvider client={queryClient}>\n          <AuthProvider>\n            <HistoryProvider>\n              <LanguageProvider messages={strapi.configurations.translations}>\n                <Theme themes={strapi.configurations.themes}>\n                  <NotificationsProvider>\n                    <TrackingProvider>\n                      <GuidedTourProvider>\n                        <UnstableGuidedTourContext tours={tours}>\n                          <ConfigurationProvider\n                            defaultAuthLogo={strapi.configurations.authLogo}\n                            defaultMenuLogo={strapi.configurations.menuLogo}\n                            showReleaseNotification={strapi.configurations.notifications.releases}\n                          >\n                            {children}\n                          </ConfigurationProvider>\n                        </UnstableGuidedTourContext>\n                      </GuidedTourProvider>\n                    </TrackingProvider>\n                  </NotificationsProvider>\n                </Theme>\n              </LanguageProvider>\n            </HistoryProvider>\n          </AuthProvider>\n        </QueryClientProvider>\n      </Provider>\n    </StrapiAppProvider>\n  );\n};\n\nexport { Providers };\n"],"names":["queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","Providers","children","strapi","store","_jsx","StrapiAppProvider","components","library","customFields","widgets","fields","menu","router","getAdminInjectedComponents","getPlugin","plugins","rbac","runHookParallel","runHookWaterfall","name","initialValue","runHookSeries","settings","Provider","QueryClientProvider","client","AuthProvider","HistoryProvider","LanguageProvider","messages","configurations","translations","Theme","themes","NotificationsProvider","TrackingProvider","GuidedTourProvider","UnstableGuidedTourContext","tours","ConfigurationProvider","defaultAuthLogo","authLogo","defaultMenuLogo","menuLogo","showReleaseNotification","notifications","releases"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAMA,WAAAA,GAAc,IAAIC,WAAY,CAAA;IAClCC,cAAgB,EAAA;QACdC,OAAS,EAAA;YACPC,oBAAsB,EAAA;AACxB;AACF;AACF,CAAA,CAAA;AAQMC,MAAAA,SAAAA,GAAY,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,EAAkB,GAAA;AAC5D,IAAA,qBACEC,GAACC,CAAAA,iBAAAA,EAAAA;QACCC,UAAYJ,EAAAA,MAAAA,CAAOK,OAAO,CAACD,UAAU;AACrCE,QAAAA,YAAAA,EAAcN,OAAOM,YAAY;AACjCC,QAAAA,OAAAA,EAASP,OAAOO,OAAO;QACvBC,MAAQR,EAAAA,MAAAA,CAAOK,OAAO,CAACG,MAAM;QAC7BC,IAAMT,EAAAA,MAAAA,CAAOU,MAAM,CAACD,IAAI;AACxBE,QAAAA,0BAAAA,EAA4BX,OAAOW,0BAA0B;AAC7DC,QAAAA,SAAAA,EAAWZ,OAAOY,SAAS;AAC3BC,QAAAA,OAAAA,EAASb,OAAOa,OAAO;AACvBC,QAAAA,IAAAA,EAAMd,OAAOc,IAAI;AACjBC,QAAAA,eAAAA,EAAiBf,OAAOe,eAAe;AACvCC,QAAAA,gBAAAA,EAAkB,CAACC,IAAMC,EAAAA,YAAAA,GAAiBlB,OAAOgB,gBAAgB,CAACC,MAAMC,YAAcjB,EAAAA,KAAAA,CAAAA;AACtFkB,QAAAA,aAAAA,EAAenB,OAAOmB,aAAa;QACnCC,QAAUpB,EAAAA,MAAAA,CAAOU,MAAM,CAACU,QAAQ;AAEhC,QAAA,QAAA,gBAAAlB,GAACmB,CAAAA,QAAAA,EAAAA;YAASpB,KAAOA,EAAAA,KAAAA;AACf,YAAA,QAAA,gBAAAC,GAACoB,CAAAA,mBAAAA,EAAAA;gBAAoBC,MAAQ9B,EAAAA,WAAAA;AAC3B,gBAAA,QAAA,gBAAAS,GAACsB,CAAAA,YAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAtB,GAACuB,CAAAA,eAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAvB,GAACwB,CAAAA,gBAAAA,EAAAA;4BAAiBC,QAAU3B,EAAAA,MAAAA,CAAO4B,cAAc,CAACC,YAAY;AAC5D,4BAAA,QAAA,gBAAA3B,GAAC4B,CAAAA,KAAAA,EAAAA;gCAAMC,MAAQ/B,EAAAA,MAAAA,CAAO4B,cAAc,CAACG,MAAM;AACzC,gCAAA,QAAA,gBAAA7B,GAAC8B,CAAAA,qBAAAA,EAAAA;AACC,oCAAA,QAAA,gBAAA9B,GAAC+B,CAAAA,gBAAAA,EAAAA;AACC,wCAAA,QAAA,gBAAA/B,GAACgC,CAAAA,kBAAAA,EAAAA;AACC,4CAAA,QAAA,gBAAAhC,GAACiC,CAAAA,yBAAAA,EAAAA;gDAA0BC,KAAOA,EAAAA,KAAAA;AAChC,gDAAA,QAAA,gBAAAlC,GAACmC,CAAAA,qBAAAA,EAAAA;oDACCC,eAAiBtC,EAAAA,MAAAA,CAAO4B,cAAc,CAACW,QAAQ;oDAC/CC,eAAiBxC,EAAAA,MAAAA,CAAO4B,cAAc,CAACa,QAAQ;AAC/CC,oDAAAA,uBAAAA,EAAyB1C,MAAO4B,CAAAA,cAAc,CAACe,aAAa,CAACC,QAAQ;AAEpE7C,oDAAAA,QAAAA,EAAAA;;;;;;;;;;;;;AAc7B;;;;"}
+{"version":3,"file":"Providers.mjs","sources":["../../../../../admin/src/components/Providers.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { QueryClient, QueryClientProvider } from 'react-query';\nimport { Provider } from 'react-redux';\n\nimport { AuthProvider } from '../features/Auth';\nimport { HistoryProvider } from '../features/BackButton';\nimport { ConfigurationProvider } from '../features/Configuration';\nimport { NotificationsProvider } from '../features/Notifications';\nimport { StrapiAppProvider } from '../features/StrapiApp';\nimport { TrackingProvider } from '../features/Tracking';\n\nimport { GuidedTourProvider } from './GuidedTour/Provider';\nimport { LanguageProvider } from './LanguageProvider';\nimport { Theme } from './Theme';\nimport { UnstableGuidedTourContext } from './UnstableGuidedTour/Context';\n\nimport type { Store } from '../core/store/configure';\nimport type { StrapiApp } from '../StrapiApp';\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\ninterface ProvidersProps {\n  children: React.ReactNode;\n  strapi: StrapiApp;\n  store: Store;\n}\n\nconst Providers = ({ children, strapi, store }: ProvidersProps) => {\n  return (\n    <StrapiAppProvider\n      components={strapi.library.components}\n      customFields={strapi.customFields}\n      widgets={strapi.widgets}\n      fields={strapi.library.fields}\n      menu={strapi.router.menu}\n      getAdminInjectedComponents={strapi.getAdminInjectedComponents}\n      getPlugin={strapi.getPlugin}\n      plugins={strapi.plugins}\n      rbac={strapi.rbac}\n      runHookParallel={strapi.runHookParallel}\n      runHookWaterfall={(name, initialValue) => strapi.runHookWaterfall(name, initialValue, store)}\n      runHookSeries={strapi.runHookSeries}\n      settings={strapi.router.settings}\n    >\n      <Provider store={store}>\n        <QueryClientProvider client={queryClient}>\n          <AuthProvider>\n            <HistoryProvider>\n              <LanguageProvider messages={strapi.configurations.translations}>\n                <Theme themes={strapi.configurations.themes}>\n                  <NotificationsProvider>\n                    <TrackingProvider>\n                      <GuidedTourProvider>\n                        <UnstableGuidedTourContext>\n                          <ConfigurationProvider\n                            defaultAuthLogo={strapi.configurations.authLogo}\n                            defaultMenuLogo={strapi.configurations.menuLogo}\n                            showReleaseNotification={strapi.configurations.notifications.releases}\n                          >\n                            {children}\n                          </ConfigurationProvider>\n                        </UnstableGuidedTourContext>\n                      </GuidedTourProvider>\n                    </TrackingProvider>\n                  </NotificationsProvider>\n                </Theme>\n              </LanguageProvider>\n            </HistoryProvider>\n          </AuthProvider>\n        </QueryClientProvider>\n      </Provider>\n    </StrapiAppProvider>\n  );\n};\n\nexport { Providers };\n"],"names":["queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","Providers","children","strapi","store","_jsx","StrapiAppProvider","components","library","customFields","widgets","fields","menu","router","getAdminInjectedComponents","getPlugin","plugins","rbac","runHookParallel","runHookWaterfall","name","initialValue","runHookSeries","settings","Provider","QueryClientProvider","client","AuthProvider","HistoryProvider","LanguageProvider","messages","configurations","translations","Theme","themes","NotificationsProvider","TrackingProvider","GuidedTourProvider","UnstableGuidedTourContext","ConfigurationProvider","defaultAuthLogo","authLogo","defaultMenuLogo","menuLogo","showReleaseNotification","notifications","releases"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAMA,WAAAA,GAAc,IAAIC,WAAY,CAAA;IAClCC,cAAgB,EAAA;QACdC,OAAS,EAAA;YACPC,oBAAsB,EAAA;AACxB;AACF;AACF,CAAA,CAAA;AAQMC,MAAAA,SAAAA,GAAY,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,EAAkB,GAAA;AAC5D,IAAA,qBACEC,GAACC,CAAAA,iBAAAA,EAAAA;QACCC,UAAYJ,EAAAA,MAAAA,CAAOK,OAAO,CAACD,UAAU;AACrCE,QAAAA,YAAAA,EAAcN,OAAOM,YAAY;AACjCC,QAAAA,OAAAA,EAASP,OAAOO,OAAO;QACvBC,MAAQR,EAAAA,MAAAA,CAAOK,OAAO,CAACG,MAAM;QAC7BC,IAAMT,EAAAA,MAAAA,CAAOU,MAAM,CAACD,IAAI;AACxBE,QAAAA,0BAAAA,EAA4BX,OAAOW,0BAA0B;AAC7DC,QAAAA,SAAAA,EAAWZ,OAAOY,SAAS;AAC3BC,QAAAA,OAAAA,EAASb,OAAOa,OAAO;AACvBC,QAAAA,IAAAA,EAAMd,OAAOc,IAAI;AACjBC,QAAAA,eAAAA,EAAiBf,OAAOe,eAAe;AACvCC,QAAAA,gBAAAA,EAAkB,CAACC,IAAMC,EAAAA,YAAAA,GAAiBlB,OAAOgB,gBAAgB,CAACC,MAAMC,YAAcjB,EAAAA,KAAAA,CAAAA;AACtFkB,QAAAA,aAAAA,EAAenB,OAAOmB,aAAa;QACnCC,QAAUpB,EAAAA,MAAAA,CAAOU,MAAM,CAACU,QAAQ;AAEhC,QAAA,QAAA,gBAAAlB,GAACmB,CAAAA,QAAAA,EAAAA;YAASpB,KAAOA,EAAAA,KAAAA;AACf,YAAA,QAAA,gBAAAC,GAACoB,CAAAA,mBAAAA,EAAAA;gBAAoBC,MAAQ9B,EAAAA,WAAAA;AAC3B,gBAAA,QAAA,gBAAAS,GAACsB,CAAAA,YAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAtB,GAACuB,CAAAA,eAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAvB,GAACwB,CAAAA,gBAAAA,EAAAA;4BAAiBC,QAAU3B,EAAAA,MAAAA,CAAO4B,cAAc,CAACC,YAAY;AAC5D,4BAAA,QAAA,gBAAA3B,GAAC4B,CAAAA,KAAAA,EAAAA;gCAAMC,MAAQ/B,EAAAA,MAAAA,CAAO4B,cAAc,CAACG,MAAM;AACzC,gCAAA,QAAA,gBAAA7B,GAAC8B,CAAAA,qBAAAA,EAAAA;AACC,oCAAA,QAAA,gBAAA9B,GAAC+B,CAAAA,gBAAAA,EAAAA;AACC,wCAAA,QAAA,gBAAA/B,GAACgC,CAAAA,kBAAAA,EAAAA;AACC,4CAAA,QAAA,gBAAAhC,GAACiC,CAAAA,yBAAAA,EAAAA;AACC,gDAAA,QAAA,gBAAAjC,GAACkC,CAAAA,qBAAAA,EAAAA;oDACCC,eAAiBrC,EAAAA,MAAAA,CAAO4B,cAAc,CAACU,QAAQ;oDAC/CC,eAAiBvC,EAAAA,MAAAA,CAAO4B,cAAc,CAACY,QAAQ;AAC/CC,oDAAAA,uBAAAA,EAAyBzC,MAAO4B,CAAAA,cAAc,CAACc,aAAa,CAACC,QAAQ;AAEpE5C,oDAAAA,QAAAA,EAAAA;;;;;;;;;;;;;AAc7B;;;;"}

package/dist/admin/admin/src/components/SubNav.js

@@ -6,6 +6,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
+var Tours = require('./UnstableGuidedTour/Tours.js');
 
 const Main = styled.styled(designSystem.SubNav)`
   background-color: ${({ theme })=>theme.colors.neutral0};
@@ -123,8 +124,25 @@ const Sections = ({ children, ...props })=>{
         })
     });
 };
+/**
+ * TODO:
+ * This would be better in the content-type-builder package directly but currently
+ * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list
+ */ const getGuidedTourTooltip = (sectionName)=>{
+    switch(sectionName){
+        case 'Collection Types':
+            return Tours.tours.contentTypeBuilder.CollectionTypes;
+        case 'Single Types':
+            return Tours.tours.contentTypeBuilder.SingleTypes;
+        case 'Components':
+            return Tours.tours.contentTypeBuilder.Components;
+        default:
+            return React.Fragment;
+    }
+};
 const Section = ({ label, children, link })=>{
     const listId = React.useId();
+    const GuidedTourTooltip = getGuidedTourTooltip(label);
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -146,13 +164,15 @@ const Section = ({ label, children, link })=>{
                                 })
                             })
                         }),
-                        link && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                            label: link.label,
-                            variant: "ghost",
-                            withTooltip: true,
-                            onClick: link.onClik,
-                            size: "XS",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {})
+                        link && /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltip, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                label: link.label,
+                                variant: "ghost",
+                                withTooltip: true,
+                                onClick: link.onClik,
+                                size: "XS",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {})
+                            })
                         })
                     ]
                 })

package/dist/admin/admin/src/components/SubNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.js","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <IconButton\n              label={link.label}\n              variant=\"ghost\"\n              withTooltip\n              onClick={link.onClik}\n              size=\"XS\"\n            >\n              <Plus />\n            </IconButton>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","Section","link","listId","useId","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}
+{"version":3,"file":"SubNav.js","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState, Fragment } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { tours as unstable_tours } from './UnstableGuidedTour/Tours';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst getGuidedTourTooltip = (sectionName: string) => {\n  switch (sectionName) {\n    case 'Collection Types':\n      return unstable_tours.contentTypeBuilder.CollectionTypes;\n    case 'Single Types':\n      return unstable_tours.contentTypeBuilder.SingleTypes;\n    case 'Components':\n      return unstable_tours.contentTypeBuilder.Components;\n    default:\n      return Fragment;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n}) => {\n  const listId = useId();\n  const GuidedTourTooltip = getGuidedTourTooltip(label);\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <GuidedTourTooltip>\n              <IconButton\n                label={link.label}\n                variant=\"ghost\"\n                withTooltip\n                onClick={link.onClik}\n                size=\"XS\"\n              >\n                <Plus />\n              </IconButton>\n            </GuidedTourTooltip>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","getGuidedTourTooltip","sectionName","unstable_tours","contentTypeBuilder","CollectionTypes","SingleTypes","Components","Fragment","Section","link","listId","useId","GuidedTourTooltip","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}

package/dist/admin/admin/src/components/SubNav.mjs

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useState } from 'react';
+import { useId, useState, Fragment } from 'react';
 import { SubNav as SubNav$1, Box, Flex, Typography, IconButton } from '@strapi/design-system';
 import { Plus, ChevronDown } from '@strapi/icons';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { tours } from './UnstableGuidedTour/Tours.mjs';
 
 const Main = styled(SubNav$1)`
   background-color: ${({ theme })=>theme.colors.neutral0};
@@ -121,8 +122,25 @@ const Sections = ({ children, ...props })=>{
         })
     });
 };
+/**
+ * TODO:
+ * This would be better in the content-type-builder package directly but currently
+ * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list
+ */ const getGuidedTourTooltip = (sectionName)=>{
+    switch(sectionName){
+        case 'Collection Types':
+            return tours.contentTypeBuilder.CollectionTypes;
+        case 'Single Types':
+            return tours.contentTypeBuilder.SingleTypes;
+        case 'Components':
+            return tours.contentTypeBuilder.Components;
+        default:
+            return Fragment;
+    }
+};
 const Section = ({ label, children, link })=>{
     const listId = useId();
+    const GuidedTourTooltip = getGuidedTourTooltip(label);
     return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -144,13 +162,15 @@ const Section = ({ label, children, link })=>{
                                 })
                             })
                         }),
-                        link && /*#__PURE__*/ jsx(IconButton, {
-                            label: link.label,
-                            variant: "ghost",
-                            withTooltip: true,
-                            onClick: link.onClik,
-                            size: "XS",
-                            children: /*#__PURE__*/ jsx(Plus, {})
+                        link && /*#__PURE__*/ jsx(GuidedTourTooltip, {
+                            children: /*#__PURE__*/ jsx(IconButton, {
+                                label: link.label,
+                                variant: "ghost",
+                                withTooltip: true,
+                                onClick: link.onClik,
+                                size: "XS",
+                                children: /*#__PURE__*/ jsx(Plus, {})
+                            })
                         })
                     ]
                 })

package/dist/admin/admin/src/components/SubNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n}) => {\n  const listId = useId();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <IconButton\n              label={link.label}\n              variant=\"ghost\"\n              withTooltip\n              onClick={link.onClik}\n              size=\"XS\"\n            >\n              <Plus />\n            </IconButton>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","Section","link","listId","useId","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}
+{"version":3,"file":"SubNav.mjs","sources":["../../../../../admin/src/components/SubNav.tsx"],"sourcesContent":["import { useId, useState, Fragment } from 'react';\n\nimport { Box, SubNav as DSSubNav, Flex, Typography, IconButton } from '@strapi/design-system';\nimport { ChevronDown, Plus } from '@strapi/icons';\nimport { NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { tours as unstable_tours } from './UnstableGuidedTour/Tours';\n\nconst Main = styled(DSSubNav)`\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst StyledLink = styled(NavLink)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-decoration: none;\n  height: 32px;\n\n  color: ${({ theme }) => theme.colors.neutral800};\n\n  &.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n        color: ${theme.colors.primary700};\n        font-weight: 500;\n      `;\n    }}\n  }\n\n  &:hover.active > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.primary100};\n      `;\n    }}\n  }\n\n  &:hover > div {\n    ${({ theme }) => {\n      return `\n        background-color: ${theme.colors.neutral100};\n      `;\n    }}\n  }\n\n  &:focus-visible {\n    outline-offset: -2px;\n  }\n`;\n\nconst Link = (\n  props: Omit<React.ComponentProps<typeof StyledLink>, 'label'> & {\n    label: React.ReactNode;\n    endAction?: React.ReactNode;\n  }\n) => {\n  const { label, endAction, ...rest } = props;\n  return (\n    <StyledLink {...rest}>\n      <Box width={'100%'} paddingLeft={3} paddingRight={3} borderRadius={1}>\n        <Flex justifyContent=\"space-between\" width=\"100%\" gap={1}>\n          <Typography\n            tag=\"div\"\n            lineHeight=\"32px\"\n            width=\"100%\"\n            overflow=\"hidden\"\n            style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n          >\n            {label}\n          </Typography>\n          <Flex gap={2}>{endAction}</Flex>\n        </Flex>\n      </Box>\n    </StyledLink>\n  );\n};\n\nconst StyledHeader = styled(Box)`\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding-left: ${({ theme }) => theme.spaces[5]};\n`;\n\nconst Header = ({ label }: { label: string }) => {\n  return (\n    <StyledHeader>\n      <Typography variant=\"beta\" tag=\"h2\">\n        {label}\n      </Typography>\n    </StyledHeader>\n  );\n};\n\nconst Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: string]: any }) => {\n  return (\n    <Box paddingBottom={4}>\n      <Flex tag=\"ol\" gap=\"5\" direction=\"column\" alignItems=\"stretch\" {...props}>\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\n/**\n * TODO:\n * This would be better in the content-type-builder package directly but currently\n * the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list\n */\nconst getGuidedTourTooltip = (sectionName: string) => {\n  switch (sectionName) {\n    case 'Collection Types':\n      return unstable_tours.contentTypeBuilder.CollectionTypes;\n    case 'Single Types':\n      return unstable_tours.contentTypeBuilder.SingleTypes;\n    case 'Components':\n      return unstable_tours.contentTypeBuilder.Components;\n    default:\n      return Fragment;\n  }\n};\n\nconst Section = ({\n  label,\n  children,\n  link,\n}: {\n  label: string;\n  children: React.ReactNode[];\n  link?: { label: string; onClik: () => void };\n}) => {\n  const listId = useId();\n  const GuidedTourTooltip = getGuidedTourTooltip(label);\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={2}>\n      <Box paddingLeft={5} paddingRight={5}>\n        <Flex position=\"relative\" justifyContent=\"space-between\">\n          <Flex>\n            <Box>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {label}\n              </Typography>\n            </Box>\n          </Flex>\n          {link && (\n            <GuidedTourTooltip>\n              <IconButton\n                label={link.label}\n                variant=\"ghost\"\n                withTooltip\n                onClick={link.onClik}\n                size=\"XS\"\n              >\n                <Plus />\n              </IconButton>\n            </GuidedTourTooltip>\n          )}\n        </Flex>\n      </Box>\n      <Flex\n        tag=\"ol\"\n        id={listId}\n        direction=\"column\"\n        gap=\"2px\"\n        alignItems={'stretch'}\n        marginLeft={2}\n        marginRight={2}\n      >\n        {children.map((child, index) => {\n          return <li key={index}>{child}</li>;\n        })}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst SubSectionHeader = styled.button`\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  padding: 0;\n  background: transparent;\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n\n  border-radius: ${({ theme }) => theme.borderRadius};\n\n  padding-left: ${({ theme }) => theme.spaces[3]};\n  padding-right: ${({ theme }) => theme.spaces[3]};\n  padding-top: ${({ theme }) => theme.spaces[2]};\n  padding-bottom: ${({ theme }) => theme.spaces[2]};\n\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.neutral100};\n  }\n`;\n\nconst SubSectionLinkWrapper = styled.li`\n  ${StyledLink} > div {\n    padding-left: 36px;\n  }\n`;\n\nconst SubSection = ({ label, children }: { label: string; children: React.ReactNode[] }) => {\n  const [isOpen, setOpenLinks] = useState(true);\n  const listId = useId();\n\n  const handleClick = () => {\n    setOpenLinks((prev) => !prev);\n  };\n\n  return (\n    <Box>\n      <Flex justifyContent=\"space-between\">\n        <SubSectionHeader onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>\n          <ChevronDown\n            aria-hidden\n            fill=\"neutral500\"\n            style={{\n              transform: `rotate(${isOpen ? '0deg' : '-90deg'})`,\n              transition: 'transform 0.5s',\n            }}\n          />\n          <Box paddingLeft={2}>\n            <Typography tag=\"span\" fontWeight=\"semiBold\" textColor=\"neutral800\">\n              {label}\n            </Typography>\n          </Box>\n        </SubSectionHeader>\n      </Flex>\n      {\n        <Flex\n          tag=\"ul\"\n          id={listId}\n          direction=\"column\"\n          gap=\"2px\"\n          alignItems={'stretch'}\n          style={{\n            maxHeight: isOpen ? '1000px' : 0,\n            overflow: 'hidden',\n            transition: isOpen\n              ? 'max-height 1s ease-in-out'\n              : 'max-height 0.5s cubic-bezier(0, 1, 0, 1)',\n          }}\n        >\n          {children.map((child, index) => {\n            return <SubSectionLinkWrapper key={index}>{child}</SubSectionLinkWrapper>;\n          })}\n        </Flex>\n      }\n    </Box>\n  );\n};\n\nexport const SubNav = {\n  Main,\n  Header,\n  Link,\n  Sections,\n  Section,\n  SubSection,\n};\n"],"names":["Main","styled","DSSubNav","theme","colors","neutral0","neutral150","StyledLink","NavLink","neutral800","primary100","primary700","neutral100","Link","props","label","endAction","rest","_jsx","Box","width","paddingLeft","paddingRight","borderRadius","_jsxs","Flex","justifyContent","gap","Typography","tag","lineHeight","overflow","style","textOverflow","whiteSpace","StyledHeader","spaces","Header","variant","Sections","children","paddingBottom","direction","alignItems","map","child","index","li","getGuidedTourTooltip","sectionName","unstable_tours","contentTypeBuilder","CollectionTypes","SingleTypes","Components","Fragment","Section","link","listId","useId","GuidedTourTooltip","position","textColor","IconButton","withTooltip","onClick","onClik","size","Plus","id","marginLeft","marginRight","SubSectionHeader","button","SubSectionLinkWrapper","SubSection","isOpen","setOpenLinks","useState","handleClick","prev","aria-expanded","aria-controls","ChevronDown","aria-hidden","fill","transform","transition","fontWeight","maxHeight","SubNav"],"mappings":"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"}

package/dist/admin/admin/src/components/UnstableGuidedTour/Context.js

@@ -3,7 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var immer = require('immer');
+var usePersistentState = require('../../hooks/usePersistentState.js');
 var Context = require('../Context.js');
+var Tours = require('./Tours.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -31,19 +33,27 @@ function reducer(state, action) {
             const nextStep = draft.tours[action.payload].currentStep + 1;
             draft.tours[action.payload].currentStep = nextStep;
             draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;
-        // TODO: Update local storage
         }
         if (action.type === 'skip_tour') {
             draft.tours[action.payload].isCompleted = true;
-        // TODO: Update local storage
+        }
+        if (action.type === 'set_completed_actions') {
+            draft.completedActions = [
+                ...new Set([
+                    ...draft.completedActions,
+                    ...action.payload
+                ])
+            ];
+        }
+        if (action.type === 'skip_all_tours') {
+            draft.enabled = false;
         }
     });
 }
-const UnstableGuidedTourContext = ({ children, tours: registeredTours })=>{
-    // TODO: Get local storage to init state
-    // Derive the tour state from the tours object
-    const tours = Object.keys(registeredTours).reduce((acc, tourName)=>{
-        const tourLength = Object.keys(registeredTours[tourName]).length;
+const STORAGE_KEY = 'STRAPI_GUIDED_TOUR';
+const UnstableGuidedTourContext = ({ children, enabled = true })=>{
+    const initialTourState = Object.keys(Tours.tours).reduce((acc, tourName)=>{
+        const tourLength = Object.keys(Tours.tours[tourName]).length;
         acc[tourName] = {
             currentStep: 0,
             length: tourLength,
@@ -51,9 +61,21 @@ const UnstableGuidedTourContext = ({ children, tours: registeredTours })=>{
         };
         return acc;
     }, {});
-    const [state, dispatch] = React__namespace.useReducer(reducer, {
-        tours
+    const [tours, setTours] = usePersistentState.usePersistentState(STORAGE_KEY, {
+        tours: initialTourState,
+        enabled,
+        completedActions: []
     });
+    const [state, dispatch] = React__namespace.useReducer(reducer, tours);
+    // Sync local storage
+    React__namespace.useEffect(()=>{
+        if (window.strapi.future.isEnabled('unstableGuidedTour')) {
+            setTours(state);
+        }
+    }, [
+        state,
+        setTours
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(GuidedTourProviderImpl, {
         state: state,
         dispatch: dispatch,

package/dist/admin/admin/src/components/UnstableGuidedTour/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { produce } from 'immer';\n\nimport { createContext } from '../Context';\n\nimport type { Tours } from './Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype ValidTourName = keyof Tours;\n\ntype Action =\n  | {\n      type: 'next_step';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'skip_tour';\n      payload: ValidTourName;\n    };\n\ntype Tour = Record<ValidTourName, { currentStep: number; length: number; isCompleted: boolean }>;\ntype State = {\n  tours: Tour;\n};\n\nconst [GuidedTourProviderImpl, unstableUseGuidedTour] = createContext<{\n  state: State;\n  dispatch: React.Dispatch<Action>;\n}>('UnstableGuidedTour');\n\nfunction reducer(state: State, action: Action): State {\n  return produce(state, (draft) => {\n    if (action.type === 'next_step') {\n      const nextStep = draft.tours[action.payload].currentStep + 1;\n      draft.tours[action.payload].currentStep = nextStep;\n      draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;\n      // TODO: Update local storage\n    }\n\n    if (action.type === 'skip_tour') {\n      draft.tours[action.payload].isCompleted = true;\n      // TODO: Update local storage\n    }\n  });\n}\n\nconst UnstableGuidedTourContext = ({\n  children,\n  tours: registeredTours,\n}: {\n  children: React.ReactNode;\n  // NOTE: Maybe we just import this directly instead of a prop?\n  tours: Tours;\n}) => {\n  // TODO: Get local storage to init state\n  // Derive the tour state from the tours object\n  const tours = Object.keys(registeredTours).reduce((acc, tourName) => {\n    const tourLength = Object.keys(registeredTours[tourName as ValidTourName]).length;\n\n    acc[tourName as ValidTourName] = {\n      currentStep: 0,\n      length: tourLength,\n      isCompleted: false,\n    };\n\n    return acc;\n  }, {} as Tour);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    tours,\n  });\n\n  return (\n    <GuidedTourProviderImpl state={state} dispatch={dispatch}>\n      {children}\n    </GuidedTourProviderImpl>\n  );\n};\n\nexport type { Action, State, ValidTourName };\nexport { UnstableGuidedTourContext, unstableUseGuidedTour, reducer };\n"],"names":["GuidedTourProviderImpl","unstableUseGuidedTour","createContext","reducer","state","action","produce","draft","type","nextStep","tours","payload","currentStep","isCompleted","length","UnstableGuidedTourContext","children","registeredTours","Object","keys","reduce","acc","tourName","tourLength","dispatch","React","useReducer","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,CAACA,sBAAAA,EAAwBC,qBAAsB,CAAA,GAAGC,qBAGrD,CAAA,oBAAA;AAEH,SAASC,OAAAA,CAAQC,KAAY,EAAEC,MAAc,EAAA;IAC3C,OAAOC,aAAAA,CAAQF,OAAO,CAACG,KAAAA,GAAAA;QACrB,IAAIF,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;YAC/B,MAAMC,QAAAA,GAAWF,MAAMG,KAAK,CAACL,OAAOM,OAAO,CAAC,CAACC,WAAW,GAAG,CAAA;AAC3DL,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACC,WAAW,GAAGH,QAAAA;AAC1CF,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAGJ,QAAaF,KAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACG,MAAM;;AAE3F;QAEA,IAAIT,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;AAC/BD,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAG,IAAA;;AAE5C;AACF,KAAA,CAAA;AACF;AAEA,MAAME,4BAA4B,CAAC,EACjCC,QAAQ,EACRN,KAAAA,EAAOO,eAAe,EAKvB,GAAA;;;IAGC,MAAMP,KAAAA,GAAQQ,OAAOC,IAAI,CAACF,iBAAiBG,MAAM,CAAC,CAACC,GAAKC,EAAAA,QAAAA,GAAAA;QACtD,MAAMC,UAAAA,GAAaL,OAAOC,IAAI,CAACF,eAAe,CAACK,QAAAA,CAA0B,EAAER,MAAM;QAEjFO,GAAG,CAACC,SAA0B,GAAG;YAC/BV,WAAa,EAAA,CAAA;YACbE,MAAQS,EAAAA,UAAAA;YACRV,WAAa,EAAA;AACf,SAAA;QAEA,OAAOQ,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AAEJ,IAAA,MAAM,CAACjB,KAAOoB,EAAAA,QAAAA,CAAS,GAAGC,gBAAMC,CAAAA,UAAU,CAACvB,OAAS,EAAA;AAClDO,QAAAA;AACF,KAAA,CAAA;AAEA,IAAA,qBACEiB,cAAC3B,CAAAA,sBAAAA,EAAAA;QAAuBI,KAAOA,EAAAA,KAAAA;QAAOoB,QAAUA,EAAAA,QAAAA;AAC7CR,QAAAA,QAAAA,EAAAA;;AAGP;;;;;;"}
+{"version":3,"file":"Context.js","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { produce } from 'immer';\n\nimport { GetGuidedTourMeta } from '../../../../shared/contracts/admin';\nimport { usePersistentState } from '../../hooks/usePersistentState';\nimport { createContext } from '../Context';\n\nimport { type Tours, tours as guidedTours } from './Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype ValidTourName = keyof Tours;\n\nexport type ExtendedCompletedActions = (\n  | GetGuidedTourMeta.Response['data']['completedActions'][number]\n  | 'didCopyApiToken'\n)[];\n\ntype Action =\n  | {\n      type: 'next_step';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'skip_tour';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'set_completed_actions';\n      payload: ExtendedCompletedActions;\n    }\n  | {\n      type: 'skip_all_tours';\n    };\n\ntype Tour = Record<ValidTourName, { currentStep: number; length: number; isCompleted: boolean }>;\ntype State = {\n  tours: Tour;\n  enabled: boolean;\n  completedActions: ExtendedCompletedActions;\n};\n\nconst [GuidedTourProviderImpl, unstableUseGuidedTour] = createContext<{\n  state: State;\n  dispatch: React.Dispatch<Action>;\n}>('UnstableGuidedTour');\n\nfunction reducer(state: State, action: Action): State {\n  return produce(state, (draft) => {\n    if (action.type === 'next_step') {\n      const nextStep = draft.tours[action.payload].currentStep + 1;\n      draft.tours[action.payload].currentStep = nextStep;\n      draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;\n    }\n\n    if (action.type === 'skip_tour') {\n      draft.tours[action.payload].isCompleted = true;\n    }\n\n    if (action.type === 'set_completed_actions') {\n      draft.completedActions = [...new Set([...draft.completedActions, ...action.payload])];\n    }\n\n    if (action.type === 'skip_all_tours') {\n      draft.enabled = false;\n    }\n  });\n}\n\nconst STORAGE_KEY = 'STRAPI_GUIDED_TOUR';\n\nconst UnstableGuidedTourContext = ({\n  children,\n  enabled = true,\n}: {\n  children: React.ReactNode;\n  enabled?: boolean;\n}) => {\n  const initialTourState = Object.keys(guidedTours).reduce((acc, tourName) => {\n    const tourLength = Object.keys(guidedTours[tourName as ValidTourName]).length;\n    acc[tourName as ValidTourName] = {\n      currentStep: 0,\n      length: tourLength,\n      isCompleted: false,\n    };\n\n    return acc;\n  }, {} as Tour);\n\n  const [tours, setTours] = usePersistentState<State>(STORAGE_KEY, {\n    tours: initialTourState,\n    enabled,\n    completedActions: [],\n  });\n  const [state, dispatch] = React.useReducer(reducer, tours);\n\n  // Sync local storage\n  React.useEffect(() => {\n    if (window.strapi.future.isEnabled('unstableGuidedTour')) {\n      setTours(state);\n    }\n  }, [state, setTours]);\n\n  return (\n    <GuidedTourProviderImpl state={state} dispatch={dispatch}>\n      {children}\n    </GuidedTourProviderImpl>\n  );\n};\n\nexport type { Action, State, ValidTourName };\nexport { UnstableGuidedTourContext, unstableUseGuidedTour, reducer };\n"],"names":["GuidedTourProviderImpl","unstableUseGuidedTour","createContext","reducer","state","action","produce","draft","type","nextStep","tours","payload","currentStep","isCompleted","length","completedActions","Set","enabled","STORAGE_KEY","UnstableGuidedTourContext","children","initialTourState","Object","keys","guidedTours","reduce","acc","tourName","tourLength","setTours","usePersistentState","dispatch","React","useReducer","useEffect","window","strapi","future","isEnabled","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,CAACA,sBAAAA,EAAwBC,qBAAsB,CAAA,GAAGC,qBAGrD,CAAA,oBAAA;AAEH,SAASC,OAAAA,CAAQC,KAAY,EAAEC,MAAc,EAAA;IAC3C,OAAOC,aAAAA,CAAQF,OAAO,CAACG,KAAAA,GAAAA;QACrB,IAAIF,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;YAC/B,MAAMC,QAAAA,GAAWF,MAAMG,KAAK,CAACL,OAAOM,OAAO,CAAC,CAACC,WAAW,GAAG,CAAA;AAC3DL,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACC,WAAW,GAAGH,QAAAA;AAC1CF,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAGJ,QAAaF,KAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACG,MAAM;AAC3F;QAEA,IAAIT,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;AAC/BD,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAG,IAAA;AAC5C;QAEA,IAAIR,MAAAA,CAAOG,IAAI,KAAK,uBAAyB,EAAA;AAC3CD,YAAAA,KAAAA,CAAMQ,gBAAgB,GAAG;AAAI,gBAAA,GAAA,IAAIC,GAAI,CAAA;AAAIT,oBAAAA,GAAAA,KAAAA,CAAMQ,gBAAgB;AAAKV,oBAAAA,GAAAA,MAAAA,CAAOM;AAAQ,iBAAA;AAAE,aAAA;AACvF;QAEA,IAAIN,MAAAA,CAAOG,IAAI,KAAK,gBAAkB,EAAA;AACpCD,YAAAA,KAAAA,CAAMU,OAAO,GAAG,KAAA;AAClB;AACF,KAAA,CAAA;AACF;AAEA,MAAMC,WAAc,GAAA,oBAAA;AAEpB,MAAMC,4BAA4B,CAAC,EACjCC,QAAQ,EACRH,OAAAA,GAAU,IAAI,EAIf,GAAA;IACC,MAAMI,gBAAAA,GAAmBC,OAAOC,IAAI,CAACC,aAAaC,MAAM,CAAC,CAACC,GAAKC,EAAAA,QAAAA,GAAAA;QAC7D,MAAMC,UAAAA,GAAaN,OAAOC,IAAI,CAACC,WAAW,CAACG,QAAAA,CAA0B,EAAEb,MAAM;QAC7EY,GAAG,CAACC,SAA0B,GAAG;YAC/Bf,WAAa,EAAA,CAAA;YACbE,MAAQc,EAAAA,UAAAA;YACRf,WAAa,EAAA;AACf,SAAA;QAEA,OAAOa,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AAEJ,IAAA,MAAM,CAAChB,KAAAA,EAAOmB,QAAS,CAAA,GAAGC,sCAA0BZ,WAAa,EAAA;QAC/DR,KAAOW,EAAAA,gBAAAA;AACPJ,QAAAA,OAAAA;AACAF,QAAAA,gBAAAA,EAAkB;AACpB,KAAA,CAAA;AACA,IAAA,MAAM,CAACX,KAAO2B,EAAAA,QAAAA,CAAS,GAAGC,gBAAMC,CAAAA,UAAU,CAAC9B,OAASO,EAAAA,KAAAA,CAAAA;;AAGpDsB,IAAAA,gBAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,IAAIC,OAAOC,MAAM,CAACC,MAAM,CAACC,SAAS,CAAC,oBAAuB,CAAA,EAAA;YACxDT,QAASzB,CAAAA,KAAAA,CAAAA;AACX;KACC,EAAA;AAACA,QAAAA,KAAAA;AAAOyB,QAAAA;AAAS,KAAA,CAAA;AAEpB,IAAA,qBACEU,cAACvC,CAAAA,sBAAAA,EAAAA;QAAuBI,KAAOA,EAAAA,KAAAA;QAAO2B,QAAUA,EAAAA,QAAAA;AAC7CX,QAAAA,QAAAA,EAAAA;;AAGP;;;;;;"}

package/dist/admin/admin/src/components/UnstableGuidedTour/Context.mjs

@@ -1,7 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { produce } from 'immer';
+import { usePersistentState } from '../../hooks/usePersistentState.mjs';
 import { createContext } from '../Context.mjs';
+import { tours } from './Tours.mjs';
 
 const [GuidedTourProviderImpl, unstableUseGuidedTour] = createContext('UnstableGuidedTour');
 function reducer(state, action) {
@@ -10,19 +12,27 @@ function reducer(state, action) {
             const nextStep = draft.tours[action.payload].currentStep + 1;
             draft.tours[action.payload].currentStep = nextStep;
             draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;
-        // TODO: Update local storage
         }
         if (action.type === 'skip_tour') {
             draft.tours[action.payload].isCompleted = true;
-        // TODO: Update local storage
+        }
+        if (action.type === 'set_completed_actions') {
+            draft.completedActions = [
+                ...new Set([
+                    ...draft.completedActions,
+                    ...action.payload
+                ])
+            ];
+        }
+        if (action.type === 'skip_all_tours') {
+            draft.enabled = false;
         }
     });
 }
-const UnstableGuidedTourContext = ({ children, tours: registeredTours })=>{
-    // TODO: Get local storage to init state
-    // Derive the tour state from the tours object
-    const tours = Object.keys(registeredTours).reduce((acc, tourName)=>{
-        const tourLength = Object.keys(registeredTours[tourName]).length;
+const STORAGE_KEY = 'STRAPI_GUIDED_TOUR';
+const UnstableGuidedTourContext = ({ children, enabled = true })=>{
+    const initialTourState = Object.keys(tours).reduce((acc, tourName)=>{
+        const tourLength = Object.keys(tours[tourName]).length;
         acc[tourName] = {
             currentStep: 0,
             length: tourLength,
@@ -30,9 +40,21 @@ const UnstableGuidedTourContext = ({ children, tours: registeredTours })=>{
         };
         return acc;
     }, {});
-    const [state, dispatch] = React.useReducer(reducer, {
-        tours
+    const [tours$1, setTours] = usePersistentState(STORAGE_KEY, {
+        tours: initialTourState,
+        enabled,
+        completedActions: []
     });
+    const [state, dispatch] = React.useReducer(reducer, tours$1);
+    // Sync local storage
+    React.useEffect(()=>{
+        if (window.strapi.future.isEnabled('unstableGuidedTour')) {
+            setTours(state);
+        }
+    }, [
+        state,
+        setTours
+    ]);
     return /*#__PURE__*/ jsx(GuidedTourProviderImpl, {
         state: state,
         dispatch: dispatch,

package/dist/admin/admin/src/components/UnstableGuidedTour/Context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { produce } from 'immer';\n\nimport { createContext } from '../Context';\n\nimport type { Tours } from './Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype ValidTourName = keyof Tours;\n\ntype Action =\n  | {\n      type: 'next_step';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'skip_tour';\n      payload: ValidTourName;\n    };\n\ntype Tour = Record<ValidTourName, { currentStep: number; length: number; isCompleted: boolean }>;\ntype State = {\n  tours: Tour;\n};\n\nconst [GuidedTourProviderImpl, unstableUseGuidedTour] = createContext<{\n  state: State;\n  dispatch: React.Dispatch<Action>;\n}>('UnstableGuidedTour');\n\nfunction reducer(state: State, action: Action): State {\n  return produce(state, (draft) => {\n    if (action.type === 'next_step') {\n      const nextStep = draft.tours[action.payload].currentStep + 1;\n      draft.tours[action.payload].currentStep = nextStep;\n      draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;\n      // TODO: Update local storage\n    }\n\n    if (action.type === 'skip_tour') {\n      draft.tours[action.payload].isCompleted = true;\n      // TODO: Update local storage\n    }\n  });\n}\n\nconst UnstableGuidedTourContext = ({\n  children,\n  tours: registeredTours,\n}: {\n  children: React.ReactNode;\n  // NOTE: Maybe we just import this directly instead of a prop?\n  tours: Tours;\n}) => {\n  // TODO: Get local storage to init state\n  // Derive the tour state from the tours object\n  const tours = Object.keys(registeredTours).reduce((acc, tourName) => {\n    const tourLength = Object.keys(registeredTours[tourName as ValidTourName]).length;\n\n    acc[tourName as ValidTourName] = {\n      currentStep: 0,\n      length: tourLength,\n      isCompleted: false,\n    };\n\n    return acc;\n  }, {} as Tour);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    tours,\n  });\n\n  return (\n    <GuidedTourProviderImpl state={state} dispatch={dispatch}>\n      {children}\n    </GuidedTourProviderImpl>\n  );\n};\n\nexport type { Action, State, ValidTourName };\nexport { UnstableGuidedTourContext, unstableUseGuidedTour, reducer };\n"],"names":["GuidedTourProviderImpl","unstableUseGuidedTour","createContext","reducer","state","action","produce","draft","type","nextStep","tours","payload","currentStep","isCompleted","length","UnstableGuidedTourContext","children","registeredTours","Object","keys","reduce","acc","tourName","tourLength","dispatch","React","useReducer","_jsx"],"mappings":";;;;;AA6BA,MAAM,CAACA,sBAAAA,EAAwBC,qBAAsB,CAAA,GAAGC,aAGrD,CAAA,oBAAA;AAEH,SAASC,OAAAA,CAAQC,KAAY,EAAEC,MAAc,EAAA;IAC3C,OAAOC,OAAAA,CAAQF,OAAO,CAACG,KAAAA,GAAAA;QACrB,IAAIF,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;YAC/B,MAAMC,QAAAA,GAAWF,MAAMG,KAAK,CAACL,OAAOM,OAAO,CAAC,CAACC,WAAW,GAAG,CAAA;AAC3DL,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACC,WAAW,GAAGH,QAAAA;AAC1CF,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAGJ,QAAaF,KAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACG,MAAM;;AAE3F;QAEA,IAAIT,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;AAC/BD,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAG,IAAA;;AAE5C;AACF,KAAA,CAAA;AACF;AAEA,MAAME,4BAA4B,CAAC,EACjCC,QAAQ,EACRN,KAAAA,EAAOO,eAAe,EAKvB,GAAA;;;IAGC,MAAMP,KAAAA,GAAQQ,OAAOC,IAAI,CAACF,iBAAiBG,MAAM,CAAC,CAACC,GAAKC,EAAAA,QAAAA,GAAAA;QACtD,MAAMC,UAAAA,GAAaL,OAAOC,IAAI,CAACF,eAAe,CAACK,QAAAA,CAA0B,EAAER,MAAM;QAEjFO,GAAG,CAACC,SAA0B,GAAG;YAC/BV,WAAa,EAAA,CAAA;YACbE,MAAQS,EAAAA,UAAAA;YACRV,WAAa,EAAA;AACf,SAAA;QAEA,OAAOQ,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AAEJ,IAAA,MAAM,CAACjB,KAAOoB,EAAAA,QAAAA,CAAS,GAAGC,KAAMC,CAAAA,UAAU,CAACvB,OAAS,EAAA;AAClDO,QAAAA;AACF,KAAA,CAAA;AAEA,IAAA,qBACEiB,GAAC3B,CAAAA,sBAAAA,EAAAA;QAAuBI,KAAOA,EAAAA,KAAAA;QAAOoB,QAAUA,EAAAA,QAAAA;AAC7CR,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}
+{"version":3,"file":"Context.mjs","sources":["../../../../../../admin/src/components/UnstableGuidedTour/Context.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { produce } from 'immer';\n\nimport { GetGuidedTourMeta } from '../../../../shared/contracts/admin';\nimport { usePersistentState } from '../../hooks/usePersistentState';\nimport { createContext } from '../Context';\n\nimport { type Tours, tours as guidedTours } from './Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * GuidedTourProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype ValidTourName = keyof Tours;\n\nexport type ExtendedCompletedActions = (\n  | GetGuidedTourMeta.Response['data']['completedActions'][number]\n  | 'didCopyApiToken'\n)[];\n\ntype Action =\n  | {\n      type: 'next_step';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'skip_tour';\n      payload: ValidTourName;\n    }\n  | {\n      type: 'set_completed_actions';\n      payload: ExtendedCompletedActions;\n    }\n  | {\n      type: 'skip_all_tours';\n    };\n\ntype Tour = Record<ValidTourName, { currentStep: number; length: number; isCompleted: boolean }>;\ntype State = {\n  tours: Tour;\n  enabled: boolean;\n  completedActions: ExtendedCompletedActions;\n};\n\nconst [GuidedTourProviderImpl, unstableUseGuidedTour] = createContext<{\n  state: State;\n  dispatch: React.Dispatch<Action>;\n}>('UnstableGuidedTour');\n\nfunction reducer(state: State, action: Action): State {\n  return produce(state, (draft) => {\n    if (action.type === 'next_step') {\n      const nextStep = draft.tours[action.payload].currentStep + 1;\n      draft.tours[action.payload].currentStep = nextStep;\n      draft.tours[action.payload].isCompleted = nextStep === draft.tours[action.payload].length;\n    }\n\n    if (action.type === 'skip_tour') {\n      draft.tours[action.payload].isCompleted = true;\n    }\n\n    if (action.type === 'set_completed_actions') {\n      draft.completedActions = [...new Set([...draft.completedActions, ...action.payload])];\n    }\n\n    if (action.type === 'skip_all_tours') {\n      draft.enabled = false;\n    }\n  });\n}\n\nconst STORAGE_KEY = 'STRAPI_GUIDED_TOUR';\n\nconst UnstableGuidedTourContext = ({\n  children,\n  enabled = true,\n}: {\n  children: React.ReactNode;\n  enabled?: boolean;\n}) => {\n  const initialTourState = Object.keys(guidedTours).reduce((acc, tourName) => {\n    const tourLength = Object.keys(guidedTours[tourName as ValidTourName]).length;\n    acc[tourName as ValidTourName] = {\n      currentStep: 0,\n      length: tourLength,\n      isCompleted: false,\n    };\n\n    return acc;\n  }, {} as Tour);\n\n  const [tours, setTours] = usePersistentState<State>(STORAGE_KEY, {\n    tours: initialTourState,\n    enabled,\n    completedActions: [],\n  });\n  const [state, dispatch] = React.useReducer(reducer, tours);\n\n  // Sync local storage\n  React.useEffect(() => {\n    if (window.strapi.future.isEnabled('unstableGuidedTour')) {\n      setTours(state);\n    }\n  }, [state, setTours]);\n\n  return (\n    <GuidedTourProviderImpl state={state} dispatch={dispatch}>\n      {children}\n    </GuidedTourProviderImpl>\n  );\n};\n\nexport type { Action, State, ValidTourName };\nexport { UnstableGuidedTourContext, unstableUseGuidedTour, reducer };\n"],"names":["GuidedTourProviderImpl","unstableUseGuidedTour","createContext","reducer","state","action","produce","draft","type","nextStep","tours","payload","currentStep","isCompleted","length","completedActions","Set","enabled","STORAGE_KEY","UnstableGuidedTourContext","children","initialTourState","Object","keys","guidedTours","reduce","acc","tourName","tourLength","setTours","usePersistentState","dispatch","React","useReducer","useEffect","window","strapi","future","isEnabled","_jsx"],"mappings":";;;;;;;AA6CA,MAAM,CAACA,sBAAAA,EAAwBC,qBAAsB,CAAA,GAAGC,aAGrD,CAAA,oBAAA;AAEH,SAASC,OAAAA,CAAQC,KAAY,EAAEC,MAAc,EAAA;IAC3C,OAAOC,OAAAA,CAAQF,OAAO,CAACG,KAAAA,GAAAA;QACrB,IAAIF,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;YAC/B,MAAMC,QAAAA,GAAWF,MAAMG,KAAK,CAACL,OAAOM,OAAO,CAAC,CAACC,WAAW,GAAG,CAAA;AAC3DL,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACC,WAAW,GAAGH,QAAAA;AAC1CF,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAGJ,QAAaF,KAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACG,MAAM;AAC3F;QAEA,IAAIT,MAAAA,CAAOG,IAAI,KAAK,WAAa,EAAA;AAC/BD,YAAAA,KAAAA,CAAMG,KAAK,CAACL,MAAAA,CAAOM,OAAO,CAAC,CAACE,WAAW,GAAG,IAAA;AAC5C;QAEA,IAAIR,MAAAA,CAAOG,IAAI,KAAK,uBAAyB,EAAA;AAC3CD,YAAAA,KAAAA,CAAMQ,gBAAgB,GAAG;AAAI,gBAAA,GAAA,IAAIC,GAAI,CAAA;AAAIT,oBAAAA,GAAAA,KAAAA,CAAMQ,gBAAgB;AAAKV,oBAAAA,GAAAA,MAAAA,CAAOM;AAAQ,iBAAA;AAAE,aAAA;AACvF;QAEA,IAAIN,MAAAA,CAAOG,IAAI,KAAK,gBAAkB,EAAA;AACpCD,YAAAA,KAAAA,CAAMU,OAAO,GAAG,KAAA;AAClB;AACF,KAAA,CAAA;AACF;AAEA,MAAMC,WAAc,GAAA,oBAAA;AAEpB,MAAMC,4BAA4B,CAAC,EACjCC,QAAQ,EACRH,OAAAA,GAAU,IAAI,EAIf,GAAA;IACC,MAAMI,gBAAAA,GAAmBC,OAAOC,IAAI,CAACC,OAAaC,MAAM,CAAC,CAACC,GAAKC,EAAAA,QAAAA,GAAAA;QAC7D,MAAMC,UAAAA,GAAaN,OAAOC,IAAI,CAACC,KAAW,CAACG,QAAAA,CAA0B,EAAEb,MAAM;QAC7EY,GAAG,CAACC,SAA0B,GAAG;YAC/Bf,WAAa,EAAA,CAAA;YACbE,MAAQc,EAAAA,UAAAA;YACRf,WAAa,EAAA;AACf,SAAA;QAEA,OAAOa,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AAEJ,IAAA,MAAM,CAAChB,OAAAA,EAAOmB,QAAS,CAAA,GAAGC,mBAA0BZ,WAAa,EAAA;QAC/DR,KAAOW,EAAAA,gBAAAA;AACPJ,QAAAA,OAAAA;AACAF,QAAAA,gBAAAA,EAAkB;AACpB,KAAA,CAAA;AACA,IAAA,MAAM,CAACX,KAAO2B,EAAAA,QAAAA,CAAS,GAAGC,KAAMC,CAAAA,UAAU,CAAC9B,OAASO,EAAAA,OAAAA,CAAAA;;AAGpDsB,IAAAA,KAAAA,CAAME,SAAS,CAAC,IAAA;AACd,QAAA,IAAIC,OAAOC,MAAM,CAACC,MAAM,CAACC,SAAS,CAAC,oBAAuB,CAAA,EAAA;YACxDT,QAASzB,CAAAA,KAAAA,CAAAA;AACX;KACC,EAAA;AAACA,QAAAA,KAAAA;AAAOyB,QAAAA;AAAS,KAAA,CAAA;AAEpB,IAAA,qBACEU,GAACvC,CAAAA,sBAAAA,EAAAA;QAAuBI,KAAOA,EAAAA,KAAAA;QAAO2B,QAAUA,EAAAA,QAAAA;AAC7CX,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}