@stack-spot/citric-react 0.36.0 → 0.37.0

package/src/components/Tabs/index.tsx

@@ -1,87 +1,87 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
-import { withRef } from '../../utils/react'
-import { CitricComponent } from '../CitricComponent'
-import { ErrorBoundary } from '../ErrorBoundary'
-import { ProgressCircular } from '../ProgressCircular'
-import { Center } from '../layout'
-import { TabController } from './TabController'
-import { TabsProps } from './types'
-import { findSelectedIndex } from './utils'
-
-const ctx = createContext<TabController<any> | undefined>(undefined)
-
-/**
- * Builds a Tab selector. The content of a tab is a React component and it can suspend, i.e. tabs can be asynchronously loaded.
- * 
- * @example
- * 
- * ```
- * const tabs: Tab[] = useMemo(() => [
- *   { key: 'tab1', label: 'Tab 1', content: <><h1>First tab</h1><p>Content of the first tab</p></> },
- *   { key: 'tab2', label: 'Tab 2', content: <><h1>Second tab</h1><p>Content of the second tab</p></> },
- *   { key: 'tab3', label: 'Tab 3', content: <><h1>Third tab</h1><p>Content of the third tab</p></> },
- * ], [])
- * 
- * return <Tabs tabs={tabs} />
- * ```
- */
-export const Tabs = withRef(
-  function Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>) {
-    const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
-    const t = useTranslate(dictionary)
-    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
-
-    useEffect(() => {
-      if (value) controller.setValue(value)
-    }, [value])
-
-    useEffect(() => controller.onChange((v) => {
-      setSelectedIndex(findSelectedIndex(tabs, v))
-      onChange?.(v)
-    }), [tabs])
-
-    const nav = useMemo(
-      () => tabs.map(({ key, label, disabled }, index) => (
-        <label key={key}>
-          <input type="radio" role="tab" checked={index === selectedIndex} onChange={() => controller.setValue(key)} disabled={disabled} />
-          {label || key}
-        </label>
-      )),
-      [tabs, selectedIndex],
-    )
-
-    return (
-      <ctx.Provider value={controller}>
-        <CitricComponent tag="div" component="tabs" className={listToClass([className, equallySized && 'equally-sized'])} {...props}>
-          <nav>{nav}</nav>
-          <section>
-            <ErrorBoundary key={selectedIndex} message={t.error}>
-              <Suspense fallback={<Center style={{ padding: '20px' }}><ProgressCircular /></Center>}>
-                {selectedIndex === -1 ? null : tabs[selectedIndex]?.content}
-              </Suspense>
-            </ErrorBoundary>
-          </section>
-        </CitricComponent>
-      </ctx.Provider>
-    )
-  },
-)
-
-/**
- * Request the tab controller of the current context. Use this to control the tabs in the parent components. This returns undefined when
- * no tab context is found.
- */
-export function useTabController<Key extends string = string>(): TabController<Key> | undefined {
-  return useContext(ctx)
-}
-
-const dictionary = {
-  en: {
-    error: 'Error while loading the tab.',
-  },
-  pt: {
-    error: 'Ocorreu um erro ao carregar a aba.',
-  },
-} satisfies Dictionary
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
+import { withRef } from '../../utils/react'
+import { CitricComponent } from '../CitricComponent'
+import { ErrorBoundary } from '../ErrorBoundary'
+import { ProgressCircular } from '../ProgressCircular'
+import { Center } from '../layout'
+import { TabController } from './TabController'
+import { TabsProps } from './types'
+import { findSelectedIndex } from './utils'
+
+const ctx = createContext<TabController<any> | undefined>(undefined)
+
+/**
+ * Builds a Tab selector. The content of a tab is a React component and it can suspend, i.e. tabs can be asynchronously loaded.
+ * 
+ * @example
+ * 
+ * ```
+ * const tabs: Tab[] = useMemo(() => [
+ *   { key: 'tab1', label: 'Tab 1', content: <><h1>First tab</h1><p>Content of the first tab</p></> },
+ *   { key: 'tab2', label: 'Tab 2', content: <><h1>Second tab</h1><p>Content of the second tab</p></> },
+ *   { key: 'tab3', label: 'Tab 3', content: <><h1>Third tab</h1><p>Content of the third tab</p></> },
+ * ], [])
+ * 
+ * return <Tabs tabs={tabs} />
+ * ```
+ */
+export const Tabs = withRef(
+  function Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>) {
+    const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
+    const t = useTranslate(dictionary)
+    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
+
+    useEffect(() => {
+      if (value) controller.setValue(value)
+    }, [value])
+
+    useEffect(() => controller.onChange((v) => {
+      setSelectedIndex(findSelectedIndex(tabs, v))
+      onChange?.(v)
+    }), [tabs])
+
+    const nav = useMemo(
+      () => tabs.map(({ key, label, disabled }, index) => (
+        <label key={key}>
+          <input type="radio" role="tab" checked={index === selectedIndex} onChange={() => controller.setValue(key)} disabled={disabled} />
+          {label || key}
+        </label>
+      )),
+      [tabs, selectedIndex],
+    )
+
+    return (
+      <ctx.Provider value={controller}>
+        <CitricComponent tag="div" component="tabs" className={listToClass([className, equallySized && 'equally-sized'])} {...props}>
+          <nav>{nav}</nav>
+          <section>
+            <ErrorBoundary key={selectedIndex} message={t.error}>
+              <Suspense fallback={<Center style={{ padding: '20px' }}><ProgressCircular /></Center>}>
+                {selectedIndex === -1 ? null : tabs[selectedIndex]?.content}
+              </Suspense>
+            </ErrorBoundary>
+          </section>
+        </CitricComponent>
+      </ctx.Provider>
+    )
+  },
+)
+
+/**
+ * Request the tab controller of the current context. Use this to control the tabs in the parent components. This returns undefined when
+ * no tab context is found.
+ */
+export function useTabController<Key extends string = string>(): TabController<Key> | undefined {
+  return useContext(ctx)
+}
+
+const dictionary = {
+  en: {
+    error: 'Error while loading the tab.',
+  },
+  pt: {
+    error: 'Ocorreu um erro ao carregar a aba.',
+  },
+} satisfies Dictionary

