refactor(components): use options suffix (#1553)

packages/components/src/bleed/bleed.tsx

@@ -4,8 +4,6 @@ import { style } from '@vtex/shoreline-utils'
 
 /**
  * Allows the content to bleed into the external container
- *
- * @kind layout
  * @example
  * <Bleed top="$space-2" bottom="$space-2">
  *   <Button>Text</Button>

packages/components/src/center/center.tsx

@@ -4,8 +4,6 @@ import { Compose } from '@vtex/shoreline-primitives'
 
 /**
  * Centralizes its content
- *
- * @kind layout
  * @example
  * <Center>
  *  <Text>In the absolute center</Text>

packages/components/src/checkbox/checkbox-group.tsx

@@ -54,7 +54,7 @@ export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(
   }
 )
 
-export interface CheckboxGroupOptions extends ComponentPropsWithoutRef<'div'> {
+export interface CheckboxGroupOptions {
   /**
    * Whether the checkbox group is in an error state
    */

packages/components/src/content/container.tsx

@@ -4,8 +4,6 @@ import { Compose } from '@vtex/shoreline-primitives'
 
 /**
  * Wraps Content component to support Container Queries
- *
- * @kind layout
  * @example
  * <Container>
  *  <Content>...</Content>

packages/components/src/content/content.tsx

@@ -4,8 +4,6 @@ import { Compose } from '@vtex/shoreline-primitives'
 
 /**
  * Content containers allow merchants to easily scan information to understand its hierarchy and rhythm.
- *
- * @kind layout
  * @playground
  * @example
  * <Container>

packages/components/src/divider/divider.tsx

@@ -5,7 +5,6 @@ import { Separator as BaseDivider } from '@ariakit/react'
 
 /**
  * Divider line for separing content
- *
  * @example
  * <div>Content <Divider /> Content</div>
  */
@@ -26,10 +25,12 @@ export const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(
   )
 })
 
-export interface DividerProps extends ComponentPropsWithoutRef<'hr'> {
+export interface DividerOptions {
   /**
    * Divider axis orientation
    * @default 'horizontal'
    */
   orientation?: 'horizontal' | 'vertical'
 }
+
+export type DividerProps = DividerOptions & ComponentPropsWithoutRef<'hr'>

packages/components/src/empty-state/empty-state.tsx

@@ -3,14 +3,13 @@ import React, { forwardRef } from 'react'
 
 /**
  * Renders a styled empty state area
- *
  * @example
- *    <EmptyState>
- *      <Heading>Title goes here</Heading>
- *       <Slot name="actions">
- *         <Button variant="primary">label</Button>
- *      </Slot>
- *   </EmptyState>
+ * <EmptyState>
+ *  <Heading>Title goes here</Heading>
+ *  <Slot name="actions">
+ *    <Button variant="primary">label</Button>
+ *  </Slot>
+ * </EmptyState>
  * */
 export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
   function EmptyState(props, ref) {
@@ -24,10 +23,13 @@ export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
   }
 )
 
-export interface EmptyStateProps extends ComponentPropsWithoutRef<'div'> {
+export interface EmptyStateOptions {
   /**
    * Indicates size of empty state area
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large'
 }
+
+export type EmptyStateProps = EmptyStateOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/field/field-char-counter.tsx

@@ -17,8 +17,7 @@ export const FieldCharCounter = forwardRef<
   )
 })
 
-export interface FieldCharCounterProps
-  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+export interface FieldCharCounterOptions {
   /**
    * Current count
    */
@@ -28,3 +27,6 @@ export interface FieldCharCounterProps
    */
   limit: number
 }
+
+export type FieldCharCounterProps = FieldCharCounterOptions &
+  Omit<ComponentPropsWithoutRef<'div'>, 'children'>

packages/components/src/field/field-description.tsx

@@ -21,10 +21,13 @@ export const FieldDescription = forwardRef<
   )
 })
 
-export interface FieldDescriptionProps extends ComponentPropsWithoutRef<'div'> {
+export interface FieldDescriptionOptions {
   /**
    * Enables component composition
    * @default false
    */
   asChild?: boolean
 }
+
+export type FieldDescriptionProps = FieldDescriptionOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/field/field-error.tsx

@@ -29,10 +29,13 @@ export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
   }
 )
 
