wip: Work on account/patterns pages

config/dependencies.yaml

@@ -129,6 +129,7 @@ react:
     axios: *axios
     highlight.js: "^11.11.0"
     html-react-parser: "^5.0.7"
+    luxon: "^3.5.0"
     nuqs: "^1.17.6"
     react-markdown: "^9.0.1"
     use-local-storage-state: "19.1.0"

config/exceptions.yaml

@@ -84,6 +84,7 @@ packageJson:
       "./components/Icon": "./components/Icon/index.mjs"
       "./components/Input": "./components/Input/index.mjs"
       "./components/Json": "./components/Json/index.mjs"
+      "./components/KeyVal": "./components/KeyVal/index.mjs"
       "./components/Layout": "./components/Layout/index.mjs"
       "./components/LineDrawing": "./components/LineDrawing/index.mjs"
       "./components/Link": "./components/Link/index.mjs"
@@ -96,6 +97,8 @@ packageJson:
       "./components/SignIn": "./components/SignIn/index.mjs"
       "./components/Spinner": "./components/Spinner/index.mjs"
       "./components/Tab": "./components/Tab/index.mjs"
+      "./components/Table": "./components/Table/index.mjs"
+      "./components/Time": "./components/Time/index.mjs"
       "./components/Yaml": "./components/Yaml/index.mjs"
       "./components/Xray": "./components/Xray/index.mjs"
       # Context
@@ -104,6 +107,7 @@ packageJson:
       # Hooks
       "./hooks/useAccount": "./hooks/useAccount/index.mjs"
       "./hooks/useBackend": "./hooks/useBackend/index.mjs"
+      "./hooks/useSelection": "./hooks/useSelection/index.mjs"
       # Lib
       "./lib/RestClient": "./lib/RestClient/index.mjs"
       "./lib/logoPath": "./components/Logo/path.mjs"

package-lock.json

@@ -28341,6 +28341,10 @@
       "resolved": "designs/hugo",
       "link": true
     },
