SelectPanel2: Update docs (#4173)

* update docs.json

* add story ids to docs

* move stories to component root for components.json

* add support for examples and functions

* rename default story file

* remove v2 from name in docs file

* clean up PageLayout default story

* remove duplicate stories

packages/react/script/components-json/build.ts

@@ -1,7 +1,7 @@
 import generate from '@babel/generator'
 import {parse} from '@babel/parser'
 import traverse from '@babel/traverse'
-import {ArrowFunctionExpression, Identifier, VariableDeclaration} from '@babel/types'
+import {ArrowFunctionExpression, Identifier, FunctionDeclaration} from '@babel/types'
 import Ajv from 'ajv'
 import {pascalCase} from 'change-case'
 import glob from 'fast-glob'
@@ -56,17 +56,19 @@ const components = docsFiles.map(docsFilepath => {
   // Get path to feature story file
   // Example: src/components/Box/Box.docs.json -> src/components/Box/Box.features.stories.tsx
   const featureStoryFilepath = docsFilepath.replace(/\.docs\.json$/, '.features.stories.tsx')
+  const exampleStoryFilepath = docsFilepath.replace(/\.docs\.json$/, '.examples.stories.tsx')
 
   // Get source code for each feature story
   const featureStorySourceCode = getStorySourceCode(featureStoryFilepath)
+  const exampleStorySourceCode = getStorySourceCode(exampleStoryFilepath)
 
   // Populate source code for each feature story
-  const featureStories = docs.stories
+  const stories = docs.stories
     // Filter out the default story
     .filter(({id}) => id !== defaultStoryId)
     .map(({id}) => {
       const storyName = getStoryName(id)
-      const code = featureStorySourceCode[storyName]
+      const code = id.includes('-features--') ? featureStorySourceCode[storyName] : exampleStorySourceCode[storyName]
 
       if (!code) {
         throw new Error(
@@ -78,7 +80,7 @@ const components = docsFiles.map(docsFilepath => {
     })
 
   // Replace the stories array with the new array that includes source code
-  docs.stories = featureStories
+  docs.stories = stories
 
   // Add default story to the beginning of the array
   if (defaultStoryCode) {
@@ -142,10 +144,22 @@ function getStorySourceCode(filepath: string) {
 
   traverse(ast, {
     ExportNamedDeclaration(path) {
-      const varDecloration = path.node.declaration as VariableDeclaration
-      const id = varDecloration.declarations[0].id as Identifier
-      const name = id.name
-      const func = varDecloration.declarations[0].init as ArrowFunctionExpression
+      const varDeclaration = path.node.declaration
+
+      let id: Identifier
+      let func: ArrowFunctionExpression | FunctionDeclaration
+
+      if (varDeclaration?.type === 'VariableDeclaration') {
+        id = varDeclaration.declarations[0].id as Identifier
+        const init = varDeclaration.declarations[0].init
+        if (init?.type === 'ArrowFunctionExpression') func = init
+        else return // not a function = not story
+      } else if (varDeclaration?.type === 'FunctionDeclaration') {
+        id = varDeclaration.id as Identifier
+        func = varDeclaration
+      } else {
+        return // not a function = not story
+      }
 
       const code = prettier
         .format(generate(func).code, {
@@ -158,6 +172,7 @@ function getStorySourceCode(filepath: string) {
         .replace(/;$/, '')
         .replace(/^;/, '')
 
+      const name = id.name
       stories[name] = code
     },
   })

packages/react/src/PageLayout/PageLayout.stories.tsx

@@ -344,7 +344,7 @@ const meta: Meta = {
   },
 }
 
-const Template: Story = args => (
+export const Default: Story = args => (
   <PageLayout
     containerWidth={args.containerWidth}
     padding={args.padding}
@@ -426,5 +426,4 @@ const Template: Story = args => (
   </PageLayout>
 )
 
-export const Default = Template.bind({})
 export default meta

packages/react/src/drafts/SelectPanel2/SelectPanel.docs.json

@@ -1,9 +1,19 @@
 {
   "id": "selectpanel_v2",
-  "name": "SelectPanel v2",
+  "name": "SelectPanel",
   "status": "draft",
   "a11yReviewed": false,
-  "stories": [],
+  "stories": [
+    {"id": "drafts-components-selectpanel-examples--minimal"},
+    {"id": "drafts-components-selectpanel-examples--short-select-panel"},
+    {"id": "drafts-components-selectpanel-features--instant-selection-variant"},
+    {"id": "drafts-components-selectpanel-features--with-warning"},
+    {"id": "drafts-components-selectpanel-examples--open-from-menu"},
+    {"id": "drafts-components-selectpanel-examples--with-groups"},
+    {"id": "drafts-components-selectpanel-examples--async-search-with-use-transition"},
+    {"id": "drafts-components-selectpanel-examples--async-with-suspended-list"},
+    {"id": "drafts-components-selectpanel-examples--with-filter-buttons"}
+  ],
   "props": [
     {
       "name": "title",
@@ -16,6 +26,11 @@
       "type": "string",
       "description": "When provided, a description is displayed below the title"
     },
+    {
+      "name": "variant",
+      "type": "'anchored' | 'modal'",
+      "defaultValue": "anchored"
+    },
     {
       "name": "selectionVariant",
       "type": "'multiple' | 'single' | 'instant'",
@@ -51,6 +66,18 @@
       "name": "children",
       "type": "React.ReactNode[]",
       "description": "Recommended: `SelectPanel.Button`, `SelectPanel.Header`, `ActionList`, `SelectPanel.Loading`, `SelectPanel.Message`, `SelectPanel.Footer`"
+    },
+    {
+      "name": "width",
+      "type": "| 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto'",
+      "defaultValue": "'medium'",
+      "description": "Sets the width of the Dialog, pick from our set list of widths, or pass `auto` to automatically set the width based on the contents. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`."
+    },
+    {
+      "name": "height",
+      "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'fit-content'",
+      "defaultValue": "'large'",
+      "description": "Sets the height of the `Dialog`, pick from our set list of heights, or pass `fit-content` to set the height based on the contents. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`."
     }
   ],
   "subcomponents": [
@@ -108,6 +135,15 @@
         }
       ]
     },
+    {
+      "name": "SelectPanel.SecondaryAction",
+      "props": [
+        {
+          "name": "variant",
+          "type": "'button' | 'link' | 'checkbox'"
+        }
+      ]
+    },
     {
       "name": "SelectPanel.Loading",
       "props": [

packages/react/src/drafts/SelectPanel2/stories/SelectPanel.examples.stories.tsx → packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {SelectPanel} from '../SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Text} from '../../../index'
+import {SelectPanel} from './SelectPanel'
+import {ActionList, ActionMenu, Avatar, Box, Button, Text} from '../../index'
 import {ArrowRightIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react'
-import data from './mock-data'
+import data from './mock-story-data'
 
 export default {
   title: 'Drafts/Components/SelectPanel/Examples',

packages/react/src/drafts/SelectPanel2/stories/SelectPanel.features.stories.tsx → packages/react/src/drafts/SelectPanel2/SelectPanel.features.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {SelectPanel} from '../SelectPanel'
-import {ActionList, Avatar, Box, Button, Link, Text, ToggleSwitch} from '../../../index'
+import {SelectPanel} from './SelectPanel'
+import {ActionList, Avatar, Box, Button, Link, Text, ToggleSwitch} from '../../index'
 import {TagIcon, GearIcon} from '@primer/octicons-react'
-import data from './mock-data'
+import data from './mock-story-data'
 
 export default {
   title: 'Drafts/Components/SelectPanel/Features',

packages/react/src/drafts/SelectPanel2/stories/SelectPanel.playground.stories.tsx → packages/react/src/drafts/SelectPanel2/SelectPanel.playground.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import {Meta, StoryFn} from '@storybook/react'
-import {SelectPanel, SelectPanelProps} from '../SelectPanel'
-import {ActionList, Box} from '../../../index'
-import data from './mock-data'
+import {SelectPanel, SelectPanelProps} from './SelectPanel'
+import {ActionList, Box} from '../../index'
+import data from './mock-story-data'
 
 export default {
   title: 'Drafts/Components/SelectPanel/Playground',

packages/react/src/drafts/SelectPanel2/stories/SelectPanel.default.stories.tsx → packages/react/src/drafts/SelectPanel2/SelectPanel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import {SelectPanel} from '../SelectPanel'
-import {ActionList, Box} from '../../../index'
-import data from './mock-data'
+import {SelectPanel} from './SelectPanel'
+import {ActionList, Box} from '../../index'
+import data from './mock-story-data'
 
 export default {
   title: 'Drafts/Components/SelectPanel',

packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {ThemeProvider, ActionList} from '../../'
 import {render, RenderResult} from '@testing-library/react'
 import userEvent, {UserEvent} from '@testing-library/user-event'
-import data from './stories/mock-data'
+import data from './mock-story-data'
 import {SelectPanel, SelectPanelProps} from './SelectPanel'
 
 const Fixture = ({onSubmit, onCancel}: Pick<SelectPanelProps, 'onSubmit' | 'onCancel'>) => {