-export interface FieldErrorProps extends ComponentPropsWithoutRef<'div'> {
+export interface FieldErrorOptions {
   /**
    * Enables component composition
    * @default false
    */
   asChild?: boolean
 }
+
+export type FieldErrorProps = FieldErrorOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/field/field-provider.tsx

@@ -13,7 +13,7 @@ export function FieldProvider(props: FieldProviderProps) {
   return <FieldContext.Provider value={store}>{children}</FieldContext.Provider>
 }
 
-export interface FieldProviderProps {
+export interface FieldProviderOptions {
   /**
    * Field store
    */
@@ -23,3 +23,5 @@ export interface FieldProviderProps {
    */
   children?: React.ReactNode
 }
+
+export type FieldProviderProps = FieldProviderOptions

packages/components/src/field/field.tsx

@@ -55,7 +55,7 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
   )
 })
 
-export interface FieldProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface FieldOptions {
   /**
    * Enables component composition
    * @default false
@@ -72,3 +72,5 @@ export interface FieldProps extends React.ComponentPropsWithoutRef<'div'> {
    */
   space?: 'normal' | 'large'
 }
+
+export type FieldProps = FieldOptions & React.ComponentPropsWithoutRef<'div'>

packages/components/src/filter/filter-apply.tsx

@@ -5,6 +5,7 @@ import type { PopoverDismissProps } from '../popover'
 import { PopoverDismiss } from '../popover'
 import { useFilterContext } from './filter-context'
 import { shallowEqual } from './shallow-equal'
+import type { PopoverDismissOptions } from '@ariakit/react'
 import { useSelectContext } from '@ariakit/react'
 
 /**
@@ -35,4 +36,5 @@ function useFilterApply() {
   }
 }
 
+export type FilterApplyOptions = PopoverDismissOptions
 export type FilterApplyProps = PopoverDismissProps

packages/components/src/filter/filter-clear.tsx

@@ -3,6 +3,7 @@ import { useFilterContext } from './filter-context'
 import type { PopoverDismissProps } from '../popover'
 import { PopoverDismiss } from '../popover'
 import { mergeProps } from '@vtex/shoreline-utils'
+import type { PopoverDismissOptions } from '@ariakit/react'
 import { useSelectContext } from '@ariakit/react'
 
 /**
@@ -38,4 +39,5 @@ function reset(value: string | string[]): string[] | string {
   return Array.isArray(value) ? [] : ''
 }
 
+export type FilterClearOptions = PopoverDismissOptions
 export type FilterClearProps = PopoverDismissProps

packages/components/src/filter/filter-item-check.tsx

@@ -1,6 +1,9 @@
-import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { IconCheckSmall } from '@vtex/shoreline-icons'
+import type {
+  SelectItemCheckOptions,
+  SelectItemCheckProps,
+} from '@vtex/shoreline-primitives'
 import { useSelectContext, SelectItemCheck } from '@vtex/shoreline-primitives'
 
 /**
@@ -36,4 +39,5 @@ export const FilterItemCheck = forwardRef<HTMLDivElement, FilterItemCheckProps>(
   }
 )
 
-export type FilterItemCheckProps = ComponentPropsWithoutRef<'div'>
+export type FilterItemCheckOptions = SelectItemCheckOptions
+export type FilterItemCheckProps = SelectItemCheckProps

packages/components/src/filter/filter-item.tsx

@@ -1,6 +1,9 @@
 import React, { forwardRef } from 'react'
 
-import type { SelectItemProps } from '@vtex/shoreline-primitives'
+import type {
+  SelectItemOptions,
+  SelectItemProps,
+} from '@vtex/shoreline-primitives'
 import { SelectItem, ComboboxItem } from '@vtex/shoreline-primitives'
 import { useSearchable } from './use-searchable'
 import { FilterItemCheck } from './filter-item-check'
@@ -47,4 +50,5 @@ export const FilterItem = forwardRef<HTMLDivElement, FilterItemProps>(
   }
 )
 
+export type FilterItemOptions = Omit<SelectItemOptions, 'hideOnClick'>
 export type FilterItemProps = Omit<SelectItemProps, 'hideOnClick'>

packages/components/src/filter/filter-list-skeleton.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Skeleton } from '../skeleton'
+import type { StackOptions } from '../stack'
 import { Stack } from '../stack'
 
 /**
@@ -41,4 +42,6 @@ export const FilterListSkeleton = forwardRef<
   )
 })
 
-export type FilterListSkeletonProps = ComponentPropsWithoutRef<'div'>
+export type FilterListSkeletonOptions = StackOptions
+export type FilterListSkeletonProps = StackOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/filter/filter-list.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from 'react'
-import type { SelectListProps } from '@vtex/shoreline-primitives'
+import type {
+  SelectListOptions,
+  SelectListProps,
+} from '@vtex/shoreline-primitives'
 import { SelectList, ComboboxList } from '@vtex/shoreline-primitives'
 import { useSearchable } from './use-searchable'
 
@@ -32,4 +35,5 @@ export const FilterList = forwardRef<HTMLDivElement, FilterListProps>(
   }
 )
 
+export type FilterListOptions = Omit<SelectListOptions, 'alwaysVisible'>
 export type FilterListProps = Omit<SelectListProps, 'alwaysVisible'>

packages/components/src/filter/filter-popover.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { ComboboxInput, createMessageHook } from '@vtex/shoreline-primitives'
 
-import type { PopoverProps } from '../popover'
+import type { PopoverOptions, PopoverProps } from '../popover'
 import { Popover } from '../popover'
 import { Container, Content } from '../content'
 import { FilterClear } from './filter-clear'
@@ -56,7 +56,7 @@ export const FilterPopover = forwardRef<HTMLDivElement, FilterPopoverProps>(
   }
 )
 
-export interface FilterPopoverProps extends PopoverProps {
+export interface FilterPopoverOptions extends PopoverOptions {
   /**
    * Filter messages
    */
