@stack-spot/portal-layout 1.0.2 → 1.1.1

package/src/components/Dialog.tsx

@@ -1,140 +1,140 @@
-import { Button, Flex, Input, Label } 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 {
-  /**
-   * The expected value of the field.
-   */
-  value: string,
-  /**
-   * A custom label for the input field.
-   */
-  label?: string | ReactNode,
-  /**
-   * A placeholder for the input field.
-   */
-  placeholder?: string,
-}
-
-export interface DialogOptions {
-  /**
-   * The dialog's title.
-   */
-  title: string,
-  /**
-   * The dialog's subtitle.
-   */
-  subtitle?: string,
-  /**
-   * The dialog's content.
-   */
-  children: ReactNode,
-  /**
-   * A text for the confirm button. If left blank, the confirm button won't render.
-   */
-  confirm?: string,
-  /**
-   * A text for the cancel button. If left blank, the cancel button won't render.
-   */
-  cancel?: string,
-  /**
-   * A validation input field. If the validation is incorrect, the confirm button is disabled.
-   * If this is a string, the validation input's value must be equal to this string in order to enable the confirm button.
-   * If this is an object, a value, label and placeholder may be specified.
-   * Use false or undefined to not include a validation field.
-   */
-  validation?: false | string | Validation,
-  /**
-   * If this is a modal or a rightPanel.
-   * @default modal
-   */
-  type?: 'modal' | 'panel',
-  /**
-   * The placement for the confirm/cancel buttons.
-   * @default "left" if type is "panel", "right" otherwise.
-   */
-  buttonPlacement?: 'left' | 'center' | 'right',
-  /**
-   * The color of the primary button.
-   * @default "primary"
-   */
-  buttonColor?: ColorSchemeName,
-}
-
-interface Props extends Omit<DialogOptions, 'message'> {
-  /**
-   * Function to run when the confirm button is clicked.
-   */
-  onConfirm: () => void,
-  /**
-   * Function to run when the cancel button is clicked.
-   */
-  onCancel: () => void,
-}
-
-const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
-  center: 'center',
-  left: 'start',
-  right: 'end',
-}
-
-/**
- * A dialog, i.e. A UI with title, subtitle, close button, content and a set of buttons: cancel and confirm. May be placed under a Modal or
- * RightPanel.
- * @param props the React props of the component {@link Props}.
- */
-export const Dialog = ({
-  children,
-  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: '24px 0 16px' }}>
-        <Label htmlFor="input-validation">{label}</Label>
-        <Input
-          id="input-validation"
-          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}>
-        {children}
-        {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, Label } 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 {
+  /**
+   * The expected value of the field.
+   */
+  value: string,
+  /**
+   * A custom label for the input field.
+   */
+  label?: string | ReactNode,
+  /**
+   * A placeholder for the input field.
+   */
+  placeholder?: string,
+}
+
+export interface DialogOptions {
+  /**
+   * The dialog's title.
+   */
+  title: string,
+  /**
+   * The dialog's subtitle.
+   */
+  subtitle?: string,
+  /**
+   * The dialog's content.
+   */
+  children: ReactNode,
+  /**
+   * A text for the confirm button. If left blank, the confirm button won't render.
+   */
+  confirm?: string,
+  /**
+   * A text for the cancel button. If left blank, the cancel button won't render.
+   */
+  cancel?: string,
+  /**
+   * A validation input field. If the validation is incorrect, the confirm button is disabled.
+   * If this is a string, the validation input's value must be equal to this string in order to enable the confirm button.
+   * If this is an object, a value, label and placeholder may be specified.
+   * Use false or undefined to not include a validation field.
+   */
+  validation?: false | string | Validation,
+  /**
+   * If this is a modal or a rightPanel.
+   * @default modal
+   */
+  type?: 'modal' | 'panel',
+  /**
+   * The placement for the confirm/cancel buttons.
+   * @default "left" if type is "panel", "right" otherwise.
+   */
+  buttonPlacement?: 'left' | 'center' | 'right',
+  /**
+   * The color of the primary button.
+   * @default "primary"
+   */
+  buttonColor?: ColorSchemeName,
+}
+
+interface Props extends Omit<DialogOptions, 'message'> {
+  /**
+   * Function to run when the confirm button is clicked.
+   */
+  onConfirm: () => void,
+  /**
+   * Function to run when the cancel button is clicked.
+   */
+  onCancel: () => void,
+}
+
+const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
+  center: 'center',
+  left: 'start',
+  right: 'end',
+}
+
+/**
+ * A dialog, i.e. A UI with title, subtitle, close button, content and a set of buttons: cancel and confirm. May be placed under a Modal or
+ * RightPanel.
+ * @param props the React props of the component {@link Props}.
+ */
+export const Dialog = ({
+  children,
+  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: '24px 0 16px' }}>
+        <Label htmlFor="input-validation">{label}</Label>
+        <Input
+          id="input-validation"
+          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}>
+        {children}
+        {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,62 +1,62 @@
-import { Flex } from '@citric/core'
-import { SelectionListProps } from '@stack-spot/portal-components/SelectionList'
-import { useAnchorTag } from '@stack-spot/portal-components/anchor'
-import { Logo } from '@stack-spot/portal-components/svg'
-import { ReactNode } from 'react'
-import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
-import { UserMenu } from './UserMenu'
-
-export interface HeaderProps {
-  /**
-   * The logo to show in the header, if the portal switch feature is disabled.
-   */
-  logo?: ReactNode,
-  /**
-   * The url the logo links to, if the portal switch feature is disabled.
-   */
-  logoHref?: string,
-  /**
-   * The username to show in the user menu.
-   */
-  userName?: string,
-  /**
-   * The email to show in the user menu.
-   */
-  email?: string,
-  /**
-   * A portal switch config. If not specified, disables the portal switch feature.
-   */
-  portalSwitch?: PortalSwitcherProps['portals'],
-  /**
-   * The options to show in the user menu.
-   */
-  options?: SelectionListProps['items'],
-  /**
-   * A custom React Node to show at the center of the header. This is a good place for a search field, for instance.
-   */
-  center?: ReactNode,
-  /**
-   * A custom React Node to show at the right (end) of the header.
-   */
-  right?: ReactNode,
-}
-
-/**
- * The page header.
- * @param props the React props for the header {@link HeaderProps}.
- */
-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} />}
-    </>
-  )
-}
+import { Flex } from '@citric/core'
+import { SelectionListProps } from '@stack-spot/portal-components/SelectionList'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { Logo } from '@stack-spot/portal-components/svg'
+import { ReactNode } from 'react'
+import { PortalSwitcher, PortalSwitcherProps } from './PortalSwitcher'
+import { UserMenu } from './UserMenu'
+
+export interface HeaderProps {
+  /**
+   * The logo to show in the header, if the portal switch feature is disabled.
+   */
+  logo?: ReactNode,
+  /**
+   * The url the logo links to, if the portal switch feature is disabled.
+   */
+  logoHref?: string,
+  /**
+   * The username to show in the user menu.
+   */
+  userName?: string,
+  /**
+   * The email to show in the user menu.
+   */
+  email?: string,
+  /**
+   * A portal switch config. If not specified, disables the portal switch feature.
+   */
+  portalSwitch?: PortalSwitcherProps['portals'],
+  /**
+   * The options to show in the user menu.
+   */
+  options?: SelectionListProps['items'],
+  /**
+   * A custom React Node to show at the center of the header. This is a good place for a search field, for instance.
+   */
+  center?: ReactNode,
+  /**
+   * A custom React Node to show at the right (end) of the header.
+   */
+  right?: ReactNode,
+}
+
+/**
+ * The page header.
+ * @param props the React props for the header {@link HeaderProps}.
+ */
+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,80 +1,80 @@
-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 {
-  /**
-   * The title for the modal or right panel.
-   */
-  title: string,
-  /**
-   * The subtitle for the modal or right panel.
-   */
-  subtitle?: string,
-  /**
-   * The content for the modal or right panel.
-   */
-  children: ReactNode,
-  /**
-   * A function to run when the close button is pressed.
-   */
-  onClose?: () => void,
-}
-
-interface Props extends OverlayContentProps {
-  /**
-   * A function to run when the close button is pressed.
-   */
-  onClose: () => void,
-  /**
-   * Whether this is a modal or a right panel.
-   */
-  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;
-  }
-`
-
-/**
- * Renders a modal or right panel with title, subtitle, close button and content.
- * @param props the React props for the component {@link Props}.
- */
-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 {
+  /**
+   * The title for the modal or right panel.
+   */
+  title: string,
+  /**
+   * The subtitle for the modal or right panel.
+   */
+  subtitle?: string,
+  /**
+   * The content for the modal or right panel.
+   */
+  children: ReactNode,
+  /**
+   * A function to run when the close button is pressed.
+   */
+  onClose?: () => void,
+}
+
+interface Props extends OverlayContentProps {
+  /**
+   * A function to run when the close button is pressed.
+   */
+  onClose: () => void,
+  /**
+   * Whether this is a modal or a right panel.
+   */
+  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;
+  }
+`
+
+/**
+ * Renders a modal or right panel with title, subtitle, close button and content.
+ * @param props the React props for the component {@link Props}.
+ */
+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>
+  )
+}