[react] feat: Added docs for components/Account
This commit is contained in:
joostdecock
parent
f5a089f884
commit
6d9cbf55c2
37 changed files with 665 additions and 277 deletions
|
|
@ -0,0 +1,78 @@
|
|||
import React from 'react'
|
||||
import {
|
||||
AccountStatus,
|
||||
Apikeys as ApikeysExample,
|
||||
Avatar as AvatarExample,
|
||||
Bio as BioExample,
|
||||
BookmarkButton,
|
||||
Bookmarks as BookmarksExample,
|
||||
Compare as CompareExample,
|
||||
Consent as ConsentExample,
|
||||
Control as ControlExample,
|
||||
Email as EmailExample,
|
||||
EmailChangeConfirmation as EmailChangeConfirmationExample,
|
||||
Export as ExportExample,
|
||||
Github as GithubExample,
|
||||
ImportSet as ImportSetExample,
|
||||
Instagram as InstagramExample,
|
||||
Links as LinksExample,
|
||||
Mastodon as MastodonExample,
|
||||
Mfa as MfaExample,
|
||||
MsetCard,
|
||||
NewSet as NewSetExample,
|
||||
Newsletter as NewsletterExample,
|
||||
} from '@freesewing/react/components/Account'
|
||||
|
||||
const AccountStatusExample = () => (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>-2</td><td><AccountStatus status={-2} /></td></tr>
|
||||
<tr><td>-1</td><td><AccountStatus status={-1} /></td></tr>
|
||||
<tr><td>0</td><td><AccountStatus status={0} /></td></tr>
|
||||
<tr><td>1</td><td><AccountStatus status={1} /></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
|
||||
const BookmarkButtonExample = () => (
|
||||
<BookmarkButton
|
||||
slug="https://freesewing.dev/reference/packages/react/components/account/#bookmarkbutton"
|
||||
title="BookmarkButton Example"
|
||||
type="custom"
|
||||
/>
|
||||
)
|
||||
|
||||
const MsetCardExample = () => (
|
||||
<MsetCard set={{ name: 'Example Set'}} />
|
||||
)
|
||||
|
||||
export {
|
||||
AccountStatusExample,
|
||||
ApikeysExample,
|
||||
AvatarExample,
|
||||
BioExample,
|
||||
BookmarkButtonExample,
|
||||
BookmarksExample,
|
||||
CompareExample,
|
||||
ConsentExample,
|
||||
ControlExample,
|
||||
EmailExample,
|
||||
EmailChangeConfirmationExample,
|
||||
ExportExample,
|
||||
GithubExample,
|
||||
ImportSetExample,
|
||||
InstagramExample,
|
||||
LinksExample,
|
||||
MastodonExample,
|
||||
MfaExample,
|
||||
MsetCardExample,
|
||||
NewSetExample,
|
||||
NewsletterExample,
|
||||
}
|
||||
|
||||
|
|
@ -2,6 +2,203 @@
|
|||
title: Account
|
||||
---
|
||||
|
||||
:::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 { MiniNote} from '@freesewing/react/components/Mini'
|
||||
import {
|
||||
jsdocAccountStatus as jsdocAccount,
|
||||
jsdocAccountStatus,
|
||||
jsdocApikeys,
|
||||
jsdocAvatar,
|
||||
jsdocBio,
|
||||
jsdocBookmarkButton,
|
||||
jsdocBookmarks,
|
||||
jsdocCompare,
|
||||
jsdocConsent,
|
||||
jsdocControl,
|
||||
jsdocEmail,
|
||||
jsdocEmailChangeConfirmation,
|
||||
jsdocExport,
|
||||
jsdocGithub,
|
||||
jsdocImportSet,
|
||||
jsdocInstagram,
|
||||
jsdocLinks,
|
||||
jsdocMastodon,
|
||||
jsdocMfa,
|
||||
jsdocMsetCard,
|
||||
jsdocNewSet,
|
||||
jsdocNewsletter,
|
||||
} from '@site/prebuild/jsdoc/components.account.mjs'
|
||||
import {
|
||||
AccountStatusExample,
|
||||
ApikeysExample,
|
||||
AvatarExample,
|
||||
BioExample,
|
||||
BookmarkButtonExample,
|
||||
BookmarksExample,
|
||||
CompareExample,
|
||||
ConsentExample,
|
||||
ControlExample,
|
||||
EmailExample,
|
||||
EmailChangeConfirmationExample,
|
||||
ExportExample,
|
||||
GithubExample,
|
||||
ImportSetExample,
|
||||
InstagramExample,
|
||||
LinksExample,
|
||||
MastodonExample,
|
||||
MfaExample,
|
||||
MsetCardExample,
|
||||
NewSetExample,
|
||||
NewsletterExample,
|
||||
} from './_examples.js'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
The **Account** component family provides the following components:
|
||||
|
||||
- [AccountStatus ](#accountstatus)
|
||||
- [Apikeys ](#apikeys)
|
||||
- [Avatar ](#avatar)
|
||||
- [Bio ](#bio)
|
||||
- [BookmarkButton ](#bookmarkbutton)
|
||||
- [Bookmarks ](#bookmarks)
|
||||
- [Compare ](#compare)
|
||||
- [Consent ](#consent)
|
||||
- [Control ](#control)
|
||||
- [Email ](#email)
|
||||
- [EmailChangeConfirmation](#emailchanfirmation)
|
||||
- [Export ](#export)
|
||||
- [Github ](#github)
|
||||
- [ImportSet ](#importset)
|
||||
- [Instagram ](#instagram)
|
||||
- [Links ](#links)
|
||||
- [Mastodon ](#mastodon)
|
||||
- [Mfa ](#mfa)
|
||||
- [MsetCard ](#msetcard)
|
||||
- [NewSet ](#newset)
|
||||
- [Newsletter ](#newslett)
|
||||
- [Password ](#password)
|
||||
- [Pattern ](#pattern)
|
||||
- [PatternCard ](#patterncard)
|
||||
- [Patterns ](#patterns)
|
||||
- [Reddit ](#reddit)
|
||||
- [Reload ](#reload)
|
||||
- [Remove ](#remove)
|
||||
- [Restrict ](#restrict)
|
||||
- [Set ](#set)
|
||||
- [Sets ](#sets)
|
||||
- [Tiktok ](#tiktok)
|
||||
- [Twitch ](#twitch)
|
||||
- [Units ](#units)
|
||||
- [UserId ](#userid)
|
||||
- [Username ](#username)
|
||||
- [UserRole ](#userrole)
|
||||
- [Website ](#website)
|
||||
|
||||
|
||||
## AccountStatus
|
||||
<ComponentDocs docs={jsdocAccountStatus} example={AccountStatusExample} />
|
||||
|
||||
## Apikeys
|
||||
<ComponentDocs docs={jsdocApikeys} example={ApikeysExample} />
|
||||
|
||||
## Avatar
|
||||
<ComponentDocs docs={jsdocAvatar} example={AvatarExample} />
|
||||
|
||||
## Bio
|
||||
<ComponentDocs docs={jsdocBio} example={BioExample} />
|
||||
|
||||
## BookmarkButton
|
||||
<ComponentDocs docs={jsdocBookmarkButton} example={BookmarkButtonExample} />
|
||||
|
||||
## Bookmarks
|
||||
<ComponentDocs docs={jsdocBookmarks} example={BookmarksExample} />
|
||||
|
||||
## Compare
|
||||
<ComponentDocs docs={jsdocCompare} example={CompareExample} />
|
||||
|
||||
## Consent
|
||||
<ComponentDocs docs={jsdocConsent} example={ConsentExample} />
|
||||
|
||||
## Control
|
||||
<ComponentDocs docs={jsdocControl} example={ControlExample} />
|
||||
|
||||
## Email
|
||||
<ComponentDocs docs={jsdocEmail} example={EmailExample} />
|
||||
|
||||
## EmailChangeConfirmation
|
||||
<MiniNote>
|
||||
#### Requires a valid callback URL
|
||||
This component will not work without the proper <code>id</code> and <code>check</code> URL paramters
|
||||
that come from a email confirmation link sent out from the FreeSewing backend.
|
||||
</MiniNote>
|
||||
|
||||
<ComponentDocs docs={jsdocEmailChangeConfirmation} example={EmailChangeConfirmationExample} />
|
||||
|
||||
## Export
|
||||
<ComponentDocs docs={jsdocExport} example={ExportExample} />
|
||||
|
||||
## Github
|
||||
<ComponentDocs docs={jsdocGithub} example={GithubExample} />
|
||||
|
||||
## ImportSet
|
||||
<ComponentDocs docs={jsdocImportSet} example={ImportSetExample} />
|
||||
|
||||
## Instagram
|
||||
<ComponentDocs docs={jsdocInstagram} example={InstagramExample} />
|
||||
|
||||
## Links
|
||||
<ComponentDocs docs={jsdocLinks} example={LinksExample} />
|
||||
|
||||
## Mastodon
|
||||
<ComponentDocs docs={jsdocMastodon} example={MastodonExample} />
|
||||
|
||||
## Mfa
|
||||
<ComponentDocs docs={jsdocMfa} example={MfaExample} />
|
||||
|
||||
## MsetCard
|
||||
<ComponentDocs docs={jsdocMsetCard} example={MsetCardExample} />
|
||||
|
||||
## NewSet
|
||||
<ComponentDocs docs={jsdocNewSet} example={NewSetExample} />
|
||||
|
||||
## Newsletter
|
||||
<ComponentDocs docs={jsdocNewsletter} example={NewsletterExample} />
|
||||
|
||||
## Password
|
||||
|
||||
## Pattern
|
||||
|
||||
## PatternCard
|
||||
|
||||
## Patterns
|
||||
|
||||
## Reddit
|
||||
|
||||
## Reload
|
||||
|
||||
## Remove
|
||||
|
||||
## Restrict
|
||||
|
||||
## Set
|
||||
|
||||
## Sets
|
||||
|
||||
## Tiktok
|
||||
|
||||
## Twitch
|
||||
|
||||
## Units
|
||||
|
||||
## UserId
|
||||
|
||||
## Username
|
||||
|
||||
## UserRole
|
||||
|
||||
## Website
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react'
|
||||
import { Highlight } from '@freesewing/react/components/Highlight'
|
||||
import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
|
||||
import { IconButton } from '@freesewing/react/components/Button'
|
||||
import { MiniNote } from '@freesewing/react/components/Mini'
|
||||
|
||||
export const IconButtonExample = () => (
|
||||
<>
|
||||
<MiniNote>
|
||||
Note that this component will take up the full width made available to it.
|
||||
</MiniNote>
|
||||
<Highlight language="js">
|
||||
{[
|
||||
`import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
|
||||
`import { IconButton } from '@freesewing/react/components/Button'`,
|
||||
``,
|
||||
`<IconButton>`,
|
||||
` <FingerprintIcon />`,
|
||||
` Primary (default)`,
|
||||
`</IconButton>`,
|
||||
`<br />`,
|
||||
`<IconButton color="warning">`,
|
||||
` <WarningIcon />`,
|
||||
` Warning`,
|
||||
`</IconButton>`,
|
||||
].join('\n')}
|
||||
</Highlight>
|
||||
<IconButton>
|
||||
<FingerprintIcon />
|
||||
Primary (default)
|
||||
</IconButton>
|
||||
<br />
|
||||
<IconButton color="warning">
|
||||
<WarningIcon />
|
||||
Warning
|
||||
</IconButton>
|
||||
</>
|
||||
)
|
||||
|
||||
|
|
@ -3,8 +3,9 @@ title: Button
|
|||
---
|
||||
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
|
||||
import { ComponentDocs } from '@site/src/components/component-docs.js'
|
||||
import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
|
||||
import { IconButtonExample } from './_examples.js'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
|
|
@ -14,6 +15,6 @@ The **Button** component family provides the following components:
|
|||
|
||||
## IconButton
|
||||
|
||||
<ComponentDocs docs={jsdocIconButton} />
|
||||
<ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue