refactor(primitives): add the Options suffix and generate props-docs (#…

…1551)

packages/components/package.json

@@ -52,7 +52,6 @@
     "@react-aria/i18n": "3.9.0",
     "@react-aria/interactions": "3.20.0",
     "@react-stately/toggle": "3.7.0",
-    "@tanstack/react-virtual": "3.0.1",
     "@vtex/shoreline-icons": "^1.0.0-rc.31",
     "@vtex/shoreline-primitives": "^1.0.0-rc.31",
     "@vtex/shoreline-utils": "^1.0.0-rc.31",

packages/components/src/checkbox/stories/checkbox.examples.stories.tsx

@@ -8,7 +8,6 @@ import { Stack } from '../../stack'
 import { Button } from '../../button'
 import { Text } from '../../text'
 import { Field, FieldDescription, FieldError } from '../../field'
-import { Virtual, VirtualItem } from '@vtex/shoreline-primitives'
 
 export default {
   title: 'components/checkbox/examples',
@@ -198,64 +197,3 @@ export function ReactWindow() {
     </Stack>
   )
 }
-
-export function VirtualPrimitive() {
-  const numberOfItems = useMemo(() => 50000, [])
-
-  const items = new Array(numberOfItems).fill(true)
-
-  const trueArray = useMemo(
-    () => new Array(numberOfItems).fill(true),
-    [numberOfItems]
-  )
-
-  const falseArray = useMemo(
-    () => new Array(numberOfItems).fill(false),
-    [numberOfItems]
-  )
-
-  const [checked, setChecked] = useState<boolean[]>(falseArray)
-
-  const someChecked = checked.some((i) => i)
-  const allChecked = checked.every((i) => i)
-
-  return (
-    <Stack>
-      <Text> Number of Checkboxes: {numberOfItems}</Text>
-
-      <Checkbox
-        indeterminate={someChecked && !allChecked}
-        checked={allChecked}
-        onChange={() => {
-          if (allChecked) {
-            setChecked(falseArray)
-          } else {
-            setChecked(trueArray)
-          }
-        }}
-      >
-        Root
-      </Checkbox>
-      <Virtual count={items.length} dynamic>
-        <VirtualItem asChild>
-          {({ index }) => (
-            <Checkbox
-              checked={checked[index]}
-              onChange={() => {
-                setChecked((prev) => {
-                  const res = [...prev]
-
-                  res[index] = !res[index]
-
-                  return res
-                })
-              }}
-            >
-              Item {index}
-            </Checkbox>
-          )}
-        </VirtualItem>
-      </Virtual>
-    </Stack>
-  )
-}

packages/components/src/index.ts

