+
{lackingSets.map((set) => (
-
{
- // Swizzled components
- const { CuratedMeasurementsSetLineup } = Swizzled.components
- // Swizzled hooks
- const { useBackend } = Swizzled.hooks
+export const CuratedSetPicker = ({ clickHandler }) => {
+ // Hooks
const backend = useBackend()
- // Local state
+ // State (local)
const [sets, setSets] = useState([])
// Effects
useEffect(() => {
const getSets = async () => {
- const result = await backend.getCuratedSets()
- if (result.success) {
+ const [status, body] = await backend.getCuratedSets()
+ if (status === 200 && body.result === 'success') {
const allSets = {}
- for (const set of result.data.curatedSets) {
+ for (const set of body.curatedSets) {
if (set.published) allSets[set.id] = set
}
setSets(allSets)
@@ -215,11 +210,50 @@ export const CuratedSetPicker = ({ clickHandler, Swizzled, locale }) => {
}, [])
return (
-
+
)
}
+
+export const CuratedMeasurementsSetLineup = ({ sets = [], clickHandler }) => (
+
1 ? 'tw-justify-start tw-px-8' : 'tw-justify-center'
+ } tw-overflow-x-scroll`}
+ style={{
+ backgroundImage: `url(/img/lineup-backdrop.svg)`,
+ width: 'auto',
+ backgroundSize: 'auto 100%',
+ backgroundRepeat: 'repeat-x',
+ }}
+ >
+ {sets.map((set) => {
+ const props = {
+ className:
+ 'tw-aspect-[1/3] tw-w-auto tw-h-96 tw-bg-transparent tw-border-0 hover:tw-cursor-pointer tw-grayscale hover:tw-grayscale-0',
+ style: {
+ backgroundImage: `url(${cloudflareImageUrl({
+ id: `cset-${set.id}`,
+ type: 'lineup',
+ })})`,
+ width: 'auto',
+ backgroundSize: 'contain',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center',
+ },
+ onClick: () => clickHandler(set),
+ }
+
+ return (
+
+
+ {set.nameEn}
+
+ )
+ })}
+
+)
diff --git a/packages/react/components/Editor/swizzle/components/zoomable-pattern.mjs b/packages/react/components/Editor/components/ZoomablePattern.mjs
similarity index 100%
rename from packages/react/components/Editor/swizzle/components/zoomable-pattern.mjs
rename to packages/react/components/Editor/components/ZoomablePattern.mjs
diff --git a/packages/react/components/Editor/swizzle/components/menus/containers.mjs b/packages/react/components/Editor/components/menus/Container.mjs
similarity index 85%
rename from packages/react/components/Editor/swizzle/components/menus/containers.mjs
rename to packages/react/components/Editor/components/menus/Container.mjs
index 9ee30172276..13553f83745 100644
--- a/packages/react/components/Editor/swizzle/components/menus/containers.mjs
+++ b/packages/react/components/Editor/components/menus/Container.mjs
@@ -1,4 +1,11 @@
-import { useState, useMemo } from 'react'
+// Dependencies
+import { menuValueWasChanged } from '../../lib/index.mjs'
+// Hooks
+import React, { useState, useMemo } from 'react'
+// Components
+import { SubAccordion } from '../Accordion.mjs'
+import { GroupIcon, OptionsIcon } from '@freesewing/react/components/Icon'
+import { CoreSettingsMenu } from './CoreSettingsMenu.mjs'
/** @type {String} class to apply to buttons on open menu items */
const iconButtonClass = 'btn btn-xs btn-ghost px-0 text-accent'
@@ -17,11 +24,9 @@ const iconButtonClass = 'btn btn-xs btn-ghost px-0 text-accent'
* @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 {object} props.Swizzled - An object holding swizzled code
*/
export const MenuItem = ({
name,
- Swizzled,
current,
updateHandler,
passProps = {},
@@ -44,7 +49,6 @@ export const MenuItem = ({
ux,
current,
updateHandler,
- t: Swizzled.methods.t,
changed,
override,
Design,
@@ -73,7 +77,7 @@ export const MenuItem = ({
setOverride(!override)
}}
>
-
-
+
)
buttons.push()
return (
- {Swizzled.methods.t(`${name}.d`)}}
+ {name}.d}
id={config.name}
labelBR={{buttons}
}
labelBL={
- {Swizzled.methods.t(`pe:youAreUsing${changed ? 'ACustom' : 'TheDefault'}Value`)}
+ pe:youAreUsing{changed ? 'ACustom' : 'TheDefault'}Value
}
docs={docs}
>
-
+
)
}
@@ -132,8 +136,6 @@ export const MenuItem = ({
* @param {Function} updateHandler the function called by change handlers on inputs within menu items
* @param {Boolean} topLevel is this group the top level group? false for nested
* @param {Function} t translation function
- * @param {object} props.Swizzled - An object holding swizzled code
-
*/
export const MenuItemGroup = ({
collapsible = true,
@@ -149,10 +151,9 @@ export const MenuItemGroup = ({
topLevel = false,
isDesignOptionsGroup = false,
Design,
- Swizzled,
state,
}) => {
- if (!Item) Item = Swizzled.components.MenuItem
+ if (!Item) Item = MenuItem
// map the entries in the structure
const content = Object.entries(structure).map(([itemName, item]) => {
@@ -164,7 +165,7 @@ export const MenuItemGroup = ({
const ItemIcon = item.icon
? item.icon
: item.isGroup
- ? Swizzled.components.GroupIcon
+ ? GroupIcon
: Icon
? Icon
: () => fixme-icon
@@ -172,11 +173,11 @@ export const MenuItemGroup = ({
? () => (
{Object.keys(item).filter((i) => i !== 'isGroup').length}
-
+
)
: isDesignOptionsGroup
- ? values[Swizzled.methods.designOptionType(item)]
+ ? values[designOptionType(item)]
: values[itemName]
? values[itemName]
: () => ¯\_(ツ)_/¯
@@ -186,15 +187,14 @@ export const MenuItemGroup = ({
- {Swizzled.methods.t([`pe:${itemName}.t`, `pe:${itemName}`])}
+ pe:{itemName}.t pe:{itemName}
@@ -218,7 +218,6 @@ export const MenuItemGroup = ({
updateHandler,
isDesignOptionsGroup,
Design,
- Swizzled,
}}
/>
) : (
@@ -229,13 +228,12 @@ export const MenuItemGroup = ({
current: currentValues[itemName],
config: item,
state,
- changed: Swizzled.methods.menuValueWasChanged(currentValues[itemName], item),
+ changed: menuValueWasChanged(currentValues[itemName], item),
Value: values[itemName],
Input: inputs[itemName],
updateHandler,
passProps,
Design,
- Swizzled,
}}
/>
),
@@ -243,7 +241,7 @@ export const MenuItemGroup = ({
]
})
- return item !== null)} />
+ return item !== null)} />
}
/**
@@ -254,18 +252,11 @@ export const MenuItemGroup = ({
* @param {Boolean} options.open is the menu item open?
* @param {String} options.emoji the emoji icon of the menu item
*/
-export const MenuItemTitle = ({
- name,
- current = null,
- open = false,
- emoji = '',
- Icon = false,
- Swizzled,
-}) => (
+export const MenuItemTitle = ({ name, current = null, open = false, emoji = '', Icon = false }) => (
{Icon ? : {emoji}}
- {Swizzled.methods.t([`${name}.t`, name])}
+ fixme: {name}
{current}
diff --git a/packages/react/components/Editor/swizzle/components/menus/core-settings-menu.mjs b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs
similarity index 59%
rename from packages/react/components/Editor/swizzle/components/menus/core-settings-menu.mjs
rename to packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs
index 673ce6a76bf..890e96e8fba 100644
--- a/packages/react/components/Editor/swizzle/components/menus/core-settings-menu.mjs
+++ b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs
@@ -1,3 +1,11 @@
+import React from 'react'
+import {
+ menuCoreSettingsOnlyHandler,
+ menuCoreSettingsSaboolHandler,
+ menuCoreSettingsSammHandler,
+ menuCoreSettingsStructure,
+} from '../../lib/index.mjs'
+
/**
* The core settings menu
* @param {Object} options.update settings and ui update functions
@@ -7,8 +15,8 @@
* @param {Object} options.account the user account data
* @param {object} props.Swizzled - An object holding swizzled code
*/
-export const CoreSettingsMenu = ({ update, state, language, Design, Swizzled }) => {
- const structure = Swizzled.methods.menuCoreSettingsStructure({
+export const CoreSettingsMenu = ({ update, state, language, Design }) => {
+ const structure = menuCoreSettingsStructure({
language,
units: state.settings?.units,
sabool: state.settings?.sabool,
@@ -16,42 +24,38 @@ export const CoreSettingsMenu = ({ update, state, language, Design, Swizzled })
})
const inputs = {
- complete: Swizzled.components.MenuListInput,
- expand: Swizzled.components.MenuListInput,
- margin: Swizzled.components.MenuMmInput,
- only: Swizzled.components.MenuOnlySettingInput,
- paperless: Swizzled.components.MenuBoolInput,
- sabool: Swizzled.components.MenuBoolInput,
- samm: Swizzled.components.MenuMmInput,
- scale: Swizzled.components.MenuSliderInput,
- units: Swizzled.components.MenuBoolInput,
+ complete: MenuListInput,
+ expand: MenuListInput,
+ margin: MenuMmInput,
+ only: MenuOnlySettingInput,
+ paperless: MenuBoolInput,
+ sabool: MenuBoolInput,
+ samm: MenuMmInput,
+ scale: MenuSliderInput,
+ units: MenuBoolInput,
}
const values = {
- complete: Swizzled.components.MenuListValue,
- expand: Swizzled.components.MenuListValue,
- margin: Swizzled.components.MenuMmValue,
- only: Swizzled.components.MenuOnlySettingValue,
- paperless: Swizzled.components.MenuListValue,
- sabool: Swizzled.components.MenuListValue,
- samm: Swizzled.components.MenuMmValue,
- scale: Swizzled.components.MenuScaleSettingValue,
- units: Swizzled.components.MenuListValue,
+ complete: MenuListValue,
+ expand: MenuListValue,
+ margin: MenuMmValue,
+ only: MenuOnlySettingValue,
+ paperless: MenuListValue,
+ sabool: MenuListValue,
+ samm: MenuMmValue,
+ scale: MenuScaleSettingValue,
+ units: MenuListValue,
}
return (
- (
-
+
),
isFirst: true,
name: 'pe:designOptions',
@@ -64,7 +68,6 @@ export const CoreSettingsMenu = ({ update, state, language, Design, Swizzled })
},
updateHandler: update.settings,
isDesignOptionsGroup: false,
- Swizzled,
state,
Design,
inputs,
@@ -74,17 +77,15 @@ export const CoreSettingsMenu = ({ update, state, language, Design, Swizzled })
)
}
+// Facilitate custom handlers for core settings
+const coreSettingsHandlerMethods = {
+ only: menuCoreSettingsOnlyHandler,
+ sabool: menuCoreSettingsSaboolHandler,
+ samm: menuCoreSettingsSammHandler,
+}
+
/** A wrapper for {@see MenuItem} to handle core settings-specific business */
-export const CoreSetting = ({
- Swizzled,
- name,
- config,
- ux,
- updateHandler,
- current,
- passProps,
- ...rest
-}) => {
+export const CoreSetting = ({ name, config, ux, updateHandler, current, passProps, ...rest }) => {
// is toggling allowed?
const allowToggle = ux > 3 && config.list?.length === 2
@@ -98,10 +99,8 @@ export const CoreSetting = ({
/*
* Load a specific update handler if one is configured
*/
- const handler = Swizzled.config.menuCoreSettingsHandlerMethods?.[name.toLowerCase()]
- ? Swizzled.methods[Swizzled.config.menuCoreSettingsHandlerMethods[name.toLowerCase()]](
- handlerArgs
- )
+ const handler = coreSettingsHandlerMethods[name.toLowerCase()]
+ ? coreSettingsHandlerMethods[name.toLowerCase()](handlerArgs)
: updateHandler
return (
diff --git a/packages/react/components/Editor/swizzle/components/menus/design-options-menu.mjs b/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs
similarity index 52%
rename from packages/react/components/Editor/swizzle/components/menus/design-options-menu.mjs
rename to packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs
index e061c1821bc..4ff201e860a 100644
--- a/packages/react/components/Editor/swizzle/components/menus/design-options-menu.mjs
+++ b/packages/react/components/Editor/components/menus/DesignOptionsMenu.mjs
@@ -1,16 +1,39 @@
-import { useCallback, useMemo } from 'react'
+// Dependencies
+import { menuDesignOptionsStructure } from '../../lib/index.mjs'
+// Hooks
+import React, { useCallback, useMemo } from 'react'
+// Components
+import {
+ MenuBoolInput,
+ MenuConstantInput,
+ MenuSliderInput,
+ MenuDegInput,
+ MenuListInput,
+ MenuPctInput,
+} from './Input.mjs'
+import {
+ MenuBoolValue,
+ MenuConstantOptionValue,
+ MenuCountOptionValue,
+ MenuDegOptionValue,
+ MenuListOptionValue,
+ MenyMmOptionValue,
+ MenuPctOptionValue,
+} from './Value.mjs'
+import { MenuItemGroup } from './Container.mjs'
+import { OptionsIcon } from '@freesewing/react/components/Icon'
+//
/**
* The design options menu
* @param {object} props.Design - An object holding the Design instance
* @param {String} props.isFirst - Boolean indicating whether this is the first/top entry of the menu
* @param {Object} props.state - Object holding state
* @param {Object} props.update - Object holding state handlers
- * @param {object} props.Swizzled - An object holding swizzled code
*/
-export const DesignOptionsMenu = ({ Design, isFirst = true, state, update, Swizzled }) => {
+export const DesignOptionsMenu = ({ Design, isFirst = true, state, update }) => {
const structure = useMemo(
- () => Swizzled.methods.menuDesignOptionsStructure(Design.patternConfig.options, state.settings),
+ () => menuDesignOptionsStructure(Design.patternConfig.options, state.settings),
[Design.patternConfig, state.settings]
)
const updateHandler = useCallback(
@@ -20,45 +43,34 @@ export const DesignOptionsMenu = ({ Design, isFirst = true, state, update, Swizz
const drillProps = { Design, state, update }
const inputs = {
- bool: (props) => ,
- constant: (props) => ,
+ bool: (props) => ,
+ constant: (props) => ,
count: (props) => (
-
- ),
- deg: (props) => ,
- list: (props) => (
-
+
),
+ deg: (props) => ,
+ list: (props) => ,
mm: () => FIXME: Mm options are deprecated. Please report this ,
- pct: (props) => ,
+ pct: (props) => ,
}
const values = {
- bool: (props) => ,
- constant: (props) => ,
- count: (props) => ,
- deg: (props) => ,
- list: (props) => ,
- mm: (props) => ,
- pct: (props) => ,
+ bool: (props) => ,
+ constant: (props) => ,
+ count: (props) => ,
+ deg: (props) => ,
+ list: (props) => ,
+ mm: (props) => ,
+ pct: (props) => ,
}
return (
- (
-
- ),
+ Icon: OptionsIcon,
+ Item: (props) => ,
isFirst,
name: 'pe:designOptions',
language: state.locale,
@@ -69,7 +81,6 @@ export const DesignOptionsMenu = ({ Design, isFirst = true, state, update, Swizz
},
updateHandler,
isDesignOptionsGroup: true,
- Swizzled,
state,
Design,
inputs,
@@ -85,8 +96,8 @@ export const DesignOptionsMenu = ({ Design, isFirst = true, state, update, Swizz
* @param {Object} options.settings core settings
* @param {Object} options.rest the rest of the props
*/
-export const DesignOption = ({ config, settings, ux, inputs, values, Swizzled, ...rest }) => {
- const type = Swizzled.methods.designOptionType(config)
+export const DesignOption = ({ config, settings, ux, inputs, values, ...rest }) => {
+ const type = designOptionType(config)
const Input = inputs[type]
const Value = values[type]
const allowOverride = ['pct', 'count', 'deg'].includes(type)
@@ -96,12 +107,11 @@ export const DesignOption = ({ config, settings, ux, inputs, values, Swizzled, .
if (config?.hide || (typeof config?.hide === 'function' && config.hide(settings))) return null
return (
- {
- const { name, config, Swizzled } = props
+ const { name, config } = props
const boolConfig = useBoolConfig(name, config)
- return
+ return
}
/** A placeholder for an input to handle constant values */
@@ -33,8 +35,6 @@ export const MenuConstantInput = ({
/** A {@see MenuSliderInput} to handle degree values */
export const MenuDegInput = (props) => {
const { updateHandler } = props
- const { MenuSliderInput } = props.Swizzled.components
- const { round } = props.Swizzled.methods
const degUpdateHandler = useCallback(
(path, newVal) => {
updateHandler(path, newVal === undefined ? undefined : Number(newVal))
@@ -67,7 +67,6 @@ export const MenuListInput = ({
changed,
design,
isDesignOption = false,
- Swizzled,
}) => {
const handleChange = useSharedHandlers({
dflt: config.dflt,
@@ -87,7 +86,7 @@ export const MenuListInput = ({
const sideBySide = config.sideBySide || desc.length + title.length < 42
return (
- {title}{desc}
}
-
+
)
})
}
@@ -137,13 +136,10 @@ export const MenuListToggle = ({ config, changed, updateHandler, name }) => {
export const MenuMmInput = (props) => {
const { units, updateHandler, current, config } = props
- const { MenuSliderInput } = props.Swizzled.components
const mmUpdateHandler = useCallback(
(path, newCurrent) => {
const calcCurrent =
- typeof newCurrent === 'undefined'
- ? undefined
- : props.Swizzled.methods.measurementAsMm(newCurrent, units)
+ typeof newCurrent === 'undefined' ? undefined : measurementAsMm(newCurrent, units)
updateHandler(path, calcCurrent)
},
[updateHandler, units]
@@ -159,15 +155,11 @@ export const MenuMmInput = (props) => {
config: {
step: defaultStep,
...config,
- dflt: props.Swizzled.methods.measurementAsUnits(config.dflt, units),
+ dflt: measurementAsUnits(config.dflt, units),
},
- current:
- current === undefined
- ? undefined
- : props.Swizzled.methods.measurementAsUnits(current, units),
+ current: current === undefined ? undefined : measurementAsUnits(current, units),
updateHandler: mmUpdateHandler,
- valFormatter: (val) =>
- units === 'imperial' ? props.Swizzle.methods.formatFraction128(val, null) : val,
+ valFormatter: (val) => (units === 'imperial' ? formatFraction128(val, null) : val),
suffix: units === 'imperial' ? '"' : 'cm',
}}
/>
@@ -243,27 +235,24 @@ export const MenuMmInput = (props) => {
//}
/** A {@see SliderInput} to handle percentage values */
-export const MenuPctInput = ({ current, changed, updateHandler, config, Swizzled, ...rest }) => {
+export const MenuPctInput = ({ current, changed, updateHandler, config, ...rest }) => {
const factor = 100
- let pctCurrent = changed ? Swizzled.methods.menuRoundPct(current, factor) : current
+ let pctCurrent = changed ? menuRoundPct(current, factor) : current
const pctUpdateHandler = useCallback(
(path, newVal) =>
- updateHandler(
- path,
- newVal === undefined ? undefined : Swizzled.methods.menuRoundPct(newVal, 1 / factor)
- ),
+ updateHandler(path, newVal === undefined ? undefined : menuRoundPct(newVal, 1 / factor)),
[updateHandler]
)
return (
-
@@ -293,7 +282,6 @@ export const MenuSliderInput = ({
setReset,
children,
changed,
- Swizzled,
}) => {
const { max, min } = config
const handleChange = useSharedHandlers({
@@ -310,10 +298,9 @@ export const MenuSliderInput = ({
return (
<>
-
{
const [manualEdit, setManualEdit] = useState(props.current)
- const { config, handleChange, Swizzled } = props
- const type = Swizzled.methods.designOptionType(config)
+ const { config, handleChange } = props
+ const type = designOptionType(config)
const onUpdate = useCallback(
(validVal) => {
@@ -370,14 +357,12 @@ export const MenuEditOption = (props) => {
return (
@@ -427,16 +412,13 @@ const useBoolConfig = (name, config) => {
/** an input for the 'only' setting. toggles individual parts*/
export const MenuOnlySettingInput = (props) => {
- const { Swizzled, config } = props
- const { t } = Swizzled.methods
+ const { config } = props
config.sideBySide = true
config.titleMethod = (entry, t) => {
const chunks = entry.split('.')
return {t(`${chunks[0]}:${chunks[1]}`)}
}
- config.valueMethod = (entry) => (
- {Swizzled.methods.capitalize(entry.split('.')[0])}
- )
+ config.valueMethod = (entry) => {capitalize(entry.split('.')[0])}
config.dense = true
// Sort alphabetically (translated)
const order = []
@@ -447,13 +429,11 @@ export const MenuOnlySettingInput = (props) => {
order.sort()
config.list = order.map((entry) => entry.split('|')[1])
- return
+ return
}
export const MenuUxSettingInput = (props) => {
- const { state, update, Swizzled } = props
+ const { state, update } = props
- return (
-
- )
+ return
}
diff --git a/packages/react/components/Editor/swizzle/components/menus/shared-values.mjs b/packages/react/components/Editor/components/menus/Value.mjs
similarity index 60%
rename from packages/react/components/Editor/swizzle/components/menus/shared-values.mjs
rename to packages/react/components/Editor/components/menus/Value.mjs
index c94b6da8866..f72c49f32e1 100644
--- a/packages/react/components/Editor/swizzle/components/menus/shared-values.mjs
+++ b/packages/react/components/Editor/components/menus/Value.mjs
@@ -1,3 +1,4 @@
+import React from 'react'
import { mergeOptions } from '@freesewing/core'
/** Displays that constant values are not implemented in the front end */
@@ -6,16 +7,13 @@ export const MenuConstantOptionValue = () => (
)
/** Displays a count value*/
-export const MenuCountOptionValue = ({ Swizzled, config, current, changed }) => (
-
+export const MenuCountOptionValue = ({ config, current, changed }) => (
+
)
/** Displays a degree value */
-export const MenuDegOptionValue = ({ config, current, changed, Swizzled }) => (
-
- {' '}
- {changed ? current : config.deg}°
-
+export const MenuDegOptionValue = ({ config, current, changed }) => (
+ {changed ? current : config.deg}°
)
/**
@@ -29,10 +27,7 @@ export const MenuHighlightValue = ({ changed, children }) => (
/** Displays a list option value */
export const MenuListOptionValue = (props) => (
- props.Swizzled.methods.t(`${props.design}:${props.config.name}.${input}.t`)}
- />
+ 'fixme handle option translation'} />
)
/**
@@ -41,9 +36,8 @@ export const MenuListOptionValue = (props) => (
* @param {Function} options.t a translation function
* @param {Object} options.config the item config
* @param {Boolean} options.changed has the value been changed?
- * @param {object} props.Swizzled - An object holding swizzled code
*/
-export const MenuListValue = ({ current, config, changed, Swizzled }) => {
+export const MenuListValue = ({ current, config, changed }) => {
// get the values
const val = changed ? current : config.dflt
@@ -54,17 +48,12 @@ export const MenuListValue = ({ current, config, changed, Swizzled }) => {
// if not, is the value a string
else if (typeof val === 'string') key = val
// otherwise stringify booleans
- else if (val) key =
- else key =
+ else if (val) key =
+ else key =
- const translated =
- config.doNotTranslate || typeof key !== 'string' ? key : Swizzled.methods.t(key)
+ const translated = config.doNotTranslate || typeof key !== 'string' ? key : t(key)
- return (
-
- {translated}
-
- )
+ return {translated}
}
/** Displays the corrent, translated value for a boolean */
@@ -76,14 +65,14 @@ export const MenuMmOptionValue = () => (
)
/** Displays a formated mm value based on the current units */
-export const MenuMmValue = ({ current, config, units, changed, Swizzled }) => (
-
+export const MenuMmValue = ({ current, config, units, changed }) => (
+
-
+
)
/** Displays the current percentage value, and the absolute value if configured
@@ -95,25 +84,18 @@ export const MenuMmValue = ({ current, config, units, changed, Swizzled }) => (
* msg PencilIcon ResetIcon *
**************************************************************************
* */
-export const MenuPctOptionValue = ({
- config,
- current,
- settings,
- changed,
- patternConfig,
- Swizzled,
-}) => {
+export const MenuPctOptionValue = ({ config, current, settings, changed, patternConfig }) => {
const val = changed ? current : config.pct / 100
return (
-
- {Swizzled.methods.formatPercentage(val)}
+
+ {formatPercentage(val)}
{config.toAbs && settings?.measurements
- ? ` | ${Swizzled.methods.formatMm(
+ ? ` | ${formatMm(
config.toAbs(val, settings, mergeOptions(settings, patternConfig.options))
)}`
: null}
-
+
)
}
@@ -123,18 +105,16 @@ export const MenuPctOptionValue = ({
* @param {Number|String|Boolean} options.dflt - The default value
* @param {Boolean} options.changed - Has the value been changed?
*/
-export const MenuShowValue = ({ Swizzled, current, dflt, changed }) => {
- const { MenuHighlightValue } = Swizzled.components
-
+export const MenuShowValue = ({ current, dflt, changed }) => {
return {changed ? current : dflt}
}
-export const MenuScaleSettingValue = ({ Swizzled, current, config, changed }) => (
-
+export const MenuScaleSettingValue = ({ current, config, changed }) => (
+
)
-export const MenuOnlySettingValue = ({ Swizzled, current, config }) => (
- (
+ {
+export const DraftView = ({ Design, state, update, config }) => {
/*
* Don't trust that we have all measurements
*
* We do not need to change the view here. That is done in the central
* ViewWrapper componenet. However, checking the measurements against
* the design takes a brief moment, so this component will typically
- * render before that happens, and if measurments are missing it will
+ * render before that happens, and if measurements are missing it will
* throw and error.
*
* So when measurements are missing, we just return here and the view
* will switch on the next render loop.
*/
- if (Swizzled.methods.missingMeasurements(state)) return null
+ if (missingMeasurements(state)) return
/*
* First, attempt to draft
*/
- const { pattern } = Swizzled.methods.draft(Design, state.settings)
+ const { pattern } = draft(Design, state.settings)
let output = null
let renderProps = false
@@ -36,9 +45,9 @@ export const DraftView = ({ Design, state, update, Swizzled }) => {
try {
const __html = pattern.render()
output = (
-
+
-
+
)
} catch (err) {
console.log(err)
@@ -46,7 +55,7 @@ export const DraftView = ({ Design, state, update, Swizzled }) => {
} else {
renderProps = pattern.getRenderProps()
output = (
- {
}
return (
-
- ) : null
- }
+ : null}
/>
)
}
diff --git a/packages/react/components/Editor/components/views/MeasurementsView.mjs b/packages/react/components/Editor/components/views/MeasurementsView.mjs
index a04e6ec53fc..84852cfbf51 100644
--- a/packages/react/components/Editor/components/views/MeasurementsView.mjs
+++ b/packages/react/components/Editor/components/views/MeasurementsView.mjs
@@ -1,7 +1,7 @@
// Dependencies
-import { horFlexClasses } from '../../utils.mjs'
import { t, designMeasurements } from '../../lib/index.mjs'
import { capitalize } from '@freesewing/utils'
+import { measurements as measurementsTranslations } from '@freesewing/i18n'
// Hooks
import React, { Fragment, useEffect } from 'react'
// Components
@@ -17,7 +17,11 @@ import { MeasurementsEditor } from '../MeasurementsEditor.mjs'
import { SetPicker, BookmarkedSetPicker, CuratedSetPicker, UserSetPicker } from '../Set.mjs'
import { HeaderMenu } from '../HeaderMenu.mjs'
-const iconClasses = { className: 'w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 shrink-0', stroke: 1.5 }
+const iconClasses = {
+ className: 'tw-w-8 tw-h-8 md:tw-w-10 md:tw-h-10 lg:tw-w-12 lg:tw-h-12 tw-shrink-0',
+ stroke: 1.5,
+}
+const horFlexClasses = 'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-4 tw-w-full'
/**
* The measurements view is loaded to update/set measurements
@@ -40,7 +44,13 @@ export const MeasurementsView = ({ config, Design, missingMeasurements, state, u
useEffect(() => {
if (!config?.views || !config.views.includes(state.view)) update.view('measurements')
if (state._.missingMeasurements && state._.missingMeasurements.length > 0)
- update.notify({ msg: t('pe:missingMeasurementsNotify'), icon: 'tip' }, 'missingMeasurements')
+ update.notify(
+ {
+ msg: 'To generate this pattern, we need some additional measurements',
+ icon: 'tip',
+ },
+ 'missingMeasurements'
+ )
else update.notifySuccess(t('pe:measurementsAreOk'))
}, [state.view, update])
@@ -48,9 +58,9 @@ export const MeasurementsView = ({ config, Design, missingMeasurements, state, u
update.settings(['measurements'], designMeasurements(Design, set.measies))
update.settings(['units'], set.imperial ? 'imperial' : 'metric')
// Save the measurement set name to pattern settings
- if (set[`name${capitalize(locale)}`])
+ if (set.nameEn)
// Curated measurement set
- update.settings(['metadata'], { setName: set[`name${capitalize(locale)}`] })
+ update.settings(['metadata'], { setName: set.nameEn })
else if (set.name)
// User measurement set
update.settings(['metadata'], { setName: set.name })
@@ -63,10 +73,13 @@ export const MeasurementsView = ({ config, Design, missingMeasurements, state, u
[
-
{t('pe:chooseFromOwnSets')}
+ Choose one of your own measurements sets
- {t('pe:chooseFromOwnSetsDesc')}
+
+ Pick any of your own measurements sets that have all required measurements to generate
+ this pattern.
+
,
-
{t('pe:chooseFromBookmarkedSets')}
+ Choose one of the measurements sets you have bookmarked
- {t('pe:chooseFromBookmarkedSetsDesc')}
+
+ If you have bookmarked any measurements sets, you can select from those too.
+
,
-
{t('pe:chooseFromCuratedSets')}
+ Choose one of FreeSewing's curated measurements sets
- {t('pe:chooseFromCuratedSetsDesc')}
+
+ If you're just looking to try out our platform, you can select from our list of
+ curated measurements sets.
+
,
,
'csets',
@@ -110,10 +128,10 @@ export const MeasurementsView = ({ config, Design, missingMeasurements, state, u
items.push([
-
{t('pe:editMeasurements')}
+ Edit Measurements
- {t('pe:editMeasurementsDesc')}
+ You can manually set or override measurements below.
,
,
'edit',
@@ -122,35 +140,38 @@ export const MeasurementsView = ({ config, Design, missingMeasurements, state, u
return (
<>
-
-
{t('pe:measurements')}
+
+
Measurements
{missingMeasurements && missingMeasurements.length > 0 ? (
- {t('pe:missingMeasurementsInfo')}:
-
+
+ To generate this pattern, we need {missingMeasurements.length} additional measurement
+ {missingMeasurements.length === 1 ? '' : 's'}:
+
+
{missingMeasurements.map((m, i) => (
- -
- {i > 0 ? , : null}
- {t(`measurements:${m}`)}
+
-
+ {i > 0 ? , : null}
+ {measurementsTranslations[m]}
))}
-
- ({missingMeasurements.length} {t('pe:missingMeasurements')})
-
) : (
- {t('pe:measurementsAreOk')}
-
-