diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs index c4f3731196c..3a8ebd7c681 100644 --- a/packages/react/components/Collection/index.mjs +++ b/packages/react/components/Collection/index.mjs @@ -1,5 +1,4 @@ // Dependencies -import { atomWithHash } from 'jotai-location' import { about, collection, @@ -21,7 +20,7 @@ import { ModalContext } from '@freesewing/react/context/Modal' // Hooks import React, { useState, useContext, Fragment } from 'react' -import { useAtom } from 'jotai' +import { useFilter } from '@freesewing/react/hooks/useFilter' // Components import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link' @@ -44,19 +43,16 @@ import { ModalWrapper } from '@freesewing/react/components/Modal' import { KeyVal } from '@freesewing/react/components/KeyVal' import { MissingLinedrawing } from '../LineDrawing/missing.mjs' -const filterAtom = atomWithHash('filter', { example: true }) - -export const useFilter = () => { - return useAtom(filterAtom) -} - /** - * React component to show the FreeSewing collection and pick a design + * A component to show the FreeSewing collection and pick a design. * - * @param {object} props - All React props - * @param {function} Link - An optional framework specific Link component for client-side routing - * @param {bool} editor - Set this to when loaded in the editor (this will make the display more dense) - * @param {bool} onClick - Set this to trigger an onClick event, rather than using links + * @component + * @param {object} props - All component props + * @param {React.Component} [props.Link = false] - A framework specific Link component for client-side routing + * @param {boolean} [props.editor = false] - Set this to true when rendering inside the FreeSewing editor + * @param {string} [props.linkTo = 'about'] - This controls where to link the design to. One of 'new', 'docs', or 'about'. + * @param {functino} [props.onClick = false] - You can pass in an onClick handler rather than using links + * @returns {JSX.Element} */ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onClick = false }) => { if (!Link) Link = WebLink @@ -184,14 +180,14 @@ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onC
@@ -363,11 +359,14 @@ const noExample = 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&fm=jpg&w=640&h=427' /** - * React component to show info about a FreeSewing design + * A component to show info about a FreeSewing design * - * @param {object} props - All React props - * @param {string} design - The name/id of the design - * @param {function} Link - An optional framework specific Link component for client-side routing + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @param {string} props.design - The name/id of the design + * @param {boolean} props.noDocsLink - Set this to true to not render a link to the documentation + * @returns {JSX.Element} */ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 27646a19331..5db697bc908 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -5,3 +5,4 @@ jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/ jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.json jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json +jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/react/components/collection.json diff --git a/packages/react/package.json b/packages/react/package.json index 4cb38f48d72..bc15bd35b0e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -85,6 +85,7 @@ "./hooks/useControl": "./hooks/useControl/index.mjs", "./hooks/useDesign": "./hooks/useDesign/index.mjs", "./hooks/useDesignTranslation": "./hooks/useDesignTranslation/index.mjs", + "./hooks/useFilter": "./hooks/useFilter/index.mjs", "./hooks/useSelection": "./hooks/useSelection/index.mjs", "./hooks/useStateObject": "./hooks/useStateObject/index.mjs", "./lib/RestClient": "./lib/RestClient/index.mjs", @@ -137,4 +138,4 @@ "engines": { "node": ">= 20" } -} \ No newline at end of file +} diff --git a/sites/dev/docs/reference/packages/react/components/collection/_examples.js b/sites/dev/docs/reference/packages/react/components/collection/_examples.js new file mode 100644 index 00000000000..2f6f0d59062 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/collection/_examples.js @@ -0,0 +1,8 @@ +import { Collection as CollectionExample, DesignInfo } from '@freesewing/react/components/Collection' + +const DesignInfoExample = () => + +export { + CollectionExample, + DesignInfoExample, +} diff --git a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx index 427be26a12d..7c7050adf7d 100644 --- a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx @@ -2,6 +2,23 @@ title: Collection --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import { jsdocCollection, jsdocDesignInfo } from '@site/prebuild/jsdoc/components.collection.mjs' +import { CollectionExample, DesignInfoExample } from './_examples.js' + + + +The **Collection** component family provides the following components: + +- [Collection](#collection) +- [DesignInfo](#designinfo) + +## Collection + + + +## DesignInfo + + +