@stack-spot/portal-layout 0.0.62 → 0.0.63

package/src/components/tour/PortalSwitcherStep.tsx

@@ -0,0 +1,36 @@
+import { Box, Image, Text } from '@citric/core'
+import { TourStep, tourStepBuilder } from '@stack-spot/portal-components'
+import { useTranslate } from '@stack-spot/portal-translate'
+export const usePortalSwitcherStep = (): TourStep => {
+  const t = useTranslate(translations)
+  return tourStepBuilder({
+    selector: '.portal-switcher',
+    title: t.title,
+    content: <>
+      <Image src="https://marketing.stackspot.com/switch-v2.gif" alt={t.imageAlt} />
+      <Box px={5} py={3}>
+        <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
+      </Box>
+    </>,
+    position: 'right',
+    style: {
+      width: '300px',
+    },
+  })
+}
+
+
+
+
+const translations = {
+  en: {
+    title: 'Expand Your Horizons with Stackspot',
+    description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
+    imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
+  },
+  pt: {
+    title: 'Expanda Seus Horizontes com Stackspot',
+    description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
+    imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
+  },
+}

package/src/index.ts

@@ -9,7 +9,6 @@ export { Toaster } from './components/Toaster'
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
-export { TextWithPointingArrow } from './components/tour/utils'
 export * from './components/types'
 export * from './elements'
 export * from './errors'

package/dist/components/tour/Navigation.d.ts

@@ -1,8 +0,0 @@
-import { ProviderProps } from '@reactour/tour';
-import '@stack-spot/portal-theme/dist/theme.css';
-import React from 'react';
-type ComponentsDict = Exclude<ProviderProps['components'], undefined>;
-type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>;
-export declare const CustomNavigation: ({ currentStep, steps, setCurrentStep }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Navigation.d.ts.map

package/dist/components/tour/Navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,yCAAyC,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAA;AACrE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAA;AAE7F,eAAO,MAAM,gBAAgB,2CAA4C,eAAe,4CAiBvF,CAAA"}

package/dist/components/tour/Navigation.js

@@ -1,15 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button, Flex, Text } from '@citric/core';
-import '@stack-spot/portal-theme/dist/theme.css';
-import { useTranslate } from '@stack-spot/portal-translate';
-import { finishTour } from './utils.js';
-export const CustomNavigation = ({ currentStep, steps, setCurrentStep }) => {
-    const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
-    return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep > 1 &&
-                        _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => setCurrentStep(currentStep - 1), size: "sm", colorScheme: "light", children: t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
-                            if (currentStep + 1 == steps.length)
-                                finishTour();
-                            setCurrentStep(currentStep + 1);
-                        }, size: "sm", colorScheme: "light", children: "ok" })] })] });
-};
-//# sourceMappingURL=Navigation.js.map

package/dist/components/tour/Navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAmB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,GAAG,CAAC;wBACd,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YACjH,CAAC,CAAC,IAAI,GACA,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,IAAI,WAAW,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;gCAAE,UAAU,EAAE,CAAA;4BACjD,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,mBAEvB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}

package/src/components/tour/Navigation.tsx

@@ -1,29 +0,0 @@
-import { Button, Flex, Text } from '@citric/core'
-import { ProviderProps } from '@reactour/tour'
-import '@stack-spot/portal-theme/dist/theme.css'
-import { useTranslate } from '@stack-spot/portal-translate'
-import React from 'react'
-import { finishTour } from './utils'
-
-
-type ComponentsDict = Exclude<ProviderProps['components'], undefined>
-type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>
-
-export const CustomNavigation = ({ currentStep, steps, setCurrentStep }: NavigationProps) => {
-  const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } })
-  return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between">
-    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
-    <Flex sx={{ gap: '8px' }}>
-      {currentStep > 1 &&
-        <Button sx={{ paddingInline: '20px' }} onClick={() => setCurrentStep(currentStep - 1)} size="sm" colorScheme="light">
-          {t.back}
-        </Button>}
-      <Button sx={{ paddingInline: '20px' }} onClick={() => {
-        if (currentStep + 1 == steps.length) finishTour()
-        setCurrentStep(currentStep + 1)
-      }} size="sm" colorScheme="light">
-        ok
-      </Button>
-    </Flex>
-  </Flex>
-}