@@ -71,3 +71,5 @@ export interface FilterPopoverProps extends PopoverProps {
     clear: string
   }
 }
+
+export type FilterPopoverProps = FilterPopoverOptions & PopoverProps

packages/components/src/filter/filter-provider.tsx

@@ -79,7 +79,7 @@ export function FilterProvider(props: FilterProviderProps) {
   )
 }
 
-export interface FilterProviderProps {
+export interface FilterProviderOptions {
   /**
    * Children of FilterProvider
    */
@@ -123,3 +123,5 @@ export interface FilterProviderProps {
    */
   defaultValue?: string | string[]
 }
+
+export type FilterProviderProps = FilterProviderOptions

packages/components/src/filter/filter-trigger.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { FilterValue } from './filter-value'
-import type { PopoverTriggerProps } from '../popover'
+import type { PopoverTriggerOptions, PopoverTriggerProps } from '../popover'
 import { PopoverTrigger } from '../popover'
 import { Button } from '../button'
 import { IconCaretDownSmall } from '@vtex/shoreline-icons'
@@ -28,4 +28,5 @@ export const FilterTrigger = forwardRef<HTMLButtonElement, FilterTriggerProps>(
   }
 )
 
+export type FilterTriggerOptions = PopoverTriggerOptions
 export type FilterTriggerProps = PopoverTriggerProps

packages/components/src/filter/filter-value.tsx

@@ -26,4 +26,12 @@ export const FilterValue = forwardRef<HTMLSpanElement, FilterValueProps>(
   }
 )
 
-export type FilterValueProps = ComponentPropsWithoutRef<'span'>
+export interface FilterValueOptions {
+  /**
+   * Custom styles
+   */
+  className?: string
+}
+
+export type FilterValueProps = FilterValueOptions &
+  ComponentPropsWithoutRef<'span'>

packages/components/src/filter/filter.tsx

@@ -50,7 +50,7 @@ export const Filter = forwardRef<HTMLDivElement, FilterProps>(function Filter(
   )
 })
 
-type InheritedProps = Pick<
+type InheritedOptions = Pick<
   FilterProviderProps,
   | 'value'
   | 'setValue'
@@ -59,12 +59,13 @@ type InheritedProps = Pick<
   | 'setSearchValue'
   | 'defaultSearchValue'
 > &
-  Pick<FilterPopoverProps, 'messages'> &
-  ComponentPropsWithoutRef<'div'>
+  Pick<FilterPopoverProps, 'messages'>
 
-export interface FilterProps extends InheritedProps {
+export interface FilterOptions extends InheritedOptions {
   /**
    * Filter label
    */
   label: string
 }
+
+export type FilterProps = FilterOptions & ComponentPropsWithoutRef<'div'>

packages/components/src/flex/flex.tsx

@@ -5,9 +5,7 @@ import { Compose } from '@vtex/shoreline-primitives'
 
 /**
  * Flexbox layout
- *
  * @see https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
- * @kind layout
  * @example
  * <Flex>
  *  <Button>Clear</Button>
@@ -58,7 +56,7 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
   )
 })
 
-export interface FlexProps extends ComponentPropsWithoutRef<'div'> {
+export interface FlexOptions {
   /**
    * CSS order
    * @default 0
@@ -130,3 +128,5 @@ export interface FlexProps extends ComponentPropsWithoutRef<'div'> {
    */
   asChild?: boolean
 }
+
+export type FlexProps = FlexOptions & ComponentPropsWithoutRef<'div'>