@@ -18,9 +18,6 @@ export {
   SelectPopover,
   SelectProvider,
   SelectTrigger,
-  Virtual,
-  VirtualContainer,
-  VirtualItem,
   VisuallyHidden,
   createMessageHook,
   get,
@@ -29,7 +26,6 @@ export {
   useLocale,
   useSelectContext,
   useSelectStore,
-  useVirtualizerModel,
 } from '@vtex/shoreline-primitives'
 export type {
   AccessibleIconProps,
@@ -49,11 +45,6 @@ export type {
   SelectListProps,
   SelectPopoverProps,
   SelectTriggerProps,
-  UseVirtualizerModelProps,
-  UseVirtualizerModelReturn,
-  VirtualContainerProps,
-  VirtualItemsProps,
-  VirtualProps,
   VisuallyHiddenProps,
 } from '@vtex/shoreline-primitives'
 export { Alert } from './alert'

packages/components/src/menu/stories/menu.examples.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { IconCaretDownSmall } from '@vtex/shoreline-icons'
-import { Virtual, VirtualItem } from '@vtex/shoreline-primitives'
 
 import {
   Menu,
@@ -58,23 +57,3 @@ export function Composition() {
     </MenuProvider>
   )
 }
-
-export function Virtualization() {
-  return (
-    <Menu label="Menu">
-      <Virtual
-        dynamic
-        count={5000}
-        style={{
-          width: `200px`,
-        }}
-      >
-        <VirtualItem asChild>
-          {({ index }) => {
-            return <MenuItem>Item {index}</MenuItem>
-          }}
-        </VirtualItem>
-      </Virtual>
-    </Menu>
-  )
-}

packages/components/src/table/stories/table.examples.stories.tsx

@@ -1,6 +1,5 @@
-import React, { useMemo } from 'react'
-import { LinkBox, useVirtualizerModel } from '@vtex/shoreline-primitives'
-import { faker } from '@faker-js/faker'
+import React from 'react'
+import { LinkBox } from '@vtex/shoreline-primitives'
 
 import {
   Table,
@@ -60,52 +59,3 @@ export function RowAsLink() {
     </Table>
   )
 }
-
-export function Virtualization() {
-  const data = useMemo(
-    () =>
-      Array(100)
-        .fill(1)
-        .map((_, id) => {
-          return {
-            id,
-            name: faker.person.firstName(),
-            job: faker.person.jobTitle(),
-          }
-        }),
-    []
-  )
-
-  const virtualizer = useVirtualizerModel({
-    count: data.length,
-  })
-
-  return (
-    <Table ref={virtualizer.ref} style={{ height: 500, overflow: 'auto' }}>
-      <TableHeader>
-        <TableRow>
-          <TableHeaderCell>Index</TableHeaderCell>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {virtualizer.top > 0 && (
-          <TableRow>
-            <TableCell style={{ height: `${virtualizer.top}px` }} />
-          </TableRow>
-        )}
-        {virtualizer.virtualItems.map((row) => {
-          return (
-            <TableRow key={row.index}>
-              <TableCell>rowIndex: {row.index}</TableCell>
-            </TableRow>
-          )
-        })}
-        {virtualizer.bottom > 0 && (
-          <TableRow>
-            <TableCell style={{ height: `${virtualizer.bottom}px` }} />
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  )
-}

packages/docs/pages/components/_meta.json

@@ -42,7 +42,6 @@
   "composable": "Composable",
   "compose": "Compose",
   "locale-provider": "LocaleProvider",
-  "virtual": "Virtual",
   "visually-hidden": "VisuallyHidden",
 
   "Layout": { "type": "separator", "title": "Layout" },

packages/docs/pages/components/index.mdx

@@ -50,7 +50,6 @@
   <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="Virtual" href="/components/virtual/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"/>

packages/docs/scripts/build-props.mjs

@@ -8,7 +8,32 @@ const outputDirectory = `${dirname('')}/__props__`
 const outputFile = 'index.ts'
 
 const files = [
+  /**
+   * Primitives
+   */
   getPath('primitives', 'accessible-icon', 'accessible-icon'),
+  getPath('primitives', 'clickable', 'clickable'),
+  getPath('primitives', 'clickable', 'clickable-bubble'),
+  getPath('primitives', 'combobox', 'combobox'),
+  getPath('primitives', 'combobox', 'combobox-provider'),
+  getPath('primitives', 'combobox', 'combobox-popover'),
+  getPath('primitives', 'combobox', 'combobox-list'),
+  getPath('primitives', 'combobox', 'combobox-item'),
+  getPath('primitives', 'compose', 'compose'),
+  getPath('primitives', 'compose', 'composable'),
+  getPath('primitives', 'link-box', 'link-box'),
+  getPath('primitives', 'locale', 'locale-provider'),
+  getPath('primitives', 'select', 'select-trigger'),
+  getPath('primitives', 'select', 'select-provider'),
+  getPath('primitives', 'select', 'select-popover'),
+  getPath('primitives', 'select', 'select-list'),
+  getPath('primitives', 'select', 'select-item'),
+  getPath('primitives', 'select', 'select-item-check'),
+  getPath('primitives', 'visually-hidden', 'visually-hidden'),
+
+  /**
+   * Components
+   */
   getPath('components', 'alert', 'alert'),
   getPath('components', 'bleed', 'bleed'),
   getPath('components', 'button', 'button'),

packages/primitives/package.json

@@ -44,7 +44,6 @@
   "dependencies": {
     "@ariakit/react": "0.3.8",
     "@react-aria/i18n": "3.9.0",
-    "@tanstack/react-virtual": "3.0.1",
     "@vtex/shoreline-icons": "^1.0.0-rc.31",
     "@vtex/shoreline-utils": "^1.0.0-rc.31"
   }

packages/primitives/src/accessible-icon/accessible-icon.tsx

@@ -5,7 +5,6 @@ import { VisuallyHidden } from '../visually-hidden'
 
 /**
  * Makes icons accessible by adding a label. It can be used with Shoreline icons or other svg.
- * @kind primitives
  * @example
  * <AccessibleIcon>
  *  <svg