@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/StatusCircle.tsx

@@ -1,67 +1,67 @@
-import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants, Theme } from '@citric/core'
-import { getColor } from '@citric/core/dist/utils/theme'
-import { Tooltip } from '@citric/ui'
-import styled from 'styled-components'
-
-type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
-
-export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress'
-
-interface Props {
-  /** The status of the component which determines its color */
-  status?: Status,
-  /** Tooltip text to be displayed on hover */
-  tooltip?: string,
-}
-
-const statusToColor: Record<Status, Color> = {
-  success: 'success.500',
-  warning: 'warning.500',
-  danger: 'danger.500',
-  progress: 'secondary.500',
-  unknown: 'light.contrastText',
-}
-
-/**
- * Get the color corresponding to the status.
- *
- * @param {Theme} theme - The theme object.
- * @param {Status} [status] - The status of the component.
- * @returns {string} The color corresponding to the status.
- */
-function getColorFromStatus(theme: Theme, status?: Status) {
-  const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown
-  return getColor(theme, colorName)
-}
-
-interface WithTooltip {
-  /** Tooltip text to be displayed on hover */
-  tooltip?: string,
-  /** Additional class names for the component */
-  className?: string,
-  /** Inline styles for the component */
-  style?: React.CSSProperties,
-}
-
-/**
- * CircleWithTooltip component that displays a circle with an optional tooltip.
- *
- * @param props the component's props {@link WithTooltip}.
- */
-const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
-  const circle = <div style={style} className={className}></div>
-  return tooltip && tooltip.length ? <Tooltip text={tooltip}>{circle}</Tooltip> : circle
-}
-
-/**
- * Renders a component that displays a colored circle based on the status.
- * It also supports an optional tooltip.
- *
- * @param props the component's props {@link Props}.
- */
-export const StatusCircle = styled(CircleWithTooltip)<Props>`
-  background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-`
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants, Theme } from '@citric/core'
+import { getColor } from '@citric/core/dist/utils/theme'
+import { Tooltip } from '@citric/ui'
+import styled from 'styled-components'
+
+type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
+
+export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress'
+
+interface Props {
+  /** The status of the component which determines its color */
+  status?: Status,
+  /** Tooltip text to be displayed on hover */
+  tooltip?: string,
+}
+
+const statusToColor: Record<Status, Color> = {
+  success: 'success.500',
+  warning: 'warning.500',
+  danger: 'danger.500',
+  progress: 'secondary.500',
+  unknown: 'light.contrastText',
+}
+
+/**
+ * Get the color corresponding to the status.
+ *
+ * @param {Theme} theme - The theme object.
+ * @param {Status} [status] - The status of the component.
+ * @returns {string} The color corresponding to the status.
+ */
+function getColorFromStatus(theme: Theme, status?: Status) {
+  const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown
+  return getColor(theme, colorName)
+}
+
+interface WithTooltip {
+  /** Tooltip text to be displayed on hover */
+  tooltip?: string,
+  /** Additional class names for the component */
+  className?: string,
+  /** Inline styles for the component */
+  style?: React.CSSProperties,
+}
+
+/**
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
+ *
+ * @param props the component's props {@link WithTooltip}.
+ */
+const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
+  const circle = <div style={style} className={className}></div>
+  return tooltip && tooltip.length ? <Tooltip text={tooltip}>{circle}</Tooltip> : circle
+}
+
+/**
+ * Renders a component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param props the component's props {@link Props}.
+ */
+export const StatusCircle = styled(CircleWithTooltip)<Props>`
+  background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+`

package/src/components/Stepper/Navigation.tsx