package/src/components/tour/config.tsx

@@ -1,23 +0,0 @@
-import { ProviderProps } from '@reactour/tour'
-import { CustomNavigation } from './Navigation'
-import { hasFinishedTour } from './utils'
-
-export const defaultTourConfig: () => Omit<ProviderProps, 'children'> = () => ({
-  steps: [],
-  defaultOpen: !hasFinishedTour(),
-  showBadge: false,
-  showDots: false,
-  showPrevNextButtons: false,
-  showCloseButton: false,
-  styles: {
-    popover: (props) => ({
-      ...props,
-      boxShadow: 'unset',
-      backgroundColor: 'transparent',
-      padding: '0px 14px', // TODO: find a way to make paddings on y axis so it's possible to use the the pointing arrow.
-    }),
-  },
-  components: {
-    Navigation: CustomNavigation,
-  },
-})

package/src/components/tour/steps/PortalSwitcherStep.tsx

@@ -1,47 +0,0 @@
-import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-import { StepType, useTour } from '@reactour/tour'
-import { useTranslate } from '@stack-spot/portal-translate'
-import { TextWithPointingArrow, finishTour } from '../utils'
-
-const PortalSwitcherStep = () => {
-  const t = useTranslate(translations)
-  const { setIsOpen } = useTour()
-  return <Box bg="inverse.500">
-    <TextWithPointingArrow $position="right">
-      <Flex w={12} pl={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
-        <Text appearance="body2" colorScheme="inverse.contrastText" weight="medium"> {t.title} </Text>
-        <Button appearance="text" size="sm" onClick={() => {
-          finishTour()
-          setIsOpen(false)
-        }}>
-          <IconBox size="xs" colorIcon="inverse.contrastText">
-            <TimesMini />
-          </IconBox>
-        </Button>
-      </Flex>
-    </TextWithPointingArrow>
-    <Image src="https://marketing.stackspot.com/switch-v2.gif"
-      alt="GIF showing how to move from one portal to another" />
-    <Box px={5} py={3}>
-      <Text appearance="microtext1" colorScheme="inverse.contrastText">{t.description}</Text>
-    </Box>
-  </Box >
-}
-
-export const portalSwitcherStep: StepType = {
-  selector: '.portal-switcher',
-  content: PortalSwitcherStep,
-  position: 'right',
-}
-
-const translations = {
-  en: {
-    title: 'Expand Your Horizons with Stackspot',
-    description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
-  },
-  pt: {
-    title: 'Expanda Seus Horizontes com Stackspot',
-    description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
-  },
-}

package/src/components/tour/utils.tsx

@@ -1,58 +0,0 @@
-import { theme } from '@stack-spot/portal-theme'
-import styled from 'styled-components'
-
-export const TextWithPointingArrow = styled.div < {
-  $position: 'right' | 'top' | 'left',
-  $top?: string,
-  $right?: string,
-} > `
-  position: relative;
-  width: 100%;
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 10px;
-    border-style: solid;
-    border-color: transparent;
-    margin-top: -5px;
-    border-right-color: ${theme.color.inverse[500]};
-    ${({ $position, $top }) => $position === 'right' ?
-    `
-      top: ${$top || '16px'};
-      left: -18px;
-    ` : ''}
-    ${({ $position, $right }) => $position === 'top' ?
-    `
-    bottom: 96%;
-    right: ${$right || '16px'};
-    transform: rotate(90deg);
-    ` : ''}
-    ${({ $position, $top }) => $position === 'left' ?
-    `
-      top: ${$top || '16px'};
-      right: -18px;
-      transform: rotate(180deg);
-    ` : ''}
-  }
-`
-
-const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
-const portalUrl = new URL(location.href)
-const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0]
-const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`
-
-const getCookies = (): Record<string, string> => document.cookie.split('; ').reduce((prev, current) => {
-  const [name, ...value] = current.split('=')
-  prev[name] = value.join('=')
-  return prev
-}, {} as Record<string, string>)
-
-const setCookie = (key: string, value: string) => {
-  document.cookie = `${key}=${value}; ${defaultCookieAttributes}`
-}
-
-const getCookie = (key: string) => getCookies()[key]
-
-export const finishTour = () => setCookie('welcomeTour', 'done')
-
-export const hasFinishedTour = () => !!getCookie('welcomeTour')