Skip to content
Permalink
91e8420402
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

exo/libs/shared/ui/src/lib/Combobox/index.stories.tsx

Go to file
 
 
Cannot retrieve contributors at this time
344 lines (338 sloc) 9.9 KB
Raw Blame
import React from 'react'
import Combobox, { DataType } from './index';
export default {
title: 'Combobox ',
component: Combobox
}
const DataSimple: DataType = [
{
id: 1,
title: 'Wade Cooper'
},
{
id: 2,
title: 'Arlene Mccoy'
},
{
id: 3,
title: 'Devon Webb'
},
{
id: 4,
title: 'Tom Cook'
},
{
id: 5,
title: 'Tanya Fox'
},
{
id: 6,
title: 'Hellen Schmidt'
},
{
id: 7,
title: 'Caroline Schultz'
}
]
const DataWithSecondaryText: DataType = [
{
id: 1,
title: 'Wade Cooper',
secondaryText: '@WadeCooper',
},
{
id: 2,
title: 'Arlene Mccoy',
secondaryText: '@ArleneMccoy',
},
{
id: 3,
title: 'Devon Webb',
secondaryText: '@DevonWebb',
},
{
id: 4,
title: 'Tom Cook',
secondaryText: '@TomCook',
},
{
id: 5,
title: 'Tanya Fox',
secondaryText: '@TanyaFox',
},
{
id: 6,
title: 'Hellen Schmidt',
secondaryText: '@HellenSchmidt',
},
{
id: 7,
title: 'Caroline Schultz',
secondaryText: '@CarolineSchultz',
}
]
const DataWithStatus: DataType = [
{
id: 1,
title: 'Wade Cooper',
online: true
},
{
id: 2,
title: 'Arlene Mccoy',
online: false
},
{
id: 3,
title: 'Devon Webb',
online: true
},
{
id: 4,
title: 'Tom Cook',
online: false
},
{
id: 5,
title: 'Tanya Fox',
online: false
},
{
id: 6,
title: 'Hellen Schmidt',
online: true
},
{
id: 7,
title: 'Caroline Schultz',
online: true
}
]
const DataWithAvatar: DataType = [
{
id: 1,
title: 'Wade Cooper',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 2,
title: 'Arlene Mccoy',
avatar:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 3,
title: 'Devon Webb',
avatar:
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
},
{
id: 4,
title: 'Tom Cook',
avatar:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 5,
title: 'Tanya Fox',
avatar:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 6,
title: 'Hellen Schmidt',
avatar:
'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 7,
title: 'Caroline Schultz',
avatar:
'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
]
const DataWithAvatarAndStatus: DataType = [
{
id: 1,
title: 'Wade Cooper',
online: true,
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 2,
title: 'Arlene Mccoy',
online: false,
avatar:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 3,
title: 'Devon Webb',
online: true,
avatar:
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
},
{
id: 4,
title: 'Tom Cook',
online: false,
avatar:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 5,
title: 'Tanya Fox',
online: false,
avatar:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 6,
title: 'Hellen Schmidt',
online: true,
avatar:
'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 7,
title: 'Caroline Schultz',
online: false,
avatar:
'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
]
const DataWithDescription: DataType = [
{
id: 1,
title: 'Wade Cooper',
secondaryText: '@WadeCooper',
online: true,
description: 'This is one of your friends. say Hi to them!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 2,
title: 'Arlene Mccoy',
secondaryText: '@ArleneMccoy',
online: false,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 3,
title: 'Devon Webb',
secondaryText: '@DevonWebb',
online: true,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 4,
title: 'Tom Cook',
secondaryText: '@TomCook',
online: false,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 5,
title: 'Tanya Fox',
secondaryText: '@TanyaFox',
online: false,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 6,
title: 'Hellen Schmidt',
secondaryText: '@HellenSchmidt',
online: false,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
{
id: 7,
title: 'Caroline Schultz',
secondaryText: '@CarolineSchultz',
online: true,
description: 'This is one of your friends. Valuate friends and say Hi!',
avatar:
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
]
const ExpendableIcon = ({ isOpen }: { isOpen: boolean }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={classNames(isOpen && 'rotate-180', "w-5 h-5 transition-transform duration-50")}>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
)
export const WithoutPlaceholder = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataSimple} label='Choose an option:' />
</div>
</div>
)
export const SimpleWithPlaceholder = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataSimple} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const WithSecondaryText = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithSecondaryText} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const WithStatus = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithStatus} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const WithAvatar = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithAvatar} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const WithAvatarAndStatus = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithAvatarAndStatus} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const WithCustomExpandableIcon = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithAvatarAndStatus} label='Choose an option:' inputPlaceholder='Type "Tom"' ExpendableIcon={ExpendableIcon} />
</div>
</div>
)
export const WithDescription = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithDescription} label='Choose an option:' inputPlaceholder='Type "Tom"' />
</div>
</div>
)
export const DifferentSize = () => (
<div className='bg-gray-100 h-screen flex justify-center pt-24'>
<div className='w-full md:max-w-max'>
<Combobox data={DataWithDescription} label='Choose an option:' size='3xl' />
</div>
</div>
)