@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/components/menu/types.ts

@@ -1,205 +1,205 @@
-import { Action } from '@stack-spot/portal-components/SelectionList'
-import { ReactElement, ReactNode } from 'react'
-
-interface BaseMenuItem {
-  hidden?: boolean,
-  /**
-   * React element on the left.
-   */
-  icon?: React.ReactElement,
-  /**
-   * React element on the right.
-   */
-  badge?: React.ReactElement,
-  /**
-   * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
-   * @default 'wrap'
-   */
-  overflow?: 'hidden' | 'wrap' | 'ellipsis',
-}
-
-export interface ItemGroup extends BaseMenuItem {
-  /**
-   * The label for this group.
-   */
-  label: string,
-  /**
-   * The items in this group.
-   */
-  children: MenuItem[],
-  /**
-   * Whether it should start opened or not.
-   */
-  open?: boolean,
-}
-
-export interface MenuAction extends Action, BaseMenuItem {
-  /**
-   * Whether this menu item is currently active or not.
-   */
-  active?: boolean,
-}
-
-export type MenuItem = ItemGroup | MenuAction
-
-export interface SelectorItem extends Action {
-  /**
-   * A unique id for this item.
-   */
-  key: string,
-  /**
-   * An icon to place at the left side of the item.
-   */
-  icon?: ReactElement,
-}
-
-export interface Selector {
-  /**
-   * The current value. Must correspond to a `key` in `options`.
-   */
-  value?: string,
-  /**
-   * A series of options to show in the selector.
-   */
-  options: SelectorItem[],
-  /**
-   * An extra button to show after the list of options.
-   */
-  button?: Action,
-  /**
-   * A title of this selector.
-   */
-  title?: string,
-  /**
-   * A subtitle for this selector.
-   */
-  subtitle?: string,
-  /**
-   * Whether or not the options for this selector are loading.
-   */
-  loading?: boolean,
-}
-
-export interface MenuSectionContent {
-  /**
-   * A link to go back.
-   */
-  goBack?: Action,
-  /**
-   * A title for this menu.
-   */
-  title?: string,
-  /**
-   * A subtitle for this menu.
-   */
-  subtitle?: string,
-  /**
-   * A custom React Node to add right after the menu title.
-   */
-  afterTitle?: React.ReactNode,
-  /**
-   * A page selector.
-   */
-  pageSelector?: Selector,
-  /**
-   * The menu options, may contain subgroups.
-   */
-  options?: MenuItem[],
-  /**
-   * Whether or not the options for this menu are loading.
-   */
-  loading?: boolean,
-  /**
-   * An error to show instead of the menu.
-   */
-  error?: string,
-}
-
-export interface MenuSection extends Action {
-  /**
-   * The icon for this section.
-   */
-  icon: ReactElement,
-  /**
-   * The content or a function that creates the content.
-   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
-   * Tip: this function can be a React Hook.
-   */
-  content?: MenuSectionContent | (() => MenuSectionContent),
-  /**
-   * The content or a function that creates the content.
-   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
-   * Tip: this function can be a React Hook.
-   * This should be used when the content you want to render is not the default content
-   */
-  customContent?: ReactNode,
-  /**
-   * Whether or not this section is currently active.
-   */
-  active?: boolean,
-  /**
-   * A css class to pass to the <li> tag.
-   */
-  className?: string,
-  hidden?: boolean,
-}
-
-interface BaseMenuProps {
-  /**
-   * The sections of the menu.
-   */
-  sections?: MenuSection[],
-  /**
-   * The content of the menu as a React Element. Use this to create anything you want as the menu content, but prefer using `content`
-   * instead, which is a predefined menu.
-   */
-  customContent?: ReactNode,
-  /**
-   * Options for the settings button.
-   */
-  settings?: {
-    /**
-     * Whether or not to show the settings button.
-     */
-    show?: boolean,
-    /**
-     * A function to call when the button is clicked.
-     */
-    onClick?: () => void,
-    /**
-     * A url to go to when the button is clicked.
-     */
-    href?: string,
-    /**
-     * Whether or not this button represents the page currently active.
-     */
-    active?: boolean,
-    /**
-     * A css class to pass to the button.
-     */
-    className?: string,
-  },
-}
-
-export interface MenuPropsWithStaticContent extends BaseMenuProps {
-  /**
-   * The config for creating the menu content.
-   */
-  content?: MenuSectionContent,
-}
-
-export interface MenuPropsWithDynamicContent extends BaseMenuProps {
-  /**
-   * The function that creates a config to render a menu content. It will be called only when the content is rendered, i.e. only when the
-   * content really needs to be rendered.
-   * 
-   * Tip: this function can be a React Hook.
-   */
-  content: MenuSectionContent | (() => MenuSectionContent),
-  /**
-   * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
-   */
-  contentKey: React.Key,
-}
-
-export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent
+import { Action } from '@stack-spot/portal-components/SelectionList'
+import { ReactElement, ReactNode } from 'react'
+
+interface BaseMenuItem {
+  hidden?: boolean,
+  /**
+   * React element on the left.
+   */
+  icon?: React.ReactElement,
+  /**
+   * React element on the right.
+   */
+  badge?: React.ReactElement,
+  /**
+   * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
+   * @default 'wrap'
+   */
+  overflow?: 'hidden' | 'wrap' | 'ellipsis',
+}
+
+export interface ItemGroup extends BaseMenuItem {
+  /**
+   * The label for this group.
+   */
+  label: string,
+  /**
+   * The items in this group.
+   */
+  children: MenuItem[],
+  /**
+   * Whether it should start opened or not.
+   */
+  open?: boolean,
+}
+
+export interface MenuAction extends Action, BaseMenuItem {
+  /**
+   * Whether this menu item is currently active or not.
+   */
+  active?: boolean,
+}
+
+export type MenuItem = ItemGroup | MenuAction
+
+export interface SelectorItem extends Action {
+  /**
+   * A unique id for this item.
+   */
+  key: string,
+  /**
+   * An icon to place at the left side of the item.
+   */
+  icon?: ReactElement,
+}
+
+export interface Selector {
+  /**
+   * The current value. Must correspond to a `key` in `options`.
+   */
+  value?: string,
+  /**
+   * A series of options to show in the selector.
+   */
+  options: SelectorItem[],
+  /**
+   * An extra button to show after the list of options.
+   */
+  button?: Action,
+  /**
+   * A title of this selector.
+   */
+  title?: string,
+  /**
+   * A subtitle for this selector.
+   */
+  subtitle?: string,
+  /**
+   * Whether or not the options for this selector are loading.
+   */
+  loading?: boolean,
+}
+
+export interface MenuSectionContent {
+  /**
+   * A link to go back.
+   */
+  goBack?: Action,
+  /**
+   * A title for this menu.
+   */
+  title?: string,
+  /**
+   * A subtitle for this menu.
+   */
+  subtitle?: string,
+  /**
+   * A custom React Node to add right after the menu title.
+   */
+  afterTitle?: React.ReactNode,
+  /**
+   * A page selector.
+   */
+  pageSelector?: Selector,
+  /**
+   * The menu options, may contain subgroups.
+   */
+  options?: MenuItem[],
+  /**
+   * Whether or not the options for this menu are loading.
+   */
+  loading?: boolean,
+  /**
+   * An error to show instead of the menu.
+   */
+  error?: string,
+}
+
+export interface MenuSection extends Action {
+  /**
+   * The icon for this section.
+   */
+  icon: ReactElement,
+  /**
+   * The content or a function that creates the content.
+   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+   * Tip: this function can be a React Hook.
+   */
+  content?: MenuSectionContent | (() => MenuSectionContent),
+  /**
+   * The content or a function that creates the content.
+   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+   * Tip: this function can be a React Hook.
+   * This should be used when the content you want to render is not the default content
+   */
+  customContent?: ReactNode,
+  /**
+   * Whether or not this section is currently active.
+   */
+  active?: boolean,
+  /**
+   * A css class to pass to the <li> tag.
+   */
+  className?: string,
+  hidden?: boolean,
+}
+
+interface BaseMenuProps {
+  /**
+   * The sections of the menu.
+   */
+  sections?: MenuSection[],
+  /**
+   * The content of the menu as a React Element. Use this to create anything you want as the menu content, but prefer using `content`
+   * instead, which is a predefined menu.
+   */
+  customContent?: ReactNode,
+  /**
+   * Options for the settings button.
+   */
+  settings?: {
+    /**
+     * Whether or not to show the settings button.
+     */
+    show?: boolean,
+    /**
+     * A function to call when the button is clicked.
+     */
+    onClick?: () => void,
+    /**
+     * A url to go to when the button is clicked.
+     */
+    href?: string,
+    /**
+     * Whether or not this button represents the page currently active.
+     */
+    active?: boolean,
+    /**
+     * A css class to pass to the button.
+     */
+    className?: string,
+  },
+}
+
+export interface MenuPropsWithStaticContent extends BaseMenuProps {
+  /**
+   * The config for creating the menu content.
+   */
+  content?: MenuSectionContent,
+}
+
+export interface MenuPropsWithDynamicContent extends BaseMenuProps {
+  /**
+   * The function that creates a config to render a menu content. It will be called only when the content is rendered, i.e. only when the
+   * content really needs to be rendered.
+   * 
+   * Tip: this function can be a React Hook.
+   */
+  content: MenuSectionContent | (() => MenuSectionContent),
+  /**
+   * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
+   */
+  contentKey: React.Key,
+}
+
+export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent

