docs(site): add components docs (#1556)

packages/components/src/button/button.tsx

@@ -8,7 +8,7 @@ import { Center } from '../center'
 
 /**
  * Buttons triggers allow users to identify and start the most important actions in a container.
- * @playground
+ * @status stable
  * @example
  * <Button>Action label</Button>
  */

packages/components/src/icon-button/icon-button.tsx

@@ -28,12 +28,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   }
 )
 
-export interface IconButtonOtions extends ButtonOptions {
+export interface IconButtonOptions extends ButtonOptions {
   /**
    * Icon button label. Needed for accessibility.
    */
   label: ReactNode
 }
 
-export type IconButtonProps = IconButtonOtions &
+export type IconButtonProps = IconButtonOptions &
   ComponentPropsWithoutRef<'button'>

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

@@ -30,7 +30,7 @@ export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
   }
 )
 
-interface MenuTriggerOptions {
+export interface MenuTriggerOptions {
   /**
    * Children composition
    * @default false

packages/components/src/modal/modal-dismiss.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import { DialogDismiss } from '@ariakit/react'
 import { IconX } from '@vtex/shoreline-icons'
 
-import type { IconButtonOtions } from '../icon-button'
+import type { IconButtonOptions } from '../icon-button'
 import { IconButton } from '../icon-button'
 
 /**
@@ -54,7 +54,7 @@ export const ModalDismiss = forwardRef<HTMLButtonElement, ModalDismissProps>(
   }
 )
 
-export type ModalDismissOptions = Pick<IconButtonOtions, 'size'>
+export type ModalDismissOptions = Pick<IconButtonOptions, 'size'>
 
 export type ModalDismissProps = ModalDismissOptions &
   ComponentPropsWithoutRef<'button'>

packages/components/src/page/page-content.tsx

@@ -29,7 +29,7 @@ export const PageContent = forwardRef<HTMLDivElement, PageContentProps>(
   }
 )
 
-export interface PageContentOptions extends ComponentPropsWithoutRef<'div'> {
+export interface PageContentOptions {
   /**
    * Layout type
    * @default 'standard'

packages/components/src/toast/toast-stack.tsx

@@ -1,11 +1,10 @@
-import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
+import type { CSSProperties } from 'react'
 import React from 'react'
 import type { DefaultToastOptions } from 'react-hot-toast/headless'
 import { useToaster } from 'react-hot-toast/headless'
 
 import { ToastAppear } from './toast-appear'
 import { Toast } from './toast'
-import type { ToastPosition } from './toast-types'
 
 /**
  * Stack of toasts
@@ -65,9 +64,11 @@ export function ToastStack(props: ToastStackProps) {
 }
 
 function getPositionStyle(
-  position: ToastPosition,
+  position: ToastStackOptions['position'],
   offset: number
 ): CSSProperties {
+  if (!position) return {}
+
   const top = position.includes('top')
   const verticalStyle: CSSProperties = top ? { top: 0 } : { bottom: 0 }
   const horizontalStyle: CSSProperties = position.includes('center')
@@ -87,10 +88,31 @@ function getPositionStyle(
   }
 }
 
-export interface ToastStackProps
-  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
-  position?: ToastPosition
+export interface ToastStackOptions {
+  /**
+   * Postion of the toasts
+   * @default 'bottom-right'
+   */
+  position?:
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+  /**
+   * Options of each toast
+   */
   toastOptions?: DefaultToastOptions
+  /**
+   * Wether should invert the order
+   */
   reverseOrder?: boolean
+  /**
+   * Position distance
+   * @default 16
+   */
   gutter?: number
 }
+
+export type ToastStackProps = ToastStackOptions

packages/components/src/toast/toast-types.ts

@@ -1,9 +1 @@
-export type ToastPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right'
-
 export type ToastVariant = 'informational' | 'success' | 'critical' | 'warning'

packages/docs/components/component-description/component-description.tsx

@@ -3,17 +3,20 @@ import allProps from '../../__props__'
 import styles from './component-description.module.css'
 
 export function ComponentDescription(props: PropsDocsProps) {
-  const { name } = props
+  const { name, children } = props
 
   const reference = allProps[name]
 
-  if (!reference) {
+  if (!reference && !children) {
     return <></>
   }
 
-  return <p className={styles.description}>{reference.description}</p>
+  return (
+    <p className={styles.description}>{children ?? reference.description}</p>
+  )
 }
 
 interface PropsDocsProps {
   name: string
+  children?: string
 }

packages/docs/examples/menu.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Menu, MenuItem, MenuSeparator } from '@vtex/shoreline'
+
+export default function Example() {
+  return (
+    <Menu label="Open">
+      <MenuItem>New Tab</MenuItem>
+      <MenuItem>New Item</MenuItem>
+      <MenuSeparator />
+      <MenuItem>Downloads</MenuItem>
+    </Menu>
+  )
+}

packages/docs/examples/modal.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalDismiss,
+  ModalFooter,
+  ModalHeader,
+  ModalHeading,
+} from '@vtex/shoreline'
+
+export default function Example() {
+  const [open, setOpen] = useState(false)
+
+  const toggle = () => {
+    setOpen((o) => !o)
+  }
+
+  return (
+    <>
+      <Button onClick={toggle}>Open Modal</Button>
+      <Modal open={open} onClose={toggle}>
+        <ModalHeader>
+          <ModalHeading>Heading</ModalHeading>
+          <ModalDismiss />
+        </ModalHeader>
+        <ModalContent>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit
+          scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
+          tristique senectus. Morbi tristique senectus et netus et. Nec
+          tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
+          Morbi tristique senectus et netus et malesuada fames ac. Ultricies leo
+          integer malesuada nunc vel risus commodo viverra maecenas. Nunc congue
+          nisi vitae suscipit tellus mauris a diam maecenas. Dui accumsan sit
+          amet nulla facilisi morbi tempus.
+        </ModalContent>
+        <ModalFooter>
+          <Button onClick={toggle}>Close</Button>
+          <Button variant="primary" onClick={toggle}>
+            Ok
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}

packages/docs/examples/page.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Page, PageContent, PageHeader, PageHeading } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Page>
+      <PageHeader>
+        <PageHeading>Heading</PageHeading>
+      </PageHeader>
+      <PageContent>
+        <DecorativeBox height="200px" />
+      </PageContent>
+    </Page>
+  )
+}