package/src/components/Tabs/types.ts

@@ -1,54 +1,54 @@
-import { WithColorPalette, WithColorScheme } from '../../types'
-import { TabController } from './TabController'
-
-export interface Tab<Key extends string = string> {
-  /**
-   * A unique identifier for the tab.
-   */
-  key: Key,
-  /**
-   * The tab's label. Will be the "key" if not provided.
-   */
-  label?: string,
-  /**
-   * The tab's content. This can be a suspended component.
-   * 
-   * Attention: consider using React's lazy loading to render the tab view.
-   */
-  content: React.ReactNode,
-  /**
-   * Whether or not this tab is disabled.
-   * 
-   * @default false
-   */
-  disabled?: boolean,
-}
-
-export interface BaseTabsProps<Key extends string> extends WithColorScheme, WithColorPalette {
-  /**
-   * The tabs to render.
-   */
-  tabs: Tab<Key>[],
-  /**
-   * The key of the current tab. Use this only if you intend to control the tabs from the outside.
-   */
-  value?: Key,
-  /**
-   * What to do when the tab changes. Use this only if you intend to control the tabs from the outside.
-   * 
-   * @param key the key of the selected tab.
-   */
-  onChange?: (key: Key) => void,
-  /**
-   * A tab-controller, useful if you want to control the tabs outside the component context.
-   */
-  controller?: TabController<Key>,
-  /**
-   * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
-   * 
-   * @default false
-   */
-  equallySized?: boolean,
-}
-
-export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>
+import { WithColorPalette, WithColorScheme } from '../../types'
+import { TabController } from './TabController'
+
+export interface Tab<Key extends string = string> {
+  /**
+   * A unique identifier for the tab.
+   */
+  key: Key,
+  /**
+   * The tab's label. Will be the "key" if not provided.
+   */
+  label?: string,
+  /**
+   * The tab's content. This can be a suspended component.
+   * 
+   * Attention: consider using React's lazy loading to render the tab view.
+   */
+  content: React.ReactNode,
+  /**
+   * Whether or not this tab is disabled.
+   * 
+   * @default false
+   */
+  disabled?: boolean,
+}
+
+export interface BaseTabsProps<Key extends string> extends WithColorScheme, WithColorPalette {
+  /**
+   * The tabs to render.
+   */
+  tabs: Tab<Key>[],
+  /**
+   * The key of the current tab. Use this only if you intend to control the tabs from the outside.
+   */
+  value?: Key,
+  /**
+   * What to do when the tab changes. Use this only if you intend to control the tabs from the outside.
+   * 
+   * @param key the key of the selected tab.
+   */
+  onChange?: (key: Key) => void,
+  /**
+   * A tab-controller, useful if you want to control the tabs outside the component context.
+   */
+  controller?: TabController<Key>,
+  /**
+   * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
+   * 
+   * @default false
+   */
+  equallySized?: boolean,
+}
+
+export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>