package/src/components/tour/PortalSwitcherStep.tsx

@@ -1,39 +1,39 @@
-import { Box, Image, Text } from '@citric/core'
-import { TourStep, tourStepBuilder } from '@stack-spot/portal-components/Tour'
-import { useTranslate } from '@stack-spot/portal-translate'
-
-/**
- * Tutorial: a React hook for retrieving the React Tour step that explains how the portal switcher works. The portal switcher is a component
- * at the top left corner of the layout (header) that allows the user to switch between the different Stackspot portals.
- * @returns the React Tour step for the PortalSwitcher.
- */
-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',
-  },
-}
+import { Box, Image, Text } from '@citric/core'
+import { TourStep, tourStepBuilder } from '@stack-spot/portal-components/Tour'
+import { useTranslate } from '@stack-spot/portal-translate'
+
+/**
+ * Tutorial: a React hook for retrieving the React Tour step that explains how the portal switcher works. The portal switcher is a component
+ * at the top left corner of the layout (header) that allows the user to switch between the different Stackspot portals.
+ * @returns the React Tour step for the PortalSwitcher.
+ */
+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/components/types.ts

@@ -1 +1 @@
-export type PortalAcronym = 'EDP' | 'AI' | 'HUB'
+export type PortalAcronym = 'EDP' | 'AI' | 'HUB'

