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

package/src/components/Pagination.tsx

@@ -1,133 +1,133 @@
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useMemo } from 'react'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-import { IconButton } from './IconBox'
-
-const DEFAULT_PAGE = 1
-const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 30]
-
-export interface PaginationValue {
-  /**
-   * The first page is 1. If "0" is provided, it will be treated as if it was "1".
-   */
-  page: number,
-  /**
-   * The current number of items in a page.
-   */
-  size: number,
-}
-
-export interface BasePaginationProps {
-  /**
-   * The options for the page size.
-   * 
-   * @default [10, 20, 30]
-   */
-  pageSizeOptions?: number[],
-  /**
-   * Total number of pages
-   */
-  totalPages: number,
-  /**
-   * The current page and page size.
-   */
-  value: PaginationValue,
-  /**
-   * Function to run whenever the page size or current page changes.
-   */
-  onChange: (value: PaginationValue) => void,
-}
-
-export type PaginationProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BasePaginationProps
-
-/**
- * Renders a pagination UI, letting the user chose one among multiple pages. This is generally rendered at the bottom of a table.
- * 
- * @example
- * ```
- * const [pageData, setPageData] = useState({ page: 1, size: 10 })
- * return <Pagination
- *   value={pageData}
- *   totalPages={50}
- *   onChange={setPageData}
- * />
- * ```
- */
-export const Pagination = withRef((
-  { 
-    value,
-    onChange,
-    totalPages,
-    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, 
-    ...props 
-  }: PaginationProps,
-) => {
-  const t = useTranslate(dictionary)
-  const sizeOptions = useMemo(
-    () => pageSizeOptions.map(o => <option key={o} selected={value.size === o}>{o}</option>),
-    [pageSizeOptions],
-  )
-  const pageOptions = useMemo(() => {
-    const options: React.ReactElement[] = []
-    for (let i = 1; i <= totalPages; i++) {
-      options.push(<option key={i} value={i} selected={value.page === i}>{i}</option>)
-    }
-    return options
-  }, [value.page, totalPages])
-
-  return (
-    <CitricComponent tag="div" component="pagination" {...props}>
-      <div className="page-size">
-        <label>
-          {t.itemsPerPage}:
-          <select
-            name="itemsPerPage"
-            onChange={e => onChange({ page: DEFAULT_PAGE, size: parseInt(e.target.value) })}
-          >
-            {sizeOptions}
-          </select>
-        </label>
-      </div>
-      <div className="page-number">
-        <label>
-          <select
-            name="page"
-            onChange={e => onChange({ page: parseInt(e.target.value), size: value.size })}
-            value={value.page || DEFAULT_PAGE}
-          >
-            {pageOptions}
-          </select>
-        </label>
-        {totalPages > 1 ? interpolate(t.ofTotalPlural, totalPages) : t.ofTotalSingular}
-        <IconButton
-          icon="ChevronLeft"
-          aria-label="previous"
-          title="previous"
-          disabled={value.page === DEFAULT_PAGE}
-          onClick={() => onChange({ page: Math.max(value.page - 1, DEFAULT_PAGE), size: value.size })}
-        />
-        <IconButton
-          icon="ChevronRight"
-          aria-label="next"
-          title="next"
-          disabled={value.page === totalPages}
-          onClick={() => onChange({ page: Math.min(totalPages, value.page + 1), size: value.size })}
-        />
-      </div>
-    </CitricComponent>
-  )
-})
-
-const dictionary = {
-  en: {
-    itemsPerPage: 'Items per page',
-    ofTotalSingular: 'of 1 page',
-    ofTotalPlural: 'of $0 pages',
-  },
-  pt: {
-    itemsPerPage: 'Itens por página',
-    ofTotalSingular: 'de 1 página',
-    ofTotalPlural: 'de $0 páginas',
-  },
-} satisfies Dictionary
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo } from 'react'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+import { IconButton } from './IconBox'
+
+const DEFAULT_PAGE = 1
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 30]
+
+export interface PaginationValue {
+  /**
+   * The first page is 1. If "0" is provided, it will be treated as if it was "1".
+   */
+  page: number,
+  /**
+   * The current number of items in a page.
+   */
+  size: number,
+}
+
+export interface BasePaginationProps {
+  /**
+   * The options for the page size.
+   * 
+   * @default [10, 20, 30]
+   */
+  pageSizeOptions?: number[],
+  /**
+   * Total number of pages
+   */
+  totalPages: number,
+  /**
+   * The current page and page size.
+   */
+  value: PaginationValue,
+  /**
+   * Function to run whenever the page size or current page changes.
+   */
+  onChange: (value: PaginationValue) => void,
+}
+
+export type PaginationProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BasePaginationProps
+
+/**
+ * Renders a pagination UI, letting the user chose one among multiple pages. This is generally rendered at the bottom of a table.
+ * 
+ * @example
+ * ```
+ * const [pageData, setPageData] = useState({ page: 1, size: 10 })
+ * return <Pagination
+ *   value={pageData}
+ *   totalPages={50}
+ *   onChange={setPageData}
+ * />
+ * ```
+ */
+export const Pagination = withRef((
+  { 
+    value,
+    onChange,
+    totalPages,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, 
+    ...props 
+  }: PaginationProps,
+) => {
+  const t = useTranslate(dictionary)
+  const sizeOptions = useMemo(
+    () => pageSizeOptions.map(o => <option key={o} selected={value.size === o}>{o}</option>),
+    [pageSizeOptions],
+  )
+  const pageOptions = useMemo(() => {
+    const options: React.ReactElement[] = []
+    for (let i = 1; i <= totalPages; i++) {
+      options.push(<option key={i} value={i} selected={value.page === i}>{i}</option>)
+    }
+    return options
+  }, [value.page, totalPages])
+
+  return (
+    <CitricComponent tag="div" component="pagination" {...props}>
+      <div className="page-size">
+        <label>
+          {t.itemsPerPage}:
+          <select
+            name="itemsPerPage"
+            onChange={e => onChange({ page: DEFAULT_PAGE, size: parseInt(e.target.value) })}
+          >
+            {sizeOptions}
+          </select>
+        </label>
+      </div>
+      <div className="page-number">
+        <label>
+          <select
+            name="page"
+            onChange={e => onChange({ page: parseInt(e.target.value), size: value.size })}
+            value={value.page || DEFAULT_PAGE}
+          >
+            {pageOptions}
+          </select>
+        </label>
+        {totalPages > 1 ? interpolate(t.ofTotalPlural, totalPages) : t.ofTotalSingular}
+        <IconButton
+          icon="ChevronLeft"
+          aria-label="previous"
+          title="previous"
+          disabled={value.page === DEFAULT_PAGE}
+          onClick={() => onChange({ page: Math.max(value.page - 1, DEFAULT_PAGE), size: value.size })}
+        />
+        <IconButton
+          icon="ChevronRight"
+          aria-label="next"
+          title="next"
+          disabled={value.page === totalPages}
+          onClick={() => onChange({ page: Math.min(totalPages, value.page + 1), size: value.size })}
+        />
+      </div>
+    </CitricComponent>
+  )
+})
+
+const dictionary = {
+  en: {
+    itemsPerPage: 'Items per page',
+    ofTotalSingular: 'of 1 page',
+    ofTotalPlural: 'of $0 pages',
+  },
+  pt: {
+    itemsPerPage: 'Itens por página',
+    ofTotalSingular: 'de 1 página',
+    ofTotalPlural: 'de $0 páginas',
+  },
+} satisfies Dictionary

