docs(site): add all components page (#1566)

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

@@ -1,18 +1,18 @@
 import React from 'react'
-import allProps from '../../__props__'
 import styles from './component-description.module.css'
+import { getComponentProps } from '../../utils/get-component-props'
 
 export function ComponentDescription(props: PropsDocsProps) {
   const { name, children } = props
 
-  const reference = allProps[name]
+  const reference = getComponentProps(name)
 
   if (!reference && !children) {
     return <></>
   }
 
   return (
-    <p className={styles.description}>{children ?? reference.description}</p>
+    <p className={styles.description}>{children ?? reference?.description}</p>
   )
 }
 

packages/docs/components/component-summary/component-summary-grid.module.css

@@ -0,0 +1,10 @@
+.grid {
+  --rows: 3;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)
+  );
+  margin-top: var(--sl-space-4);
+  gap: var(--sl-space-gap);
+}

packages/docs/components/component-summary/component-summary-grid.tsx

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, CSSProperties } from 'react'
+import React from 'react'
+import styles from './component-summary-grid.module.css'
+
+export function ComponentSummaryGrid(props: ComponentSummaryGridProps) {
+  const { children, rows = 3, style, ...restProps } = props
+
+  return (
+    <div
+      className={styles.grid}
+      {...restProps}
+      style={
+        {
+          ...style,
+          '--rows': rows,
+        } as CSSProperties
+      }
+    >
+      {children}
+    </div>
+  )
+}
+
+interface ComponentSummaryGridProps extends ComponentPropsWithoutRef<'div'> {
+  rows?: number
+}

packages/docs/components/component-summary/component-summary.module.css

@@ -0,0 +1,45 @@
+.card {
+  --radii: var(--sl-border-radius-large);
+  border-radius: var(--radii);
+}
+
+.card:hover {
+  background: var(--sl-color-gray-1);
+}
+
+.card:hover img,
+.card:focus img {
+  transform: scale(1.1);
+}
+
+.imgWrapper {
+  --radii: var(--sl-border-radius-large);
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  border-radius: var(--radii);
+}
+
+.card img {
+  border-radius: var(--radii);
+  transition: transform 250ms ease-in-out;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sl-space-1) var(--sl-space-3) var(--sl-space-6)
+    var(--sl-space-3);
+  gap: var(--sl-space-2);
+}
+
+.title {
+  font: var(--sl-text-display-2-font);
+  letter-spacing: var(--sl-text-display-2-letter-spacing);
+}
+
+.description {
+  font: var(--sl-text-display-4-font);
+  letter-spacing: var(--sl-text-display-4-letter-spacing);
+  color: var(--sl-color-gray-10);
+}

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

@@ -0,0 +1,54 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import React from 'react'
+import NextLink from 'next/link'
+import Image from 'next/image'
+import styles from './component-summary.module.css'
+import { getComponentProps } from '../../utils/get-component-props'
+
+const imageEstimatedWidth = 370
+const imageEstimatedHeight = 218
+
+/**
+ * Renders a component summary
+ */
+export function ComponentSummary(props: ComponentSummaryProps) {
+  const { href, image, name, ...restProps } = props
+
+  const componentProps = getComponentProps(name)
+
+  return (
+    <NextLink
+      className={styles.card}
+      href={href || `/components/${name}`}
+      {...restProps}
+    >
+      <div className={styles.imgWrapper}>
+        <Image
+          src={`/assets/all-${name}.png`}
+          alt={name}
+          width={imageEstimatedWidth}
+          height={imageEstimatedHeight}
+        />
+      </div>
+      <div className={styles.contentWrapper}>
+        <h3 className={styles.title}>{componentProps?.name}</h3>
+        <p className={styles.description}>{componentProps?.description}</p>
+      </div>
+    </NextLink>
+  )
+}
+
+interface ComponentSummaryProps extends ComponentPropsWithoutRef<'a'> {
+  /**
+   * Link href
+   */
+  href?: string
+  /**
+   * Component image
+   */
+  image?: ReactNode
+  /**
+   * Component name
+   */
+  name: string
+}

packages/docs/components/component-summary/index.ts

@@ -0,0 +1,2 @@
+export * from './component-summary'
+export * from './component-summary-grid'

packages/docs/pages/components/index.mdx