package/src/components/Tabs/utils.ts

@@ -1,6 +1,6 @@
-import { Tab } from './types'
-
-export function findSelectedIndex<Key extends string>(tabs: Tab<Key>[], selectedTabKey: Key) {
-  const index = tabs.findIndex(t => t.key === selectedTabKey)
-  return index === -1 ? 0 : index
-}
+import { Tab } from './types'
+
+export function findSelectedIndex<Key extends string>(tabs: Tab<Key>[], selectedTabKey: Key) {
+  const index = tabs.findIndex(t => t.key === selectedTabKey)
+  return index === -1 ? 0 : index
+}

package/src/components/Text.ts

@@ -1,111 +1,111 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { createElement } from 'react'
-import { HTMLTag, TextAppearance, WithColor } from '../types'
-import { applyColor, applyTextAppearance } from '../utils/css'
-import { withRef } from '../utils/react'
-
-type SupportedTags = 'span' | 'small' | 'p' | `h${1|2|3|4|5|6}` | 'pre'
-
-export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends WithColor {
-  /**
-   * If "tag" is not defined, it will be based on the value of "appearance".
-   * If neither "appearance" or "tag" are defined, the tag will be "p".
-   */
-  tag?: T,
-  /**
-   * If "appearance" is not defined, it will be based on the value of "tag".
-   * If neither "appearance" or "tag" are defined, the appearance will be inherited from the parent HTML element.
-   */
-  appearance?: TextAppearance,
-  /**
-   * Add default margins to the text.
-   * 
-   * @default false
-   */
-  showMargins?: boolean,
-  /**
-   * Shortcut to `style.fontWeight`.
-   */
-  weight?: React.CSSProperties['fontWeight'],
-  /**
-   * Shortcut to `style.textAlign`.
-   */
-  align?: React.CSSProperties['textAlign'],
-  /**
-   * Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
-   */
-  nowrapEllipsis?: boolean,
-}
-
-export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>
-
-const tagToAppearance: Record<SupportedTags, TextAppearance | undefined> = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  span: undefined,
-  small: 'microtext1',
-  p: 'body2',
-  pre: 'code2',
-}
-
-const appearanceToTag: Record<TextAppearance, SupportedTags> = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  body1: 'p',
-  body2: 'p',
-  code1: 'pre',
-  code2: 'pre',
-  display1: 'h1',
-  microtext1: 'small',
-  overheader1: 'p',
-  overheader2: 'p',
-  subtitle1: 'p',
-  subtitle2: 'p',
-  subtitle3: 'p',
-  subtitle4: 'p',
-}
-
-/**
- * Renders a text. The tag can be set by the property "tag". If unset, the tag rendered will be based on the property "appearance". If
- * "appearance" is also unset, the tag "p" is rendered.
- * 
- * Texts have no margin by default, to enable margins, use `showMargins = true`.
- * 
- * If the appearance is not set, it will be inherited from the parent.
- * 
- * A font can be applied to a text without this component, just use `{ font: theme.font.$textAppearance }` in your style.
- * 
- * @example
- * ```
- * <Text appearance="body2">Hello World!</Text>
- * ```
- */
-export const Text = withRef(
-  function Text<T extends SupportedTags>(
-    { tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
-  ) {
-    const renderedTag = tag || appearanceToTag[appearance || 'body2']
-    const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
-    if (!appearance && !showMargins) style = { margin: 0, ...style }
-    if (weight) style = { fontWeight: weight, ...style }
-    if (align) style = { textAlign: align, ...style }
-    if (nowrapEllipsis) style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style }
-    return createElement(
-      renderedTag,
-      {
-        className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
-        style: applyColor(style, color),
-        ...props,
-      },
-      children,
-    )
-  },
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { createElement } from 'react'
+import { HTMLTag, TextAppearance, WithColor } from '../types'
+import { applyColor, applyTextAppearance } from '../utils/css'
+import { withRef } from '../utils/react'
+
+type SupportedTags = 'span' | 'small' | 'p' | `h${1|2|3|4|5|6}` | 'pre'
+
+export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends WithColor {
+  /**
+   * If "tag" is not defined, it will be based on the value of "appearance".
+   * If neither "appearance" or "tag" are defined, the tag will be "p".
+   */
+  tag?: T,
+  /**
+   * If "appearance" is not defined, it will be based on the value of "tag".
+   * If neither "appearance" or "tag" are defined, the appearance will be inherited from the parent HTML element.
+   */
+  appearance?: TextAppearance,
+  /**
+   * Add default margins to the text.
+   * 
+   * @default false
+   */
+  showMargins?: boolean,
+  /**
+   * Shortcut to `style.fontWeight`.
+   */
+  weight?: React.CSSProperties['fontWeight'],
+  /**
+   * Shortcut to `style.textAlign`.
+   */
+  align?: React.CSSProperties['textAlign'],
+  /**
+   * Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
+   */
+  nowrapEllipsis?: boolean,
+}
+
+export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>
+
+const tagToAppearance: Record<SupportedTags, TextAppearance | undefined> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  span: undefined,
+  small: 'microtext1',
+  p: 'body2',
+  pre: 'code2',
+}
+
+const appearanceToTag: Record<TextAppearance, SupportedTags> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  body1: 'p',
+  body2: 'p',
+  code1: 'pre',
+  code2: 'pre',
+  display1: 'h1',
+  microtext1: 'small',
+  overheader1: 'p',
+  overheader2: 'p',
+  subtitle1: 'p',
+  subtitle2: 'p',
+  subtitle3: 'p',
+  subtitle4: 'p',
+}
+
+/**
+ * Renders a text. The tag can be set by the property "tag". If unset, the tag rendered will be based on the property "appearance". If
+ * "appearance" is also unset, the tag "p" is rendered.
+ * 
+ * Texts have no margin by default, to enable margins, use `showMargins = true`.
+ * 
+ * If the appearance is not set, it will be inherited from the parent.
+ * 
+ * A font can be applied to a text without this component, just use `{ font: theme.font.$textAppearance }` in your style.
+ * 
+ * @example
+ * ```
+ * <Text appearance="body2">Hello World!</Text>
+ * ```
+ */
+export const Text = withRef(
+  function Text<T extends SupportedTags>(
+    { tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
+  ) {
+    const renderedTag = tag || appearanceToTag[appearance || 'body2']
+    const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
+    if (!appearance && !showMargins) style = { margin: 0, ...style }
+    if (weight) style = { fontWeight: weight, ...style }
+    if (align) style = { textAlign: align, ...style }
+    if (nowrapEllipsis) style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style }
+    return createElement(
+      renderedTag,
+      {
+        className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
+        style: applyColor(style, color),
+        ...props,
+      },
+      children,
+    )
+  },
+)

