[breaking]: FreeSewing v4 (#7297)

Refer to the CHANGELOG for all info.

---------

Co-authored-by: Wouter van Wageningen <wouter.vdub@yahoo.com>
Co-authored-by: Josh Munic <jpmunic@gmail.com>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>

packages/react/components/Design/index.mjs

@@ -0,0 +1,139 @@
+// Dependencies
+import { collection } from '@freesewing/collection'
+
+//import { urls } from '@freesewing/config'
+//import { measurements as measurementTranslations } from '@freesewing/i18n'
+//import { measurements as designMeasurements } from '@freesewing/collection'
+import { capitalize } from '@freesewing/utils'
+
+// Context
+//import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+//import { ModalContext } from '@freesewing/react/context/Modal'
+
+// Hooks
+import React, { useState } from 'react'
+//import { useAccount } from '@freesewing/react/hooks/useAccount'
+//import { useBackend } from '@freesewing/react/hooks/useBackend'
+
+// Components
+import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
+import { ShowcaseIcon } from '@freesewing/react/components/Icon'
+
+/*
+// Dependencies
+import { capitalize } from 'shared/utils.mjs'
+import { linkClasses } from 'shared/components/link.mjs'
+import { designImages } from 'shared/components/designs/examples.mjs'
+import { designs } from 'shared/config/designs.mjs'
+// Context
+import { ModalContext } from 'shared/context/modal-context.mjs'
+// Hooks
+import { useTranslation } from 'next-i18next'
+import { useContext } from 'react'
+// Components
+import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
+import Link from 'next/link'
+import { Difficulty } from 'shared/components/designs/difficulty.mjs'
+import { lineDrawings } from 'shared/components/designs/linedrawings/index.mjs'
+import { DocsIcon, NewPatternIcon } from 'shared/components/icons.mjs'
+import { DesignInfo } from 'shared/components/designs/info.mjs'
+*/
+
+const linkBuilders = {
+  new: (design) => `/-/?d=${design.toLowerCase()}`,
+  docs: (design) => `/docs/designs/${design.toLowerCase()}`,
+}
+
+export const DesignTechnique = ({ technique }) => (
+  <Link
+    className="badge badge-accent hover:badge-secondary hover:shadow font-medium"
+    href={`/designs/techniques/${technique}`}
+  >
+    {technique}
+  </Link>
+)
+
+export const DesignTag = ({ tag }) => {
+  const { t } = useTranslation(['tags'])
+
+  return (
+    <Link
+      className="badge badge-primary hover:badge-secondary hover:shadow font-medium"
+      href={`/designs/tags/${tag}`}
+    >
+      {t(tag)}
+    </Link>
+  )
+}
+
+export const DesignLink = ({ name, linkTo = 'new', className = linkClasses }) => (
+  <Link href={linkBuilders[linkTo](name)} className={className}>
+    {name}
+  </Link>
+)
+
+export const DesignCard = ({ name, lineDrawing = false }) => {
+  const { t } = useTranslation(ns)
+  // Context
+  const { setModal } = useContext(ModalContext)
+
+  const LineDrawing =
+    lineDrawing && lineDrawings[name]
+      ? lineDrawings[name]
+      : ({ className }) => <div className={className}></div>
+  const exampleImageUrl = designImages[name]
+    ? designImages[name]
+    : 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&dl=pexels-frida-toth-5626595.jpg&fm=jpg&w=640&h=427&_gl=1*vmxq7y*_ga*MTM0OTk5OTY4NS4xNjYxMjUyMjc0*_ga_8JE65Q40S6*MTY5NTU1NDc0Mi4yNS4xLjE2OTU1NTU1NjIuMC4wLjA.'
+
+  const bg = lineDrawing
+    ? {}
+    : {
+        backgroundImage: `url(${exampleImageUrl}`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center center',
+      }
+
+  return (
+    <button
+      onClick={() =>
+        setModal(
+          <ModalWrapper
+            flex="col"
+            justify="top lg:justify-center"
+            slideFrom="right"
+            keepOpenOnClick
+          >
+            <h1>{t(`designs:${name}.t`)}</h1>
+            <DesignInfo design={name} modal />
+          </ModalWrapper>
+        )
+      }
+    >
+      <div
+        className={`flex flex-col flex-nowrap items-start justify-start gap-2 h-80 w-full
+        btn btn-ghost border border-neutral p-0 border-b-none
+        hover:border hover:border-secondary
+        relative`}
+        style={bg}
+      >
+        <h5
+          className={`text-center py-2 px-4 rounded-t-lg m-0 w-full
+        ${lineDrawing ? '' : 'bg-neutral text-neutral-content bg-opacity-70'}`}
+        >
+          {t(`designs:${name}.t`)}
+        </h5>
+        <div className={lineDrawing ? 'p-4 grow w-full' : 'py-8'}>
+          <LineDrawing className="h-64 max-w-full m-auto my-4 text-base-content" />
+        </div>
+        <div
+          className={`pt-0 m-0 -mt-2 text-center w-full
+        ${
+          lineDrawing
+            ? 'bg-transparent text-base-content'
+            : 'bg-neutral text-neutral-content bg-opacity-70'
+        }`}
+        ></div>
+      </div>
+    </button>
+  )
+}