@stack-spot/portal-layout 0.0.49 → 0.0.51

package/src/components/Dialog.tsx

@@ -1,93 +1,93 @@
-import { Button, Flex, Input, Text } from '@citric/core'
-import { ColorSchemeName } from '@stack-spot/portal-theme'
-import { interpolate } from '@stack-spot/portal-translate'
-import { ReactNode, useState } from 'react'
-import { useDictionary } from '../dictionary'
-import { OverlayContent } from './OverlayContent'
-
-interface Validation {
-  value: string,
-  label?: string | ReactNode,
-  placeholder?: string,
-}
-
-export interface DialogOptions {
-  title: string,
-  subtitle?: string,
-  message: ReactNode,
-  confirm?: string,
-  cancel?: string,
-  validation?: false | string | Validation,
-  /**
-   * @default modal
-   */
-  type?: 'modal' | 'panel',
-  /**
-   * @default right if type is "panel", "right" otherwise.
-   */
-  buttonPlacement?: 'left' | 'center' | 'right',
-  /**
-   * The color of the primary button.
-   * @default primary
-   */
-  buttonColor?: ColorSchemeName,
-}
-
-interface Props extends DialogOptions {
-  onConfirm: () => void,
-  onCancel: () => void,
-}
-
-const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
-  center: 'center',
-  left: 'start',
-  right: 'end',
-}
-
-export const Dialog = ({
-  message,
-  title,
-  subtitle,
-  cancel,
-  confirm,
-  validation,
-  onConfirm,
-  onCancel,
-  type = 'modal',
-  buttonPlacement = type === 'panel' ? 'left' : 'right',
-  buttonColor = 'primary',
-}: Props,
-) => {
-  const t = useDictionary()
-  const [enabled, setEnabled] = useState(!validation)
-
-  function renderValidation() {
-    if (!validation) return null
-    const value = typeof validation === 'string' ? validation : validation.value
-    const label = typeof validation === 'object' && validation.label
-      ? validation.label
-      : interpolate(t.validationLabel, value)
-    const placeholder = typeof validation === 'object' ? validation.placeholder : undefined
-    return (
-      <div style={{ margin: '16px 0' }}>
-        <Text>{label}</Text>
-        <Input placeholder={placeholder} onChange={e => setEnabled(e.target.value === value)} style={{ marginTop: '10px' }} />
-      </div>
-    )
-  }
-
-  return (
-    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
-      <Flex flexDirection="column" flex={1}>
-        {message}
-        {renderValidation()}
-      </Flex>
-      {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>
-        {cancel && <Button appearance="outlined" colorScheme="inverse" onClick={onCancel}>{cancel}</Button>}
-        {confirm && <Button colorScheme={buttonColor} onClick={onConfirm} disabled={!enabled}>
-          {confirm}
-        </Button>}
-      </Flex>}
-    </OverlayContent>
-  )
-}
+import { Button, Flex, Input, Text } from '@citric/core'
+import { ColorSchemeName } from '@stack-spot/portal-theme'
+import { interpolate } from '@stack-spot/portal-translate'
+import { ReactNode, useState } from 'react'
+import { useDictionary } from '../dictionary'
+import { OverlayContent } from './OverlayContent'
+
+interface Validation {
+  value: string,
+  label?: string | ReactNode,
+  placeholder?: string,
+}
+
+export interface DialogOptions {
+  title: string,
+  subtitle?: string,
+  message: ReactNode,
+  confirm?: string,
+  cancel?: string,
+  validation?: false | string | Validation,
+  /**
+   * @default modal
+   */
+  type?: 'modal' | 'panel',
+  /**
+   * @default right if type is "panel", "right" otherwise.
+   */
+  buttonPlacement?: 'left' | 'center' | 'right',
+  /**
+   * The color of the primary button.
+   * @default primary
+   */
+  buttonColor?: ColorSchemeName,
+}
+
+interface Props extends DialogOptions {
+  onConfirm: () => void,
+  onCancel: () => void,
+}
+
+const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
+  center: 'center',
+  left: 'start',
+  right: 'end',
+}
+
+export const Dialog = ({
+  message,
+  title,
+  subtitle,
+  cancel,
+  confirm,
+  validation,
+  onConfirm,
+  onCancel,
+  type = 'modal',
+  buttonPlacement = type === 'panel' ? 'left' : 'right',
+  buttonColor = 'primary',
+}: Props,
+) => {
+  const t = useDictionary()
+  const [enabled, setEnabled] = useState(!validation)
+
+  function renderValidation() {
+    if (!validation) return null
+    const value = typeof validation === 'string' ? validation : validation.value
+    const label = typeof validation === 'object' && validation.label
+      ? validation.label
+      : interpolate(t.validationLabel, value)
+    const placeholder = typeof validation === 'object' ? validation.placeholder : undefined
+    return (
+      <div style={{ margin: '16px 0' }}>
+        <Text>{label}</Text>
+        <Input placeholder={placeholder} onChange={e => setEnabled(e.target.value === value)} style={{ marginTop: '10px' }} />
+      </div>
+    )
+  }
+
+  return (
+    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
+      <Flex flexDirection="column" flex={1}>
+        {message}
+        {renderValidation()}
+      </Flex>
+      {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>
+        {cancel && <Button appearance="outlined" colorScheme="inverse" onClick={onCancel}>{cancel}</Button>}
+        {confirm && <Button colorScheme={buttonColor} onClick={onConfirm} disabled={!enabled}>
+          {confirm}
+        </Button>}
+      </Flex>}
+    </OverlayContent>
+  )
+}

