@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1768482754546

package/src/components/Select/ClearInput.tsx

@@ -0,0 +1,24 @@
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ClearIndicatorProps, components } from 'react-select'
+
+export const ClearInput = (props: ClearIndicatorProps<any>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <components.ClearIndicator {...props}>
+      <IconButton role="button" type="button" onClick={() => props.clearValue()} aria-label={t.ariaLabelClearInput}>
+        <Times />
+      </IconButton>
+    </components.ClearIndicator>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelClearInput: 'Clear all field values',
+  },
+  pt: {
+    ariaLabelClearInput: 'Limpar todos valores do campo',
+  },
+} satisfies Dictionary

package/src/components/Select/CloseItem.tsx

@@ -0,0 +1,38 @@
+import { IconBox } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { MultiValueRemoveProps, components } from 'react-select'
+
+export const CloseItem = (props: MultiValueRemoveProps<any>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <components.MultiValueRemove {...props}>
+      <IconButton
+        type="button"
+        aria-label={interpolate(t.ariaLabelRemoveItemButton, props.data.value)}
+        sx={{
+          bg: 'transparent',
+          border: 'none',
+          px: 0,
+          w: 'auto',
+          height: 'auto',
+          '&:hover, &:focus': { bg: 'transparent' },
+        } as SxProperties}>
+        <IconBox size="xs" sx={{ px: 0 }}>
+          <TimesMini />
+        </IconBox>
+      </IconButton>
+    </components.MultiValueRemove>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelRemoveItemButton: 'Remove item $0',
+  },
+  pt: {
+    ariaLabelRemoveItemButton: 'Remover item $0',
+  },
+} satisfies Dictionary

package/src/components/Select/CreatableSelect.tsx

