1
0
Fork 0
freesewing/sites/shared/components/workbench/views/draft/menu.mjs
Joost De Cock 86d984e8c5 wip(shared): Split new design pages per design to split bundle
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.
2023-10-08 14:26:58 +02:00

93 lines
2.6 KiB
JavaScript

// __SDEFILE__ - This file is a dependency for the stand-alone environment
import { loadSettingsConfig as loadUiSettingsConfig } from 'shared/components/workbench/menus/ui-settings/config.mjs'
import {
DesignOptions,
ns as designMenuNs,
} from 'shared/components/workbench/menus/design-options/index.mjs'
import {
CoreSettings,
ns as coreMenuNs,
} from 'shared/components/workbench/menus/core-settings/index.mjs'
import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs'
import { useTranslation } from 'next-i18next'
import { patternNsFromPatternConfig, nsMerge } from 'shared/utils.mjs'
import { SettingsIcon, OptionsIcon, DesktopIcon } from 'shared/components/icons.mjs'
import { Accordion } from 'shared/components/accordion.mjs'
import {
FlagsAccordionTitle,
FlagsAccordionEntries,
} from 'shared/components/workbench/views/flags.mjs'
import { collection } from 'site/hooks/use-design.mjs'
export const ns = nsMerge(coreMenuNs, designMenuNs, uiNs, collection)
export const DraftMenu = ({
design,
patternConfig,
//setSettings,
settings,
ui,
update,
language,
account,
docs,
view,
setView,
flags = false,
}) => {
const { t } = useTranslation(nsMerge(ns, patternNsFromPatternConfig(patternConfig)))
const control = account.control
const menuProps = {
design,
patternConfig,
settings,
update,
language,
account,
docs,
control,
}
const uiSettingsConfig = loadUiSettingsConfig()
const sections = [
{
name: 'designOptions',
ns: 'design-options',
icon: <OptionsIcon className="w-8 h-8" />,
menu: <DesignOptions {...menuProps} />,
},
{
name: 'coreSettings',
ns: 'core-settings',
icon: <SettingsIcon className="w-8 h-8" />,
menu: <CoreSettings {...menuProps} />,
},
{
name: 'uiSettings',
ns: 'ui-settings',
icon: <DesktopIcon className="w-8 h-8" />,
menu: <UiSettings {...menuProps} {...{ ui, view, setView }} />,
},
]
const items = []
if (control >= uiSettingsConfig.kiosk.control && flags)
items.push([
<FlagsAccordionTitle flags={flags} key={1} />,
<FlagsAccordionEntries {...{ update, control, flags }} key={2} />,
])
items.push(
...sections.map((section) => [
<>
<h5 className="flex flex-row gap-2 items-center justify-between w-full">
<span>{t(`${section.ns}:${section.name}.t`)}</span>
{section.icon}
</h5>
<p className="text-left">{t(`${section.ns}:${section.name}.d`)}</p>
</>,
section.menu,
])
)
return <Accordion items={items} />
}