chore: Port FreeSewing.dev to docusaurus

The replaces the NextJS site powering FreeSewing.dev with a Docusaurus
setup. It's part of my efforts to simplify FreeSewing's setup so we can
focus on our core value proposition.

packages/react-components/package.json

@@ -18,17 +18,23 @@
     "freesewing"
   ],
   "type": "module",
-  "module": "dist/index.mjs",
+  "module": "src/index.mjs",
   "exports": {
     ".": {
       "internal": "./src/index.mjs",
-      "default": "./dist/index.mjs"
+      "default": "./src/index.mjs"
     },
     "./pattern": "./src/pattern/index.mjs",
     "./xray": "./src/pattern-xray/index.mjs",
     "./editor": "./src/editor/index.mjs",
-    "./icons": "./src/editor/swizzle/components/icons.mjs"
-
+    "./icons": "./src/editor/swizzle/components/icons.mjs",
+    "./popout": "./src/popout.mjs",
+    "./test": "./src/test.mjs",
+    "./methods": "./src/editor/swizzle/methods/index.mjs"
+  },
+  "imports": {
+    "#components": "./src/editor/swizzle/components/index.mjs",
+    "#methods": "./src/editor/swizzle/methods/index.mjs"
   },
   "scripts": {
     "build": "node build.mjs",

packages/react-components/src/editor/swizzle/components/icons.mjs

@@ -1,3 +1,4 @@
+import React from 'react'
 /*
  * Used inside the pattern editor
  */

packages/react-components/src/editor/swizzle/components/index.mjs

@@ -434,7 +434,7 @@ const defaultComponents = {
  * This method returns a component that can be swizzled
  * So either the passed-in component, or the default one
  */
-export const swizzleComponents = (components = {}, Swizzled) => {
+const swizzleComponents = (components = {}, Swizzled) => {
   /*
    * We need to return all resulting components, swizzled or not
    * So we create this object so we can pass that down
@@ -451,3 +451,209 @@ export const swizzleComponents = (components = {}, Swizzled) => {
    */
   return all
 }
+
+/*
+ * Named exports
+ */
+export {
+  swizzleComponents,
+  // Re-export all components for specific imports
+  Accordion,
+  AuthWrapper,
+  AuthMessageWrapper,
+  BackIcon,
+  ContactSupport,
+  AuthRequired,
+  AccountInactive,
+  AccountDisabled,
+  AccountProhibited,
+  AccountStatusUnknown,
+  AnchorLink,
+  AsideViewMenu,
+  AsideViewMenuIcons,
+  AsideViewMenuButton,
+  AsideViewMenuSpacer,
+  RoleLacking,
+  ConsentLacking,
+  BaseAccordion,
+  BookmarkedSetPicker,
+  ButtonFrame,
+  CardLink,
+  CircleIcon,
+  CoreSetting,
+  CoreSettingsMenu,
+  CuratedMeasurementsSetIcon,
+  CuratedMeasurementsSetLineup,
+  CuratedSetPicker,
+  DesignOption,
+  DesignOptionsMenu,
+  DesignsView,
+  DraftMenu,
+  DraftView,
+  ErrorView,
+  SaveView,
+  Flag,
+  FlagsAccordionTitle,
+  FlagsAccordionEntries,
+  FlagTypeIcon,
+  FormControl,
+  HeaderMenu,
+  HeaderMenuAllViews,
+  HeaderMenuDraftView,
+  HeaderMenuDraftViewDesignOptions,
+  HeaderMenuDraftViewCoreSettings,
+  HeaderMenuDraftViewUiPreferences,
+  HeaderMenuDraftViewFlags,
+  HeaderMenuDraftViewIcons,
+  HeaderMenuButton,
+  HeaderMenuDropdown,
+  HeaderMenuIcon,
+  HeaderMenuIconSpacer,
+  HeaderMenuSaveIcons,
+  HeaderMenuUndoIcons,
+  HtmlSpan,
+  LargeScreenOnly,
+  Link,
+  ListInput,
+  Loading,
+  LoadingStatus,
+  Markdown,
+  MarkdownInput,
+  MeasurementInput,
+  MeasurementsSetCard,
+  MeasurementsView,
+  MeasurementsEditor,
+  MenuIcon,
+  NumberInput,
+  Null,
+  PageLink,
+  Pattern,
+  PatternLayout,
+  Popout,
+  StringInput,
+  SubAccordion,
+  Spinner,
+  SpinnerIcon,
+  Tab,
+  Tabs,
+  TemporaryLoader,
+  ToggleInput,
+  Tooltip,
+  UiPreferencesMenu,
+  UiPreference,
+  UndoStep,
+  UndoStepTimeAgo,
+  UndosView,
+  UserSetPicker,
+  Ux,
+  HeaderMenuViewMenu,
+  ViewPicker,
+  ViewTypeIcon,
+  WebLink,
+  ZoomablePattern,
+  ZoomContextProvider,
+  // icons
+  ApplyIcon,
+  BeakerIcon,
+  BookmarkIcon,
+  BoolNoIcon,
+  BoolYesIcon,
+  CloseIcon,
+  DesignIcon,
+  DetailIcon,
+  DocsIcon,
+  DownIcon,
+  EditIcon,
+  ExpandIcon,
+  ExportIcon,
+  FailureIcon,
+  FlagIcon,
+  FlagNoteIcon,
+  FlagInfoIcon,
+  FlagTipIcon,
+  FlagWarningIcon,
+  FlagErrorIcon,
+  FlagFixmeIcon,
+  FlagExpandIcon,
+  FlagOtionsIcon,
+  GaugeIcon,
+  GroupIcon,
+  HelpIcon,
+  IncludeIcon,
+  KioskIcon,
+  LeftIcon,
+  ListIcon,
+  LockIcon,
+  MarginIcon,
+  MeasurementsIcon,
+  MeasurementsSetIcon,
+  NoIcon,
+  OkIcon,
+  OptionsIcon,
+  PaperlessIcon,
+  PlusIcon,
+  PrintIcon,
+  ResetAllIcon,
+  ResetIcon,
+  RightIcon,
+  RocketIcon,
+  RotateIcon,
+  SaIcon,
+  SaveIcon,
+  SaveAsIcon,
+  ScaleIcon,
+  SettingsIcon,
+  SuccessIcon,
+  TipIcon,
+  TrashIcon,
+  UiIcon,
+  UndoIcon,
+  UnitsIcon,
+  UpIcon,
+  UploadIcon,
+  UxIcon,
+  XrayIcon,
+  ViewDraftIcon,
+  ViewMeasurementsIcon,
+  ViewTestIcon,
+  ViewTimingIcon,
+  ViewPrintLayoutIcon,
+  ViewSaveIcon,
+  ViewExportIcon,
+  ViewEditSettingsIcon,
+  ViewLogsIcon,
+  ViewInspectIcon,
+  ViewDocsIcon,
+  ViewDesignsIcon,
+  ViewViewPickerIcon,
+  ViewUndosIcon,
+  // menus
+  MenuItem,
+  MenuItemGroup,
+  MenuItemTitle,
+  MenuBoolInput,
+  MenuConstantInput,
+  MenuDegInput,
+  MenuEditOption,
+  MenuListInput,
+  MenuListToggle,
+  MenuMmInput,
+  //MenuNumberInput,
+  MenuUxSettingInput,
+  MenuOnlySettingInput,
+  MenuPctInput,
+  MenuSliderInput,
+  MenuBoolValue,
+  MenuConstantOptionValue,
+  MenuCountOptionValue,
+  MenuDegOptionValue,
+  MenuHighlightValue,
+  MenuListOptionValue,
+  MenuListValue,
+  MenuMmOptionValue,
+  MenuMmValue,
+  MenuOnlySettingValue,
+  MenuPctOptionValue,
+  MenuScaleSettingValue,
+  MenuShowValue,
+}

packages/react-components/src/editor/swizzle/components/popout.mjs

@@ -1,5 +1,4 @@
-//  __SDEFILE__ - This file is a dependency for the stand-alone environment
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 const colors = {
   comment: 'secondary',
@@ -35,8 +34,8 @@ export const Popout = (props) => {
   if (hide) return null
 
   let type = 'none'
-  for (const t in colors) {
-    if (props[t]) type = t
+  for (const c in colors) {
+    if (props[c]) type = c
   }
   const color = colors[type]
   const { className = '' } = props

packages/react-components/src/editor/swizzle/methods/editor.mjs

@@ -705,6 +705,10 @@ export function nsMerge(Swizzled, ...args) {
  * @return {string} key - The input is returned
  */
 export function t(Swizzled, key) {
+  /*
+   * Make sure this works when Swizzled is not passed in
+   */
+  if (typeof Swizzled.components === 'undefined') key = Swizzled
   return Array.isArray(key) ? key[0] : key
 }
 export function settingsValueIsCustom(Swizzled, val, dflt) {

packages/react-components/src/editor/swizzle/methods/index.mjs

@@ -152,7 +152,7 @@ const defaultMethods = {
  * This method returns methods that can be swizzled
  * So either the passed-in methods, or the default ones
  */
-export const swizzleMethods = (methods, Swizzled) => {
+const swizzleMethods = (methods, Swizzled) => {
   /*
    * We need to pass down the resulting methods, swizzled or not
    * because some methods rely on other (possibly swizzled) methods.
@@ -172,3 +172,69 @@ export const swizzleMethods = (methods, Swizzled) => {
    */
   return all
 }
+
+/*
+ * Named exports
+ */
+export {
+  swizzleMethods,
+  // Re-export all methods for specific imports
+  // core-settings.mjs
+  defaultSa,
+  defaultSamm,
+  menuCoreSettingsOnlyHandler,
+  menuCoreSettingsSaboolHandler,
+  menuCoreSettingsSammHandler,
+  menuCoreSettingsStructure,
+  // design-options.mjs
+  designOptionType,
+  findOption,
+  getOptionStructure,
+  menuDesignOptionsStructure,
+  // editor.mjs
+  addUndoStep,
+  cloneObject,
+  cloudImageUrl,
+  draft,
+  flattenFlags,
+  getCoreSettingUndoStepData,
+  getDesignOptionUndoStepData,
+  getUiPreferenceUndoStepData,
+  getUndoStepData,
+  initialEditorState,
+  menuRoundPct,
+  menuValidateNumericValue,
+  menuValueWasChanged,
+  noop,
+  notEmpty,
+  nsMerge,
+  objUpdate,
+  settingsValueIsCustom,
+  settingsValueCustomOrDefault,
+  statePrefixPath,
+  stateUpdateFactory,
+  t,
+  undoableObjUpdate,
+  // formatting.mjs
+  capitalize,
+  formatDesignOptionValue,
+  formatFraction128,
+  formatImperial,
+  formatMm,
+  formatPercentage,
+  round,
+  roundMm,
+  fractionToDecimal,
+  measurementAsMm,
+  measurementAsUnits,
+  shortDate,
+  parseDistanceInput,
+  // measurements.mjs
+  designMeasurements,
+  hasRequiredMeasurements,
+  isDegreeMeasurement,
+  missingMeasurements,
+  structureMeasurementsAsDesign,
+  // ui-preferences.mjs
+  menuUiPreferencesStructure,
+}

packages/react-components/src/index.mjs

@@ -13,6 +13,8 @@ import { Svg } from './pattern/svg.mjs'
 import { Text, TextOnPath } from './pattern/text.mjs'
 // Pattern Utils
 import { getId, getProps, translateStrings, withinPartBounds } from './pattern/utils.mjs'
+// Stand alone components
+import { Popout } from './popout.mjs'
 
 /**
  * Translation namespaces used by these components
@@ -44,4 +46,6 @@ export {
   withinPartBounds,
   // These are not React components but various helpers
   ns,
+  // Stand along components
+  Popout,
 }

packages/react-components/src/pattern-xray/path.mjs

@@ -1,4 +1,5 @@
 //  __SDEFILE__ - This file is a dependency for the stand-alone environment
+import React from 'react'
 // Components
 import { Path } from '../pattern/path.mjs'
 import { getProps } from '../pattern/utils.mjs'

packages/react-components/src/pattern-xray/point.mjs

@@ -1,4 +1,5 @@
 //  __SDEFILE__ - This file is a dependency for the stand-alone environment
+import React from 'react'
 // Components
 import { Point } from '../pattern/point.mjs'
 import { withinPartBounds } from '../pattern/utils.mjs'

packages/react-components/src/popout.mjs

@@ -0,0 +1,8 @@
+import React from 'react'
+import { mergeProps, isObject } from './utils.mjs'
+import { Popout as SwizzledPopout } from './editor/swizzle/components/popout.mjs'
+import { CloseIcon } from './editor/swizzle/components/icons.mjs'
+import { t } from '#methods'
+
+export const Popout = (props) => <SwizzledPopout {...mergeProps( props, { CloseIcon } , { t })} />
+

packages/react-components/src/test.mjs

@@ -0,0 +1,4 @@
+import React from 'react'
+
+export const Popout = (props) => <p>This should work</p>
+

packages/react-components/src/utils.mjs

@@ -0,0 +1,37 @@
+/*
+ * Helper method to save us having to type typeof checks all the time
+ *
+ * @param {mixed} obj - The value to check
+ * @return {bool} result - True of obj is of type object
+ */
+export function isObject (obj) {
+  return (typeof obj === 'object' && !Array.isArray(obj))
+}
+
+/*
+ * Helper method to inject props into a component made for Swizzling
+ *
+ * @param {object} props - The props to merge
+ * @param {object} components - Any swizzled components to add
+ * @param {object} methods - Any swizzled methods to add
+ * @return {object} props - The merged props object
+ */
+export function mergeProps (props, components=false, methods=false) {
+  const Swizzled = isObject(props.Swizzled)
+    ? props.Swizzled
+    : { components: {}, methods: {} }
+
+  if (components) {
+    if (isObject(Swizzled.components)) Swizzled.components = { ...components, ...Swizzled.components }
+    else Swizzled.components = components
+  }
+
+  if (methods) {
+    if (isObject(Swizzled.methods)) Swizzled.methods = { ...methods, ...Swizzled.methods }
+    else Swizzled.methods = methods
+  }
+
+  return { ...props, Swizzled }
+}
+
+