Add scope selector to the documentation

packages/docs/.storybook/addon-drop-in-css/Tool.tsx

@@ -28,9 +28,14 @@ export const Tool = () => {
 
   return (
     <IconButton
+      autoFocus={null}
+      rev={null}
+      content={null}
+      nonce={null}
+      rel={null}
       key={TOOL_ID}
-      active={active}
       title={ADDON_TITLE}
+      active={active}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-gh-repository/Tool.tsx

@@ -7,9 +7,14 @@ export const Tool = () => {
     <>
       <Separator />
       <IconButton
+        autoFocus={null}
+        rev={null}
+        content={null}
+        nonce={null}
+        rel={null}
         key={TOOL_ID}
-        active={false}
         title={ADDON_NAME}
+        active={false}
       >
 
         <A target='_blank' href={REPOSITORY_URL}>

packages/docs/.storybook/addon-minicart-css/Tool.tsx

@@ -28,9 +28,14 @@ export const Tool = () => {
 
   return (
     <IconButton
+      autoFocus={null}
+      rev={null}
+      content={null}
+      nonce={null}
+      rel={null}
       key={TOOL_ID}
-      active={active}
       title={ADDON_TITLE}
+      active={active}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-scope-selector/Tool.tsx

@@ -0,0 +1,63 @@
+import { IconButton, Icons, Separator, WithTooltip, TooltipLinkList,  } from '@storybook/components'
+import React, { useCallback } from 'react'
+import { SCOPES, PARAM_KEY, getSelectedScopeKey, ADDON_TITLE, TOOL_ID } from './constants'
+import { styled, color } from "@storybook/theming"
+
+const scopes = Object.keys(SCOPES) as (keyof typeof SCOPES)[]
+
+type Scope = keyof typeof SCOPES
+
+export const Tool = () => {
+  const isActive = useCallback(
+    (scope: Scope) => {
+      return getSelectedScopeKey() === scope
+    },
+    []
+  )
+
+  return (
+    <>
+      <Separator />
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        tooltip={() => (
+          <TooltipLinkList
+            links={scopes.map((scope) => ({
+              id: scope,
+              title: <LinkTitle active={isActive(scope)}>{scope}</LinkTitle>,
+              right: <LinkIcon icon="check" width={12} height={12} active={isActive(scope)} />,
+              onClick: () => {
+                localStorage.setItem(PARAM_KEY, scope)
+                location.reload()
+              },
+              active: isActive(scope),
+            }))}
+          />
+        )}
+      >
+        <IconButton
+          autoFocus={null}
+          rev={null}
+          content={null}
+          nonce={null}
+          rel={null}
+          key={TOOL_ID}
+          title={ADDON_TITLE}
+          active={scopes.some(isActive)}
+        >
+          <Icons icon="basket" />&nbsp;&nbsp;{getSelectedScopeKey()}
+        </IconButton>
+      </WithTooltip>
+    </>
+  )
+}
+
+const LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({
+  color: active ? color.secondary : "inherit",
+}))
+
+const LinkIcon = styled(Icons)<{ active?: boolean }>(({ active }) => ({
+  opacity: active ? 1 : 0,
+  path: { fill: active ? color.secondary : "inherit" },
+}))

packages/docs/.storybook/addon-scope-selector/constants.ts

@@ -0,0 +1,23 @@
+export const DESCRIPTION = 'Select an authorization scope.'
+export const ADDON_ID = 'addon-scope-selector' as const
+export const ADDON_TITLE = DESCRIPTION
+export const TOOL_ID = `${ADDON_ID}/tool` as const
+export const PARAM_KEY = ADDON_ID
+export const SCOPES = {
+  'market: USA': 'market:11709',
+  'market: Europe': 'market:11708'
+} as const
+
+export type Scope = keyof typeof SCOPES
+
+export function getSelectedScopeKey() {
+  const fromLocalStorage = localStorage.getItem(PARAM_KEY) ?? ''
+  const availableScopes = Object.keys(SCOPES)
+
+  return (availableScopes.includes(fromLocalStorage) ? fromLocalStorage : availableScopes[0]) as Scope
+}
+
+export function getSelectedScopeValue() {
+  const selectedScopeKey = getSelectedScopeKey()
+  return SCOPES[selectedScopeKey]
+}

packages/docs/.storybook/addon-scope-selector/manager.tsx

@@ -0,0 +1,13 @@
+import { addons, types } from '@storybook/addons'
+import React from 'react'
+import { Tool } from './Tool'
+import { ADDON_ID, ADDON_TITLE } from './constants'
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: ADDON_TITLE,
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <Tool />,
+  })
+})

