acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: enhance storybook embedable doc pages

This commit is contained in:
Hossein Mehrabi 2023-10-23 15:51:29 +03:30
parent 3387098431
commit 25e9e13925
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
1 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/lsd-react/.storybook/preview.tsx
View File

@ -148,17 +148,16 @@ const preview: Preview = {
typeof meta?.parameters?.docs?.controls === 'undefined' || typeof meta?.parameters?.docs?.controls === 'undefined' ||
meta?.parameters?.docs?.controls === true meta?.parameters?.docs?.controls === true
const storyId = new URLSearchParams(window.location.search).get( const searchParams = new URLSearchParams(window.location.search)
'storyId',
) as string const storyId = searchParams.get('storyId') as string
const embedded = const embedded = searchParams.get('embedded') === 'true'
new URLSearchParams(window.location.search).get('embedded') === 'true' const globalControls = (searchParams.get('globalControls') || '').split(
const globalControls = ',',
new URLSearchParams(window.location.search).get('globalControls') === )
'true' const hideElements = (searchParams.get('hide') || '').split(',')
const hideElements = (
new URLSearchParams(window.location.search).get('hide') || '' const canvasPadding = searchParams.get('canvasPadding') || '0,0'
).split(',')
const hideTitle = hideElements.includes('title') const hideTitle = hideElements.includes('title')
const hideSubtitle = hideElements.includes('subtitle') const hideSubtitle = hideElements.includes('subtitle')
@ -174,26 +173,34 @@ const preview: Preview = {
embedded && 'docs-wrapper--embedded', embedded && 'docs-wrapper--embedded',
hideElements.map((element) => `docs-wrapper--hide-${element}`), hideElements.map((element) => `docs-wrapper--hide-${element}`),
)} )}
style={
{
'--canvas-padding': canvasPadding.replace(',', ' '),
} as any
}
> >
{!hideTitle && <Title />} {!hideTitle && <Title />}
{!hideSubtitle && <Subtitle />} {!hideSubtitle && <Subtitle />}
{!hideDescription && <Description />} {!hideDescription && <Description />}
{globalControls && ( {globalControls && globalControls.length > 0 && (
<div className="docs-global-controls"> <div className="docs-global-controls">
{globals.props.map((prop, index) => ( {globals.props
<Dropdown .filter((prop) => globalControls.includes(prop.key))
key={index} .map((prop, index) => (
menuProps={{ className: 'docs-dropdown-menu' }} <Dropdown
value={prop.value} id={prop.key + '-dropdown'}
onChange={(value) => prop.set(value as string)} key={index}
options={prop.values.map((i) => ({ menuProps={{ className: 'docs-dropdown-menu' }}
name: i.title, value={prop.value}
value: i.value, onChange={(value) => prop.set(value as string)}
}))} options={prop.values.map((i) => ({
triggerLabel={prop.name} name: i.title,
label={prop.name} value: i.value,
/> }))}
))} triggerLabel={prop.name}
label={prop.name}
/>
))}
</div> </div>
)} )}
<Canvas <Canvas
@ -271,7 +278,7 @@ const preview: Preview = {
.sbdocs-preview { .sbdocs-preview {
border: none; border: none;
.docs-story > div:nth-child(1) { .docs-story > div:nth-child(1) {
padding: 0 !important; padding: 0px !important;
} }
} }
} }
@ -286,6 +293,10 @@ const preview: Preview = {
.sbdocs-wrapper { .sbdocs-wrapper {
padding: 1px; padding: 1px;
} }
.sbdocs-preview .story-wrapper {
padding: var(--canvas-padding) !important;
}
`} `}
/> />
)} )}