@@ -1,97 +1,97 @@
-import { Button, Flex, Text } from '@citric/core'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { FC, useContext } from 'react'
-import { styled } from 'styled-components'
-import { ButtonProps } from '@citric/core/dist/Button'
-import { useLoadingComponent } from '../../context/loading'
-import { StepperContext } from './Stepper'
-
-export interface StepperNavigationProps extends ButtonProps{
-  /**
-   * Prop used to pass specific text to the next button.
-   */
-  nextButtonText?: string,
-  /**
-   * Function that is rendered when pressing the skip button.
-   */
-  onSkip?: () => void,
-  /**
-   * Boolean that is used as a conditional to appear the skip button.
-   */
-  canSkip?: boolean,
-  /**
-   * Boolean that is used as a conditional to appear the loading icon in next button.
-   */
-  isLoading?: boolean,
-  /**
-   * Function that is rendered when pressing the back button.
-   */
-  onGoBack?: () => void,
-  /**
-   * Function that is rendered when pressing the next button.
-   */
-  onSubmit?: () => void,
-}
-
-const Wrapper = styled(Flex)`
-  width: 100%;
-  justify-content: space-between;
-`
-
-/**
- * Renders a component that represents the stepper component's navigation buttons, containing the button options (back, skip, and next).
- * 
- * The component stepper wraps this component.
- */
-
-export const StepperNavigation: FC<Omit<StepperNavigationProps, 'children'>> = (
-  { nextButtonText, onSkip, onGoBack, canSkip = false, isLoading, disabled, onSubmit }) => {
-  const t = useTranslate(dictionary)
-  const { goToNextStep, goToPreviousStep } = useContext(StepperContext)
-  const Loading = useLoadingComponent()
-
-  return (
-    <Wrapper>
-      <Button
-        appearance="contained"
-        colorScheme="inverse"
-        onClick={() => {
-          onGoBack && onGoBack()
-          goToPreviousStep()
-        }}
-      >
-        {t.back}
-      </Button>
-      <Flex>
-        {canSkip && (
-          <Button
-            appearance="text"
-            colorScheme="inverse"
-            onClick={() => {
-              onSkip && onSkip()
-              goToNextStep()
-            }}
-          >
-            {t.skip}
-          </Button>
-        )}
-        <Button type="submit" onClick={onSubmit} sx={{ position: 'relative' }} disabled={isLoading || disabled}>
-          <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>{nextButtonText ?? t.next}</Text>
-          {isLoading && Loading}
-        </Button>
-      </Flex>
-    </Wrapper>
-  )}
-
-const dictionary = {
-  en: {
-    back: 'Back',
-    skip: 'Skip',
-    next: 'Next',
-  },
-  pt: {
-    back: 'Voltar',
-    skip: 'Pular',
-    next: 'Próximo',
-  },
-} satisfies Dictionary
+import { Button, Flex, Text } from '@citric/core'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { FC, useContext } from 'react'
+import { styled } from 'styled-components'
+import { ButtonProps } from '@citric/core/dist/Button'
+import { useLoadingComponent } from '../../context/loading'
+import { StepperContext } from './Stepper'
+
+export interface StepperNavigationProps extends ButtonProps{
+  /**
+   * Prop used to pass specific text to the next button.
+   */
+  nextButtonText?: string,
+  /**
+   * Function that is rendered when pressing the skip button.
+   */
+  onSkip?: () => void,
+  /**
+   * Boolean that is used as a conditional to appear the skip button.
+   */
+  canSkip?: boolean,
+  /**
+   * Boolean that is used as a conditional to appear the loading icon in next button.
+   */
+  isLoading?: boolean,
+  /**
+   * Function that is rendered when pressing the back button.
+   */
+  onGoBack?: () => void,
+  /**
+   * Function that is rendered when pressing the next button.
+   */
+  onSubmit?: () => void,
+}
+
+const Wrapper = styled(Flex)`
+  width: 100%;
+  justify-content: space-between;
+`
+
+/**
+ * Renders a component that represents the stepper component's navigation buttons, containing the button options (back, skip, and next).
+ * 
+ * The component stepper wraps this component.
+ */
+
+export const StepperNavigation: FC<Omit<StepperNavigationProps, 'children'>> = (
+  { nextButtonText, onSkip, onGoBack, canSkip = false, isLoading, disabled, onSubmit }) => {
+  const t = useTranslate(dictionary)
+  const { goToNextStep, goToPreviousStep } = useContext(StepperContext)
+  const Loading = useLoadingComponent()
+
+  return (
+    <Wrapper>
+      <Button
+        appearance="contained"
+        colorScheme="inverse"
+        onClick={() => {
+          onGoBack && onGoBack()
+          goToPreviousStep()
+        }}
+      >
+        {t.back}
+      </Button>
+      <Flex>
+        {canSkip && (
+          <Button
+            appearance="text"
+            colorScheme="inverse"
+            onClick={() => {
+              onSkip && onSkip()
+              goToNextStep()
+            }}
+          >
+            {t.skip}
+          </Button>
+        )}
+        <Button type="submit" onClick={onSubmit} sx={{ position: 'relative' }} disabled={isLoading || disabled}>
+          <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>{nextButtonText ?? t.next}</Text>
+          {isLoading && Loading}
+        </Button>
+      </Flex>
+    </Wrapper>
+  )}
+
+const dictionary = {
+  en: {
+    back: 'Back',
+    skip: 'Skip',
+    next: 'Next',
+  },
+  pt: {
+    back: 'Voltar',
+    skip: 'Pular',
+    next: 'Próximo',
+  },
+} satisfies Dictionary

