[react] feat: Added docs for hooks/useDesign

sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx

@@ -95,7 +95,6 @@ const MyComponent = () => {
 
 Calling the hook returns an object with the following properties which are all methods:
 
-
 - [acceptCset](#acceptcset)
 - [adminImpersonateUser](#adminimpersonateuser)
 - [adminLoadSubscribers](#adminloadsubscribers)

sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx

@@ -25,9 +25,10 @@ based on the control setting.
 import { useControl } from '@freesewing/react/hooks/useControl'
 
 const MyComponent = () => {
-  control,
+  const {
-  setControl,
+    control,
-} = useControl()
+    setControl,
+  } = useControl()
 
   // ...
 }

sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx

@@ -2,6 +2,83 @@
 title: useDesign
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { MiniTip } from '@freesewing/react/components/Mini'
-:::
+import { Popout } from '@freesewing/react/components/Popout'
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+
+<DocusaurusDoc>
+
+The **useDesign** hook provides access to the entire FreeSewing collection of designs.
+
+<Popout type="tip" title="Beware of bundle size">
+Use this hook to load a design when you plan to use the entire collection. If
+you only plan to use one or a few designs, you may want to load them differently as
+incluyding this hook will include all FreeSewing designs in your code bundle.
+</Popout>
+
+## Example
+
+<Tabs tabs="hook, named export, direct import">
+<Tab>
+Using the hook makes it easy to load a design if you want to be able to
+dynamically load a different design, or do not know in advance what designs
+should be made available.
+
+```js
+import { useDesign } from '@freesewing/react/hooks/useDesign'
+
+const MyComponent = ({ name = 'aaron' }) => {
+  const Aaron = useDesign(name)
+
+  // ...
+}
+```
+</Tab>
+<Tab>
+This hook has a `designs` named export that holds the entire FreeSewing collection.
+
+```js
+import { designs } from '@freesewing/react/hooks/useDesign'
+
+const MyComponent = () => {
+  const Aaron = designs.aaron
+
+  // ...
+}
+```
+</Tab>
+<Tab>
+If you know in advance what design you want, importing it directly is more efficient.
+```js
+import { Aaron } from '@freesewing/aaron'
+
+const MyComponent = () => {
+
+  // ...
+}
+```
+</Tab>
+</Tabs>
+
+## Return value
+
+Calling the hook returns a design constructor, assuming the design name you pass it is in the FreeSewing collection.
+
+## Named exports
+
+You can also load the `collection` and `designs` named exports from the same import:
+
+```js
+import {
+  collection, // Object.keys(designs)
+  designs, // An object where the key is the (lowercase) design name, and the value the design contructor
+  useDesign, // The hook
+} from '@freesewing/react/hooks/useDesign'
+```
+
+- `collection` is an array of lowercase design names.
+- `designs` is an object where the key is the (lowercase) design name, and the value the design contructor.
+
+</DocusaurusDoc>
+