+    "node_modules/@freesewing/i18n": {
+      "resolved": "packages/i18n",
+      "link": true
+    },
     "node_modules/@freesewing/jaeger": {
       "resolved": "designs/jaeger",
       "link": true
@@ -47212,6 +47216,14 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -61552,6 +61564,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "packages/i18n": {
+      "version": "3.3.0-rc.1",
+      "license": "MIT",
+      "devDependencies": {},
+      "engines": {
+        "node": ">= 20"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://freesewing.org/patrons/join"
+      }
+    },
     "packages/models": {
       "name": "@freesewing/models",
       "version": "3.3.0-rc.1",
@@ -61925,6 +61949,7 @@
         "axios": "1.7.2",
         "highlight.js": "^11.11.0",
         "html-react-parser": "^5.0.7",
+        "luxon": "^3.5.0",
         "nuqs": "^1.17.6",
         "react-markdown": "^9.0.1",
         "use-local-storage-state": "19.1.0",

packages/react/components/Account/Pattern.mjs

@@ -0,0 +1,401 @@
+// Dependencies
+import orderBy from 'lodash/orderBy.js'
+import {
+  cloudflareImageUrl,
+  capitalize,
+  shortDate,
+  horFlexClasses,
+  newPatternUrl,
+} from '@freesewing/utils'
+import { urls, control as controlConfig } from '@freesewing/config'
+
+// Context
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+import { ModalContext } from '@freesewing/react/context/Modal'
+
+// Hooks
+import React, { useState, useEffect, useContext } from 'react'
+import { useAccount } from '@freesewing/react/hooks/useAccount'
+import { useBackend } from '@freesewing/react/hooks/useBackend'
+import { useSelection } from '@freesewing/react/hooks/useSelection'
+
+// Components
+import Markdown from 'react-markdown'
+import {
+  StringInput,
+  MarkdownInput,
+  PassiveImageInput,
+  ListInput,
+} from '@freesewing/react/components/Input'
+import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
+import {
+  BoolNoIcon,
+  BoolYesIcon,
+  CloneIcon,
+  EditIcon,
+  FreeSewingIcon,
+  OkIcon,
+  NoIcon,
+  PatternIcon,
+  ShowcaseIcon,
+  ResetIcon,
+  UploadIcon,
+} from '@freesewing/react/components/Icon'
+import { DisplayRow } from './shared.mjs'
+import { TimeAgo } from '@freesewing/react/components/Time'
+import { Popout } from '@freesewing/react/components/Popout'
+import { ModalWrapper } from '@freesewing/react/components/Modal'
+import { KeyVal } from '@freesewing/react/components/KeyVal'
+
+export const Pattern = ({ id, Link }) => {
+  if (!Link) Link = WebLink
+  // Hooks
+  const { account, control } = useAccount()
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+  const backend = useBackend()
+
+  // Context
+  const { setModal } = useContext(ModalContext)
+
+  const [edit, setEdit] = useState(false)
+  const [pattern, setPattern] = useState()
+  // Set fields for editing
+  const [name, setName] = useState(pattern?.name)
+  const [image, setImage] = useState(pattern?.image)
+  const [isPublic, setIsPublic] = useState(pattern?.public ? true : false)
+  const [notes, setNotes] = useState(pattern?.notes || '')
+
+  // Effect
+  useEffect(() => {
+    const getPattern = async () => {
+      setLoadingStatus([true, 'Loading pattern from backend'])
+      const [status, body] = await backend.getPattern(id)
+      if (status === 200) {
+        setPattern(body.pattern)
+        setName(body.pattern.name)
+        setImage(body.pattern.image)
+        setIsPublic(body.pattern.public ? true : false)
+        setNotes(body.pattern.notes)
+        setLoadingStatus([true, 'Loaded pattern', true, true])
+      } else setLoadingStatus([true, 'An error occured. Please report this', true, false])
+    }
+    if (id) getPattern()
+  }, [id])
+
+  const save = async () => {
+    setLoadingStatus([true, 'Gathering info'])
+    // Compile data
+    const data = {}
+    if (name || name !== pattern.name) data.name = name
+    if (image || image !== pattern.image) data.img = image
+    if (notes || notes !== pattern.notes) data.notes = notes
+    if ([true, false].includes(isPublic) && isPublic !== pattern.public) data.public = isPublic
+    setLoadingStatus([true, 'Saving pattern'])
+    const [status, body] = await backend.updatePattern(pattern.id, data)
+    if (status === 200 && body.result === 'success') {
+      setPattern(body.pattern)
+      setEdit(false)
+      setLoadingStatus([true, 'Nailed it', true, true])
+    } else setLoadingStatus([true, 'An error occured. Please report this.', true, false])
+  }
+
+  const clone = async () => {
+    setLoadingStatus([true, 'Cloning pattern'])
+    // Compile data
+    const data = { ...pattern }
+    delete data.id
+    delete data.createdAt
+    delete data.data
+    delete data.userId
+    delete data.img
+    data.settings = JSON.parse(data.settings)
+    const [status, body] = await backend.createPattern(data)
+    if (status === 201 && body.result === 'created') {
+      setLoadingStatus([true, 'Loading newly created pattern', true, true])
+      window.location = `/account/pattern/?id=${body.pattern.id}`
+    } else setLoadingStatus([true, 'We failed to create this pattern', true, false])
+  }
+
+  const togglePublic = async () => {
+    setLoadingStatus([true, 'Updating pattern'])
+    // Compile data
+    const data = { public: !pattern.public }
+    const [status, body] = await backend.updatePattern(pattern.id, data)
+    if (status === 200 && body.result === 'success') {
+      setPattern(body.pattern)
+      setLoadingStatus([true, 'Nailed it', true, true])
+    } else setLoadingStatus([true, 'An error occured. Please report this.', true, false])
+  }
+  if (!pattern) return null
+
+  const header = (
+    <PatternHeader {...{ pattern, Link, account, setModal, setEdit, togglePublic, save, clone }} />
+  )
+
+  if (!edit)
+    return (
+      <div className="max-w-2xl">
+        {pattern.public ? (
+          <Popout note>
+            <h5>This is the private view of your pattern</h5>
+            <p>
+              Everyone can access the public view since this is a public pattern.
+              <br />
+              But only you can access this private view.
+            </p>
+            <p className="text-right">
+              <Link
+                className={`daisy-btn daisy-btn-secondary hover:text-secondary-content hover:no-underline`}
+                href={`/pattern?id=${pattern.id}`}
+              >
+                <PatternIcon />
+                Public View
+              </Link>
+            </p>
+          </Popout>
+        ) : null}
+        {header}
+        {control >= controlConfig.account.patterns.notes && (
+          <>
+            <h3>Notes</h3>
+            <Markdown>{pattern.notes}</Markdown>
+          </>
+        )}
+      </div>
+    )
+
+  return (
+    <div className="max-w-2xl">
+      <h2>Edit pattern {pattern.name}</h2>
+
+      {/* Name is always shown */}
+      <span id="name"></span>
+      <StringInput
+        id="pattern-name"
+        label="Name"
+        update={setName}
+        current={name}
+        original={pattern.name}
+        placeholder="Maurits Cornelis Escher"
+        valid={(val) => val && val.length > 0}
+      />
+
+      {/* img: Control level determines whether or not to show this */}
+      <span id="image"></span>
+      {account.control >= controlConfig.account.sets.img ? (
+        <PassiveImageInput
+          id="pattern-img"
+          label="Image"
+          update={setImage}
+          current={image}
+          valid={(val) => val.length > 0}
+        />
+      ) : null}
+
+      {/* public: Control level determines whether or not to show this */}
+      <span id="public"></span>
+      {account.control >= controlConfig.account.patterns.public ? (
+        <ListInput
+          id="pattern-public"
+          label="Public"
+          update={setIsPublic}
+          list={[
+            {
+              val: true,
+              label: (
+                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                  <span>Public Pattern</span>
+                  <OkIcon
+                    className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
+                    stroke={4}
+                  />
+                </div>
+              ),
+              desc: 'Public patterns can be shared with other FreeSewing users',
+            },
+            {
+              val: false,
+              label: (
+                <div className="flex flex-row items-center flex-wrap justify-between w-full">
+                  <span>Private Pattern</span>
+                  <NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
+                </div>
+              ),
+              desc: 'Private patterns are yours and yours alone',
+            },
+          ]}
+          current={isPublic}
+        />
+      ) : null}
+
+      {/* notes: Control level determines whether or not to show this */}
+      <span id="notes"></span>
+      {account.control >= controlConfig.account.patterns.notes ? (
+        <MarkdownInput id="pattern-notes" label="Notes" update={setNotes} current={notes} />
+      ) : null}
+      <div className="flex flex-row items-center align-end gap-2 mt-8">
+        <button
+          onClick={() => setEdit(false)}
+          className={`daisy-btn daisy-btn-primary daisy-btn-outline`}
+        >
+          <ResetIcon />
+          Cancel
+        </button>
+        <button onClick={save} className="daisy-btn daisy-btn-primary grow">
+          <UploadIcon />
+          Save Pattern
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const PatternCard = ({
+  pattern,
+  href = false,
+  onClick = false,
+  useA = false,
+  size = 'md',
+  Link = false,
+}) => {
+  if (!Link) Link = WebLink
+  const sizes = {
+    lg: 96,
+    md: 52,
+    sm: 36,
+    xs: 20,
+  }
+  const s = sizes[size]
+
+  const wrapperProps = {
+    className: `bg-base-300 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4 w-${s} aspect-square`,
+    style: {
+      backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: pattern.img })})`,
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50%',
+    },
+  }
+  if (pattern.img === 'default-avatar') wrapperProps.style.backgroundPosition = 'bottom right'
+
+  const inner = null
+
+  // Is it a button with an onClick handler?
+  if (onClick)
+    return (
+      <button {...wrapperProps} onClick={onClick}>
+        {inner}
+      </button>
+    )
+
+  // Returns a link to an internal page
+  if (href && !useA)
+    return (
+      <Link {...wrapperProps} href={href}>
+        {inner}
+      </Link>
+    )
+
+  // Returns a link to an external page
+  if (href && useA)
+    return (
+      <a {...wrapperProps} href={href}>
+        {inner}
+      </a>
+    )
+
+  // Returns a div
+  return <div {...wrapperProps}>{inner}</div>
+}
+
+const BadgeLink = ({ label, href }) => (
+  <a
+    href={href}
+    className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg hover:text-secondary-content hover:no-underline"
+  >
+    {label}
+  </a>
+)
+
+/**
+ * Helper component to show the pattern title, image, and various buttons
+ */
+const PatternHeader = ({
+  pattern,
+  Link,
+  account,
+  setModal,
+  setEdit,
+  togglePublic,
+  save,
+  clone,
+}) => (
+  <>
+    <h2>{pattern.name}</h2>
+    <div className="flex flex-row flex-wrap gap-2 text-sm items-center mb-2">
+      <KeyVal k="ID" val={pattern.id} color="secondary" />
+      <KeyVal k="Created" val={<TimeAgo iso={pattern.createdAt} />} color="secondary" />
+      <KeyVal k="Updated" val={<TimeAgo iso={pattern.updatedAt} />} color="secondary" />
+      <KeyVal k="Public" val={pattern.public ? 'yes' : 'no'} color="secondary" />
+    </div>
+    <div className="flex flex-wrap md:flex-nowrap flex-row gap-2 w-full">
+      <div className="w-full md:w-96 shrink-0">
+        <PatternCard pattern={pattern} size="md" Link={Link} />
+      </div>
+      <div className="flex flex-col justify-end gap-2 mb-2 grow">
+        {account.control > 3 && (pattern?.public || pattern.userId === account.id) ? (
+          <div className="flex flex-row gap-2 items-center">
+            <BadgeLink label="JSON" href={`${urls.backend}/patterns/${pattern.id}.json`} />
+            <BadgeLink label="YAML" href={`${urls.backend}/patterns/${pattern.id}.yaml`} />
+          </div>
+        ) : (
+          <span></span>
+        )}
+        <button
+          onClick={() =>
+            setModal(
+              <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
+                <img src={cloudflareImageUrl({ type: 'public', id: pattern.img })} />
+              </ModalWrapper>
+            )
+          }
+          className={`daisy-btn daisy-btn-secondary daisy-btn-outline ${horFlexClasses}`}
+        >
+          <ShowcaseIcon />
+          Show Image
+        </button>
+        {account.control > 3 ? (
+          <button
+            onClick={() => togglePublic()}
+            className={`daisy-btn daisy-btn-${pattern.public ? 'error' : 'success'} daisy-btn-outline ${horFlexClasses} hover:text-${pattern.public ? 'error' : 'success'}-content`}
+          >
+            {pattern.public ? <BoolNoIcon /> : <BoolYesIcon />}
+            Make pattern {pattern.public ? 'private' : 'public'}
+          </button>
+        ) : null}
+        {pattern.userId === account.id && (
+          <>
+            <Link
+              href={`/account/patterns/${pattern.design}/edit?id=${pattern.id}`}
+              className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
+            >
+              <FreeSewingIcon /> Update Pattern
+            </Link>
+            <button
+              className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
+              onClick={clone}
+            >
+              <CloneIcon /> Clone Pattern
+            </button>
+            <button
+              onClick={() => setEdit(true)}
+              className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
+            >
+              <EditIcon /> Edit Pattern Metadata
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  </>
+)

packages/react/components/Account/Patterns.mjs

@@ -0,0 +1,236 @@
+// Dependencies
+import orderBy from 'lodash/orderBy.js'
+import { capitalize, shortDate } from '@freesewing/utils'
+
+// Context
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+//import { ModalContext } from '@freesewing/react/context/Modal'
+
+// Hooks
+import React, { useState, useEffect, useContext } from 'react'
+import { useAccount } from '@freesewing/react/hooks/useAccount'
+import { useBackend } from '@freesewing/react/hooks/useBackend'
+import { useSelection } from '@freesewing/react/hooks/useSelection'
+
+//import {
+//  measurements,
+//  isDegreeMeasurement,
+//  control as controlConfig,
+//  urls,
+//} from '@freesewing/config'
+//import { measurements as measurementTranslations } from '@freesewing/i18n'
+//import { measurements as designMeasurements } from '@freesewing/collection'
+//import {
+//  cloudflareImageUrl,
+//  capitalize,
+//  formatMm,
+//  horFlexClasses,
+//  linkClasses,
+//  notEmpty,
+//  roundDistance,
+//  shortDate,
+//  timeAgo,
+//} from '@freesewing/utils'
+
+//// Hooks
+//import React, { useState, useEffect, Fragment, useContext } from 'react'
+//import { useAccount } from '@freesewing/react/hooks/useAccount'
+//import { useBackend } from '@freesewing/react/hooks/useBackend'
+// Components
+import { TableWrapper } from '@freesewing/react/components/Table'
+import { PatternCard } from '@freesewing/react/components/Account'
+import { Link as WebLink } from '@freesewing/react/components/Link'
+import {
+  BoolNoIcon,
+  BoolYesIcon,
+  //  CloneIcon,
+  //  CuratedMeasurementsSetIcon,
+  //  EditIcon,
+  //  ShowcaseIcon,
+  //  NewMeasurementsSetIcon,
+  //  NoIcon,
+  //  OkIcon,
+  PlusIcon,
+  RightIcon,
+  //  ResetIcon,
+  TrashIcon,
+  //  UploadIcon,
+  //  //  WarningIcon,
+  //  //  BoolYesIcon,
+  //  //  BoolNoIcon,
+} from '@freesewing/react/components/Icon'
+//import { BookmarkButton, MsetCard } from '@freesewing/react/components/Account'
+//import {
+//  DesignInput,
+//  MarkdownInput,
+//  ListInput,
+//  MeasieInput,
+//  PassiveImageInput,
+//  StringInput,
+//  ToggleInput,
+//} from '@freesewing/react/components/Input'
+//import { DisplayRow } from './shared.mjs'
+//import Markdown from 'react-markdown'
+//import { ModalWrapper } from '@freesewing/react/components/Modal'
+//import { Json } from '@freesewing/react/components/Json'
+//import { Yaml } from '@freesewing/react/components/Yaml'
+//import { Popout } from '@freesewing/react/components/Popout'
+
+const t = (input) => {
+  console.log('t called', input)
+  return input
+}
+
+/*
+ * Component for the account/patterns page
+ *
+ * @params {object} props - All React props
+ * @params {function} Link - A framework specific Link component for client-side routing
+ */
+export const Patterns = ({ Link = false }) => {
+  if (!Link) Link = WebLink
+
+  // State
+  const [patterns, setPatterns] = useState([])
+  const [refresh, setRefresh] = useState(0)
+  const [order, setOrder] = useState('id')
+  const [desc, setDesc] = useState(false)
+
+  // Hooks
+  const backend = useBackend()
+  const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
+  const { count, selection, setSelection, toggle, toggleAll } = useSelection(patterns)
+
+  // Effects
+  useEffect(() => {
+    const getPatterns = async () => {
+      setLoadingStatus([true, 'Loading patterns from backend'])
+      const [status, body] = await backend.getPatterns()
+      console.log({ status, body })
+      if (status === 200) {
+        setPatterns(body.patterns)
+        setLoadingStatus([true, 'Patterns loaded', true, true])
+      } else setLoadingStatus([false, 'Failed to load patterns from backend', true, true])
+    }
+    getPatterns()
+  }, [refresh])
+
+  // Helper to delete one or more patterns
+  const removeSelectedPatterns = async () => {
+    let i = 0
+    for (const pattern in selection) {
+      i++
+      await backend.removePattern(pattern)
+      setLoadingStatus([
+        true,
+        <LoadingProgress val={i} max={count} msg="Removing patterns" key="linter" />,
+      ])
+    }
+    setSelection({})
+    setRefresh(refresh + 1)
+    setLoadingStatus([true, 'Nailed it', true, true])
+  }
+
+  const fields = {
+    id: '#',
+    img: 'Image',
+    name: 'Name',
+    design: 'Design',
+    createdAt: 'Date',
+    public: 'Public',
+  }
+
+  return (
+    <>
+      <div className="flex flex-row flex-wrap gap-2 items-center justify-between mb-4">
+        <button
+          className="daisy-btn daisy-btn-error"
+          onClick={removeSelectedPatterns}
+          disabled={count < 1}
+        >
+          <TrashIcon /> {count} {t('patterns')}
+        </button>
+        <Link
+          className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto hover:text-primary-content"
+          href="/-/"
+        >
+          <PlusIcon />
+          Create a new pattern
+        </Link>
+      </div>
+      <TableWrapper>
+        <table className="table table-auto">
+          <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
+            <tr className="">
+              <th className="">
+                <input
+                  type="checkbox"
+                  className="daisy-checkbox daisy-checkbox-secondary"
+                  onClick={toggleAll}
+                  checked={patterns.length === count}
+                />
+              </th>
+              {Object.keys(fields).map((field) => (
+                <th key={field}>
+                  <button
+                    className="daisy-btn daisy-btn-link capitalize px-0 underline hover:decoration-4 decoration-2 text-secondary"
+                    onClick={() => (order === field ? setDesc(!desc) : setOrder(field))}
+                  >
+                    {fields[field]}{' '}
+                    <RightIcon
+                      stroke={3}
+                      className={`w-4 h-4 ${desc ? '-' : ''}rotate-90 ${order === field ? '' : 'opacity-0'}`}
+                    />
+                  </button>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {orderBy(patterns, order, desc ? 'desc' : 'asc').map((pattern, i) => (
+              <tr key={i}>
+                <td className="text-base font-medium">
+                  <input
+                    type="checkbox"
+                    checked={selection[pattern.id] ? true : false}
+                    className="daisy-checkbox daisy-checkbox-secondary"
+                    onClick={() => toggle(pattern.id)}
+                  />
+                </td>
+                <td className="text-base font-medium">{pattern.id}</td>
+                <td className="text-base font-medium">
+                  <PatternCard
+                    href={`/account/pattern?id=${pattern.id}`}
+                    pattern={pattern}
+                    size="xs"
+                    Link={Link}
+                  />
+                </td>
+                <td className="text-base font-medium">
+                  <Link
+                    href={`/account/pattern?id=${pattern.id}`}
+                    className="text-secondary underline decoration-2 hover:decoration-4"
+                  >
+                    {pattern.name}
+                  </Link>
+                </td>
+                <td className="text-base font-medium">
+                  <Link
+                    href={`/designs/${pattern.design}`}
+                    className="text-secondary underline decoration-2 hover:decoration-4"
+                  >
+                    {capitalize(pattern.design)}
+                  </Link>
+                </td>
+                <td className="text-base font-medium">{shortDate(pattern.createdAt)}</td>
+                <td className="text-base font-medium">
+                  {pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </TableWrapper>
+    </>
+  )
+}

packages/react/components/Account/index.mjs

@@ -4,5 +4,18 @@ import { Bookmarks, BookmarkButton } from './Bookmarks.mjs'
 import { Links } from './Links.mjs'
 import { Set, NewSet } from './Set.mjs'
 import { Sets, MsetCard } from './Sets.mjs'
+import { Patterns } from './Patterns.mjs'
+import { Pattern, PatternCard } from './Pattern.mjs'
 
-export { Bookmarks, BookmarkButton, Links, Set, NewSet, Sets, MsetCard }
+export {
+  Bookmarks,
+  BookmarkButton,
+  Links,
+  Set,
+  NewSet,
+  Sets,
+  MsetCard,
+  Patterns,
+  Pattern,
+  PatternCard,
+}

packages/react/components/KeyVal/index.mjs

@@ -0,0 +1,38 @@
+import React, { useState, useContext } from 'react'
+import { CopyToClipboard as Copy } from 'react-copy-to-clipboard'
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+
+export const KeyVal = ({ k, val, color = 'primary', small = false }) => {
+  const [copied, setCopied] = useState(false)
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+
+  return (
+    <Copy text={val} onCopy={() => handleCopied(setCopied, setLoadingStatus, k)}>
+      <button>
+        <span
+          className={`${sharedClasses} rounded-l${small ? '' : '-lg'} text-${color}-content bg-${color} border-${color} ${small ? 'text-xs' : ''}`}
+        >
+          {k}
+        </span>
+        <span
+          className={`${sharedClasses} rounded-r${small ? '' : '-lg'} text-${color} bg-base-100 border-${color} ${small ? 'text-xs' : ''}`}
+        >
+          {val}
+        </span>
+      </button>
+    </Copy>
+  )
+}
+
+const sharedClasses = `px-1 text-sm font-medium whitespace-nowrap border-2`
+
+const handleCopied = (setCopied, setLoadingStatus, label) => {
+  setCopied(true)
+  setLoadingStatus([
+    true,
+    label ? `${label} copied to clipboard` : 'Copied to clipboard',
+    true,
+    true,
+  ])
+  setTimeout(() => setCopied(false), 1000)
+}

packages/react/components/Pattern/index.mjs

@@ -1,3 +1,6 @@
+// Dependencies
+import { cloudflareImageUrl } from '@freesewing/utils'
+// Components
 import React, { forwardRef } from 'react'
 import { Svg as DefaultSvg } from './svg.mjs'
 import { Defs as DefaultDefs } from './defs.mjs'
@@ -11,6 +14,7 @@ import { Grid as DefaultGrid } from './grid.mjs'
 import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs'
 import { Circle as DefaultCircle } from './circle.mjs'
 import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs'
+import { Link as WebLink } from '@freesewing/react/components/Link'
 
 /*
  * Allow people to override these components

packages/react/components/Table/index.mjs

@@ -0,0 +1,9 @@
+import React from 'react'
+
+/*
+ * Tables on mobile will almost always break the layout
+ * unless we set the overflow behaviour explicitly
+ */
+export const TableWrapper = ({ children }) => (
+  <div className="max-w-full overflow-x-auto">{children}</div>
+)

packages/react/components/Time/index.mjs

@@ -0,0 +1,58 @@
+import React from 'react'
+import { DateTime, Interval } from 'luxon'
+
+const day = 86400000
+const hour = 3600000
+const minute = 60000
+const second = 1000
+
+export const DateAndTime = ({ iso }) => {
+  const dt = DateTime.fromISO(iso)
+  return dt.toLocaleString(DateTime.DATETIME_MED)
+}
+
+export const TimeForHumans = ({ iso, future = false }) => {
+  const suffix = future ? 'from now' : 'ago'
+  const dates = [DateTime.fromISO(iso), DateTime.now()]
+  if (future) dates.reverse()
+  const i = Interval.fromDateTimes(...dates)
+    .toDuration(['minutes', 'hours', 'days', 'months', 'years'])
+    .toObject()
+  const years = Math.floor(i.years)
+  const months = Math.floor(i.months)
+  const days = Math.floor(i.days)
+  const hours = Math.floor(i.hours)
+  const minutes = Math.floor(i.minutes)
+  if (years < 1 && months < 1 && days < 1 && hours < 1 && minutes < 1) return `seconds ${suffix}`
+  else if (years < 1 && months < 1 && days < 1 && hours < 1)
+    return minutes < 2 ? `one minute ${suffix}` : `${minutes} minutes ${suffix}`
+  else if (i.years < 1 && i.months < 1 && i.days < 1)
+    return hours < 2 ? `${hours * 60 + minutes} minutes ${suffix}` : `${hours} hours ${suffix}`
+  else if (years < 1 && months < 1)
+    return days < 2 ? `${days * 24 + hours} hours ${suffix}` : `${days} days ${suffix}`
+  else if (years < 1)
+    return months < 4 ? `${months} months and ${days} days ${suffix}` : `${months} months ${suffix}`
+  if (years < 3) return `${years * 12 + i.months} months ${suffix}`
+  return `${years} years ${suffix}`
+}
+
+export const TimeAgo = (props) => <TimeForHumans {...props} />
+export const TimeToGo = (props) => <TimeForHumans {...props} future />
+
+export const TimeAgoBrief = ({ time }) => {
+  const d = Math.floor(Date.now() - time)
+  if (d > day) return `${Math.floor(d / day)}d ago`
+  if (d > hour) return `${Math.floor(d / hour)}h ago`
+  if (d > minute * 2) return `${Math.floor(d / minute)}m ago`
+  if (d > second) return `${Math.floor(d / second)}s  ago`
+  return `${d}ms ago`
+}
+
+export const TimeToGoBrief = ({ time }) => {
+  const d = Math.floor(time * 1000 - Date.now())
+  if (d > day) return `${Math.floor(d / day)}d`
+  if (d > hour) return `${Math.floor(d / hour)}h`
+  if (d > minute * 2) return `${Math.floor(d / minute)}m`
+  if (d > second) return `${Math.floor(d / second)}s`
+  return `${d}s`
+}

packages/react/hooks/useSelection/index.mjs

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+
+export const useSelection = (items) => {
+  const [selection, setSelection] = useState({})
+
+  /*
+   * This variable keeps track of how many are selected
+   */
+  const count = Object.keys(selection).length
+
+  /*
+   * This method toggles a single item in the selection
+   */
+  const toggle = (id) => {
+    const newSelection = { ...selection }
+    if (newSelection[id]) delete newSelection[id]
+    else newSelection[id] = 1
+    setSelection(newSelection)
+  }
+
+  /*
+   * This method toggles all on or off
+   */
+  const toggleAll = () => {
+    if (count === items.length) setSelection({})
+    else {
+      const newSelection = {}
+      for (const item of items) newSelection[item.id] = 1
+      setSelection(newSelection)
+    }
+  }
+
+  return {
+    count,
+    selection,
+    setSelection,
+    toggle,
+    toggleAll,
+  }
+}

packages/react/package.json

@@ -37,6 +37,7 @@
     "./components/Icon": "./components/Icon/index.mjs",
     "./components/Input": "./components/Input/index.mjs",
     "./components/Json": "./components/Json/index.mjs",
+    "./components/KeyVal": "./components/KeyVal/index.mjs",
     "./components/Layout": "./components/Layout/index.mjs",
     "./components/LineDrawing": "./components/LineDrawing/index.mjs",
     "./components/Link": "./components/Link/index.mjs",
@@ -49,12 +50,15 @@
     "./components/SignIn": "./components/SignIn/index.mjs",
     "./components/Spinner": "./components/Spinner/index.mjs",
     "./components/Tab": "./components/Tab/index.mjs",
+    "./components/Table": "./components/Table/index.mjs",
+    "./components/Time": "./components/Time/index.mjs",
     "./components/Yaml": "./components/Yaml/index.mjs",
     "./components/Xray": "./components/Xray/index.mjs",
     "./context/LoadingStatus": "./context/LoadingStatus/index.mjs",
     "./context/Modal": "./context/Modal/index.mjs",
     "./hooks/useAccount": "./hooks/useAccount/index.mjs",
     "./hooks/useBackend": "./hooks/useBackend/index.mjs",
+    "./hooks/useSelection": "./hooks/useSelection/index.mjs",
     "./lib/RestClient": "./lib/RestClient/index.mjs",
     "./lib/logoPath": "./components/Logo/path.mjs"
   },
@@ -69,6 +73,7 @@
     "axios": "1.7.2",
     "highlight.js": "^11.11.0",
     "html-react-parser": "^5.0.7",
+    "luxon": "^3.5.0",
     "nuqs": "^1.17.6",
     "react-markdown": "^9.0.1",
     "use-local-storage-state": "19.1.0",

packages/utils/src/index.mjs

@@ -244,6 +244,12 @@ export function measurementAsUnits(mmValue, units = 'metric') {
   return round(mmValue / (units === 'imperial' ? 25.4 : 10), 3)
 }
 
+/** Generate a URL to create a new pattern with a given design, settings, and view */
+export const newPatternUrl = ({ design, settings = {}, view = 'draft' }) =>
+  `/-/#settings=${encodeURIComponent(
+    JSON.stringify(settings)
+  )}&view=${encodeURIComponent('"' + view + '"')}`
+
 /*
  * A method to ensure input is not empty
  *

sites/org/docs/account/pattern/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Pattern
+sidebar_label: ' '
+sidebar_position: 99
+---
+
+import { getSearchParam } from '@freesewing/utils'
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { RoleBlock } from '@freesewing/react/components/Role'
+import { Pattern } from '@freesewing/react/components/Account'
+import Link from '@docusaurus/Link'
+
+<DocusaurusDoc>
+  <RoleBlock user>
+    <Pattern Link={Link} id={getSearchParam('id')} />
+  </RoleBlock>
+</DocusaurusDoc>

sites/org/docs/account/patterns/index.mdx

@@ -0,0 +1,15 @@
+---
+title: Your Patterns
+sidebar_position: 3
+---
+
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { RoleBlock } from '@freesewing/react/components/Role'
+import { Patterns as AccountPatterns } from '@freesewing/react/components/Account'
+import Link from '@docusaurus/Link'
+
+<DocusaurusDoc>
+  <RoleBlock user>
+    <AccountPatterns Link={Link} />
+  </RoleBlock>
+</DocusaurusDoc>