package/src/components/Textarea.tsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import { ControlledTextarea, WithColorScheme } from '../types'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseTextareaProps extends WithColorScheme {
-  value?: string,
-  onChange?: (value: string) => void,
-  ref?: React.MutableRefObject<HTMLTextAreaElement | null>,
-}
-
-export type TextareaProps = ControlledTextarea & BaseTextareaProps
-
-/**
- * Renders a textarea HTML element. With the difference that the value is not determined by the children, but the property "value" instead.
- * 
- * Attention: "onChange" receives the new value, not the event.
- * 
- * @example
- * ```
- * const [value, setValue] = useState('')
- * return <Textarea value={value} onChange={setValue} />
- * ```
- */
-export const Textarea = withRef(({ value, onChange, ...props }: TextareaProps) =>
-  <CitricComponent tag="textarea" component="textarea" value={value} onChange={e => onChange?.(e.target.value)} {...props} />,
-)
+import React from 'react'
+import { ControlledTextarea, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseTextareaProps extends WithColorScheme {
+  value?: string,
+  onChange?: (value: string) => void,
+  ref?: React.MutableRefObject<HTMLTextAreaElement | null>,
+}
+
+export type TextareaProps = ControlledTextarea & BaseTextareaProps
+
+/**
+ * Renders a textarea HTML element. With the difference that the value is not determined by the children, but the property "value" instead.
+ * 
+ * Attention: "onChange" receives the new value, not the event.
+ * 
+ * @example
+ * ```
+ * const [value, setValue] = useState('')
+ * return <Textarea value={value} onChange={setValue} />
+ * ```
+ */
+export const Textarea = withRef(({ value, onChange, ...props }: TextareaProps) =>
+  <CitricComponent tag="textarea" component="textarea" value={value} onChange={e => onChange?.(e.target.value)} {...props} />,
+)