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

package/src/types.ts

@@ -1,235 +1,235 @@
-import { ColorKey, ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme'
-import { RadiusKey, SpacingKey } from '@stack-spot/portal-theme/dist/definition'
-
-export interface WithColorScheme {
-  colorScheme?: ColorSchemeName,
-}
-
-export interface WithColorPalette {
-  colorPalette?: ColorPaletteName,
-}
-
-export interface WithColor {
-  color?: ColorKey,
-}
-
-export type WithDataAttributes = { [key: `data-${string}`]: string | undefined }
-
-export type TextAppearance = 'body1' | 'body2' | 'code1' | 'code2' | 'display1' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'microtext1' |
-  'overheader1' | 'overheader2' | 'subtitle1' | 'subtitle2' | 'subtitle3' | 'subtitle4'
-
-// increase this list as needed. Generic uses of `JSX.IntrinsicElements` may lead to expensive operations.
-export type HTMLTag = {
-  a: React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  blockquote: React.BlockquoteHTMLAttributes<HTMLQuoteElement>,
-  button: React.ButtonHTMLAttributes<HTMLButtonElement>,
-  div: React.HTMLAttributes<HTMLDivElement>,
-  form: React.FormHTMLAttributes<HTMLFormElement>,
-  header: React.HTMLAttributes<HTMLElement>,
-  h1: React.HTMLAttributes<HTMLHeadingElement>,
-  h2: React.HTMLAttributes<HTMLHeadingElement>,
-  h3: React.HTMLAttributes<HTMLHeadingElement>,
-  h4: React.HTMLAttributes<HTMLHeadingElement>,
-  h5: React.HTMLAttributes<HTMLHeadingElement>,
-  h6: React.HTMLAttributes<HTMLHeadingElement>,
-  hr: React.HTMLAttributes<HTMLHRElement>,
-  i: React.HTMLAttributes<HTMLElement>,
-  image: React.ImgHTMLAttributes<HTMLImageElement>,
-  input: React.InputHTMLAttributes<HTMLInputElement>,
-  label: React.LabelHTMLAttributes<HTMLLabelElement>,
-  li: React.LiHTMLAttributes<HTMLLIElement>,
-  nav: React.HTMLAttributes<HTMLElement>,
-  p: React.HTMLAttributes<HTMLParagraphElement>,
-  pre: React.HTMLAttributes<HTMLPreElement>,
-  select: React.SelectHTMLAttributes<HTMLSelectElement>,
-  small: React.HTMLAttributes<HTMLElement>,
-  span: React.HTMLAttributes<HTMLSpanElement>,
-  table: React.TableHTMLAttributes<HTMLTableElement>,
-  td: React.TdHTMLAttributes<HTMLTableCellElement>,
-  th: React.ThHTMLAttributes<HTMLTableCellElement>,
-  tr: React.HTMLAttributes<HTMLTableRowElement>,
-  textarea: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  ul: React.HTMLAttributes<HTMLUListElement>,
-}
-
-export type ControlledInput = Omit<React.JSX.IntrinsicElements['input'], 'value' | 'onChange'>
-export type ControlledTextarea = Omit<React.JSX.IntrinsicElements['textarea'], 'value' | 'onChange' | 'children'>
-
-export interface WithStyleShortcuts {
-  /**
-   * Sets a theme color for the background.
-   */
-  bg?: ColorKey,
-  /**
-   * Sets a theme color for the foreground.
-   */
-  fg?: ColorKey,
-  /**
-   * Sets a theme color for the border and set it to 1px width.
-   */
-  border?: ColorKey,
-  /**
-   * Sets the border radius.
-   */
-  radius?: RadiusKey,
-  /**
-   * Sets the margin for every side.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a list of numbers is provided, the theme
-   * variable is used for each of the positions, following the CSS order ([top, right, bottom, left]) When a string is provided, this acts
-   * as a shortcut for `style.margin`.
-   */
-  m?: SpacingKey | SpacingKey[] | string,
-  /**
-   * Sets the margin from the top.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.marginTop`.
-   */
-  mt?: SpacingKey | string,
-  /**
-   * Sets the margin from the bottom.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.marginBottom`.
-   */
-  mb?: SpacingKey | string,
-  /**
-   * Sets the margin from the left.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.marginLeft`.
-   */
-  ml?: SpacingKey | string,
-  /**
-   * Sets the margin from the right.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.marginRight`.
-   */
-  mr?: SpacingKey | string,
-  /**
-   * Sets the padding for every side.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a list of numbers is provided, the theme
-   * variable is used for each of the positions, following the CSS order ([top, right, bottom, left]) When a string is provided, this acts
-   * as a shortcut for `style.padding`.
-   */
-  p?: SpacingKey | SpacingKey[] | string,
-  /**
-   * Sets the padding from the top.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.paddingTop`.
-   */
-  pt?: SpacingKey | string,
-  /**
-   * Sets the padding from the bottom.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.paddingBottom`.
-   */
-  pb?: SpacingKey | string,
-  /**
-   * Sets the padding from the left.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.paddingLeft`.
-   */
-  pl?: SpacingKey | string,
-  /**
-   * Sets the padding from the right.
-   * 
-   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
-   * for `style.paddingRight`.
-   */
-  pr?: SpacingKey | string,
-  /**
-   * Shortcut for `style.width`.
-   */
-  w?: string | number,
-  /**
-   * Shortcut for `style.height`.
-   */
-  h?: string | number,
-  /**
-   * Shortcut for `style.flex`.
-   */
-  flex?: React.CSSProperties['flex'],
-  /**
-   * Shortcut for `style.justifyContent`.
-   */
-  justifyContent?: React.CSSProperties['justifyContent'],
-  /**
-   * Shortcut for `style.alignItems`.
-   */
-  alignItems?: React.CSSProperties['alignItems'],
-  /**
-   * Shortcut for `style.gap`.
-   */
-  gap?: React.CSSProperties['gap'],
-}
-
-export interface LoadingStyle {
-  /**
-   * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
-   * 
-   * @default 'circle'
-   */
-  type?: 'circle' | 'bar',
-  /**
-   * A text to show above the ProgressCircular or ProgressBar.
-   */
-  text?: React.ReactNode,
-  /**
-   * The color scheme of the loading view.
-   * 
-   * @default 'primary'
-   */
-  colorScheme?: ColorSchemeName,
-}
-
-export interface CitricController {
-  /**
-   * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
-   * @param props the props for the anchor element
-   * @returns 
-   */
-  renderLink?: (props: JSX.IntrinsicElements['a']) => React.ReactElement,
-  /**
-   * A function to run whenever the component Button is clicked.
-   * @param event the click event.
-   * @param metadata metadata of the button.
-   */
-  onClickButton?: (event: React.MouseEvent<HTMLButtonElement>, metadata: any) => void,
-  /**
-   * A function to run whenever the component Link is clicked.
-   * @param event the click event.
-   * @param metadata metadata of the anchor.
-   */
-  onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>, metadata: any) => void,
-  /**
-   * A custom renderer for error feedbacks.
-   * 
-   * By default, a simple text with the error message is rendered.
-   * 
-   * Errors are rendered when they're caught in an ErrorBoundary or AsyncContent.
-   * @param error the error caught.
-   * @returns the UI for the feedback.
-   */
-  renderError?: (error: any) => React.ReactElement,
-  /**
-   * A custom renderer for loading feedbacks.
-   * 
-   * By default, the component "ProgressCircular" is rendered with some padding.
-   * 
-   * Loadings are rendered in Suspended calls or in AsyncContent.
-   * @returns the UI for the feedback.
-   */
-  renderLoading?: (options?: LoadingStyle) => React.ReactElement,
-  /**
-   * Function to run whenever an Error is caught.
-   * @param error the error caught.
-   */
-  onError?: (error: any) => void,
-}
+import { ColorKey, ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme'
+import { RadiusKey, SpacingKey } from '@stack-spot/portal-theme/dist/definition'
+
+export interface WithColorScheme {
+  colorScheme?: ColorSchemeName,
+}
+
+export interface WithColorPalette {
+  colorPalette?: ColorPaletteName,
+}
+
+export interface WithColor {
+  color?: ColorKey,
+}
+
+export type WithDataAttributes = { [key: `data-${string}`]: string | undefined }
+
+export type TextAppearance = 'body1' | 'body2' | 'code1' | 'code2' | 'display1' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'microtext1' |
+  'overheader1' | 'overheader2' | 'subtitle1' | 'subtitle2' | 'subtitle3' | 'subtitle4'
+
+// increase this list as needed. Generic uses of `JSX.IntrinsicElements` may lead to expensive operations.
+export type HTMLTag = {
+  a: React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  blockquote: React.BlockquoteHTMLAttributes<HTMLQuoteElement>,
+  button: React.ButtonHTMLAttributes<HTMLButtonElement>,
+  div: React.HTMLAttributes<HTMLDivElement>,
+  form: React.FormHTMLAttributes<HTMLFormElement>,
+  header: React.HTMLAttributes<HTMLElement>,
+  h1: React.HTMLAttributes<HTMLHeadingElement>,
+  h2: React.HTMLAttributes<HTMLHeadingElement>,
+  h3: React.HTMLAttributes<HTMLHeadingElement>,
+  h4: React.HTMLAttributes<HTMLHeadingElement>,
+  h5: React.HTMLAttributes<HTMLHeadingElement>,
+  h6: React.HTMLAttributes<HTMLHeadingElement>,
+  hr: React.HTMLAttributes<HTMLHRElement>,
+  i: React.HTMLAttributes<HTMLElement>,
+  image: React.ImgHTMLAttributes<HTMLImageElement>,
+  input: React.InputHTMLAttributes<HTMLInputElement>,
+  label: React.LabelHTMLAttributes<HTMLLabelElement>,
+  li: React.LiHTMLAttributes<HTMLLIElement>,
+  nav: React.HTMLAttributes<HTMLElement>,
+  p: React.HTMLAttributes<HTMLParagraphElement>,
+  pre: React.HTMLAttributes<HTMLPreElement>,
+  select: React.SelectHTMLAttributes<HTMLSelectElement>,
+  small: React.HTMLAttributes<HTMLElement>,
+  span: React.HTMLAttributes<HTMLSpanElement>,
+  table: React.TableHTMLAttributes<HTMLTableElement>,
+  td: React.TdHTMLAttributes<HTMLTableCellElement>,
+  th: React.ThHTMLAttributes<HTMLTableCellElement>,
+  tr: React.HTMLAttributes<HTMLTableRowElement>,
+  textarea: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  ul: React.HTMLAttributes<HTMLUListElement>,
+}
+
+export type ControlledInput = Omit<React.JSX.IntrinsicElements['input'], 'value' | 'onChange'>
+export type ControlledTextarea = Omit<React.JSX.IntrinsicElements['textarea'], 'value' | 'onChange' | 'children'>
+
+export interface WithStyleShortcuts {
+  /**
+   * Sets a theme color for the background.
+   */
+  bg?: ColorKey,
+  /**
+   * Sets a theme color for the foreground.
+   */
+  fg?: ColorKey,
+  /**
+   * Sets a theme color for the border and set it to 1px width.
+   */
+  border?: ColorKey,
+  /**
+   * Sets the border radius.
+   */
+  radius?: RadiusKey,
+  /**
+   * Sets the margin for every side.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a list of numbers is provided, the theme
+   * variable is used for each of the positions, following the CSS order ([top, right, bottom, left]) When a string is provided, this acts
+   * as a shortcut for `style.margin`.
+   */
+  m?: SpacingKey | SpacingKey[] | string,
+  /**
+   * Sets the margin from the top.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.marginTop`.
+   */
+  mt?: SpacingKey | string,
+  /**
+   * Sets the margin from the bottom.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.marginBottom`.
+   */
+  mb?: SpacingKey | string,
+  /**
+   * Sets the margin from the left.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.marginLeft`.
+   */
+  ml?: SpacingKey | string,
+  /**
+   * Sets the margin from the right.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.marginRight`.
+   */
+  mr?: SpacingKey | string,
+  /**
+   * Sets the padding for every side.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a list of numbers is provided, the theme
+   * variable is used for each of the positions, following the CSS order ([top, right, bottom, left]) When a string is provided, this acts
+   * as a shortcut for `style.padding`.
+   */
+  p?: SpacingKey | SpacingKey[] | string,
+  /**
+   * Sets the padding from the top.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.paddingTop`.
+   */
+  pt?: SpacingKey | string,
+  /**
+   * Sets the padding from the bottom.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.paddingBottom`.
+   */
+  pb?: SpacingKey | string,
+  /**
+   * Sets the padding from the left.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.paddingLeft`.
+   */
+  pl?: SpacingKey | string,
+  /**
+   * Sets the padding from the right.
+   * 
+   * When a number is provided, the theme variable is used "spacing-1, ..., spacing-19". When a string is provided, this acts as a shortcut
+   * for `style.paddingRight`.
+   */
+  pr?: SpacingKey | string,
+  /**
+   * Shortcut for `style.width`.
+   */
+  w?: string | number,
+  /**
+   * Shortcut for `style.height`.
+   */
+  h?: string | number,
+  /**
+   * Shortcut for `style.flex`.
+   */
+  flex?: React.CSSProperties['flex'],
+  /**
+   * Shortcut for `style.justifyContent`.
+   */
+  justifyContent?: React.CSSProperties['justifyContent'],
+  /**
+   * Shortcut for `style.alignItems`.
+   */
+  alignItems?: React.CSSProperties['alignItems'],
+  /**
+   * Shortcut for `style.gap`.
+   */
+  gap?: React.CSSProperties['gap'],
+}
+
+export interface LoadingStyle {
+  /**
+   * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
+   * 
+   * @default 'circle'
+   */
+  type?: 'circle' | 'bar',
+  /**
+   * A text to show above the ProgressCircular or ProgressBar.
+   */
+  text?: React.ReactNode,
+  /**
+   * The color scheme of the loading view.
+   * 
+   * @default 'primary'
+   */
+  colorScheme?: ColorSchemeName,
+}
+
+export interface CitricController {
+  /**
+   * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
+   * @param props the props for the anchor element
+   * @returns 
+   */
+  renderLink?: (props: JSX.IntrinsicElements['a']) => React.ReactElement,
+  /**
+   * A function to run whenever the component Button is clicked.
+   * @param event the click event.
+   * @param metadata metadata of the button.
+   */
+  onClickButton?: (event: React.MouseEvent<HTMLButtonElement>, metadata: any) => void,
+  /**
+   * A function to run whenever the component Link is clicked.
+   * @param event the click event.
+   * @param metadata metadata of the anchor.
+   */
+  onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>, metadata: any) => void,
+  /**
+   * A custom renderer for error feedbacks.
+   * 
+   * By default, a simple text with the error message is rendered.
+   * 
+   * Errors are rendered when they're caught in an ErrorBoundary or AsyncContent.
+   * @param error the error caught.
+   * @returns the UI for the feedback.
+   */
+  renderError?: (error: any) => React.ReactElement,
+  /**
+   * A custom renderer for loading feedbacks.
+   * 
+   * By default, the component "ProgressCircular" is rendered with some padding.
+   * 
+   * Loadings are rendered in Suspended calls or in AsyncContent.
+   * @returns the UI for the feedback.
+   */
+  renderLoading?: (options?: LoadingStyle) => React.ReactElement,
+  /**
+   * Function to run whenever an Error is caught.
+   * @param error the error caught.
+   */
+  onError?: (error: any) => void,
+}

package/src/utils/ValueController.ts

@@ -1,28 +1,28 @@
-import { pull } from 'lodash'
-
-export type ValueListener<T> = (value: T) => void
-
-export class ValueController<T> {
-  protected value: T
-  private listeners: ValueListener<T>[] = []
-  
-  constructor(value: T) {
-    this.value = value
-  }
-
-  onChange(listener: ValueListener<T>) {
-    this.listeners.push(listener)
-    return () => {
-      pull(this.listeners, listener)
-    }
-  }
-
-  setValue(value: T) {
-    this.value = value
-    this.listeners.forEach(l => l(value))
-  }
-
-  getValue() {
-    return this.value
-  }
-}
+import { pull } from 'lodash'
+
+export type ValueListener<T> = (value: T) => void
+
+export class ValueController<T> {
+  protected value: T
+  private listeners: ValueListener<T>[] = []
+  
+  constructor(value: T) {
+    this.value = value
+  }
+
+  onChange(listener: ValueListener<T>) {
+    this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+
+  setValue(value: T) {
+    this.value = value
+    this.listeners.forEach(l => l(value))
+  }
+
+  getValue() {
+    return this.value
+  }
+}