packages/docs/examples/search.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Search } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Search />
+}

packages/docs/examples/skeleton.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Skeleton } from '@vtex/shoreline'
+
+export default function Example() {
+  return (
+    <Skeleton
+      style={{
+        width: 100,
+        height: 100,
+      }}
+    />
+  )
+}

packages/docs/examples/spinner.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Spinner } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Spinner description="loading" />
+}

packages/docs/examples/tab.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Tab, TabList, TabPanel, TabProvider } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <TabProvider>
+      <TabList>
+        <Tab>Blue</Tab>
+        <Tab>Green</Tab>
+        <Tab>Purple</Tab>
+      </TabList>
+      <TabPanel>
+        <DecorativeBox height="200px" color="blue" />
+      </TabPanel>
+      <TabPanel>
+        <DecorativeBox height="200px" color="green" />
+      </TabPanel>
+      <TabPanel>
+        <DecorativeBox height="200px" color="purple" />
+      </TabPanel>
+    </TabProvider>
+  )
+}

packages/docs/examples/table.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  Tag,
+} from '@vtex/shoreline'
+
+export default function Example() {
+  return (
+    <Table
+      columnWidths={[
+        'minmax(min-content, auto)',
+        'minmax(min-content, auto)',
+        'minmax(min-content, auto)',
+        'minmax(min-content, auto)',
+      ]}
+    >
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Description</TableHeaderCell>
+          <TableHeaderCell>Brand</TableHeaderCell>
+          <TableHeaderCell>Category</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>iPhone 15</TableCell>
+          <TableCell>A nice phone</TableCell>
+          <TableCell>Apple</TableCell>
+          <TableCell>
+            <Tag variant="secondary">smartphones</Tag>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Aventador SVJ</TableCell>
+          <TableCell>Good italian car</TableCell>
+          <TableCell>Lamborghini</TableCell>
+          <TableCell>
+            <Tag variant="secondary" color="cyan">
+              cars
+            </Tag>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Uno with stair</TableCell>
+          <TableCell>Fastest car on earth</TableCell>
+          <TableCell>Fiat</TableCell>
+          <TableCell>
+            <Tag variant="secondary" color="cyan">
+              cars
+            </Tag>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}

packages/docs/examples/tag.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Tag } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Tag>Active</Tag>
+}

packages/docs/examples/text.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Text } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Text variant="body">Short text</Text>
+}

packages/docs/examples/textarea.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Textarea } from '@vtex/shoreline'
+
+export default function Example() {
+  return <Textarea maxLength={120} optional resizable={false} />
+}

packages/docs/examples/toast-promise.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button, ToastStack, toast } from '@vtex/shoreline'
+
+export default function Example() {
+  function promiseToResolve() {
+    return new Promise(function (resolve) {
+      setTimeout(resolve, 2000)
+    })
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() =>
+          toast.promise(promiseToResolve(), {
+            success: 'Resolved',
+            error: 'Promisse has error',
+            loading: 'Loading',
+          })
+        }
+      >
+        Show toast
+      </Button>
+      <ToastStack />
+    </>
+  )
+}