package/src/components/user-menu-manager.ts

@@ -0,0 +1,31 @@
+export type UserMenuManagerListeners =  (visible: boolean) => void
+
+class UserMenuManager {
+  private visible: boolean = false
+  private observers = [] as UserMenuManagerListeners[]
+
+  changeVisible(isVisible: boolean): void {
+    this.visible = isVisible
+    this.notify()
+  }
+
+  isOpen(): boolean {
+    return this.visible
+  }
+
+  subscribe(updateFn: UserMenuManagerListeners) {
+    this.observers.push(updateFn)
+    this.notify()
+    return () => this.pullListener(updateFn)
+  }
+
+  private pullListener(updateFn: UserMenuManagerListeners) {
+    this.observers = this.observers.filter((obs) => obs !== updateFn)
+  }
+
+  private notify() {
+    this.observers.forEach((updateFn) => updateFn(this.visible))
+  }
+}
+
+export const userMenuManager = new UserMenuManager()

package/src/dictionary.ts

@@ -1,28 +1,28 @@
-import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
-
-const dictionary = {
-  en: {
-    close: 'Close',
-    validationLabel: 'Please, confirm the action by typing "$0" below:',
-    dismiss: 'Dismiss',
-    confirm: 'OK',
-    cancel: 'Cancel',
-  },
-  pt: {
-    close: 'Fechar',
-    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
-    dismiss: 'Dispensar',
-    confirm: 'OK',
-    cancel: 'Cancelar',
-  },
-} satisfies Dictionary
-
-/**
- * A global dictionary for layout components.
- */
-export const useDictionary = () => useTranslate(dictionary)
-
-export function getDictionary() {
-  const language = getLanguage()
-  return dictionary[language]
-}
+import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    close: 'Close',
+    validationLabel: 'Please, confirm the action by typing "$0" below:',
+    dismiss: 'Dismiss',
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
+  pt: {
+    close: 'Fechar',
+    validationLabel: 'Por favor, confirme a ação digitando "$0" no campo abaixo:',
+    dismiss: 'Dispensar',
+    confirm: 'OK',
+    cancel: 'Cancelar',
+  },
+} satisfies Dictionary
+
+/**
+ * A global dictionary for layout components.
+ */
+export const useDictionary = () => useTranslate(dictionary)
+
+export function getDictionary() {
+  const language = getLanguage()
+  return dictionary[language]
+}