packages/docs/.storybook/main.ts

@@ -15,7 +15,8 @@ const storybookConfig: StorybookConfig = {
   managerEntries: [
     require.resolve('./addon-drop-in-css/manager.tsx'),
     require.resolve('./addon-minicart-css/manager.tsx'),
-    require.resolve('./addon-gh-repository/manager.tsx')
+    require.resolve('./addon-scope-selector/manager.tsx'),
+    require.resolve('./addon-gh-repository/manager.tsx'),
   ],
   framework: {
     name: '@storybook/html-webpack5',

packages/docs/.storybook/preview.ts

@@ -1,8 +1,9 @@
 import { defineCustomElements } from '@commercelayer/drop-in.js/dist/loader'
 import { Preview } from '@storybook/html'
-import { clConfig } from '../stories/assets/constants'
+import { createConfig } from '../stories/assets/constants'
 import { FILENAME as DROP_IN_CSS_FILENAME, PARAM_KEY as DROP_IN_CSS_PARAM_KEY } from './addon-drop-in-css/constants'
 import { FILENAME as MINICART_CSS_FILENAME, PARAM_KEY as MINICART_CSS_PARAM_KEY } from './addon-minicart-css/constants'
+import { getSelectedScopeValue } from './addon-scope-selector/constants'
 
 import customElements, { type JsonDocsProp } from '@commercelayer/drop-in.js/dist/custom-elements'
 
@@ -150,9 +151,7 @@ const preview: Preview = {
     },
     (story) => {
       // @ts-expect-error
-      window.commercelayerConfig = {
-        ...clConfig
-      }
+      window.commercelayerConfig = createConfig(getSelectedScopeValue())
 
       return story()
     },

packages/docs/stories/assets/constants.ts

@@ -8,18 +8,20 @@ export const codes = {
 }
 
 // // stg
-// export const clConfig = {
+// // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+// export const createConfig = (scope: string) => ({
 //   clientId: '2oh-47l4PN_yb8p4mp7AxUsb-Ue3e7tBqteoZcQM-nU',
 //   slug: 'drop-in-js-stg',
 //   scope: 'market:545',
 //   debug: 'all',
 //   domain: 'commercelayer.co'
-// }
+// })
 
 // prd
-export const clConfig = {
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const createConfig = (scope: string) => ({
   clientId: 'kuSKPbeKbU9LG9LjndzieKWRcfiXFuEfO0OYHXKH9J8',
   slug: 'drop-in-js',
-  scope: 'market:11709',
+  scope,
   debug: 'all'
-}
+})

packages/docs/stories/getting-started.mdx

@@ -1,6 +1,7 @@
 import { Meta, Source } from '@storybook/blocks'
 import { linkTo } from '@storybook/addon-links'
 import { Alert } from './assets/components'
+import { getSelectedScopeValue } from '../.storybook/addon-scope-selector/constants'
 
 <Meta title="Getting started" />
 
@@ -30,7 +31,7 @@ Assuming you already have a Commerce Layer account ([sign up](https://dashboard.
     window.commercelayerConfig = {
       clientId: 'kuSKPbeKbU9LG9LjndzieKWRcfiXFuEfO0OYHXKH9J8',
       slug: 'drop-in-js',
-      scope: 'market:11709',
+      scope: '${getSelectedScopeValue()}',
       debug: 'all', // default is 'none'
       orderReturnUrl: 'https://example.com' // optional
     }

packages/docs/stories/introduction.stories.ts

@@ -53,7 +53,7 @@ export const Basic: StoryFn = () => {
       <section class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 text-center">
 
         <!-- 1st product: Gray Five-Panel Cap with White Logo -->
-        <div class="flex flex-col items-start">
+        <div class="flex flex-col">
           <div class="h-80 sm:h-64">
             <img
               src="https://data.commercelayer.app/seed/images/skus/${codes.outOfStock}_FLAT.png"
@@ -83,7 +83,7 @@ export const Basic: StoryFn = () => {
         </div>
 
         <!-- Editorial Banner -->
-        <div class="flex flex-col items-start">
+        <div class="flex flex-col">
           <cl-identity-status class="h-full" type="guest">
             <img class="object-contain position-top" src="register.jpg" />
           </cl-identity-status>