@stack-spot/citric-react 0.41.1 → 0.42.0-beta.0

package/src/components/Stepper.tsx

@@ -1,163 +1,163 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { withRef } from '../utils/react'
-import { Button } from './Button'
-import { Column, Row } from './layout'
-import { Tabs } from './Tabs'
-import { TabController } from './Tabs/TabController'
-import { BaseTabsProps, Tab } from './Tabs/types'
-import { findSelectedIndex } from './Tabs/utils'
-
-export interface BaseStepperProps<Key extends string> extends BaseTabsProps<Key> {
-  /**
-   * Should we show buttons to control the step we are in?
-   * 
-   * Set it to false to not show any buttons, set it to true to show a default set of buttons, set it to an object to customize the buttons.
-   * 
-   * @default true
-   */
-  buttons?: boolean | {
-    /**
-     * The text for the previous button.
-     */
-    previous?: string,
-    /**
-     * The text for the next button.
-     */
-    next?: string,
-    /**
-     * The text for the finish button.
-     */
-    finish?: string,
-    /**
-     * The text for the cancel button.
-     */
-    cancel?: string,
-    /**
-     * When set, instead of not showing a previous button in the first step, it shows a cancel button. This function is run whenever the
-     * cancel button is clicked.
-     */
-    onCancel?: () => void,
-    /**
-     * An additional function to run whenever the previous button is clicked. Return false to prevent the default action (going to the
-     * previous step).
-     */
-    onPrevious?: (tab: Key) => void | boolean,
-    /**
-     * An additional function to run whenever the next button is clicked. Return false to prevent the default action (going to the
-     * next step).
-     */
-    onNext?: (tab: Key) => void | boolean,
-    /**
-     * When set, instead of not showing a next button in the final step, it shows a finish button. This function is run whenever the
-     * finish button is clicked.
-     */
-    onFinish?: () => void,
-  },
-}
-
-export type StepperProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseStepperProps<Key>
-
-function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key | undefined) {
-  let index = findSelectedIndex(tabs, value ?? '')
-  if (index < 0) index = 0
-  return tabs.map((t, i) => ({ ...t, disabled: i > index }))
-}
-
-/**
- * A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
- * `useTabsController()` from within a tab (step) content.
- * 
- * Besides all the properties in "Tabs", the "Stepper" can create a set of "Previous" and "Next" buttons through the property "buttons". By
- * default, the buttons are rendered, to disable them, pass `buttons = false`.
- * 
- * @example
- * 
- * ```
- * const steps: Tab[] = useMemo(() => [
- *   { key: 'step1', label: 'Step 1', content: <><h1>First step</h1><p>Content of the first step</p></> },
- *   { key: 'step2', label: 'Step 2', content: <><h1>Second step</h1><p>Content of the second step</p></> },
- *   { key: 'step3', label: 'Step 3', content: <><h1>Third step</h1><p>Content of the third step</p></> },
- * ], [])
- * 
- * return <Stepper tabs={steps} />
- * ```
- */
-export const Stepper = withRef(
-  function Stepper<Key extends string>(
-    { tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }: StepperProps<Key>,
-  ) {
-    const controller = useMemo(
-      () => ctrl ?? new TabController<Key>(initialTabs.map(t => t.key), value || initialTabs[0]?.key),
-      [],
-    )
-    const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value))
-    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
-    const t = useTranslate(dictionary)
-
-    useEffect(() => controller.onChange((v) => {
-      setSelectedIndex(findSelectedIndex(tabs, v))
-    }), [tabs])
-
-    useEffect(() => controller.onChange((value) => {
-      setTabs(getTabsWithDisabled(initialTabs, value))
-    }), [])
-
-    const onPrevious = useCallback(() => {
-      controller.previous()
-      if (typeof buttons === 'object') buttons.onPrevious?.(controller.getValue())
-    }, [])
-
-    const onNext = useCallback(() => {
-      controller.next()
-      if (typeof buttons === 'object') buttons.onNext?.(controller.getValue())
-    }, [])
-
-    return buttons ? (
-      <Column {...props} className={className} gap="20px">
-        <Tabs tabs={tabs} controller={controller} value={value} onChange={onChange} className="stepper" />
-        <Row justifyContent={(typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between'}>
-          {selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (
-            <Button onClick={buttons.onCancel} colorScheme="inverse" appearance="outlined">{buttons.cancel || t.cancel}</Button>
-          )}
-          {selectedIndex > 0 && buttons && (
-            <Button onClick={onPrevious} colorScheme="inverse" appearance="outlined">
-              {(typeof buttons === 'object' && buttons.previous) || t.previous}
-            </Button>
-          )}
-          {selectedIndex < tabs.length - 1 && buttons && (
-            <Button onClick={onNext}>
-              {(typeof buttons === 'object' && buttons.next) || t.next}
-            </Button>
-          )}
-          {selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (
-            <Button onClick={buttons.onFinish}>{buttons.finish || t.finish}</Button>
-          )}
-        </Row>
-      </Column>
-    ) : <Tabs
-      tabs={tabs}
-      controller={controller}
-      value={value}
-      onChange={onChange}
-      className={listToClass([className, 'stepper'])}
-      {...props}
-    />
-  },
-)
-
-const dictionary = {
-  en: {
-    cancel: 'Cancel',
-    previous: 'Previous',
-    next: 'Next',
-    finish: 'Finish',
-  },
-  pt: {
-    cancel: 'Cancelar',
-    previous: 'Anterior',
-    next: 'Próximo',
-    finish: 'Finalizar',
-  },
-} satisfies Dictionary
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { withRef } from '../utils/react'
+import { Button } from './Button'
+import { Column, Row } from './layout'
+import { Tabs } from './Tabs'
+import { TabController } from './Tabs/TabController'
+import { BaseTabsProps, Tab } from './Tabs/types'
+import { findSelectedIndex } from './Tabs/utils'
+
+export interface BaseStepperProps<Key extends string> extends BaseTabsProps<Key> {
+  /**
+   * Should we show buttons to control the step we are in?
+   * 
+   * Set it to false to not show any buttons, set it to true to show a default set of buttons, set it to an object to customize the buttons.
+   * 
+   * @default true
+   */
+  buttons?: boolean | {
+    /**
+     * The text for the previous button.
+     */
+    previous?: string,
+    /**
+     * The text for the next button.
+     */
+    next?: string,
+    /**
+     * The text for the finish button.
+     */
+    finish?: string,
+    /**
+     * The text for the cancel button.
+     */
+    cancel?: string,
+    /**
+     * When set, instead of not showing a previous button in the first step, it shows a cancel button. This function is run whenever the
+     * cancel button is clicked.
+     */
+    onCancel?: () => void,
+    /**
+     * An additional function to run whenever the previous button is clicked. Return false to prevent the default action (going to the
+     * previous step).
+     */
+    onPrevious?: (tab: Key) => void | boolean,
+    /**
+     * An additional function to run whenever the next button is clicked. Return false to prevent the default action (going to the
+     * next step).
+     */
+    onNext?: (tab: Key) => void | boolean,
+    /**
+     * When set, instead of not showing a next button in the final step, it shows a finish button. This function is run whenever the
+     * finish button is clicked.
+     */
+    onFinish?: () => void,
+  },
+}
+
+export type StepperProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseStepperProps<Key>
+
+function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key | undefined) {
+  let index = findSelectedIndex(tabs, value ?? '')
+  if (index < 0) index = 0
+  return tabs.map((t, i) => ({ ...t, disabled: i > index }))
+}
+
+/**
+ * A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
+ * `useTabsController()` from within a tab (step) content.
+ * 
+ * Besides all the properties in "Tabs", the "Stepper" can create a set of "Previous" and "Next" buttons through the property "buttons". By
+ * default, the buttons are rendered, to disable them, pass `buttons = false`.
+ * 
+ * @example
+ * 
+ * ```
+ * const steps: Tab[] = useMemo(() => [
+ *   { key: 'step1', label: 'Step 1', content: <><h1>First step</h1><p>Content of the first step</p></> },
+ *   { key: 'step2', label: 'Step 2', content: <><h1>Second step</h1><p>Content of the second step</p></> },
+ *   { key: 'step3', label: 'Step 3', content: <><h1>Third step</h1><p>Content of the third step</p></> },
+ * ], [])
+ * 
+ * return <Stepper tabs={steps} />
+ * ```
+ */
+export const Stepper = withRef(
+  function Stepper<Key extends string>(
+    { tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }: StepperProps<Key>,
+  ) {
+    const controller = useMemo(
+      () => ctrl ?? new TabController<Key>(initialTabs.map(t => t.key), value || initialTabs[0]?.key),
+      [],
+    )
+    const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value))
+    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
+    const t = useTranslate(dictionary)
+
+    useEffect(() => controller.onChange((v) => {
+      setSelectedIndex(findSelectedIndex(tabs, v))
+    }), [tabs])
+
+    useEffect(() => controller.onChange((value) => {
+      setTabs(getTabsWithDisabled(initialTabs, value))
+    }), [])
+
+    const onPrevious = useCallback(() => {
+      controller.previous()
+      if (typeof buttons === 'object') buttons.onPrevious?.(controller.getValue())
+    }, [])
+
+    const onNext = useCallback(() => {
+      controller.next()
+      if (typeof buttons === 'object') buttons.onNext?.(controller.getValue())
+    }, [])
+
+    return buttons ? (
+      <Column {...props} className={className} gap="20px">
+        <Tabs tabs={tabs} controller={controller} value={value} onChange={onChange} className="stepper" />
+        <Row justifyContent={(typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between'}>
+          {selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (
+            <Button onClick={buttons.onCancel} colorScheme="inverse" appearance="outlined">{buttons.cancel || t.cancel}</Button>
+          )}
+          {selectedIndex > 0 && buttons && (
+            <Button onClick={onPrevious} colorScheme="inverse" appearance="outlined">
+              {(typeof buttons === 'object' && buttons.previous) || t.previous}
+            </Button>
+          )}
+          {selectedIndex < tabs.length - 1 && buttons && (
+            <Button onClick={onNext}>
+              {(typeof buttons === 'object' && buttons.next) || t.next}
+            </Button>
+          )}
+          {selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (
+            <Button onClick={buttons.onFinish}>{buttons.finish || t.finish}</Button>
+          )}
+        </Row>
+      </Column>
+    ) : <Tabs
+      tabs={tabs}
+      controller={controller}
+      value={value}
+      onChange={onChange}
+      className={listToClass([className, 'stepper'])}
+      {...props}
+    />
+  },
+)
+
+const dictionary = {
+  en: {
+    cancel: 'Cancel',
+    previous: 'Previous',
+    next: 'Next',
+    finish: 'Finish',
+  },
+  pt: {
+    cancel: 'Cancelar',
+    previous: 'Anterior',
+    next: 'Próximo',
+    finish: 'Finalizar',
+  },
+} satisfies Dictionary