package/src/components/Stepper/Step.tsx

@@ -1,30 +1,30 @@
-import { Box } from '@citric/core'
-import { FC, PropsWithChildren } from 'react'
-import { styled } from 'styled-components'
-
-export interface StepProps extends PropsWithChildren {
-  /**
-   * Name given to the step.
-   */
-  name: string,
-  /**
-   * Title given to the step.
-   */
-  title: string,
-}
-
-const Wrapper = styled(Box)`
-  width: 100%;
-`
-
-/**
- * Renders a component that represents the body of a step within the stepper component.
- * 
- * The component stepper wraps this component.
- */
-
-export const Step: FC<StepProps> = ({ children }) => (
-  <Wrapper>
-    {children}
-  </Wrapper>
-)
+import { Box } from '@citric/core'
+import { FC, PropsWithChildren } from 'react'
+import { styled } from 'styled-components'
+
+export interface StepProps extends PropsWithChildren {
+  /**
+   * Name given to the step.
+   */
+  name: string,
+  /**
+   * Title given to the step.
+   */
+  title: string,
+}
+
+const Wrapper = styled(Box)`
+  width: 100%;
+`
+
+/**
+ * Renders a component that represents the body of a step within the stepper component.
+ * 
+ * The component stepper wraps this component.
+ */
+
+export const Step: FC<StepProps> = ({ children }) => (
+  <Wrapper>
+    {children}
+  </Wrapper>
+)

package/src/components/Stepper/Stepper.tsx