package/src/components/ProgressBar.tsx

@@ -1,45 +1,45 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { isNil } from 'lodash'
-import { WithColorPalette, WithColorScheme } from '../types'
-import { applyCSSVariable } from '../utils/css'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette {
-  /**
-   * A number varying from 0 to 100.
-   * 
-   * If not provided, the progress will be indeterminate, causing an animation loop.
-   */
-  progress?: number,
-  /**
-   * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
-   */
-  speed?: 'normal' | 'fast',
-}
-
-export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
-
-/**
- * Shows a progress bar. This can indicate a loading state or the progress of a task. When "progress" is not set, the bar is animated,
- * indicating a busy state.
- * 
- * @example
- * A simple loading with a Progress Bar.
- * ```
- * <ProgressBar />
- * ```
- * A Progress Bar that is 50% complete.
- * ```
- * <ProgressBar progress={50} />
- * ```
- */
-export const ProgressBar = withRef(({ progress, speed, style, className, ...props }: ProgressBarProps) =>
-  <CitricComponent
-    tag="div"
-    component="progress-bar"
-    className={listToClass([className, isNil(progress) && 'indeterminate', speed === 'fast' && 'fast'])}
-    style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
-    {...props}
-  />,
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { isNil } from 'lodash'
+import { WithColorPalette, WithColorScheme } from '../types'
+import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette {
+  /**
+   * A number varying from 0 to 100.
+   * 
+   * If not provided, the progress will be indeterminate, causing an animation loop.
+   */
+  progress?: number,
+  /**
+   * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
+   */
+  speed?: 'normal' | 'fast',
+}
+
+export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
+
+/**
+ * Shows a progress bar. This can indicate a loading state or the progress of a task. When "progress" is not set, the bar is animated,
+ * indicating a busy state.
+ * 
+ * @example
+ * A simple loading with a Progress Bar.
+ * ```
+ * <ProgressBar />
+ * ```
+ * A Progress Bar that is 50% complete.
+ * ```
+ * <ProgressBar progress={50} />
+ * ```
+ */
+export const ProgressBar = withRef(({ progress, speed, style, className, ...props }: ProgressBarProps) =>
+  <CitricComponent
+    tag="div"
+    component="progress-bar"
+    className={listToClass([className, isNil(progress) && 'indeterminate', speed === 'fast' && 'fast'])}
+    style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
+    {...props}
+  />,
+)

package/src/components/ProgressCircular.tsx

@@ -1,45 +1,45 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { isNil } from 'lodash'
-import { WithColorPalette, WithColorScheme } from '../types'
-import { applyCSSVariable } from '../utils/css'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseProgressCircularProps extends WithColorScheme, WithColorPalette {
-  /**
-   * A number varying from 0 to 100.
-   * 
-   * If not provided, the progress will be indeterminate, causing an animation loop.
-   */
-  progress?: number,
-  /**
-   * @default 'md'
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg',
-}
-
-export type ProgressCircularProps = React.JSX.IntrinsicElements['div'] & BaseProgressCircularProps
-
-/**
- * Shows a circular progress. This can indicate a loading state (spinner) or the progress of a task. When "progress" is not set, the
- * spinner is animated, indicating a busy state.
- * 
- * @example
- * A simple loading with a Progress Circular.
- * ```
- * <ProgressCircular />
- * ```
- * A Progress Circular that is 50% complete.
- * ```
- * <ProgressCircular progress={50} />
- * ```
- */
-export const ProgressCircular = withRef(({ progress, size, style, className, ...props }: ProgressCircularProps) =>
-  <CitricComponent
-    tag="div"
-    component="progress-circular"
-    className={listToClass([size, className, isNil(progress) && 'indeterminate'])}
-    style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
-    {...props}
-  />,
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { isNil } from 'lodash'
+import { WithColorPalette, WithColorScheme } from '../types'
+import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseProgressCircularProps extends WithColorScheme, WithColorPalette {
+  /**
+   * A number varying from 0 to 100.
+   * 
+   * If not provided, the progress will be indeterminate, causing an animation loop.
+   */
+  progress?: number,
+  /**
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg',
+}
+
+export type ProgressCircularProps = React.JSX.IntrinsicElements['div'] & BaseProgressCircularProps
+
+/**
+ * Shows a circular progress. This can indicate a loading state (spinner) or the progress of a task. When "progress" is not set, the
+ * spinner is animated, indicating a busy state.
+ * 
+ * @example
+ * A simple loading with a Progress Circular.
+ * ```
+ * <ProgressCircular />
+ * ```
+ * A Progress Circular that is 50% complete.
+ * ```
+ * <ProgressCircular progress={50} />
+ * ```
+ */
+export const ProgressCircular = withRef(({ progress, size, style, className, ...props }: ProgressCircularProps) =>
+  <CitricComponent
+    tag="div"
+    component="progress-circular"
+    className={listToClass([size, className, isNil(progress) && 'indeterminate'])}
+    style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
+    {...props}
+  />,
+)