@@ -0,0 +1,155 @@
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { FC } from 'react'
+import { CSSObjectWithLabel } from 'react-select'
+import Creatable from 'react-select/creatable'
+import { BadgeItem } from './BadgeItem'
+import { CreatableSelectOptionType, CreatableValueType } from './types'
+import { ClearInput } from './ClearInput'
+
+export interface CreatableSelectProps {
+  id?: string,
+  name?: string,
+  disabled?: boolean,
+  isLoading?: boolean,
+  isMulti?: boolean,
+  options?: CreatableSelectOptionType[],
+  className?: string,
+  value?: string | string[],
+  inputValue?: CreatableValueType,
+  onChange: (newValue: CreatableValueType) => void,
+}
+
+export const CreatableSelect: FC<CreatableSelectProps> = 
+({ disabled, options, inputValue, isMulti, onChange, id, ...props }) => {
+  const t = useTranslate(dictionary)
+
+  return (
+    <Creatable
+      placeholder={t.typeYourOption}
+      {...props}
+      inputId={id}
+      isClearable={true}
+      isDisabled={disabled}
+      value={inputValue}
+      options={options}
+      isMulti={isMulti}
+      onChange={onChange}
+      components={{ 
+        MultiValue: BadgeItem, 
+        MultiValueRemove: () => <></>, 
+        ClearIndicator: ClearInput,
+      }}
+      noOptionsMessage={() => (t.typeYourOption)}
+      formatCreateLabel={(value) => (value)}
+      tabSelectsValue={false}
+      styles={{
+        control: (base, state) => ({
+          ...base,
+          minHeight: '2.5rem',
+          height: 'auto',
+          backgroundColor: theme.color.light[300],
+          border: `0.063rem solid ${theme.color.light[600]}`,
+          borderRadius: '0.25rem',
+          fontSize: '0.875rem',
+          fontStyle: 'normal',
+          fontFeatureSettings: '\'clig\' off, \'liga\' off',
+          display: 'flex',
+          alignItems: 'center',
+          outlineColor: theme.color.light[700],
+
+          '&:hover': {
+            border: `0.063rem solid ${theme.color.light[600]}`,
+          },
+
+          ...(state.isFocused || state.menuIsOpen ? {
+            borderColor: `${theme.color.primary[500]} !important`,
+            outline: `0.063rem solid ${theme.color.primary[500]} !important`,
+          } : {}),
+        } as CSSObjectWithLabel),
+        input: () => ({
+          color: theme.color.light.contrastText,
+        }),
+        placeholder: () => ({
+          display: 'none',
+        }),
+        dropdownIndicator: () => ({
+          display: 'none',
+        }),
+        indicatorSeparator: () => ({
+          display: 'none',
+        }),
+        singleValue: (base) => ({
+          ...base,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        menu: (base) => ({
+          ...base,
+          backgroundColor: theme.color.light[500],
+          border: `0.063rem solid ${theme.color.light[400]}`,
+          borderRadius: '0.5rem',
+          boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        multiValue: (base) => ({
+          ...base,
+          backgroundColor: 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyItems: 'center',
+        }),
+        multiValueRemove: (base) => ({
+          ...base,
+          cursor: 'pointer',
+          backgroundColor: 'inherit',
+          paddingRight: 0,
+          ':hover': {
+            backgroundColor: 'inherit',
+            color: 'inherit',
+          },
+        }),
+        option: (styles, { isDisabled, isFocused, isSelected }) => ({
+          ...styles,
+          backgroundColor: isDisabled
+            ? undefined
+            : isSelected
+              ? theme.color.light[700]
+              : isFocused
+                ? theme.color.light[600]
+                : undefined,
+
+          color: isSelected ? theme.color.light[300] : theme.color.light.contrastText,
+
+          cursor: isDisabled ? 'not-allowed' : 'default',
+
+          ':active': {
+            ...styles[':active'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light.contrastText
+                : theme.color.light[600]
+              : undefined,
+          },
+
+          ':hover': {
+            ...styles[':hover'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light[700]
+                : theme.color.light[600]
+              : undefined,
+          },
+        } as CSSObjectWithLabel),
+      }}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    typeYourOption: 'Type your option',
+  },
+  pt: {
+    typeYourOption: 'Insira a sua opção',
+  },
+} satisfies Dictionary

package/src/components/Select/CustomMenu.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react'
+import { components, GroupBase, MenuProps } from 'react-select'
+
+interface CustomMenuProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
+  extends MenuProps<Option, IsMulti, Group> {
+  afterList?: ReactNode,
+}
+
+export const CustomMenu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: CustomMenuProps<Option, IsMulti, Group>,
+) => (
+    <components.Menu {...props}>
+      {props.children}
+      {props.afterList && <>{props.afterList}</>}
+    </components.Menu>
+  )

package/src/components/Select/LabelItem.tsx

@@ -0,0 +1,8 @@
+import { Box, Text } from '@citric/core'
+import { MultiValueGenericProps } from 'react-select'
+
+export const LabelItem = (props: MultiValueGenericProps<any>) => (
+  <Box>
+    <Text>{props.data.label}</Text>
+  </Box>
+)

package/src/components/Select/MultiValue.tsx

@@ -0,0 +1,49 @@
+import { SxProperties } from '@citric/core/dist/sx'
+import { TimesMini } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { MultiValueProps, components } from 'react-select'
+
+export const MultiValue = (props: MultiValueProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <>
+      <components.MultiValue {...props}>
+        <Badge appearance="square" className="badge" palette="cyan" sx={
+        { 
+          mr: 0,
+          my: 0,
+          '.badge-citric-container:not(:has(> button:first-child))': {
+            marginRight: 0,
+          },
+        } as SxProperties}
+        afterElement={
+          <components.MultiValueRemove {...props}>
+            <IconButton
+              type="button"
+              aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
+              appearance="square"
+              colorIcon="cyan.800"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                e.stopPropagation()
+                props.removeProps?.onClick?.(e as React.MouseEvent<HTMLDivElement, MouseEvent>)
+              }}>
+              <TimesMini />
+            </IconButton>
+          </components.MultiValueRemove>
+        }>
+          {props.children}
+        </Badge>
+      </components.MultiValue>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelRemoveItemButton: 'Remove item $0',
+  },
+  pt: {
+    ariaLabelRemoveItemButton: 'Remover item $0',
+  },
+} satisfies Dictionary

package/src/components/Select/SelectInfiniteScroll.tsx

@@ -0,0 +1,82 @@
+import { IconBox } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import { components, GroupBase, MenuListProps } from 'react-select'
+import { SelectSearch, SelectSearchProps } from './SelectSearch'
+
+interface CustomMenuListProps {
+  loadMore: () => void,
+  hasMore: boolean,
+}
+
+const MenuList = <
+  OptionType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>
+>(props: MenuListProps<OptionType, IsMulti, Group>) => {
+  const { children, selectProps } = props
+  const { loadMore, hasMore, options, isLoadingMore } = selectProps as typeof selectProps &
+    CustomMenuListProps & { isLoadingMore?: boolean }
+
+  return (
+    <InfiniteScroll
+      dataLength={options.length}
+      next={loadMore}
+      hasMore={hasMore}
+      scrollableTarget="list-item"
+      scrollThreshold={0.8}
+      loader={isLoadingMore ? <IconBox w={12} colorBg="light.300" sx={{ alignItems: 'center', justifyContent: 'center' }}>
+        <LoadingCircular />
+      </IconBox> : null}
+      style={{ overflow: 'hidden' }}
+    >
+      <components.MenuList {...props} innerProps={{ ...props.innerProps, id: 'list-item' }}>{children}</components.MenuList>
+    </InfiniteScroll>
+  )
+}
+
+type Option = { value: string, label: string }
+
+export interface SelectInfiniteScrollProps extends SelectSearchProps {
+  options: Option[],
+  loadMore: () => void,
+  hasMore: boolean,
+  isLoadingMore?: boolean,
+}
+
+export const SelectInfiniteScroll = ({
+  options,
+  loadMore,
+  hasMore,
+  isLoadingMore,
+  ...props
+}: SelectInfiniteScrollProps) => (
+  <SelectSearch
+    components={{ MenuList }}
+    options={options}
+    closeMenuOnSelect={false}
+    styles={{
+      control: () => ({
+        minHeight: '2.5rem',
+        height: 'auto',
+      }),
+      menu: () => ({
+        position: 'absolute',
+      }),
+      menuList: (base) => ({
+        ...base,
+        maxHeight: 300,
+        overflowY: 'auto',
+      }),
+      input: () => ({
+        position: 'relative',
+      }),
+    }}
+    // @ts-ignore: Essas props não existem no tipo, mas são acessíveis via selectProps no MenuList
+    loadMore={loadMore}
+    hasMore={hasMore}
+    isLoadingMore={isLoadingMore}
+    {...props}
+  />
+)
+

package/src/components/Select/SelectSearch.tsx

@@ -0,0 +1,195 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ComponentProps, ComponentType, RefCallback } from 'react'
+import Select, { components, CSSObjectWithLabel, Props as SelectProps } from 'react-select'
+import { ClearInput } from './ClearInput'
+import { MultiValue } from './MultiValue'
+
+export interface SelectSearchProps extends Partial<SelectProps> {
+  options: any[],
+  components?: Partial<typeof components>,
+  disabled?: boolean,
+  onChange?: (newValue?: any) => void,
+  ref?: RefCallback<any>,
+}
+
+const EmptyComponent = () => <></>
+
+const DropdownIndicator: ComponentType<ComponentProps<typeof components.DropdownIndicator>> = (props) => <IconBox
+  aria-hidden="true"
+  colorIcon="gray.50"
+  sx={{
+    cursor: 'pointer',
+    width: '10px',
+    height: '6px',
+    marginRight: '14px',
+    transition: 'transform 0.3s ease-in',
+    transform: `rotate(${props.selectProps.menuIsOpen ? '180' : '0'}deg)`,
+  }}
+>
+  <ChevronDown />
+</IconBox>
+
+export const SelectSearch = ({
+  options,
+  components: customComponents = {},
+  onChange,
+  styles: customStyles = {},
+  disabled,
+  ref,
+  ...props
+}: SelectSearchProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <Select
+      options={options}
+      onChange={onChange}
+      isDisabled={disabled}
+      ref={ref}
+      noOptionsMessage={() => t.noOptions}
+      {...props}
+      styles={{
+        ...customStyles,
+        container: (base) => ({
+          ...base,
+          width: '100%',
+        }),
+        control: (base, state) => ({
+          ...base,
+          height: '2.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0px',
+          color: theme.color.light.contrastText,
+          backgroundColor: theme.color.light[300],
+          border: `1px solid ${theme.color.light[600]}`,
+          outlineColor: theme.color.light[700],
+          '&:hover': {
+            border: `0.063rem solid ${theme.color.light[600]}`,
+          },
+          fontSize: '0.875rem',
+          lineHeight: '1.714',
+          fontFamily: 'Roboto, sans-serif',
+          ...(state.isFocused || state.menuIsOpen
+            ? {
+              borderColor: `${theme.color.primary[500]} !important`,
+              outline: `0.063rem solid ${theme.color.primary[500]} !important`,
+            }
+            : {}),
+          ...(state.isDisabled
+            ? {
+              backgroundColor: theme.color.light[500],
+              borderColor: theme.color.light[600],
+              cursor: 'not-allowed',
+            }
+            : {}),
+          ...customStyles?.control?.(base, state),
+        } as CSSObjectWithLabel),
+        input: (base, state) => ({
+          ...base,
+          color: theme.color.light.contrastText,
+          position: 'fixed',
+          ...customStyles?.input?.(base, state),
+        }),
+        menu: (base, state) => ({
+          ...base,
+          marginTop: '0.25rem',
+          position: 'relative',
+          backgroundColor: theme.color.light[300],
+          ...customStyles?.menu?.(base, state),
+        }),
+        option: (base, state) => ({
+          ...base,
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: theme.color.light[300],
+          cursor: 'pointer',
+          '&:hover': {
+            backgroundColor: theme.color.light[500],
+          },
+          border: '1px solid transparent',
+          ...(state.isFocused
+            ? {
+              borderColor: `${theme.color.light.contrastText} !important`,
+            }
+            : {}),
+          ...customStyles?.option?.(base, state),
+        }),
+        menuList: (base, state) => ({
+          ...base,
+          padding: 0,
+          '&::-webkit-scrollbar': {
+            width: '0.125rem',
+            height: '.5rem',
+            backgroundColor: 'transparent',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: `${theme.color.light[300]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: `${theme.color.primary[500]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: `${theme.color.light[700]}`,
+            borderRadius: '2px',
+          },
+          '&::-webkit-scrollbar-corner': {
+            backgroundColor: 'transparent',
+          },
+          ...customStyles?.menuList?.(base, state),
+        }),
+        multiValue: (base, state) => ({
+          ...base,
+          background: 'transparent',
+          alignItems: 'center',
+          margin: 0,
+          ...customStyles?.multiValue?.(base, state),
+        }),
+        multiValueLabel: (base, state) => ({
+          ...base,
+          margin: 0,
+          ...customStyles?.multiValueLabel?.(base, state),
+        }),
+        multiValueRemove: (base, state) => ({
+          ...base,
+          backgroundColor: 'transparent',
+          margin: 0,
+          '&:hover': {
+            backgroundColor: 'transparent',
+          },
+          ...customStyles?.multiValueRemove?.(base, state),
+        }),
+        noOptionsMessage: (base, state) => ({
+          ...base,
+          backgroundColor: theme.color.light[300],
+          ...customStyles?.noOptionsMessage?.(base, state),
+        }),
+      }}
+      components={{
+        ...components,
+        DropdownIndicator,
+        IndicatorSeparator: EmptyComponent,
+        ClearIndicator: ClearInput,
+        MultiValue: MultiValue,
+        MultiValueRemove: () => <></>,
+        ...customComponents,
+      }}
+    />
+  )
+}
+
+
+
+
+const dictionary = {
+  en: {
+    noOptions: 'No options',
+  },
+  pt: {
+    noOptions: 'Sem opções',
+  },
+} satisfies Dictionary

package/src/components/Select/index.tsx

@@ -0,0 +1,7 @@
+import { CreatableSelect } from './CreatableSelect'
+import { CustomMenu } from './CustomMenu'
+import { SelectInfiniteScroll, SelectInfiniteScrollProps } from './SelectInfiniteScroll'
+import { SelectSearch, SelectSearchProps } from './SelectSearch'
+
+export { CreatableSelect, CustomMenu, SelectInfiniteScroll, SelectInfiniteScrollProps, SelectSearch, SelectSearchProps }
+

package/src/components/Select/types.ts

@@ -0,0 +1,8 @@
+import { MultiValue, SingleValue } from 'react-select'
+
+export type CreatableValueType = SingleValue<CreatableSelectOptionType> | MultiValue<CreatableSelectOptionType>
+
+export interface CreatableSelectOptionType {
+  label: string,
+  value: string,
+}