package/src/components/Header.tsx

@@ -1,29 +1,34 @@
-import { Flex } from '@citric/core'
-import { ReactNode } from 'react'
-import { Logo } from '../svg/Logo'
-import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
-import { SelectionListProps } from './SelectionList'
-import { UserMenu } from './UserMenu'
-
-export interface HeaderProps {
-  logo?: ReactNode,
-  logoHref?: string,
-  userName?: string,
-  email?: string,
-  portalSwitch?: PortalSwitcherProps['portals'],
-  options?: SelectionListProps['items'],
-  center?: ReactNode,
-  right?: ReactNode,
-}
-
-export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch }: HeaderProps) => (
-  <>
-    {portalSwitch ?
-      <PortalSwitcher portals={portalSwitch} /> :
-      <a href={logoHref} title="Home">{logo ?? <Logo style={{ width: 130 }} />}</a>
-    }
-    <Flex flex={1}>{center}</Flex>
-    {right}
-    {userName && <UserMenu userName={userName} email={email} options={options} />}
-  </>
-)
+import { Flex } from '@citric/core'
+import { ReactNode } from 'react'
+import { useAnchorTag } from '../layout-context'
+import { Logo } from '../svg/Logo'
+import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
+import { SelectionListProps } from './SelectionList'
+import { UserMenu } from './UserMenu'
+
+export interface HeaderProps {
+  logo?: ReactNode,
+  logoHref?: string,
+  userName?: string,
+  email?: string,
+  portalSwitch?: PortalSwitcherProps['portals'],
+  options?: SelectionListProps['items'],
+  center?: ReactNode,
+  right?: ReactNode,
+}
+
+export const Header = ({ logo, logoHref, center, right, userName, email, options, portalSwitch }: HeaderProps) => {
+  const Link = useAnchorTag()
+
+  return (
+    <>
+      {portalSwitch ?
+        <PortalSwitcher portals={portalSwitch} /> :
+        <Link href={logoHref} title="Home">{logo ?? <Logo style={{ width: 130 }} />}</Link>
+      }
+      <Flex flex={1}>{center}</Flex>
+      {right}
+      {userName && <UserMenu userName={userName} email={email} options={options} />}
+    </>
+  )
+}

package/src/components/OverlayContent.tsx

