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