@@ -1,113 +1,113 @@
-import { Box, Flex } from '@citric/core'
-import { FC, ReactElement, createContext, useState } from 'react'
-import { styled } from 'styled-components'
-import { StepperHeaders } from './headers'
-import { StepProps } from './Step'
-
-export interface StepperContextProps {
-  /**
-   * Informs the index of the active step.
-   */
-  activeIndex: number,
-  /**
-   * Informs data for all steps.
-   * @default 0
-   */
-  stepsData: Record<string, any>,
-  /**
-   * Saves data for a given steps.
-   */
-  setStepData: (name: string, data: any) => void,
-  /**
-   * Takes data from a given step.
-   */
-  getStepData: (name: string) => any | null | undefined,
-  /**
-   * Navigate to the next step.
-   */
-  goToNextStep: () => void,
-  /**
-   * Navigate to the previous step.
-   */
-  goToPreviousStep: () => void,
-  /**
-   * Navigate to the provided step.
-   */
-  goToStep: (step: number) => void,
-}
-
-const StepperContext = createContext<StepperContextProps>({ 
-  activeIndex: 0,
-  stepsData: {},
-  setStepData: () => {},
-  getStepData: () => {},
-  goToNextStep: () => {},
-  goToPreviousStep: () => {},
-  goToStep: () => {},
-})
-
-export interface StepperProps {
-  children: ReactElement<StepProps>[],
-}
-
-const Wrapper = styled(Box)`
-  width: 100%;
-  gap: 1.5rem;
-`
-
-const ContentWrapper = styled(Flex)`
-  width: 100%;
-`
-
-/**
- * Renders a component that provides an interface of steps for creating some content.
- * 
- * The component wraps the Step component.
- */
-
-const Stepper: FC<StepperProps> = ({ children }) => {
-  const [activeIndex, setActiveIndex] = useState<number>(0)
-  const [stepsData, setStepsData] = useState<Record<string, any>>({})
-  const headers = children.map((child) => ({ title: child.props.title }))
-
-  const setStepData = (name: string, data: any) => {
-    setStepsData({ ...stepsData, ...{ [name]: data } })
-  }
-
-  const getStepData = (name: string) => stepsData[name]
-
-  const setNextStep = () => {
-    if (activeIndex < (children.length - 1)) {
-      setActiveIndex(activeIndex + 1)
-    }
-  }
-
-  const setPreviousStep = () => {
-    if (activeIndex > 0) {
-      setActiveIndex(activeIndex - 1)
-    }    
-  }
-
-  const contextValue: StepperContextProps = {
-    activeIndex,
-    stepsData,
-    setStepData,
-    getStepData,
-    goToNextStep: setNextStep,
-    goToPreviousStep: setPreviousStep,
-    goToStep: setActiveIndex,
-  }
-
-  return (
-    <StepperContext.Provider value={contextValue}>
-      <Wrapper>
-        <StepperHeaders {...{ headers }} />
-        <ContentWrapper>
-          {children[activeIndex]}
-        </ContentWrapper>
-      </Wrapper>
-    </StepperContext.Provider>
-  )
-}
-export { StepperContext, Stepper }
-
+import { Box, Flex } from '@citric/core'
+import { FC, ReactElement, createContext, useState } from 'react'
+import { styled } from 'styled-components'
+import { StepperHeaders } from './headers'
+import { StepProps } from './Step'
+
+export interface StepperContextProps {
+  /**
+   * Informs the index of the active step.
+   */
+  activeIndex: number,
+  /**
+   * Informs data for all steps.
+   * @default 0
+   */
+  stepsData: Record<string, any>,
+  /**
+   * Saves data for a given steps.
+   */
+  setStepData: (name: string, data: any) => void,
+  /**
+   * Takes data from a given step.
+   */
+  getStepData: (name: string) => any | null | undefined,
+  /**
+   * Navigate to the next step.
+   */
+  goToNextStep: () => void,
+  /**
+   * Navigate to the previous step.
+   */
+  goToPreviousStep: () => void,
+  /**
+   * Navigate to the provided step.
+   */
+  goToStep: (step: number) => void,
+}
+
+const StepperContext = createContext<StepperContextProps>({ 
+  activeIndex: 0,
+  stepsData: {},
+  setStepData: () => {},
+  getStepData: () => {},
+  goToNextStep: () => {},
+  goToPreviousStep: () => {},
+  goToStep: () => {},
+})
+
+export interface StepperProps {
+  children: ReactElement<StepProps>[],
+}
+
+const Wrapper = styled(Box)`
+  width: 100%;
+  gap: 1.5rem;
+`
+
+const ContentWrapper = styled(Flex)`
+  width: 100%;
+`
+
+/**
+ * Renders a component that provides an interface of steps for creating some content.
+ * 
+ * The component wraps the Step component.
+ */
+
+const Stepper: FC<StepperProps> = ({ children }) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0)
+  const [stepsData, setStepsData] = useState<Record<string, any>>({})
+  const headers = children.map((child) => ({ title: child.props.title }))
+
+  const setStepData = (name: string, data: any) => {
+    setStepsData({ ...stepsData, ...{ [name]: data } })
+  }
+
+  const getStepData = (name: string) => stepsData[name]
+
+  const setNextStep = () => {
+    if (activeIndex < (children.length - 1)) {
+      setActiveIndex(activeIndex + 1)
+    }
+  }
+
+  const setPreviousStep = () => {
+    if (activeIndex > 0) {
+      setActiveIndex(activeIndex - 1)
+    }    
+  }
+
+  const contextValue: StepperContextProps = {
+    activeIndex,
+    stepsData,
+    setStepData,
+    getStepData,
+    goToNextStep: setNextStep,
+    goToPreviousStep: setPreviousStep,
+    goToStep: setActiveIndex,
+  }
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <Wrapper>
+        <StepperHeaders {...{ headers }} />
+        <ContentWrapper>
+          {children[activeIndex]}
+        </ContentWrapper>
+      </Wrapper>
+    </StepperContext.Provider>
+  )
+}
+export { StepperContext, Stepper }
+