feat(shared): Apply control restrictions to sets

sites/org/components/search.mjs

@@ -10,9 +10,9 @@ import {
   connectHighlight,
   connectSearchBox,
 } from 'react-instantsearch-dom'
-import { freeSewingConfig } from 'site/freesewing.config.mjs'
+import { siteConfig } from 'site/site.config.mjs'
 
-const searchClient = algoliasearch(freeSewingConfig.algolia.app, freeSewingConfig.algolia.key)
+const searchClient = algoliasearch(siteConfig.algolia.app, siteConfig.algolia.key)
 
 const Hits = (props) => {
   // When we hit enter in the text field, we want to navigate to the result
@@ -206,7 +206,7 @@ export const Search = (props) => {
   }
 
   return (
-    <InstantSearch indexName={freeSewingConfig.algolia.index} searchClient={searchClient}>
+    <InstantSearch indexName={siteConfig.algolia.index} searchClient={searchClient}>
       <CustomSearchBox {...stateProps} />
     </InstantSearch>
   )

sites/org/hooks/use-navigation.mjs

@@ -4,7 +4,7 @@ import get from 'lodash.get'
 import { prebuildNavigation as pbn } from 'site/prebuild/navigation.mjs'
 import { useTranslation } from 'next-i18next'
 import orderBy from 'lodash.orderby'
-import { freeSewingConfig as conf } from 'site/freesewing.config.mjs'
+import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
 import { useAccount } from 'shared/hooks/use-account.mjs'
 
 /*

sites/org/pages/_app.mjs

@@ -3,12 +3,12 @@ import { appWithTranslation } from 'next-i18next'
 import React from 'react'
 import Bugsnag from '@bugsnag/js'
 import BugsnagPluginReact from '@bugsnag/plugin-react'
-import { freeSewingConfig } from 'site/freesewing.config.mjs'
+import { siteConfig } from 'site/site.config.mjs'
 import { Toaster as DefaultToaster } from 'react-hot-toast'
 import { ContextWrapper } from 'shared/components/wrappers/context.mjs'
 
 Bugsnag.start({
-  apiKey: freeSewingConfig.bugsnag.key,
+  apiKey: siteConfig.bugsnag.key,
   collectUserIp: false,
   plugins: [new BugsnagPluginReact()],
 })

sites/org/pages/typography.mjs

@@ -3,6 +3,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout.mjs'
+import { Collapse } from 'shared/components/collapse.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set(pageNs)]
@@ -17,6 +18,30 @@ const p = (
 
 const TypographyPage = ({ page }) => (
   <PageWrapper {...page}>
+    <Collapse title="test" color="primary">
+      test
+    </Collapse>
+    <Collapse title="test" color="secondary">
+      test
+    </Collapse>
+    <Collapse title="test" color="accent">
+      test
+    </Collapse>
+    <Collapse title="test" color="neutral">
+      test
+    </Collapse>
+    <Collapse title="test" color="success">
+      test
+    </Collapse>
+    <Collapse title="test" color="info">
+      test
+    </Collapse>
+    <Collapse title="test" color="warning">
+      test
+    </Collapse>
+    <Collapse title="test" color="error">
+      test
+    </Collapse>
     <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4">
       <p>This typography page shows an overview of different elements and how they are styled.</p>
       <p>It&apos;s a good starting point for theme development.</p>

sites/org/site.config.mjs

@@ -0,0 +1,11 @@
+export const siteConfig = {
+  algolia: {
+    app: 'MA0Y5A2PF0', // Application ID
+    index: 'canary_freesewing.dev',
+    key: '589c7a7e4d9c95a4f12868581259bf3a', // Search-only API key
+  },
+  bugsnag: {
+    key: '1b3a900d6ebbfd071975e39b534e1ff5',
+  },
+  languages: ['en', 'es', 'de', 'fr', 'nl'],
+}

sites/shared/components/account/language.mjs

@@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import { BackToAccountButton, Choice } from './shared.mjs'
 // Config
-import { freeSewingConfig as conf } from 'site/freesewing.config.mjs'
+import { siteConfig as conf } from 'site/freesewing.config.mjs'
 
 export const ns = ['account', 'locales', 'toast']
 

sites/shared/components/account/links.mjs

@@ -2,7 +2,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 import { PageLink } from 'shared/components/page-link.mjs'
-import { freeSewingConfig as conf } from 'site/freesewing.config.mjs'
+import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
 
 export const ns = ['account']
 

sites/shared/components/account/sets.mjs

@@ -7,6 +7,7 @@ import orderBy from 'lodash.orderby'
 import { measurements, isDegreeMeasurement } from 'config/measurements.mjs'
 import { measurementAsMm, formatMm } from 'shared/utils.mjs'
 import { measurements as designMeasurements } from 'site/prebuild/design-measurements.mjs'
+import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
 // Hooks
 import { useDropzone } from 'react-dropzone'
 import { useAccount } from 'shared/hooks/use-account.mjs'
@@ -641,49 +642,88 @@ const EditMeasurementsSet = (props) => {
 
   return (
     <div className="p-4">
-      <div className="flex flex-row gap-4 text-sm items-center justify-center">
-        <div className="flex flex-row gap-2 items-center">
-          <b>{t('permalink')}:</b>
-          {mset.public ? (
-            <PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
-          ) : (
-            <NoIcon className="w-4 h-4 text-error" />
-          )}
+      {/* Meta info */}
+      {props.account.control > 2 ? (
+        <div className="flex flex-row gap-4 text-sm items-center justify-center mb-2">
+          <div className="flex flex-row gap-2 items-center">
+            <b>{t('permalink')}:</b>
+            {mset.public ? (
+              <PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
+            ) : (
+              <NoIcon className="w-4 h-4 text-error" />
+            )}
+          </div>
+          <div>
+            <b>{t('created')}</b>: <Timeago date={mset.createdAt} />
+          </div>
+          <div>
+            <b>{t('updated')}</b>: <Timeago date={mset.updatedAt} />
+          </div>
         </div>
-        <div>
-          <b>{t('created')}</b>: <Timeago date={mset.createdAt} />
+      ) : null}
+
+      {/* JSON & YAML links */}
+      {props.account.control > 3 ? (
+        <div className="flex flex-row gap-4 text-sm items-center justify-center">
+          <a
+            className="badge badge-secondary font-bold"
+            href={`${conf.backend}/sets/${mset.id}.json`}
+          >
+            JSON
+          </a>
+          <a
+            className="badge badge-success font-bold"
+            href={`${conf.backend}/sets/${mset.id}.yaml`}
+          >
+            YAML
+          </a>
         </div>
-        <div>
-          <b>{t('updated')}</b>: <Timeago date={mset.updatedAt} />
-        </div>
-      </div>
+      ) : null}
 
       <EditSectionTitle title={t('data')} />
