@stack-spot/portal-layout 0.0.2 → 0.0.4

package/src/components/Menu/PageSelector.tsx

@@ -1,5 +1,6 @@
 import { IconBox, Text } from '@citric/core'
 import { ArrowRight, Select } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
@@ -27,6 +28,9 @@ const SelectorBox = styled.div`
 
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -71,7 +75,7 @@ const SelectorBox = styled.div`
   }
 `
 
-export const PageSelector = ({ options, value, button }: Selector) => {
+export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
   const [visible, setVisible] = useState(false)
   const { optionsWithIcon, selected } = useMemo(
     () => {
@@ -91,18 +95,27 @@ export const PageSelector = ({ options, value, button }: Selector) => {
 
   return (
     <SelectorBox>
-      <a onClick={() => setVisible(true)} aria-label={value}>
-        {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
-        <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
-        <IconBox size="xs"><Select /></IconBox>
-      </a>
+      {loading
+        ? <LoadingCircular /> 
+        : (
+          <>
+            {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
+            <a onClick={() => setVisible(true)} aria-label={value}>
+              {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
+              <Text appearance="body2" className="label">{selected?.label ?? button?.label ?? value}</Text>
+              <IconBox size="xs"><Select /></IconBox>
+            </a>
 
-      <SelectionList
-        visible={visible}
-        items={optionsWithIcon}
-        onHide={() => setVisible(false)}
-        after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
-      />
+            <SelectionList
+              visible={visible}
+              items={optionsWithIcon}
+              onHide={() => setVisible(false)}
+              after={button ? <a className="view-all" href={button.href} onClick={button.onClick}>{button.label}</a> : undefined}
+              scroll
+            />
+          </>
+        )
+      }
     </SelectorBox>
   )
 }

package/src/components/Menu/types.ts

@@ -1,16 +1,31 @@
 import { ReactElement } from 'react'
 import { Action } from '../types'
 
-export interface ItemGroup {
+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 {
   label: string,
   children: MenuItem[],
   open?: boolean,
-  hidden?: boolean,
 }
 
-export interface MenuAction extends Action {
+export interface MenuAction extends Action, BaseMenuItem {
   active?: boolean,
-  hidden?: boolean,
 }
 
 export type MenuItem = ItemGroup | MenuAction
@@ -30,6 +45,7 @@ export interface Selector {
   button?: Action,
   title?: string,
   subtitle?: string,
+  loading?: boolean,
 }
 
 export interface MenuSectionContent {
@@ -38,16 +54,43 @@ export interface MenuSectionContent {
   subtitle?: string,
   pageSelector?: Selector,
   options?: MenuItem[],
+  loading?: boolean,
+  error?: string,
 }
 
 export interface MenuSection extends Action {
   icon: ReactElement,
-  content?: 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.
+   */
+  content?: MenuSectionContent | (() => MenuSectionContent),
   active?: boolean,
+  onOpen?: () => void,
 }
 
-export interface MenuProps {
+interface BaseMenuProps {
   sections: MenuSection[],
-  content?: MenuSectionContent,
   compact?: boolean,
 }
+
+interface MenuPropsWithStaticContent extends BaseMenuProps {
+  content?: MenuSectionContent,
+}
+
+interface MenuPropsWithDynamicContent extends BaseMenuProps {
+  /**
+   * The function that creates the 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/OverlayContent.tsx

@@ -4,6 +4,7 @@ import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { ReactNode } from 'react'
 import { styled } from 'styled-components'
+import { useDictionary } from '../dictionary'
 
 export interface OverlayContentProps extends WithStyle {
   title: string,
@@ -27,24 +28,29 @@ const ContentBox = styled.section`
   }
   &.panel {
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
   header {
     display: flex;
     flex-direction: row;
-    flex: 1;
     margin-bottom: 1.25rem;
   }
 `
 
-export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => (
-  <ContentBox style={style} className={listToClass([className, type])}>
-    <header>
-      <Flex flexDirection="column" flex={1}>
-        <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
-        {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
-      </Flex>
-      <IconButton onClick={onClose} title="close" aria-label="close"><TimesMini /></IconButton>
-    </header>
-    {children}
-  </ContentBox>
-)
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => {
+  const t = useDictionary()
+  return (
+    <ContentBox style={style} className={listToClass([className, type])}>
+      <header>
+        <Flex flexDirection="column" flex={1}>
+          <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+          {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
+        </Flex>
+        <IconButton onClick={onClose} title={t.close} aria-label={t.close}><TimesMini /></IconButton>
+      </header>
+      {children}
+    </ContentBox>
+  )
+}

package/src/components/SelectionList.tsx

@@ -47,11 +47,13 @@ export interface SelectionListProps extends WithStyle {
   maxHeight?: string,
   before?: ReactElement,
   after?: ReactElement,
+  scroll?: boolean,
 }
 
-const SelectionBox = styled.div<{ $maxHeight: string }>`
+const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   max-height: 0;
-  overflow: hidden;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+  overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
   box-shadow: 4px 4px 48px #000;
@@ -83,6 +85,9 @@ const SelectionBox = styled.div<{ $maxHeight: string }>`
     }
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -141,7 +146,7 @@ function renderItem(item: ListItem, setCurrent: (current: CurrentItemList) => vo
 }
 
 export const SelectionList = ({
-  items, className, style, visible = true, maxHeight = '300px', onHide, before, after,
+  items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
   const wrapper = useRef<HTMLDivElement>(null)
   const itemsRef = useRef(items)
@@ -178,6 +183,7 @@ export const SelectionList = ({
       $maxHeight={maxHeight}
       style={style}
       className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
+      $scroll={scroll}
     >
       <div className="selection-list-content">
         {before}

package/src/components/Toaster.tsx

@@ -2,11 +2,15 @@ import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { CloseButtonProps, ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import { useDictionary } from '../dictionary'
 
-const CloseButton = ({ closeToast }: CloseButtonProps) => (
-  <IconButton onClick={() => closeToast(null as any)} title="Dismiss">
-    <TimesMini />
-  </IconButton>
-)
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+  const t = useDictionary()
+  return (
+    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+      <TimesMini />
+    </IconButton>
+  )
+}
 
 export const Toaster = () => <ToastContainer closeButton={CloseButton} />

package/src/dictionary.ts

@@ -0,0 +1,25 @@
+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
+
+export const useDictionary = () => useTranslate(dictionary)
+
+export function getDictionary() {
+  const language = getLanguage()
+  return dictionary[language]
+}

package/src/index.ts

@@ -1,10 +1,12 @@
 export { Layout } from './Layout'
 export { overlay } from './LayoutOverlayManager'
+export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
 export { StackspotLogo } from './components/Logo'
 export { MenuContent } from './components/Menu/MenuContent'
 export { MenuSections } from './components/Menu/MenuSections'
 export * from './components/Menu/types'
+export { OverlayContent } from './components/OverlayContent'
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
 export * from './components/types'
 export * from './errors'

package/src/layout.css

@@ -68,20 +68,23 @@ body {
 }
 
 #page {
-  flex: 1;
+  position: absolute;
+  top: var(--header-height);
+  left: var(--menu-sections-width);
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   background-color: var(--light-300);
   border-top-left-radius: 0.5rem;
   align-items: center;
   padding: 24px;
-  margin-top: var(--header-height);
-  margin-left: var(--menu-sections-width);
-  transition: margin ease-in-out var(--menu-animation-duration);
+  transition: left ease-in-out var(--menu-animation-duration);
 }
 
 #layout.menu-content-visible #page {
-  margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
+  left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
 #content {
@@ -298,11 +301,25 @@ body {
   display: flex;
   flex-direction: column;
   top: var(--header-height);
-  right: -307px;
   bottom: 0;
-  width: 307px;
   transition: right var(--right-panel-animation-duration);
   background-color: var(--light-400);
+  right: -800px;
+}
+
+#rightPanel.small {
+  right: -400px;
+  width: 400px;
+}
+
+#rightPanel.medium {
+  right: -600px;
+  width: 600px;
+}
+
+#rightPanel.large {
+  right: -800px;
+  width: 800px;
 }
 
 #rightPanel.visible {
@@ -316,7 +333,7 @@ body {
   bottom: -420px;
   left: 20px;
   height: 400px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
 }
 
 #bottomPanel.visible {
@@ -326,12 +343,23 @@ body {
 #bottomDialog {
   position: fixed;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   bottom: -80px;
   left: 0;
   right: 0;
   height: 80px;
-  transition: transform bottom 0.3s;
+  transition: bottom 0.3s;
+  background-color: var(--inverse-500);
+  color: var(--inverse-contrastText);
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+#bottomDialog .btn-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 #bottomDialog.visible {

package/src/citric.fix.d.ts

@@ -1,7 +0,0 @@
-import '../node_modules/styled-components/dist/index.d.ts'
-
-declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  type StyledComponent<Tag = 'div', Theme = object, Props = object, Optional = never> = 
-    import('react').FunctionComponent<JSX.IntrinsicElements[Tag] & Props>
-}