VSinerva/freesewing
1
0
Fork 0
Code Activity

wip: Work on editor docs

Browse source
This commit is contained in:
joostdecock 2025-05-31 18:38:32 +02:00
parent 74d4f05d94
commit 3d01c0136c
61 changed files with 2429 additions and 2396 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/react/components/Account/Set.mjs
View file

@ -15,6 +15,7 @@ import {
shortDate,
timeAgo,
} from '@freesewing/utils'
import { modalMeasurementHelp } from '@freesewing/react/components/Help'
// Context
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
import { ModalContext } from '@freesewing/react/context/Modal'
@ -57,7 +58,6 @@ import { Popout } from '@freesewing/react/components/Popout'
import { bundlePatternTranslations, draft, flattenFlags } from '../Editor/lib/index.mjs'
import { Bonny } from '@freesewing/bonny'
import { MiniNote, MiniTip } from '../Mini/index.mjs'
import { modalMeasurementHelp } from '@freesewing/react/components/Help'
/**
* Component to show an individual measurements set

4
packages/react/components/Docusaurus/index.mjs
View file

@ -9,6 +9,7 @@ import {
ChatIcon,
DesignIcon,
DocsIcon,
HelpIcon,
ShowcaseIcon,
RssIcon,
LockIcon,
@ -184,4 +185,7 @@ const navbarItems = {
Link={props.Link}
/>
),
support: (props) => (
<SimpleNavbarItem label="Support" href="/support/" Icon={HelpIcon} Link={props.Link} />
),
}

53
packages/react/components/Editor/components/menus/Container.mjs
View file

@ -1,11 +1,24 @@
// Dependencies
import { menuValueWasChanged } from '../../lib/index.mjs'
import { designOptionType } from '@freesewing/utils'
import {
modalDesignOptionHelp,
modalCoreSettingHelp,
modalUiPreferenceHelp,
} from '@freesewing/react/components/Help'
// Context
import { ModalContext } from '@freesewing/react/context/Modal'
// Hooks
import React, { useState, useMemo } from 'react'
import React, { useState, useMemo, useContext } from 'react'
// Components
import { SubAccordion } from '../Accordion.mjs'
import { EditIcon, GroupIcon, OptionsIcon, ResetIcon } from '@freesewing/react/components/Icon'
import {
HelpIcon,
EditIcon,
GroupIcon,
OptionsIcon,
ResetIcon,
} from '@freesewing/react/components/Icon'
import { Fieldset } from '@freesewing/react/components/Input'
import { MiniTip } from '@freesewing/react/components/Mini'
@ -25,6 +38,7 @@ const iconButtonClass = 'tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0
* @param {React.Component} Value a value display component this menu item will use
* @param {Boolean} allowOverride all a text input to be used to override the given input component
* @param {Number} ux the user-defined ux level
* @param {strign} type one of designOption, coreSetting, or uiPreference
*/
export const MenuItem = ({
name,
@ -38,7 +52,9 @@ export const MenuItem = ({
state,
config,
Design,
type,
}) => {
const { setModal } = useContext(ModalContext)
// Local state - whether the override input should be shown
const [override, setOverride] = useState(false)
@ -69,6 +85,39 @@ export const MenuItem = ({
// get buttons for open and closed states
const buttons = []
if (type === 'designOption')
buttons.push(
<button
key="help"
className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
onClick={() => modalDesignOptionHelp(Design.designConfig.data.id, name, setModal)}
title="Show help for this design option"
>
<HelpIcon />
</button>
)
else if (type === 'coreSetting')
buttons.push(
<button
key="help"
className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
onClick={() => modalCoreSettingHelp(name, setModal)}
title="Show help for this core setting"
>
<HelpIcon />
</button>
)
else if (type === 'uiPreference')
buttons.push(
<button
key="help"
className="tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-success"
onClick={() => modalUiPreferenceHelp(name, setModal)}
title="Show help for this UI preference"
>
<HelpIcon />
</button>
)
if (allowOverride)
buttons.push(
<button

1
packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs
View file

@ -124,6 +124,7 @@ export const CoreSetting = ({ name, config, ux, updateHandler, current, passProp
return (
<MenuItem
type="coreSetting"
{...{
name,
config,

1
packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs
View file

@ -121,6 +121,7 @@ export const DesignOption = ({ config, settings, ux, inputs, values, ...rest })
return (
<MenuItem
type="designOption"
{...{
config,
ux,

60
packages/react/components/Editor/components/menus/LayoutMenu.mjs
View file

@ -61,63 +61,3 @@ export const LayoutSettingsMenu = ({ update, state, Design }) => {
/>
)
}
/*
const PrintActions = ({ state, update }) => (
<SubAccordion
items={[
[
<div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
<LeftRightIcon />
<span>{'workbench:partTransfo'}</span>
</div>
{state.ui.hideMovableButtons ? <BoolNoIcon /> : <BoolYesIcon />}
</div>,
<ListInput
key={2}
update={() => update.state.ui('hideMovableButtons', state.ui.hideMovableButtons ? false : true)}
label={
<span className="tw:text-base tw:font-normal">{'workbench:partTransfoDesc'}</span>
}
list={[
{
val: true,
label: 'workbench:partTransfoNo',
desc: 'workbench:partTransfoNoDesc',
},
{
val: false,
label: 'workbench:partTransfoYes',
desc: 'workbench:partTransfoYesDesc',
},
]}
current={state.ui.hideMovableButtons ? true : false}
/>,
'partTransfo',
],
[
<div className="tw:w-full tw:flex tw:flex-row tw:gap2 tw:justify-between" key={1}>
<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">
<ResetIcon />
<span>{'workbench:resetPrintLayout'}</span>
</div>
<WarningIcon />
</div>,
<Fragment key={2}>
<p>{'workbench:resetPrintLayoutDesc'}</p>
<button
className={`${horFlexClasses} tw:btn tw:btn-warning tw:btn-outline tw:w-full`}
onClick={() => update.ui(['layouts', 'print'])}
>
<ResetIcon />
<span>{'workbench:resetPrintLayout'}</span>
</button>
</Fragment>,
'reset',
],
]}
/>
)
*/

8
packages/react/components/Editor/components/menus/UiPreferencesMenu.mjs
View file

@ -53,5 +53,11 @@ export const UiPreferencesMenu = ({ update, state, Design }) => {
}
export const UiPreference = ({ name, ux, ...rest }) => (
<MenuItem {...rest} name={name} allowToggle={!['ux', 'view'].includes(name) && ux > 3} ux={ux} />
<MenuItem
type="uiPreference"
{...rest}
name={name}
allowToggle={!['ux', 'view'].includes(name) && ux > 3}
ux={ux}
/>
)

6
packages/react/components/Editor/components/views/DraftView.mjs
View file

@ -1,7 +1,9 @@
// Dependencies
import React from 'react'
import React, { useContext } from 'react'
import { bundlePatternTranslations, draft, missingMeasurements } from '../../lib/index.mjs'
import { colors, darkColors } from '@freesewing/plugin-theme'
// Context
import { ModalContext } from '@freesewing/react/context/Modal'
// Hooks
import { useColorMode } from '@docusaurus/theme-common'
// Components
@ -29,6 +31,7 @@ import { translateStrings } from '../../../Pattern/index.mjs'
* @return {function} DraftView - React component
*/
export const DraftView = ({ Design, state, update, config, plugins = [], PluginOutput = Null }) => {
const { modalContent } = useContext(ModalContext)
/*
* We need to manipulate the theme for SVG in the browser
*/
@ -103,6 +106,7 @@ export const DraftView = ({ Design, state, update, config, plugins = [], PluginO
rotate={state.ui.rotate}
update={update}
/>
{modalContent}
</>
)
}

39
packages/react/components/Editor/lib/core-settings.mjs
View file

@ -61,12 +61,6 @@ export function menuCoreSettingsSaboolHandler({ toggleSa }) {
return toggleSa
}
const CoreDocsLink = ({ item }) => (
<a href={`/docs/about/site/draft/#${item.toLowerCase()}`} className={`${linkClasses} tw:px-2`}>
Learn more
</a>
)
export function menuCoreSettingsStructure({
units = 'metric',
sabool = false,
@ -77,12 +71,7 @@ export function menuCoreSettingsStructure({
sabool: {
dense: true,
title: 'Include seam allowance',
about: (
<>
Controls whether or not you want to include seam allowance on your pattern.
<CoreDocsLink item="sabool" />
</>
),
about: <>Controls whether or not you want to include seam allowance on your pattern.</>,
ux: config.uxLevels.core.sa,
list: [0, 1],
choiceTitles: {
@ -99,12 +88,7 @@ export function menuCoreSettingsStructure({
samm: sabool
? {
title: 'Seam Allowance Size',
about: (
<>
Controls the size of the pattern&apos;s seam allowance.
<CoreDocsLink item="sa" />
</>
),
about: <>Controls the size of the pattern&apos;s seam allowance.</>,
ux: config.uxLevels.core.sa,
min: 0,
max: units === 'imperial' ? 25.4 : 25, // values are in mm
@ -115,12 +99,7 @@ export function menuCoreSettingsStructure({
units: {
dense: true,
title: 'Pattern units',
about: (
<>
Allows you to switch between metric and imperial units on the pattern.
<CoreDocsLink item="units" />
</>
),
about: <>Allows you to switch between metric and imperial units on the pattern.</>,
ux: config.uxLevels.core.units,
list: ['metric', 'imperial'],
dflt: accountUnits,
@ -141,7 +120,6 @@ export function menuCoreSettingsStructure({
<>
Trees are awesome, and taping together sewing patterns is not much fun. Try our paperless
mode to avoid the need to print out your pattern altogether.
<CoreDocsLink item="paperless" />
</>
),
ux: config.uxLevels.core.paperless,
@ -164,7 +142,6 @@ export function menuCoreSettingsStructure({
<>
Controls how detailed the pattern is; Either a complete pattern with all details, or a
basic outline of the pattern parts.
<CoreDocsLink item="complete" />
</>
),
ux: config.uxLevels.core.complete,
@ -187,7 +164,6 @@ export function menuCoreSettingsStructure({
<>
Controls efforts to save paper. Disable this to expand all pattern parts at the cost of
using more space & paper.
<CoreDocsLink item="expand" />
</>
),
ux: config.uxLevels.core.expand,
@ -206,12 +182,7 @@ export function menuCoreSettingsStructure({
only: {
dense: true,
title: 'Only included selected pattern parts',
about: (
<>
Allows you to control what parts to include in your pattern.
<CoreDocsLink item="only" />
</>
),
about: <>Allows you to control what parts to include in your pattern.</>,
ux: config.uxLevels.core.only,
dflt: false,
list: parts,
@ -224,7 +195,6 @@ export function menuCoreSettingsStructure({
<>
Allows you to control the scale of annotations on the pattern. This is most useful when
generating very small patterns, like for doll outfits.
<CoreDocsLink item="scale" />
</>
),
ux: config.uxLevels.core.scale,
@ -240,7 +210,6 @@ export function menuCoreSettingsStructure({
<>
Controls the gap between pattern parts, as well as the gap between the parts and the page
edge.
<CoreDocsLink item="margin" />
</>
),
ux: config.uxLevels.core.margin,

18
packages/react/components/Editor/lib/design-options.mjs
View file

@ -4,17 +4,6 @@ import { designOptionType, set, orderBy } from '@freesewing/utils'
import { i18n } from '@freesewing/collection'
import { linkClasses } from '@freesewing/utils'
const DesignDocsLink = ({ design, item }) => (
<a
href={`/docs/designs/${design}/options/#${item.toLowerCase()}`}
className={`${linkClasses} tw:px-2`}
target="_BLANK"
rel="noreferrer"
>
Learn more
</a>
)
export function menuDesignOptionsStructure(design, options, settings, asFullList = false) {
if (!options) return options
const sorted = {}
@ -24,12 +13,7 @@ export function menuDesignOptionsStructure(design, options, settings, asFullList
...option,
name,
title: i18n[design]?.en?.o?.[name]?.t || name,
about: (
<span>
{i18n[design]?.en?.o?.[name]?.d || name}
<DesignDocsLink item={name} design={design} />
</span>
),
about: <span>{i18n[design]?.en?.o?.[name]?.d || name}</span>,
dense: true,
sideBySide: true,
}

26
packages/react/components/Editor/lib/ui-preferences.mjs
View file

@ -3,12 +3,6 @@ import { defaultConfig } from '../config/index.mjs'
import { linkClasses } from '@freesewing/utils'
import { AsideIcon, RotateIcon, RocketIcon, UxIcon } from '@freesewing/react/components/Icon'
const UiDocsLink = ({ item }) => (
<a href={`/docs/about/site/draft/#${item.toLowerCase()}`} className={`${linkClasses} tw:px-2`}>
Learn more
</a>
)
export function menuUiPreferencesStructure() {
const uiUx = defaultConfig.uxLevels.ui
const uiPreferences = {
@ -19,7 +13,6 @@ export function menuUiPreferencesStructure() {
<span>
Uses the right side of the screen for the Design Options, Core Settings, and UI
Preferences menus.
<UiDocsLink item="aside" />
</span>
),
ux: uiUx.aside,
@ -35,10 +28,7 @@ export function menuUiPreferencesStructure() {
dense: true,
title: 'User Experience',
about: (
<span>
Controls the user experience, from keep it simple, to give me all the powers.
<UiDocsLink item="control" />
</span>
<span>Controls the user experience, from keep it simple, to give me all the powers.</span>
),
ux: uiUx.ux,
emoji: '🖥️',
@ -63,12 +53,7 @@ export function menuUiPreferencesStructure() {
rotate: {
dense: true,
title: 'Rotate Pattern',
about: (
<span>
Allows you to rotate your pattern 90 degrees, handy for tall patterns.
<UiDocsLink item="rotate" />
</span>
),
about: <span>Allows you to rotate your pattern 90 degrees, handy for tall patterns.</span>,
ux: uiUx.rotate,
list: [0, 1],
choiceTitles: {
@ -81,12 +66,7 @@ export function menuUiPreferencesStructure() {
renderer: {
dense: true,
title: 'Pattern render engine',
about: (
<span>
Change the underlying method for rendering the pattern on screen.
<UiDocsLink item="renderer" />
</span>
),
about: <span>Change the underlying method for rendering the pattern on screen.</span>,
ux: uiUx.renderer,
list: ['react', 'svg'],
choiceTitles: {

84
packages/react/components/Help/index.mjs
View file

@ -2,38 +2,80 @@ import React from 'react'
// Components
import { ModalWrapper } from '@freesewing/react/components/Modal'
/**
* A component to display inline help for a measurement.
const Iframe = (props) => <iframe {...props} style={{ height: '90vh', width: '90vh' }} />
/*
* A component to display inline help for a design option
*
* This is typically loaded as modal content as it returns an ifram
* This is typically loaded as modal content as it returns an iframe.
*
* @component
* @param {object} props - All component props
* @param {string} [props.m = undefined] - The measurment name (id)
* @param {string} props.design - The design name
* @param {string} props.o - The option ID
* @returns {JSX.Element}
*/
export const DesignOptionHelp = ({ design, o }) =>
const DesignOptionHelp = ({ design, o }) =>
design && o ? (
<iframe
<Iframe
src={`https://freesewing.eu/docs/designs/${design.toLowerCase()}/options/${o.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
title="Design Option Help"
style={{ height: '90vh', width: '90vw' }}
/>
) : (
<p>Invalid props provided to DesignOptionHelp.</p>
)
/**
/*
* A component to display inline help for a core setting
*
* This is typically loaded as modal content as it returns an iframe.
*
* @component
* @param {object} props - All component props
* @param {string} props.name - The core setting name/id
* @returns {JSX.Element}
*/
const CoreSettingHelp = ({ name }) =>
name ? (
<Iframe
src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
title="Core Setting Help"
/>
) : (
<p>Invalid props provided to CoreSettingsHelp.</p>
)
/*
* A component to display inline help for a UI preference
*
* This is typically loaded as modal content as it returns an iframe.
*
* @component
* @param {object} props - All component props
* @param {string} props.name - The core setting name/id
* @returns {JSX.Element}
*/
const UiPreferenceHelp = ({ name }) =>
name ? (
<Iframe
src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
title="UI Preference Help"
/>
) : (
<p>Invalid props provided to UiPreferenceHelp.</p>
)
/*
* A component to display inline help for a measurement.
*
* This is typically loaded as modal content as it returns an ifram
* This is typically loaded as modal content as it returns an iframe
*
* @component
* @param {object} props - All component props
* @param {string} [props.m = undefined] - The measurment name (id)
* @returns {JSX.Element}
*/
export const MeasurementHelp = ({ m }) =>
const MeasurementHelp = ({ m }) =>
m ? (
<iframe
src={`https://freesewing.eu/docs/measurements/${m.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
@ -41,12 +83,28 @@ export const MeasurementHelp = ({ m }) =>
style={{ height: '90vh', width: '90vw' }}
/>
) : (
<p>No measurment name provided in the m prop.</p>
<p>No measurement name provided in the m prop.</p>
)
export function modalCoreSettingHelp(name, setModal) {
setModal(
<ModalWrapper fullWidth keepOpenOnClick>
<CoreSettingHelp name={name} />
</ModalWrapper>
)
}
export function modalUiPreferenceHelp(name, setModal) {
setModal(
<ModalWrapper fullWidth keepOpenOnClick>
<UiPreferenceHelp name={name} />
</ModalWrapper>
)
}
export function modalDesignOptionHelp(design, o, setModal) {
setModal(
<ModalWrapper fullWidth>
<ModalWrapper fullWidth keepOpenOnClick>
<DesignOptionHelp {...{ design, o }} />
</ModalWrapper>
)
@ -55,7 +113,7 @@ export function modalDesignOptionHelp(design, o, setModal) {
export function modalMeasurementHelp(m, setModal) {
console.log('in modalMeasurmentHelp', { m, setModal })
setModal(
<ModalWrapper fullWidth>
<ModalWrapper fullWidth keepOpenOnClick>
<MeasurementHelp m={m} />
</ModalWrapper>
)