98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
import { Tab, Tabs } from '../tabs.js'
|
|
import Md from 'react-markdown'
|
|
import { pluginBundle } from '@freesewing/plugin-bundle'
|
|
import { pluginFlip } from '@freesewing/plugin-flip'
|
|
import { pluginGore } from '@freesewing/plugin-gore'
|
|
import { Design } from '@freesewing/core'
|
|
import Svg from '../../workbench/draft/svg'
|
|
import Defs from '../../workbench/draft/defs'
|
|
import Stack from '../../workbench/draft/stack'
|
|
import { useGist } from 'shared/hooks/useGist'
|
|
|
|
// Get code from children
|
|
export const asText = (reactEl) => {
|
|
if (typeof reactEl.props.children === 'string') return reactEl.props.children
|
|
if (Array.isArray(reactEl.props.children)) {
|
|
return reactEl.props.children.map((el) => (typeof el === 'string' ? el : asText(el))).join('')
|
|
}
|
|
if (typeof reactEl.props.children === 'object') return asText(reactEl.props.children)
|
|
|
|
return ''
|
|
}
|
|
|
|
// The actual example
|
|
const Example = ({ app, draft, xray = false }) => {
|
|
// State for gist
|
|
const { gist, unsetGist, updateGist } = useGist('example-mdx', app)
|
|
|
|
if (xray) {
|
|
gist._state.xray = { enabled: true }
|
|
gist.margin = 20
|
|
}
|
|
const patternProps = draft.draft().getRenderProps()
|
|
console.log(draft)
|
|
if (draft.store.logs.error.length > 0 || draft.setStores[0].logs.error.length > 0)
|
|
return (
|
|
<div className="max-w-full p-4">
|
|
<pre>{draft.store.logs.error.join('\n')}</pre>
|
|
<pre>{draft.setStores[0].logs.error.join('\n')}</pre>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<Svg {...patternProps} embed={true}>
|
|
<Defs {...patternProps} />
|
|
<style>{`:root { --pattern-scale: 1} ${patternProps.svg.style}`}</style>
|
|
<g>
|
|
{Object.keys(patternProps.stacks).map((stackName) => (
|
|
<Stack
|
|
{...{ app, gist, updateGist, unsetGist, patternProps }}
|
|
showInfo={app.setPopup}
|
|
key={stackName}
|
|
stackName={stackName}
|
|
stack={patternProps.stacks[stackName]}
|
|
/>
|
|
))}
|
|
</g>
|
|
</Svg>
|
|
)
|
|
}
|
|
|
|
// Returns a FreeSewing draft based on code in children
|
|
const buildExample = (children, settings = { margin: 10 }) => {
|
|
const code = asText(children)
|
|
const draft = eval(code)
|
|
const part = {
|
|
draft,
|
|
measurements: [],
|
|
plugins: [pluginBundle, pluginFlip, pluginGore],
|
|
}
|
|
const design = new Design({ parts: [part] })
|
|
return new design(settings)
|
|
}
|
|
|
|
// Wrapper component dealing with the tabs and code view
|
|
const TabbedExample = ({ app, children, caption }) => {
|
|
const draft = buildExample(children)
|
|
|
|
return (
|
|
<div className="my-8">
|
|
<Tabs tabs="Preview, Code, X-Ray">
|
|
<Tab>
|
|
<Example draft={draft} app={app} />
|
|
</Tab>
|
|
<Tab>{children}</Tab>
|
|
<Tab>
|
|
<Example draft={draft} app={app} xray={true} />
|
|
</Tab>
|
|
</Tabs>
|
|
{caption && (
|
|
<div className="text-center italic -mt-4">
|
|
<Md>{caption}</Md>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TabbedExample
|