add story

frontend/src/lib/components/Playlist/Playlist.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { range } from 'lib/utils'
+
+import { Playlist, PlaylistProps } from './Playlist'
+
+type Story = StoryObj<typeof Playlist>
+const meta: Meta<typeof Playlist> = {
+    title: 'Components/Playlist',
+    component: Playlist,
+}
+export default meta
+
+const ListItem = ({ item }): JSX.Element => <div className="p-1">Object {item.id}</div>
+
+const Template: StoryFn<typeof Playlist> = (props: Partial<PlaylistProps>) => {
+    const mainContent = ({ activeItem }): JSX.Element => (
+        <div className="flex items-center justify-center h-full">
+            {activeItem ? `Object ${activeItem.id} selected` : 'Select an item from the list'}
+        </div>
+    )
+
+    return (
+        <div className="h-96">
+            <Playlist
+                title="Title"
+                sections={[]}
+                listEmptyState={<div>No items</div>}
+                content={mainContent}
+                {...props}
+            />
+        </div>
+    )
+}
+
+export const Default: Story = Template.bind({})
+Default.args = {
+    sections: [
+        {
+            key: 'default',
+            title: `Default section`,
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}
+
+export const MultipleSections: Story = Template.bind({})
+MultipleSections.args = {
+    sections: [
+        {
+            key: 'one',
+            title: 'First section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+        {
+            key: 'two',
+            title: 'Second section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}

frontend/src/lib/components/Playlist/Playlist.tsx

@@ -26,17 +26,17 @@ type PlaylistHeaderAction = Pick<LemonButtonProps, 'icon' | 'tooltip' | 'childre
     content: React.ReactNode
 }
 
-type PlaylistProps = {
+export type PlaylistProps = {
+    sections: PlaylistSection[]
+    listEmptyState: JSX.Element
+    content: ({ activeItem }: { activeItem: any }) => JSX.Element
     title?: string
     notebooksHref?: string
-    embedded: boolean
-    sections: PlaylistSection[]
+    embedded?: boolean
     loading?: boolean
     headerActions?: PlaylistHeaderAction[]
     onScrollListEdge?: (edge: 'top' | 'bottom') => void
-    listEmptyState: JSX.Element
-    onSelect: (item: any) => void
-    content: ({ activeItem }: { activeItem: any }) => JSX.Element
+    onSelect?: (item: any) => void
     onLoadMore?: () => void
     'data-attr'?: string
     activeItemId?: string
@@ -50,7 +50,7 @@ export function Playlist({
     title,
     notebooksHref,
     loading,
-    embedded,
+    embedded = false,
     activeItemId: propsActiveItemId,
     content,
     sections,
@@ -71,7 +71,7 @@ export function Playlist({
 
     const onChangeActiveItem = (item: any): void => {
         setControlledActiveItemId(item.id)
-        onSelect(item.id)
+        onSelect?.(item.id)
     }
 
     const activeItemId = propsActiveItemId === undefined ? controlledActiveItemId : propsActiveItemId
@@ -243,6 +243,7 @@ const List = ({
                                     className: 'p-0',
                                 }))}
                                 embedded
+                                size="small"
                             />
                         ) : (
                             <ListSection {...sections[0]} activeItemId={activeItemId} onClick={setActiveItemId} />
@@ -255,9 +256,9 @@ const List = ({
                                 </>
                             ) : onLoadMore ? (
                                 <LemonButton onClick={onLoadMore}>Load more</LemonButton>
-                            ) : (
+                            ) : sections.length <= 1 ? (
                                 'No more results'
-                            )}
+                            ) : null}
                         </div>
                     </>
                 ) : loading ? (