86d984e8c5
This adds page templates that will auto-generate pages for each design. This not only allows us to split the bundle for these individual designs, we are also now passing the inline docs for a design as static props, as that will limit the memory footprint of webpack. Remains to be seen how this will all come together, but it's better than throwing everything at webpack and watching the build fail.
114 lines
3.1 KiB
JavaScript
114 lines
3.1 KiB
JavaScript
// __SDEFILE__ - This file is a dependency for the stand-alone environment
|
|
import { useCallback, useMemo } from 'react'
|
|
// Components
|
|
import { OptionsIcon } from 'shared/components/icons.mjs'
|
|
import { optionsMenuStructure, optionType } from 'shared/utils.mjs'
|
|
|
|
import { values } from './values.mjs'
|
|
import { inputs } from './inputs.mjs'
|
|
import { WorkbenchMenu } from '../shared/index.mjs'
|
|
import { MenuItem } from '../shared/menu-item.mjs'
|
|
|
|
export const ns = ['design-options']
|
|
|
|
// Emojis for option groups :)
|
|
export const emojis = {
|
|
advanced: '🤓',
|
|
fit: '👕',
|
|
style: '💃🏽',
|
|
dflt: '🕹️',
|
|
groupDflt: '📁',
|
|
}
|
|
|
|
/**
|
|
* A wrapper for {@see MenuItem} to handle design option-specific business
|
|
* @param {Object} options.config the config for the item
|
|
* @param {Object} options.settings core settings
|
|
* @param {Object} options.rest the rest of the props
|
|
*/
|
|
const DesignOption = ({ config, settings, control, ...rest }) => {
|
|
const type = optionType(config)
|
|
const Input = inputs[type]
|
|
const Value = values[type]
|
|
const allowOverride = ['pct', 'count', 'deg'].includes(type)
|
|
const allowToggle =
|
|
(control > 3 && type === 'bool') || (type == 'list' && config.list.length === 2)
|
|
|
|
// Hide option?
|
|
if (config?.hide || (typeof config?.hide === 'function' && config.hide(settings))) return null
|
|
|
|
return (
|
|
<MenuItem
|
|
{...{
|
|
config,
|
|
control,
|
|
...rest,
|
|
Input,
|
|
Value,
|
|
allowOverride,
|
|
allowToggle,
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* The design options menu
|
|
* @param {String} options.design the name of the design
|
|
* @param {Object} options.patternConfig the configuration from the pattern
|
|
* @param {Object} options.settings core settings
|
|
* @param {Object} options.update settings and ui update functions
|
|
* @param {String} options.language the menu language
|
|
* @param {Object} options.account the user account data
|
|
* @param {Object} options.docs inline docs as compiled mdx
|
|
*/
|
|
export const DesignOptions = ({
|
|
design,
|
|
patternConfig,
|
|
settings,
|
|
update,
|
|
language,
|
|
account,
|
|
isFirst = true,
|
|
docs,
|
|
}) => {
|
|
const menuNs = [design, ...ns]
|
|
const optionsMenu = useMemo(
|
|
() => optionsMenuStructure(patternConfig.options, settings),
|
|
[patternConfig, settings]
|
|
)
|
|
const updateFunc = useCallback(
|
|
(name, value) => update.settings(['options', ...name], value),
|
|
[update]
|
|
)
|
|
|
|
// FIXME How do we find inherited docs?
|
|
const getDocsPath = useCallback(
|
|
(option) => `designs/${design}/options${option ? '/' + option.toLowerCase() : ''}`,
|
|
[design]
|
|
)
|
|
|
|
return (
|
|
<WorkbenchMenu
|
|
{...{
|
|
config: optionsMenu,
|
|
control: account.control,
|
|
currentValues: settings.options,
|
|
docs,
|
|
emojis,
|
|
getDocsPath,
|
|
Icon: OptionsIcon,
|
|
Item: DesignOption,
|
|
isFirst,
|
|
name: 'design-options:designOptions',
|
|
language,
|
|
ns: menuNs,
|
|
passProps: { settings, patternConfig },
|
|
updateFunc,
|
|
values,
|
|
isDesignOptionsGroup: true,
|
|
design,
|
|
}}
|
|
/>
|
|
)
|
|
}
|