@@ -1,61 +1,35 @@
 # Components
 
-<RelatedComponentList>
-  <RelatedComponent title="AccessibleIcon" href="/components/accessible-icon/api-reference"/>
-  <RelatedComponent title="Alert" href="/components/alert/api-reference"/>
-  <RelatedComponent title="Bleed" href="/components/bleed/api-reference"/>
-  <RelatedComponent title="Button" href="/components/button/api-reference"/>
-  <RelatedComponent title="Center" href="/components/center/api-reference"/>
-  <RelatedComponent title="Checkbox" href="/components/checkbox/api-reference"/>
-  <RelatedComponent title="Clickable" href="/components/clickable/api-reference"/>
-  <RelatedComponent title="Collection" href="/components/collection/api-reference"/>
-  <RelatedComponent title="ComboboxInput" href="/components/combobox-input/api-reference"/>
-  <RelatedComponent title="ComboboxItem" href="/components/combobox-item/api-reference"/>
-  <RelatedComponent title="ComboboxList" href="/components/combobox-list/api-reference"/>
-  <RelatedComponent title="ComboboxPopover" href="/components/combobox-popover/api-reference"/>
-  <RelatedComponent title="Composable" href="/components/composable/api-reference"/>
-  <RelatedComponent title="Compose" href="/components/compose/api-reference"/>
-  <RelatedComponent title="ConfirmationModal" href="/components/confirmation-modal/api-reference"/>
-  <RelatedComponent title="Container" href="/components/container/api-reference"/>
-  <RelatedComponent title="Content" href="/components/content/api-reference"/>
-  <RelatedComponent title="ContextualHelp" href="/components/contextual-help/api-reference"/>
-  <RelatedComponent title="Divider" href="/components/divider/api-reference"/>
-  <RelatedComponent title="EmptyState" href="/components/empty-state/api-reference"/>
-  <RelatedComponent title="Field" href="/components/field/api-reference"/>
-  <RelatedComponent title="Filter" href="/components/filter/api-reference"/>
-  <RelatedComponent title="Flex" href="/components/flex/api-reference"/>
-  <RelatedComponent title="Grid" href="/components/grid/api-reference"/>
-  <RelatedComponent title="Heading" href="/components/heading/api-reference"/>
-  <RelatedComponent title="IconButton" href="/components/icon-button/api-reference"/>
-  <RelatedComponent title="Input" href="/components/input/api-reference"/>
-  <RelatedComponent title="Label" href="/components/label/api-reference"/>
-  <RelatedComponent title="Link" href="/components/link/api-reference"/>
-  <RelatedComponent title="LocaleProvider" href="/components/locale-provider/api-reference"/>
-  <RelatedComponent title="Menu" href="/components/menu/api-reference"/>
-  <RelatedComponent title="Modal" href="/components/modal/api-reference"/>
-  <RelatedComponent title="Page" href="/components/page/api-reference"/>
-  <RelatedComponent title="Pagination" href="/components/pagination/api-reference"/>
-  <RelatedComponent title="Popover" href="/components/popover/api-reference"/>
-  <RelatedComponent title="Radio" href="/components/radio/api-reference"/>
-  <RelatedComponent title="Search" href="/components/search/api-reference"/>
-  <RelatedComponent title="Select" href="/components/select/api-reference"/>
-  <RelatedComponent title="Skeleton" href="/components/skeleton/api-reference"/>
-  <RelatedComponent title="Slot" href="/components/slot/api-reference"/>
-  <RelatedComponent title="Spinner" href="/components/spinner/api-reference"/>
-  <RelatedComponent title="Stack" href="/components/stack/api-reference"/>
-  <RelatedComponent title="Tab" href="/components/tab/api-reference"/>
-  <RelatedComponent title="Table" href="/components/table/api-reference"/>
-  <RelatedComponent title="Tag" href="/components/tag/api-reference"/>
-  <RelatedComponent title="Text" href="/components/text/api-reference"/>
-  <RelatedComponent title="Textarea" href="/components/textarea/api-reference"/>
-  <RelatedComponent title="ToastStack" href="/components/toast-stack/api-reference"/>
-  <RelatedComponent title="Tooltip" href="/components/tooltip/api-reference"/>
-  <RelatedComponent title="VisuallyHidden" href="/components/visually-hidden/api-reference"/>
-  <RelatedComponent title="Calendar" href="/components/calendar/api-reference"/>
-  <RelatedComponent title="DateField" href="/components/date-field/api-reference"/>
-  <RelatedComponent title="DatePicker" href="/components/date-picker/api-reference"/>
-  <RelatedComponent title="DateRangePicker" href="/components/date-range-picker/api-reference"/>
-  <RelatedComponent title="DateSegment" href="/components/date-segment/api-reference"/>
-  <RelatedComponent title="RangeCalendar" href="/components/range-calendar/api-reference"/>
-  <RelatedComponent title="TimeInput" href="/components/time-input/api-reference"/>
-</RelatedComponentList>
+import { allComponentsList, allLayoutsList, allPrimitivesList } from '../../utils/all-components-list'
+import { pascalCase } from '@vtex/shoreline'
+
+<ComponentSummaryGrid>
+  {allComponentsList.map(component => (
+    <ComponentSummary 
+      key={component}
+      name={component}
+    />
+  ))}
+</ComponentSummaryGrid>
+
+## Layouts
+
+<ComponentSummaryGrid>
+  {allLayoutsList.map(component => (
+    <ComponentSummary 
+      key={component}
+      name={component}
+    />
+  ))}
+</ComponentSummaryGrid>
+
+## Primitives
+
+<ComponentSummaryGrid>
+  {allPrimitivesList.map(component => (
+    <ComponentSummary 
+      key={component}
+      name={component}
+    />
+  ))}
+</ComponentSummaryGrid>

