feat(collection-row): create new component and replace slot usages (#…

…1595)

packages/components/src/collection/collection-row.tsx

@@ -0,0 +1,52 @@
+import { Compose } from '@vtex/shoreline-primitives'
+import { forwardRef, style } from '@vtex/shoreline-utils'
+import type { ComponentPropsWithoutRef } from 'react'
+import React from 'react'
+import type { FlexOptions } from '../flex'
+
+/**
+ * Row of the collection
+ * @status stable
+ */
+export const CollectionRow = forwardRef<HTMLDivElement, CollectionRowProps>(
+  function CollectionRow(props, ref) {
+    const {
+      asChild = false,
+      style: styleProp,
+      gap = '$space-2',
+      align = 'center',
+      justify = 'space-between',
+      direction = 'row',
+      ...otherProps
+    } = props
+
+    const Comp = asChild ? Compose : 'div'
+
+    return (
+      <Comp
+        data-sl-collection-row
+        style={style({
+          '--gap': gap,
+          '--align': align,
+          '--justify': justify,
+          '--direction': direction,
+          ...styleProp,
+        })}
+        ref={ref}
+        {...otherProps}
+      />
+    )
+  }
+)
+
+export interface CollectionRowOptions
+  extends Pick<FlexOptions, 'gap' | 'align' | 'justify' | 'direction'> {
+  /**
+   * Children composition
+   * @default false
+   */
+  asChild?: boolean
+}
+
+export type CollectionRowProps = CollectionRowOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/collection/collection-view.tsx

@@ -1,23 +1,23 @@
-import type { ComponentPropsWithoutRef } from 'react'
-import React, { forwardRef } from 'react'
-import { Skeleton } from '../skeleton'
-import {
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateIllustration,
-} from '../empty-state'
 import {
   IconMagnifyingGlass,
   IconPlus,
   IconPlusCircle,
   IconProhibit,
   IconWarningCircle,
 } from '@vtex/shoreline-icons'
-import { Heading } from '../heading'
+import { createMessageHook } from '@vtex/shoreline-primitives'
+import type { ComponentPropsWithoutRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Button } from '../button'
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateIllustration,
+} from '../empty-state'
+import { Heading } from '../heading'
+import { Skeleton } from '../skeleton'
 import { Text } from '../text'
 import { messages } from './messages'
-import { createMessageHook } from '@vtex/shoreline-primitives'
 
 const useMessage = createMessageHook(messages)
 

packages/components/src/collection/collection.tsx

@@ -6,19 +6,17 @@ import React, { forwardRef } from 'react'
  * @status stable
  * @example
  * <Collection>
- *    <Slot name="header">
- *      <Slot name="controls">
- *        <Search />
- *        <Pagination page={1} total={74} />
- *      </Slot>
- *    </Slot>
- *    <CollectionView status="ready">
- *      <div className="ready-view" />
- *    </CollectionView>
- *    <Slot name="footer">
- *      <Pagination page={1} total={74} />
- *    </Slot>
- *  </Collection>
+ *  <CollectionRow>
+ *    <Search />
+ *    <Pagination page={1} total={74} />
+ *  </CollectionRow>
+ *  <CollectionView status="ready">
+ *    <div className="ready-view" />
+ *  </CollectionView>
+ *  <CollectionRow align="flex-end">
+ *    <Pagination page={1} total={74} />
+ *  </Slot>
+ * </Collection>
  */
 export const Collection = forwardRef<HTMLDivElement, CollectionProps>(
   function Collection(props, ref) {

packages/components/src/collection/index.ts

@@ -1,2 +1,3 @@
 export * from './collection'
 export * from './collection-view'
+export * from './collection-row'