+
+      {/* Name is always shown */}
       <EditRow title={t('name')} field="name" {...props}>
         {mset.name}
       </EditRow>
-      <EditRow title={t('image')} field="img" {...props}>
-        <img src={mset.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
-      </EditRow>
-      <EditRow title={t('public')} field="public" {...props}>
-        <div className="flex flex-row gap-2">
-          {mset.public ? (
-            <>
-              <OkIcon className="h-6 w-6 text-success" /> <span>{t('publicSet')}</span>
-            </>
-          ) : (
-            <>
-              <NoIcon className="h-6 w-6 text-error" /> <span>{t('privateSet')}</span>
-            </>
-          )}
-        </div>
-      </EditRow>
-      <EditRow title={t('units')} field="imperial" {...props}>
-        {mset.imperial ? t('imperialUnits') : t('metricUnits')}
-      </EditRow>
-      <EditRow title={t('notes')} field="notes" {...props}>
-        <Markdown>{mset.notes}</Markdown>
-      </EditRow>
+
+      {/* img: Control level determines whether or not to show this */}
+      {props.account.control >= conf.account.sets.img ? (
+        <EditRow title={t('image')} field="img" {...props}>
+          <img src={mset.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
+        </EditRow>
+      ) : null}
+
+      {/* public: Control level determines whether or not to show this */}
+      {props.account.control >= conf.account.sets.public ? (
+        <EditRow title={t('public')} field="public" {...props}>
+          <div className="flex flex-row gap-2">
+            {mset.public ? (
+              <>
+                <OkIcon className="h-6 w-6 text-success" /> <span>{t('publicSet')}</span>
+              </>
+            ) : (
+              <>
+                <NoIcon className="h-6 w-6 text-error" /> <span>{t('privateSet')}</span>
+              </>
+            )}
+          </div>
+        </EditRow>
+      ) : null}
+
+      {/* units: Control level determines whether or not to show this */}
+      {props.account.control >= conf.account.sets.units ? (
+        <EditRow title={t('units')} field="imperial" {...props}>
+          {mset.imperial ? t('imperialUnits') : t('metricUnits')}
+        </EditRow>
+      ) : null}
+
+      {/* notes: Control level determines whether or not to show this */}
+      {props.account.control >= conf.account.sets.notes ? (
+        <EditRow title={t('notes')} field="notes" {...props}>
+          <Markdown>{mset.notes}</Markdown>
+        </EditRow>
+      ) : null}
 
       <EditSectionTitle title={t('measies')} />
       <div className="flex flex-row items-center justify-center">

sites/shared/config/freesewing.config.mjs

@@ -1,13 +1,6 @@
 export const freeSewingConfig = {
-  algolia: {
-    app: 'MA0Y5A2PF0', // Application ID
-    index: 'canary_freesewing.dev',
-    key: '589c7a7e4d9c95a4f12868581259bf3a', // Search-only API key
-  },
-  bugsnag: {
-    key: '1b3a900d6ebbfd071975e39b534e1ff5',
-  },
   monorepo: 'https://github.com/freesewing/freesewing',
+  backend: process.env.NEXT_PUBLIC_BACKEND,
   maxWidth: 2800,
   account: {
     fields: {
@@ -36,6 +29,12 @@ export const freeSewingConfig = {
         apikeys: 4,
       },
     },
+    sets: {
+      name: 1,
+      img: 2,
+      public: 3,
+      units: 2,
+      notes: 2,
+    },
   },
-  languages: ['en', 'es', 'de', 'fr', 'nl'],
 }

sites/shared/config/freesewing.mjs

@@ -1,58 +0,0 @@
-/* URL to strapi for blog, showcase, and newsletter posts */
-export const strapiHost = 'https://posts.freesewing.org'
-
-/* URL to FreeSewing's monorepo on Github */
-export const monorepo = 'https://github.com/freesewing/freesewing'
-
-/* Default theme */
-export const defaultTheme = 'light'
-
-/* A list of all measurements used by FreeSewing */
-export const measurements = [
-  'ankle',
-  'biceps',
-  'bustFront',
-  'bustPointToUnderbust',
-  'bustSpan',
-  'chest',
-  'crossSeam',
-  'crossSeamFront',
-  'crotchDepth',
-  'heel',
-  'head',
-  'highBust',
-  'highBustFront',
-  'hips',
-  'hpsToBust',
-  'hpsToWaistBack',
-  'hpsToWaistFront',
-  'inseam',
-  'knee',
-  'neck',
-  'seat',
-  'seatBack',
-  'shoulderSlope',
-  'shoulderToElbow',
-  'shoulderToShoulder',
-  'shoulderToWrist',
-  'underbust',
-  'upperLeg',
-  'waist',
-  'waistBack',
-  'waistToArmhole',
-  'waistToFloor',
-  'waistToHips',
-  'waistToKnee',
-  'waistToSeat',
-  'waistToUnderbust',
-  'waistToUpperLeg',
-  'wrist',
-]
-
-/* A list of measurments that are degrees (rather than mm) */
-export const degreeMeasurements = ['shoulderSlope']
-
-/* Helper method to determine whether a measurement uses degrees */
-export const isDegreeMeasurement = (measie) => degreeMeasurements.indexOf(measie) !== -1
-
-

sites/shared/config/tailwind-force.html

@@ -43,4 +43,13 @@
 <div className="bg-violet-400"></div>
 <div className="bg-purple-400"></div>
 
+<!-- Collapse colors -->
+<button className="bg-primary text-primary-content">primary</button>
+<button className="bg-secondary text-secondary-content">secondary</button>
+<button className="bg-accent text-accent-content">accent</button>
+<button className="bg-neutral text-neutral-content">neutral</button>
+<button className="bg-success text-success-content">success</button>
+<button className="bg-info text-info-content">info</button>
+<button className="bg-warning text-warning-content">warning</button>
+<button className="bg-error text-error-content">error</button>