@@ -1,58 +1,58 @@
-import { Flex, Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-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 const CLOSE_OVERLAY_ID = 'close-overlay'
-
-export interface OverlayContentProps extends WithStyle {
-  title: string,
-  subtitle?: string,
-  children: ReactNode,
-  onClose?: () => void,
-}
-
-interface Props extends OverlayContentProps {
-  onClose: () => void,
-  type: 'modal' | 'panel',
-}
-
-const ContentBox = styled.section`
-  display: flex;
-  flex-direction: column;
-  border-radius: 1rem;
-  background-color: ${theme.color.light['400']};
-  &.modal {
-    padding: 32px;
-  }
-  &.panel {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  header {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 1.25rem;
-  }
-`
-
-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 as="h2" 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} id={CLOSE_OVERLAY_ID}><TimesMini /></IconButton>
-      </header>
-      {children}
-    </ContentBox>
-  )
-}
+import { Flex, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+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 const CLOSE_OVERLAY_ID = 'close-overlay'
+
+export interface OverlayContentProps extends WithStyle {
+  title: string,
+  subtitle?: string,
+  children: ReactNode,
+  onClose?: () => void,
+}
+
+interface Props extends OverlayContentProps {
+  onClose: () => void,
+  type: 'modal' | 'panel',
+}
+
+const ContentBox = styled.section`
+  display: flex;
+  flex-direction: column;
+  border-radius: 1rem;
+  background-color: ${theme.color.light['400']};
+  &.modal {
+    padding: 32px;
+  }
+  &.panel {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  header {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1.25rem;
+  }
+`
+
+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 as="h2" 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} id={CLOSE_OVERLAY_ID}><TimesMini /></IconButton>
+      </header>
+      {children}
+    </ContentBox>
+  )
+}

package/src/components/PortalSwitcher.tsx