packages/docs/theme.config.tsx

@@ -11,6 +11,10 @@ import {
 import { Preview } from './components/preview'
 import { PropsDocs } from './components/props-docs'
 import { ComponentDescription } from './components/component-description'
+import {
+  ComponentSummary,
+  ComponentSummaryGrid,
+} from './components/component-summary'
 
 const config: DocsThemeConfig = {
   logo: <Logo />,
@@ -33,6 +37,8 @@ const config: DocsThemeConfig = {
     Preview: Preview as React.FC,
     PropsDocs: PropsDocs as React.FC,
     ComponentDescription: ComponentDescription as React.FC,
+    ComponentSummary: ComponentSummary as React.FC,
+    ComponentSummaryGrid: ComponentSummaryGrid as React.FC,
   },
   sidebar: {
     defaultMenuCollapseLevel: 1,

packages/docs/utils/all-components-list.ts

@@ -0,0 +1,56 @@
+export const allComponentsList = [
+  'alert',
+  'button',
+  'checkbox',
+  'collection',
+  'confirmation-modal',
+  'contextual-help',
+  'date-picker',
+  'date-range-picker',
+  'empty-state',
+  'field',
+  'filter',
+  'heading',
+  'icon-button',
+  'input',
+  'label',
+  'link',
+  'menu',
+  'modal',
+  'page',
+  'pagination',
+  'popover',
+  'radio',
+  'search',
+  'select',
+  'skeleton',
+  'spinner',
+  'tab',
+  'table',
+  'tag',
+  'text',
+  'textarea',
+  'time-input',
+  'toast-stack',
+  'tooltip',
+]
+
+export const allLayoutsList = [
+  'bleed',
+  'center',
+  'content',
+  'flex',
+  'grid',
+  'slot',
+  'stack',
+]
+
+export const allPrimitivesList = [
+  'accessible-icon',
+  'clickable',
+  'combobox-input',
+  'compose',
+  'link-box',
+  'locale-provider',
+  'visually-hidden',
+]

packages/docs/utils/get-component-props.ts

@@ -0,0 +1,34 @@
+import allProps from '../__props__'
+
+export function getComponentProps(name: string): ComponentProps | undefined {
+  const reference = allProps[name]
+
+  return reference
+}
+
+interface Example {
+  description: string
+  language: string
+  code: string
+}
+
+interface PropsRecord {
+  name: string
+  type: string
+  description: string
+  optional: boolean
+  defaultValue: string | null
+  deprecated: boolean
+  status: string
+  examples: Example[]
+}
+
+interface ComponentProps {
+  filename: string
+  name: string
+  description: string
+  deprecated: boolean
+  status: string
+  examples: Example[]
+  props: PropsRecord[]
+}