package/src/elements.ts

@@ -1,30 +1,30 @@
-/**
- * The ids of the layout elements.
- */
-export const elementIds = {
-  layout: 'layout',
-  backdrop: 'backdrop',
-  modal: 'modal',
-  rightPanel: 'rightPanel',
-  bottomDialog: 'bottomDialog',
-  page: 'page',
-  content: 'content',
-  header: 'header',
-  menu: 'menu',
-  menuContent: 'menuContent',
-  menuSections: 'menuSections',
-  accessibilityAnnouncer: 'accessibilityAnnouncer',
-} as const
-
-export type LayoutElement = keyof typeof elementIds
-export type LayoutElements = Record<LayoutElement, HTMLElement | null>
-
-/**
- * @returns an object with the html elements of the layout.
- */
-export function getLayoutElements() {
-  return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
-    (result, id) => ({ ...result, [id]: document.getElementById(id) }),
-    {} as LayoutElements,
-  )
-}
+/**
+ * The ids of the layout elements.
+ */
+export const elementIds = {
+  layout: 'layout',
+  backdrop: 'backdrop',
+  modal: 'modal',
+  rightPanel: 'rightPanel',
+  bottomDialog: 'bottomDialog',
+  page: 'page',
+  content: 'content',
+  header: 'header',
+  menu: 'menu',
+  menuContent: 'menuContent',
+  menuSections: 'menuSections',
+  accessibilityAnnouncer: 'accessibilityAnnouncer',
+} as const
+
+export type LayoutElement = keyof typeof elementIds
+export type LayoutElements = Record<LayoutElement, HTMLElement | null>
+
+/**
+ * @returns an object with the html elements of the layout.
+ */
+export function getLayoutElements() {
+  return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
+    (result, id) => ({ ...result, [id]: document.getElementById(id) }),
+    {} as LayoutElements,
+  )
+}

package/src/errors.ts

@@ -1,11 +1,11 @@
-export class LayoutError extends Error {
-  constructor(message: string) {
-    super(`Layout error: ${message}`)
-  } 
-}
-
-export class ElementNotFound extends LayoutError {
-  constructor(elementName: string, elementId: string) {
-    super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`)
-  }
-}
+export class LayoutError extends Error {
+  constructor(message: string) {
+    super(`Layout error: ${message}`)
+  } 
+}
+
+export class ElementNotFound extends LayoutError {
+  constructor(elementName: string, elementId: string) {
+    super(`unable to create ${elementName} because no element with id "${elementId}" was found in the view.`)
+  }
+}