@@ -1,147 +1,147 @@
-import { Button, Flex, IconBox, Text } from '@citric/core'
-import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
-import { theme } from '@stack-spot/portal-theme'
-import { useTranslate } from '@stack-spot/portal-translate'
-import { ReactNode, useState } from 'react'
-import styled from 'styled-components'
-import { SelectionList, announce } from '..'
-import { AI } from '../svg/AI'
-import { EDP } from '../svg/EDP'
-import { HUB } from '../svg/HUB'
-import { Logo } from '../svg/Logo'
-import { PortalAcronym } from './types'
-
-
-const Logos: Record<PortalAcronym, ReactNode> = {
-  'AI': <AI />,
-  'EDP': <EDP />,
-  'HUB': <HUB />,
-}
-
-export interface Portal { acronym: PortalAcronym, url: string }
-
-export interface PortalSwitcherProps {
-  portals?: Portal[],
-}
-
-const PortalSwitcherBox = styled(Flex)`
-  flex-direction: column;
-  align-items: start;
-  z-index: 10;
-
-  .current-portal {
-    padding: 8px;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.color.light[500]};
-    }
-  }
-
-  .selection-list {
-    max-width: 360px;
-    box-shadow: 4px 4px 48px 0px #000000;
-    position: absolute; 
-    top: 50px;
-
-    .selection-list-content {
-      padding: 8px;
-      border-width: 1px;
-      border-style: solid;
-      border-color: ${theme.color.light['500']};
-
-      &> ul {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .action {
-        padding: 16px;
-        background-color: ${theme.color.light['400']};
-        border-width: 1px;
-        border-style: solid;
-        border-color: ${theme.color.light['500']};
-        border-radius: 4px;
-
-        &:hover, &:hover a {
-          background-color: ${theme.color.light['500']};
-        }
-
-        a {
-          height: auto;
-          transition: unset;
-          align-items: flex-start;
-        }
-      }
-    }
-  }
- 
-`
-const PORTAL_SWITCHER_ID = 'PortalSwitcher'
-
-export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
-  const [visible, setVisible] = useState<boolean>(false)
-  const t = useTranslate(translations)
-  const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
-
-  return <PortalSwitcherBox>
-    {currentPortal ?
-      <Button
-        className="current-portal"
-        appearance="text"
-        colorScheme="light"
-        aria-controls={PORTAL_SWITCHER_ID}
-        aria-expanded={visible}
-        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
-        onClick={() => {
-          setVisible(true)
-          announce(`${t.portalSwitcher} ${t.selected}`)
-        }}>
-        <Flex alignItems="center">
-          {Logos[currentPortal.acronym]}
-          <IconBox size="xs" ml={3}>
-            <Select />
-          </IconBox>
-        </Flex>
-      </Button> :
-      <Logo />}
-    <SelectionList
-      id={PORTAL_SWITCHER_ID}
-      items={portals?.map(portal => ({
-        label: {
-          id: portal.acronym,
-          element: <Flex flexDirection="column">
-            {Logos[portal.acronym]}
-            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
-          </Flex>,
-        },
-        target: '_self',
-        href: portal.url,
-        active: currentPortal?.acronym == portal.acronym,
-        iconActive: <CheckCircleFill aria-label={t.selected} />,
-        iconRight: portal.acronym !== currentPortal?.acronym ? <ArrowRight /> : undefined,
-      }))}
-      visible={visible}
-      maxHeight="21rem"
-      onHide={() => setVisible(false)} />
-  </PortalSwitcherBox >
-}
-
-
-const translations = {
-  en: {
-    EDP: 'Efficient and secure solutions from code to production deployment.',
-    AI: 'Speed up coding with efficient suggestions and high-quality results.',
-    HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
-    portalSwitcher: 'Portal switcher',
-    selected: 'selected',
-  },
-  pt: {
-    EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
-    AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
-    HUB: 'Descubra AI Stacks, knownledge sources e quick commands, tudo em um hub simplificado.',
-    portalSwitcher: 'Seletor de portais',
-    selected: 'selecionado',
-  },
-}
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { ReactNode, useState } from 'react'
+import styled from 'styled-components'
+import { SelectionList, announce } from '..'
+import { AI } from '../svg/AI'
+import { EDP } from '../svg/EDP'
+import { HUB } from '../svg/HUB'
+import { Logo } from '../svg/Logo'
+import { PortalAcronym } from './types'
+
+
+const Logos: Record<PortalAcronym, ReactNode> = {
+  'AI': <AI />,
+  'EDP': <EDP />,
+  'HUB': <HUB />,
+}
+
+export interface Portal { acronym: PortalAcronym, url: string }
+
+export interface PortalSwitcherProps {
+  portals?: Portal[],
+}
+
+const PortalSwitcherBox = styled(Flex)`
+  flex-direction: column;
+  align-items: start;
+  z-index: 10;
+
+  .current-portal {
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: ${theme.color.light[500]};
+    }
+  }
+
+  .selection-list {
+    max-width: 360px;
+    box-shadow: 4px 4px 48px 0px #000000;
+    position: absolute; 
+    top: 50px;
+
+    .selection-list-content {
+      padding: 8px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: ${theme.color.light['500']};
+
+      &> ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .action {
+        padding: 16px;
+        background-color: ${theme.color.light['400']};
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${theme.color.light['500']};
+        border-radius: 4px;
+
+        &:hover, &:hover a {
+          background-color: ${theme.color.light['500']};
+        }
+
+        a {
+          height: auto;
+          transition: unset;
+          align-items: flex-start;
+        }
+      }
+    }
+  }
+ 
+`
+const PORTAL_SWITCHER_ID = 'PortalSwitcher'
+
+export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
+  const [visible, setVisible] = useState<boolean>(false)
+  const t = useTranslate(translations)
+  const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
+
+  return <PortalSwitcherBox>
+    {currentPortal ?
+      <Button
+        className="current-portal"
+        appearance="text"
+        colorScheme="light"
+        aria-controls={PORTAL_SWITCHER_ID}
+        aria-expanded={visible}
+        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
+        onClick={() => {
+          setVisible(true)
+          announce(`${t.portalSwitcher} ${t.selected}`)
+        }}>
+        <Flex alignItems="center">
+          {Logos[currentPortal.acronym]}
+          <IconBox size="xs" ml={3}>
+            <Select />
+          </IconBox>
+        </Flex>
+      </Button> :
+      <Logo />}
+    <SelectionList
+      id={PORTAL_SWITCHER_ID}
+      items={portals?.map(portal => ({
+        label: {
+          id: portal.acronym,
+          element: <Flex flexDirection="column">
+            {Logos[portal.acronym]}
+            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
+          </Flex>,
+        },
+        target: '_self',
+        href: portal.url,
+        active: currentPortal?.acronym == portal.acronym,
+        iconActive: <CheckCircleFill aria-label={t.selected} />,
+        iconRight: portal.acronym !== currentPortal?.acronym ? <ArrowRight /> : undefined,
+      }))}
+      visible={visible}
+      maxHeight="21rem"
+      onHide={() => setVisible(false)} />
+  </PortalSwitcherBox >
+}
+
+
+const translations = {
+  en: {
+    EDP: 'Efficient and secure solutions from code to production deployment.',
+    AI: 'Speed up coding with efficient suggestions and high-quality results.',
+    HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
+    portalSwitcher: 'Portal switcher',
+    selected: 'selected',
+  },
+  pt: {
+    EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
+    AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
+    HUB: 'Descubra AI Stacks, knownledge sources e quick commands, tudo em um hub simplificado.',
+    portalSwitcher: 'Seletor de portais',
+    selected: 'selecionado',
+  },
+}