diff options
Diffstat (limited to 'src/components/organisms')
80 files changed, 335 insertions, 342 deletions
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx index 1a9e7b7..a6069e6 100644 --- a/src/components/organisms/forms/comment-form.stories.tsx +++ b/src/components/organisms/forms/comment-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CommentForm from './comment-form'; +import { CommentForm } from './comment-form'; const saveComment = async () => { /** Do nothing. */ diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx index 10119ce..f11c449 100644 --- a/src/components/organisms/forms/comment-form.test.tsx +++ b/src/components/organisms/forms/comment-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import CommentForm from './comment-form'; +import { CommentForm } from './comment-form'; const saveComment = async () => { /** Do nothing. */ diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx index a823977..e4140dd 100644 --- a/src/components/organisms/forms/comment-form.tsx +++ b/src/components/organisms/forms/comment-form.tsx @@ -1,13 +1,15 @@ import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form, { type FormProps } from '../../atoms/forms/form'; -import Heading, { - type HeadingProps, +import { + Button, + Form, + type FormProps, + Heading, type HeadingLevel, -} from '../../atoms/headings/heading'; -import Spinner from '../../atoms/loaders/spinner'; -import LabelledField from '../../molecules/forms/labelled-field'; + type HeadingProps, + Spinner, +} from '../../atoms'; +import { LabelledField } from '../../molecules'; import styles from './comment-form.module.scss'; export type CommentFormData = { @@ -46,7 +48,7 @@ export type CommentFormProps = Pick<FormProps, 'className'> & { titleLevel?: HeadingLevel; }; -const CommentForm: FC<CommentFormProps> = ({ +export const CommentForm: FC<CommentFormProps> = ({ Notice, parentId, saveComment, @@ -119,55 +121,55 @@ const CommentForm: FC<CommentFormProps> = ({ return ( <Form - onSubmit={submitHandler} + {...props} aria-label={formAriaLabel} aria-labelledby={formLabelledBy} - {...props} + onSubmit={submitHandler} > {title && ( - <Heading id={formId} level={titleLevel} alignment={titleAlignment}> + <Heading alignment={titleAlignment} id={formId} level={titleLevel}> {title} </Heading> )} <LabelledField - type="text" + className={styles.field} id="commenter-name" - name="commenter-name" label={nameLabel} + name="commenter-name" required={true} - value={name} setValue={setName} - className={styles.field} + type="text" + value={name} /> <LabelledField - type="email" + className={styles.field} id="commenter-email" - name="commenter-email" label={emailLabel} + name="commenter-email" required={true} - value={email} setValue={setEmail} - className={styles.field} + type="email" + value={email} /> <LabelledField - type="text" + className={styles.field} id="commenter-website" - name="commenter-website" label={websiteLabel} + name="commenter-website" required={false} - value={website} setValue={setWebsite} - className={styles.field} + type="text" + value={website} /> <LabelledField - type="textarea" + className={styles.field} id="commenter-comment" - name="commenter-comment" label={commentLabel} + name="commenter-comment" required={true} - value={comment} setValue={setComment} - className={styles.field} + type="textarea" + value={comment} /> <Button type="submit" kind="primary" className={styles.button}> {intl.formatMessage({ @@ -189,5 +191,3 @@ const CommentForm: FC<CommentFormProps> = ({ </Form> ); }; - -export default CommentForm; diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx index 191d448..4df3db0 100644 --- a/src/components/organisms/forms/contact-form.stories.tsx +++ b/src/components/organisms/forms/contact-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ContactForm from './contact-form'; +import { ContactForm } from './contact-form'; /** * ContactForm - Storybook Meta diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx index def4346..8e27cd0 100644 --- a/src/components/organisms/forms/contact-form.test.tsx +++ b/src/components/organisms/forms/contact-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import ContactForm from './contact-form'; +import { ContactForm } from './contact-form'; const props = { sendMail: async () => { diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx index b8dcb5e..ca84c25 100644 --- a/src/components/organisms/forms/contact-form.tsx +++ b/src/components/organisms/forms/contact-form.tsx @@ -1,9 +1,7 @@ import { FC, ReactNode, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form from '../../atoms/forms/form'; -import Spinner from '../../atoms/loaders/spinner'; -import LabelledField from '../../molecules/forms/labelled-field'; +import { Button, Form, Spinner } from '../../atoms'; +import { LabelledField } from '../../molecules'; import styles from './contact-form.module.scss'; export type ContactFormData = { @@ -33,7 +31,7 @@ export type ContactFormProps = { * * Render a contact form. */ -const ContactForm: FC<ContactFormProps> = ({ +export const ContactForm: FC<ContactFormProps> = ({ className = '', Notice, sendMail, @@ -94,45 +92,45 @@ const ContactForm: FC<ContactFormProps> = ({ }; return ( - <Form aria-label={formName} onSubmit={submitHandler} className={className}> + <Form aria-label={formName} className={className} onSubmit={submitHandler}> <LabelledField - type="text" + className={styles.field} id="contact-name" - name="contact-name" label={nameLabel} + name="contact-name" required={true} - value={name} setValue={setName} - className={styles.field} + type="text" + value={name} /> <LabelledField - type="email" + className={styles.field} id="contact-email" - name="contact-email" label={emailLabel} + name="contact-email" required={true} - value={email} setValue={setEmail} - className={styles.field} + type="email" + value={email} /> <LabelledField - type="text" + className={styles.field} id="contact-object" - name="contact-object" label={objectLabel} - value={object} + name="contact-object" setValue={setObject} - className={styles.field} + type="text" + value={object} /> <LabelledField - type="textarea" + className={styles.field} id="contact-message" - name="contact-message" label={messageLabel} + name="contact-message" required={true} - value={message} setValue={setMessage} - className={styles.field} + type="textarea" + value={message} /> <Button type="submit" kind="primary" className={styles.button}> {intl.formatMessage({ @@ -154,5 +152,3 @@ const ContactForm: FC<ContactFormProps> = ({ </Form> ); }; - -export default ContactForm; diff --git a/src/components/organisms/forms/index.ts b/src/components/organisms/forms/index.ts new file mode 100644 index 0000000..10eaf20 --- /dev/null +++ b/src/components/organisms/forms/index.ts @@ -0,0 +1,3 @@ +export * from './comment-form'; +export * from './contact-form'; +export * from './search-form'; diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx index d8c8e1e..4a0a15c 100644 --- a/src/components/organisms/forms/search-form.stories.tsx +++ b/src/components/organisms/forms/search-form.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SearchForm from './search-form'; +import { SearchForm } from './search-form'; /** * SearchForm - Storybook Meta diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx index 0f79caf..bc9b7a0 100644 --- a/src/components/organisms/forms/search-form.test.tsx +++ b/src/components/organisms/forms/search-form.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import SearchForm from './search-form'; +import { SearchForm } from './search-form'; describe('SearchForm', () => { it('renders a search input', () => { diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx index a3cb6e4..f80d295 100644 --- a/src/components/organisms/forms/search-form.tsx +++ b/src/components/organisms/forms/search-form.tsx @@ -1,12 +1,8 @@ import { useRouter } from 'next/router'; import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react'; import { useIntl } from 'react-intl'; -import Button from '../../atoms/buttons/button'; -import Form from '../../atoms/forms/form'; -import MagnifyingGlass from '../../atoms/icons/magnifying-glass'; -import LabelledField, { - type LabelledFieldProps, -} from '../../molecules/forms/labelled-field'; +import { Button, Form, MagnifyingGlass } from '../../atoms'; +import { LabelledField, type LabelledFieldProps } from '../../molecules'; import styles from './search-form.module.scss'; export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & { @@ -16,12 +12,7 @@ export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & { searchPage: string; }; -/** - * SearchForm component - * - * Render a search form. - */ -const SearchForm: ForwardRefRenderFunction< +const SearchFormWithRef: ForwardRefRenderFunction< HTMLInputElement, SearchFormProps > = ({ hideLabel, searchPage }, ref) => { @@ -48,7 +39,7 @@ const SearchForm: ForwardRefRenderFunction< const id = useId(); return ( - <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}> + <Form className={styles.wrapper} grouped={false} onSubmit={submitHandler}> <LabelledField className={styles.field} hideLabel={hideLabel} @@ -61,11 +52,11 @@ const SearchForm: ForwardRefRenderFunction< value={value} /> <Button - type="submit" + aria-label={buttonLabel} + className={styles.btn} kind="neutral" shape="initial" - className={styles.btn} - aria-label={buttonLabel} + type="submit" > <MagnifyingGlass className={styles.btn__icon} /> </Button> @@ -73,4 +64,9 @@ const SearchForm: ForwardRefRenderFunction< ); }; -export default forwardRef(SearchForm); +/** + * SearchForm component + * + * Render a search form. + */ +export const SearchForm = forwardRef(SearchFormWithRef); diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx index b1c308e..8b68777 100644 --- a/src/components/organisms/images/gallery.stories.tsx +++ b/src/components/organisms/images/gallery.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ResponsiveImage from '../../molecules/images/responsive-image'; -import Gallery from './gallery'; +import { ResponsiveImage } from '../../molecules'; +import { Gallery } from './gallery'; /** * Gallery - Storybook Meta diff --git a/src/components/organisms/images/gallery.test.tsx b/src/components/organisms/images/gallery.test.tsx index 611262e..6fb7567 100644 --- a/src/components/organisms/images/gallery.test.tsx +++ b/src/components/organisms/images/gallery.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '../../../../tests/utils'; -import ResponsiveImage from '../../molecules/images/responsive-image'; -import Gallery from './gallery'; +import { ResponsiveImage } from '../../molecules'; +import { Gallery } from './gallery'; const columns = 3; diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx index 8b73ce1..ae773f6 100644 --- a/src/components/organisms/images/gallery.tsx +++ b/src/components/organisms/images/gallery.tsx @@ -1,5 +1,5 @@ import { Children, FC, ReactElement } from 'react'; -import { type ResponsiveImageProps } from '../../molecules/images/responsive-image'; +import { type ResponsiveImageProps } from '../../molecules'; import styles from './gallery.module.scss'; export type GalleryColumn = 2 | 3 | 4; @@ -20,7 +20,7 @@ export type GalleryProps = { * * Render a gallery of images. */ -const Gallery: FC<GalleryProps> = ({ children, columns }) => { +export const Gallery: FC<GalleryProps> = ({ children, columns }) => { const columnsClass = `wrapper--${columns}-columns`; return ( @@ -31,5 +31,3 @@ const Gallery: FC<GalleryProps> = ({ children, columns }) => { </ul> ); }; - -export default Gallery; diff --git a/src/components/organisms/images/index.ts b/src/components/organisms/images/index.ts new file mode 100644 index 0000000..de0da26 --- /dev/null +++ b/src/components/organisms/images/index.ts @@ -0,0 +1 @@ +export * from './gallery'; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts new file mode 100644 index 0000000..8dfc61b --- /dev/null +++ b/src/components/organisms/index.ts @@ -0,0 +1,6 @@ +export * from './forms'; +export * from './images'; +export * from './layout'; +export * from './modals'; +export * from './toolbar'; +export * from './widgets'; diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx index c19220a..b5f697a 100644 --- a/src/components/organisms/layout/cards-list.stories.tsx +++ b/src/components/organisms/layout/cards-list.stories.tsx @@ -1,5 +1,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CardsListComponent, { type CardsListItem } from './cards-list'; +import { + CardsList as CardsListComponent, + type CardsListItem, +} from './cards-list'; /** * CardsList - Storybook Meta diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx index 6a0ff7c..968a349 100644 --- a/src/components/organisms/layout/cards-list.test.tsx +++ b/src/components/organisms/layout/cards-list.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import CardsList, { type CardsListItem } from './cards-list'; +import { CardsList, type CardsListItem } from './cards-list'; const items: CardsListItem[] = [ { diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx index 12ec7d9..e3d1156 100644 --- a/src/components/organisms/layout/cards-list.tsx +++ b/src/components/organisms/layout/cards-list.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import List, { type ListItem, type ListProps } from '../../atoms/lists/list'; -import Card, { type CardProps } from '../../molecules/layout/card'; +import { List, type ListItem, type ListProps } from '../../atoms'; +import { Card, type CardProps } from '../../molecules'; import styles from './cards-list.module.scss'; export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & { @@ -27,7 +27,7 @@ export type CardsListProps = Pick<CardProps, 'titleLevel'> & * * Return a list of Card components. */ -const CardsList: FC<CardsListProps> = ({ +export const CardsList: FC<CardsListProps> = ({ className = '', items, kind = 'unordered', @@ -47,11 +47,11 @@ const CardsList: FC<CardsListProps> = ({ id, value: ( <Card - key={id} + {...card} className={styles.card} + key={id} id={id} titleLevel={titleLevel} - {...card} /> ), }; @@ -60,11 +60,9 @@ const CardsList: FC<CardsListProps> = ({ return ( <List + className={`${styles.wrapper} ${styles[kindModifier]} ${className}`} kind="flex" items={getCards(items)} - className={`${styles.wrapper} ${styles[kindModifier]} ${className}`} /> ); }; - -export default CardsList; diff --git a/src/components/organisms/layout/comment.fixture.tsx b/src/components/organisms/layout/comment.fixture.tsx index 57a4389..eee7981 100644 --- a/src/components/organisms/layout/comment.fixture.tsx +++ b/src/components/organisms/layout/comment.fixture.tsx @@ -1,7 +1,4 @@ -import { - getFormattedDate, - getFormattedTime, -} from '../../../utils/helpers/dates'; +import { getFormattedDate, getFormattedTime } from '../../../utils/helpers'; import { CommentProps } from './comment'; export const author = { diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx index 7a8ac95..a73ba23 100644 --- a/src/components/organisms/layout/comment.stories.tsx +++ b/src/components/organisms/layout/comment.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CommentComponent from './comment'; +import { Comment } from './comment'; import { data } from './comment.fixture'; const saveComment = async () => { @@ -11,7 +11,7 @@ const saveComment = async () => { */ export default { title: 'Organisms/Layout/Comment', - component: CommentComponent, + component: Comment, args: { canReply: true, saveComment, @@ -104,10 +104,10 @@ export default { }, }, }, -} as ComponentMeta<typeof CommentComponent>; +} as ComponentMeta<typeof Comment>; -const Template: ComponentStory<typeof CommentComponent> = (args) => ( - <CommentComponent {...args} /> +const Template: ComponentStory<typeof Comment> = (args) => ( + <Comment {...args} /> ); /** diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx index 5ea8c6f..6414371 100644 --- a/src/components/organisms/layout/comment.test.tsx +++ b/src/components/organisms/layout/comment.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Comment from './comment'; +import { Comment } from './comment'; import { author, data, diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx index 23073ad..e2a42bf 100644 --- a/src/components/organisms/layout/comment.tsx +++ b/src/components/organisms/layout/comment.tsx @@ -3,12 +3,11 @@ import Script from 'next/script'; import { FC, useCallback, useState } from 'react'; import { useIntl } from 'react-intl'; import { type Comment as CommentSchema, type WithContext } from 'schema-dts'; -import { type SingleComment } from '../../../types/app'; -import useSettings from '../../../utils/hooks/use-settings'; -import Button from '../../atoms/buttons/button'; -import Link from '../../atoms/links/link'; -import Meta from '../../molecules/layout/meta'; -import CommentForm, { type CommentFormProps } from '../forms/comment-form'; +import { type SingleComment } from '../../../types'; +import { useSettings } from '../../../utils/hooks'; +import { Button, Link } from '../../atoms'; +import { Meta } from '../../molecules'; +import { CommentForm, type CommentFormProps } from '../forms'; import styles from './comment.module.scss'; export type CommentProps = Pick< @@ -27,7 +26,7 @@ export type CommentProps = Pick< * * Render a single comment. */ -const Comment: FC<CommentProps> = ({ +export const Comment: FC<CommentProps> = ({ approved, canReply = true, content, @@ -107,13 +106,13 @@ const Comment: FC<CommentProps> = ({ return ( <> <Script + dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }} id="schema-comments" type="application/ld+json" - dangerouslySetInnerHTML={{ __html: JSON.stringify(commentSchema) }} /> <article - id={`comment-${id}`} className={`${styles.wrapper} ${styles['wrapper--comment']}`} + id={`comment-${id}`} > <header className={styles.header}> {author.avatar && ( @@ -136,6 +135,7 @@ const Comment: FC<CommentProps> = ({ )} </header> <Meta + className={styles.date} data={{ publication: { date: publicationDate, @@ -143,10 +143,9 @@ const Comment: FC<CommentProps> = ({ target: `#comment-${id}`, }, }} - layout="inline" - itemsLayout="inline" - className={styles.date} groupClassName={styles.date__item} + itemsLayout="inline" + layout="inline" /> <div className={styles.body} @@ -162,15 +161,13 @@ const Comment: FC<CommentProps> = ({ </article> {isReplying && ( <CommentForm + className={`${styles.wrapper} ${styles['wrapper--form']}`} Notice={Notice} parentId={id} saveComment={saveComment} title={formTitle} - className={`${styles.wrapper} ${styles['wrapper--form']}`} /> )} </> ); }; - -export default Comment; diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx index 5ed0f2a..4b32d7b 100644 --- a/src/components/organisms/layout/comments-list.stories.tsx +++ b/src/components/organisms/layout/comments-list.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CommentsListComponent from './comments-list'; +import { CommentsList } from './comments-list'; import { comments } from './comments-list.fixture'; const saveComment = async () => { @@ -11,7 +11,7 @@ const saveComment = async () => { */ export default { title: 'Organisms/Layout/CommentsList', - component: CommentsListComponent, + component: CommentsList, args: { saveComment, }, @@ -66,10 +66,10 @@ export default { }, }, }, -} as ComponentMeta<typeof CommentsListComponent>; +} as ComponentMeta<typeof CommentsList>; -const Template: ComponentStory<typeof CommentsListComponent> = (args) => ( - <CommentsListComponent {...args} /> +const Template: ComponentStory<typeof CommentsList> = (args) => ( + <CommentsList {...args} /> ); /** diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx index ef4b4af..0518425 100644 --- a/src/components/organisms/layout/comments-list.test.tsx +++ b/src/components/organisms/layout/comments-list.test.tsx @@ -1,6 +1,6 @@ import { render } from '../../../../tests/utils'; import { saveComment } from './comment.fixture'; -import CommentsList from './comments-list'; +import { CommentsList } from './comments-list'; import { comments } from './comments-list.fixture'; describe('CommentsList', () => { diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx index 227f715..1ce0cf5 100644 --- a/src/components/organisms/layout/comments-list.tsx +++ b/src/components/organisms/layout/comments-list.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import { SingleComment } from '../../../types/app'; -import Comment, { type CommentProps } from '../../organisms/layout/comment'; +import { type SingleComment } from '../../../types'; +import { Comment, type CommentProps } from './comment'; import styles from './comments-list.module.scss'; export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & { @@ -19,7 +19,7 @@ export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & { * * Render a comments list. */ -const CommentsList: FC<CommentsListProps> = ({ +export const CommentsList: FC<CommentsListProps> = ({ comments, depth, Notice, @@ -54,5 +54,3 @@ const CommentsList: FC<CommentsListProps> = ({ return <ol className={styles.list}>{getItems(comments, 0)}</ol>; }; - -export default CommentsList; diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx index bd5a744..b5097dd 100644 --- a/src/components/organisms/layout/footer.stories.tsx +++ b/src/components/organisms/layout/footer.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import FooterComponent from './footer'; +import { Footer as FooterComponent } from './footer'; /** * Footer - Storybook Meta diff --git a/src/components/organisms/layout/footer.test.tsx b/src/components/organisms/layout/footer.test.tsx index 0ba1a57..f513739 100644 --- a/src/components/organisms/layout/footer.test.tsx +++ b/src/components/organisms/layout/footer.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Footer, { type FooterProps } from './footer'; +import { Footer, type FooterProps } from './footer'; const copyright: FooterProps['copyright'] = { dates: { start: '2017', end: '2022' }, diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx index f67ad7d..f1f3236 100644 --- a/src/components/organisms/layout/footer.tsx +++ b/src/components/organisms/layout/footer.tsx @@ -1,10 +1,12 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import Copyright, { type CopyrightProps } from '../../atoms/layout/copyright'; -import BackToTop, { +import { Copyright, type CopyrightProps } from '../../atoms'; +import { + BackToTop, type BackToTopProps, -} from '../../molecules/buttons/back-to-top'; -import Nav, { type NavItem } from '../../molecules/nav/nav'; + Nav, + type NavItem, +} from '../../molecules'; import styles from './footer.module.scss'; export type FooterProps = { @@ -35,7 +37,7 @@ export type FooterProps = { * * Renders a footer with copyright and nav; */ -const Footer: FC<FooterProps> = ({ +export const Footer: FC<FooterProps> = ({ backToTopClassName, className = '', copyright, @@ -53,23 +55,21 @@ const Footer: FC<FooterProps> = ({ <footer className={`${styles.wrapper} ${className}`}> <Copyright dates={copyright.dates} - owner={copyright.owner} icon={copyright.icon} + owner={copyright.owner} /> {navItems && ( <Nav aria-label={ariaLabel} - kind="footer" - items={navItems} className={styles.nav} + items={navItems} + kind="footer" /> )} <BackToTop - target={topId} className={`${styles['back-to-top']} ${backToTopClassName}`} + target={topId} /> </footer> ); }; - -export default Footer; diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx index 0507e89..31fb0ca 100644 --- a/src/components/organisms/layout/header.stories.tsx +++ b/src/components/organisms/layout/header.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import HeaderComponent from './header'; +import { Header as HeaderComponent } from './header'; /** * Header - Storybook Meta diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx index c7819c0..78df341 100644 --- a/src/components/organisms/layout/header.test.tsx +++ b/src/components/organisms/layout/header.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Header from './header'; +import { Header } from './header'; const nav = [ { id: 'home-link', href: '#', label: 'Home' }, diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx index 4e5e0f2..d2f7620 100644 --- a/src/components/organisms/layout/header.tsx +++ b/src/components/organisms/layout/header.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import Branding, { type BrandingProps } from '../../molecules/layout/branding'; -import Toolbar, { type ToolbarProps } from '../toolbar/toolbar'; +import { Branding, type BrandingProps } from '../../molecules'; +import { Toolbar, type ToolbarProps } from '../toolbar'; import styles from './header.module.scss'; export type HeaderProps = BrandingProps & @@ -19,7 +19,7 @@ export type HeaderProps = BrandingProps & * * Render the website header. */ -const Header: FC<HeaderProps> = ({ +export const Header: FC<HeaderProps> = ({ ackeeStorageKey, className, motionStorageKey, @@ -42,5 +42,3 @@ const Header: FC<HeaderProps> = ({ </header> ); }; - -export default Header; diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts new file mode 100644 index 0000000..35061cb --- /dev/null +++ b/src/components/organisms/layout/index.ts @@ -0,0 +1,9 @@ +export * from './cards-list'; +export * from './comment'; +export * from './comments-list'; +export * from './footer'; +export * from './header'; +export * from './no-results'; +export * from './overview'; +export * from './posts-list'; +export * from './summary'; diff --git a/src/components/organisms/layout/no-results.stories.tsx b/src/components/organisms/layout/no-results.stories.tsx index aa2e51e..b157572 100644 --- a/src/components/organisms/layout/no-results.stories.tsx +++ b/src/components/organisms/layout/no-results.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import NoResultsComponent from './no-results'; +import { NoResults as NoResultsComponent } from './no-results'; export default { title: 'Organisms/Layout', diff --git a/src/components/organisms/layout/no-results.test.tsx b/src/components/organisms/layout/no-results.test.tsx index 551b82f..914b2db 100644 --- a/src/components/organisms/layout/no-results.test.tsx +++ b/src/components/organisms/layout/no-results.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import NoResults from './no-results'; +import { NoResults } from './no-results'; describe('NoResults', () => { it('renders a no results text', () => { diff --git a/src/components/organisms/layout/no-results.tsx b/src/components/organisms/layout/no-results.tsx index 1b563da..1e7afe1 100644 --- a/src/components/organisms/layout/no-results.tsx +++ b/src/components/organisms/layout/no-results.tsx @@ -1,8 +1,6 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SearchForm, { - type SearchFormProps, -} from '../../organisms/forms/search-form'; +import { SearchForm, type SearchFormProps } from '../forms'; export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>; @@ -11,7 +9,7 @@ export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>; * * Renders a no results text with a search form. */ -const NoResults: FC<NoResultsProps> = ({ searchPage }) => { +export const NoResults: FC<NoResultsProps> = ({ searchPage }) => { const intl = useIntl(); return ( @@ -34,5 +32,3 @@ const NoResults: FC<NoResultsProps> = ({ searchPage }) => { </> ); }; - -export default NoResults; diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx index 26f7ba0..be6db72 100644 --- a/src/components/organisms/layout/overview.stories.tsx +++ b/src/components/organisms/layout/overview.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import Overview, { OverviewMeta } from './overview'; +import { Overview, OverviewMeta } from './overview'; /** * Overview - Storybook Meta diff --git a/src/components/organisms/layout/overview.test.tsx b/src/components/organisms/layout/overview.test.tsx index 72e4cc0..25c1c26 100644 --- a/src/components/organisms/layout/overview.test.tsx +++ b/src/components/organisms/layout/overview.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Overview, { type OverviewMeta } from './overview'; +import { Overview, type OverviewMeta } from './overview'; const cover = { alt: 'Incidunt unde quam', diff --git a/src/components/organisms/layout/overview.tsx b/src/components/organisms/layout/overview.tsx index e539731..51920f6 100644 --- a/src/components/organisms/layout/overview.tsx +++ b/src/components/organisms/layout/overview.tsx @@ -1,8 +1,10 @@ import { FC } from 'react'; -import ResponsiveImage, { +import { + Meta, + type MetaData, + ResponsiveImage, type ResponsiveImageProps, -} from '../../molecules/images/responsive-image'; -import Meta, { type MetaData } from '../../molecules/layout/meta'; +} from '../../molecules'; import styles from './overview.module.scss'; export type OverviewMeta = Pick< @@ -35,7 +37,11 @@ export type OverviewProps = { * * Render an overview. */ -const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => { +export const Overview: FC<OverviewProps> = ({ + className = '', + cover, + meta, +}) => { const { technologies, ...remainingMeta } = meta; const metaModifier = technologies ? styles['meta--has-techno'] : ''; @@ -43,13 +49,11 @@ const Overview: FC<OverviewProps> = ({ className = '', cover, meta }) => { <div className={`${styles.wrapper} ${className}`}> {cover && <ResponsiveImage className={styles.cover} {...cover} />} <Meta + className={`${styles.meta} ${metaModifier}`} data={{ ...remainingMeta, technologies }} layout="inline" - className={`${styles.meta} ${metaModifier}`} withSeparator={false} /> </div> ); }; - -export default Overview; diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx index bff1f28..d56c7e6 100644 --- a/src/components/organisms/layout/posts-list.stories.tsx +++ b/src/components/organisms/layout/posts-list.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import PostsList from './posts-list'; +import { PostsList } from './posts-list'; import { posts, searchPage } from './posts-list.fixture'; /** diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx index 1d6bbcb..41a8679 100644 --- a/src/components/organisms/layout/posts-list.test.tsx +++ b/src/components/organisms/layout/posts-list.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import PostsList from './posts-list'; +import { PostsList } from './posts-list'; import { posts, searchPage } from './posts-list.fixture'; describe('PostsList', () => { diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx index dede7b6..e214ca7 100644 --- a/src/components/organisms/layout/posts-list.tsx +++ b/src/components/organisms/layout/posts-list.tsx @@ -1,17 +1,17 @@ import { FC, Fragment, useRef } from 'react'; import { useIntl } from 'react-intl'; -import useIsMounted from '../../../utils/hooks/use-is-mounted'; -import useSettings from '../../../utils/hooks/use-settings'; -import Button from '../../atoms/buttons/button'; -import Heading, { type HeadingLevel } from '../../atoms/headings/heading'; -import ProgressBar from '../../atoms/loaders/progress-bar'; -import Spinner from '../../atoms/loaders/spinner'; -import Pagination, { - type PaginationProps, -} from '../../molecules/nav/pagination'; -import NoResults, { NoResultsProps } from './no-results'; +import { useIsMounted, useSettings } from '../../../utils/hooks'; +import { + Button, + Heading, + type HeadingLevel, + ProgressBar, + Spinner, +} from '../../atoms'; +import { Pagination, type PaginationProps } from '../../molecules'; +import { NoResults, type NoResultsProps } from './no-results'; import styles from './posts-list.module.scss'; -import Summary, { type SummaryProps } from './summary'; +import { Summary, type SummaryProps } from './summary'; export type Post = Omit<SummaryProps, 'titleLevel'> & { /** @@ -84,7 +84,7 @@ const sortPostsByYear = (data: Post[]): YearCollection => { * * Render a list of post summaries. */ -const PostsList: FC<PostsListProps> = ({ +export const PostsList: FC<PostsListProps> = ({ baseUrl, byYear = false, isLoading = false, @@ -237,5 +237,3 @@ const PostsList: FC<PostsListProps> = ({ </> ); }; - -export default PostsList; diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx index 0b91e24..fe8b704 100644 --- a/src/components/organisms/layout/summary.stories.tsx +++ b/src/components/organisms/layout/summary.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import Summary from './summary'; +import { Summary } from './summary'; import { cover, intro, meta } from './summary.fixture'; /** diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx index 73f6df8..607d676 100644 --- a/src/components/organisms/layout/summary.test.tsx +++ b/src/components/organisms/layout/summary.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Summary from './summary'; +import { Summary } from './summary'; import { cover, intro, meta, title, url } from './summary.fixture'; describe('Summary', () => { diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index f2031d5..cacd6d2 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -1,15 +1,20 @@ import { FC, ReactNode } from 'react'; import { useIntl } from 'react-intl'; -import { type Article, type Meta as MetaType } from '../../../types/app'; -import useReadingTime from '../../../utils/hooks/use-reading-time'; -import ButtonLink from '../../atoms/buttons/button-link'; -import Heading, { type HeadingLevel } from '../../atoms/headings/heading'; -import Arrow from '../../atoms/icons/arrow'; -import Link from '../../atoms/links/link'; -import ResponsiveImage, { +import { type Article, type Meta as MetaType } from '../../../types'; +import { useReadingTime } from '../../../utils/hooks'; +import { + Arrow, + ButtonLink, + Heading, + type HeadingLevel, + Link, +} from '../../atoms'; +import { + Meta, + type MetaData, + ResponsiveImage, type ResponsiveImageProps, -} from '../../molecules/images/responsive-image'; -import Meta, { type MetaData } from '../../molecules/layout/meta'; +} from '../../molecules'; import styles from './summary.module.scss'; export type Cover = Pick< @@ -48,7 +53,7 @@ export type SummaryProps = Pick<Article, 'intro' | 'title'> & { * * Render a page summary. */ -const Summary: FC<SummaryProps> = ({ +export const Summary: FC<SummaryProps> = ({ intro, meta, title, @@ -125,16 +130,14 @@ const Summary: FC<SummaryProps> = ({ </div> <footer className={styles.footer}> <Meta + className={styles.meta} data={getMeta()} - layout="column" + groupClassName={styles.meta__item} itemsLayout="stacked" + layout="column" withSeparator={false} - className={styles.meta} - groupClassName={styles.meta__item} /> </footer> </article> ); }; - -export default Summary; diff --git a/src/components/organisms/modals/index.ts b/src/components/organisms/modals/index.ts new file mode 100644 index 0000000..9385fb2 --- /dev/null +++ b/src/components/organisms/modals/index.ts @@ -0,0 +1,2 @@ +export * from './search-modal'; +export * from './settings-modal'; diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx index 5a607c6..a9cf064 100644 --- a/src/components/organisms/modals/search-modal.stories.tsx +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SearchModal from './search-modal'; +import { SearchModal } from './search-modal'; /** * SearchModal - Storybook Meta diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx index 397c36f..9629648 100644 --- a/src/components/organisms/modals/search-modal.test.tsx +++ b/src/components/organisms/modals/search-modal.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import SearchModal from './search-modal'; +import { SearchModal } from './search-modal'; describe('SearchModal', () => { it('renders a search modal', () => { diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx index 08b28cb..7ba770f 100644 --- a/src/components/organisms/modals/search-modal.tsx +++ b/src/components/organisms/modals/search-modal.tsx @@ -1,7 +1,7 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import Modal, { type ModalProps } from '../../molecules/modals/modal'; -import SearchForm, { type SearchFormProps } from '../forms/search-form'; +import { Modal, type ModalProps } from '../../molecules'; +import { SearchForm, type SearchFormProps } from '../forms'; import styles from './search-modal.module.scss'; export type SearchModalProps = SearchFormProps & { @@ -11,12 +11,7 @@ export type SearchModalProps = SearchFormProps & { className?: ModalProps['className']; }; -/** - * SearchModal - * - * Render a search form modal. - */ -const SearchModal: ForwardRefRenderFunction< +const SearchModalWithRef: ForwardRefRenderFunction< HTMLInputElement, SearchModalProps > = ({ className, searchPage }, ref) => { @@ -28,10 +23,15 @@ const SearchModal: ForwardRefRenderFunction< }); return ( - <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}> + <Modal className={`${styles.wrapper} ${className}`} title={modalTitle}> <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} /> </Modal> ); }; -export default forwardRef(SearchModal); +/** + * SearchModal + * + * Render a search form modal. + */ +export const SearchModal = forwardRef(SearchModalWithRef); diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index 4f0b79b..093922d 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture'; import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture'; -import SettingsModal from './settings-modal'; +import { SettingsModal } from './settings-modal'; /** * SettingsModal - Storybook Meta diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx index 9e07175..ec14719 100644 --- a/src/components/organisms/modals/settings-modal.test.tsx +++ b/src/components/organisms/modals/settings-modal.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '../../../../tests/utils'; import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture'; import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture'; -import SettingsModal from './settings-modal'; +import { SettingsModal } from './settings-modal'; describe('SettingsModal', () => { it('renders the modal heading', () => { diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 4e2b119..d4a3a49 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -1,15 +1,16 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import Form from '../../atoms/forms/form'; -import AckeeToggle, { - AckeeToggleProps, -} from '../../molecules/forms/ackee-toggle'; -import MotionToggle, { - MotionToggleProps, -} from '../../molecules/forms/motion-toggle'; -import PrismThemeToggle from '../../molecules/forms/prism-theme-toggle'; -import ThemeToggle from '../../molecules/forms/theme-toggle'; -import Modal, { type ModalProps } from '../../molecules/modals/modal'; +import { Form } from '../../atoms'; +import { + AckeeToggle, + type AckeeToggleProps, + Modal, + type ModalProps, + MotionToggle, + type MotionToggleProps, + PrismThemeToggle, + ThemeToggle, +} from '../../molecules'; import styles from './settings-modal.module.scss'; export type SettingsModalProps = Pick<ModalProps, 'className'> & @@ -29,7 +30,7 @@ export type SettingsModalProps = Pick<ModalProps, 'className'> & * * Render a modal with settings options. */ -const SettingsModal: FC<SettingsModalProps> = ({ +export const SettingsModal: FC<SettingsModalProps> = ({ className = '', ackeeStorageKey, motionStorageKey, @@ -49,9 +50,9 @@ const SettingsModal: FC<SettingsModalProps> = ({ return ( <Modal - title={title} - icon="cogs" className={`${styles.wrapper} ${className}`} + icon="cogs" + title={title} > <Form aria-label={ariaLabel} @@ -70,16 +71,16 @@ const SettingsModal: FC<SettingsModalProps> = ({ legendClassName={styles.label} /> <MotionToggle - defaultValue="on" bodyClassName={styles.fieldset__body} + defaultValue="on" groupClassName={styles.group} legendClassName={styles.label} storageKey={motionStorageKey} /> <AckeeToggle - defaultValue="full" bodyClassName={styles.fieldset__body} buttonClassName={styles.btn} + defaultValue="full" groupClassName={`${styles.group} ${styles['group--ackee']}`} legendClassName={`${styles.label} ${styles['label--ackee']}`} storageKey={ackeeStorageKey} @@ -89,5 +90,3 @@ const SettingsModal: FC<SettingsModalProps> = ({ </Modal> ); }; - -export default SettingsModal; diff --git a/src/components/organisms/toolbar/index.ts b/src/components/organisms/toolbar/index.ts new file mode 100644 index 0000000..9433412 --- /dev/null +++ b/src/components/organisms/toolbar/index.ts @@ -0,0 +1,4 @@ +export * from './main-nav'; +export * from './search'; +export * from './settings'; +export * from './toolbar'; diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index 7d6d915..1ef10b5 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import MainNav from './main-nav'; +import { MainNav } from './main-nav'; /** * MainNav - Storybook Meta diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx index 47e7c38..12f30ce 100644 --- a/src/components/organisms/toolbar/main-nav.test.tsx +++ b/src/components/organisms/toolbar/main-nav.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import MainNav from './main-nav'; +import { MainNav } from './main-nav'; const items = [ { id: 'home', label: 'Home', href: '/' }, diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx index 3a2fbf5..cf49bd4 100644 --- a/src/components/organisms/toolbar/main-nav.tsx +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -1,11 +1,12 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import BooleanField, { +import { + BooleanField, type BooleanFieldProps, -} from '../../atoms/forms/boolean-field'; -import Label from '../../atoms/forms/label'; -import Hamburger from '../../atoms/icons/hamburger'; -import Nav, { type NavProps, type NavItem } from '../../molecules/nav/nav'; + Hamburger, + Label, +} from '../../atoms'; +import { Nav, type NavProps, type NavItem } from '../../molecules'; import mainNavStyles from './main-nav.module.scss'; import sharedStyles from './toolbar-items.module.scss'; @@ -28,12 +29,7 @@ export type MainNavProps = { setIsActive: BooleanFieldProps['onChange']; }; -/** - * MainNav component - * - * Render the main navigation. - */ -const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = ( +const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = ( { className = '', isActive, items, setIsActive }, ref ) => { @@ -62,20 +58,25 @@ const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = ( value="open" /> <Label - htmlFor="main-nav-button" aria-label={label} className={`${sharedStyles.label} ${mainNavStyles.label}`} + htmlFor="main-nav-button" > <Hamburger iconClassName={mainNavStyles.icon} /> </Label> <Nav - kind="main" - items={items} className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`} + items={items} + kind="main" listClassName={mainNavStyles.modal__list} /> </div> ); }; -export default forwardRef(MainNav); +/** + * MainNav component + * + * Render the main navigation. + */ +export const MainNav = forwardRef(MainNavWithRef); diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 4baf0bf..3b2a747 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import Search from './search'; +import { Search } from './search'; /** * Search - Storybook Meta diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx index bafb58d..625dd4b 100644 --- a/src/components/organisms/toolbar/search.test.tsx +++ b/src/components/organisms/toolbar/search.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Search from './search'; +import { Search } from './search'; describe('Search', () => { it('renders a button to open search modal', () => { diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 90ee1b4..1b2643c 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,12 +1,13 @@ import { forwardRef, ForwardRefRenderFunction, useRef } from 'react'; import { useIntl } from 'react-intl'; -import useInputAutofocus from '../../../utils/hooks/use-input-autofocus'; -import BooleanField, { +import { useInputAutofocus } from '../../../utils/hooks'; +import { + BooleanField, type BooleanFieldProps, -} from '../../atoms/forms/boolean-field'; -import MagnifyingGlass from '../../atoms/icons/magnifying-glass'; -import FlippingLabel from '../../molecules/forms/flipping-label'; -import SearchModal, { type SearchModalProps } from '../modals/search-modal'; + MagnifyingGlass, +} from '../../atoms'; +import { FlippingLabel } from '../../molecules'; +import { SearchModal, type SearchModalProps } from '../modals'; import searchStyles from './search.module.scss'; import sharedStyles from './toolbar-items.module.scss'; @@ -29,7 +30,7 @@ export type SearchProps = { setIsActive: BooleanFieldProps['onChange']; }; -const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( +const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( { className = '', isActive, searchPage, setIsActive }, ref ) => { @@ -65,9 +66,9 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( value="open" /> <FlippingLabel + aria-label={label} className={sharedStyles.label} htmlFor="search-button" - aria-label={label} isActive={isActive} > <MagnifyingGlass aria-hidden={true} /> @@ -81,4 +82,4 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( ); }; -export default forwardRef(Search); +export const Search = forwardRef(SearchWithRef); diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index 20d0b4d..a83f8d3 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import Settings from './settings'; +import { Settings } from './settings'; /** * Settings - Storybook Meta diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx index 44bed56..d4e542d 100644 --- a/src/components/organisms/toolbar/settings.test.tsx +++ b/src/components/organisms/toolbar/settings.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Settings from './settings'; +import { Settings } from './settings'; describe('Settings', () => { it('renders a button to open settings modal', () => { diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 6dc73e4..8a4d4a9 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,13 +1,8 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import BooleanField, { - type BooleanFieldProps, -} from '../../atoms/forms/boolean-field'; -import Cog from '../../atoms/icons/cog'; -import FlippingLabel from '../../molecules/forms/flipping-label'; -import SettingsModal, { - type SettingsModalProps, -} from '../modals/settings-modal'; +import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms'; +import { FlippingLabel } from '../../molecules'; +import { SettingsModal, type SettingsModalProps } from '../modals'; import settingsStyles from './settings.module.scss'; import sharedStyles from './toolbar-items.module.scss'; @@ -22,7 +17,10 @@ export type SettingsProps = SettingsModalProps & { setIsActive: BooleanFieldProps['onChange']; }; -const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( +const SettingsWithRef: ForwardRefRenderFunction< + HTMLDivElement, + SettingsProps +> = ( { ackeeStorageKey, className = '', @@ -58,9 +56,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( value="open" /> <FlippingLabel + aria-label={label} className={sharedStyles.label} htmlFor="settings-button" - aria-label={label} isActive={isActive} > <Cog aria-hidden={true} /> @@ -75,4 +73,4 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( ); }; -export default forwardRef(Settings); +export const Settings = forwardRef(SettingsWithRef); diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index d613442..7bf545b 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ToolbarComponent from './toolbar'; +import { Toolbar as ToolbarComponent } from './toolbar'; /** * Toolbar - Storybook Meta diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx index 01cc5ba..62020dc 100644 --- a/src/components/organisms/toolbar/toolbar.test.tsx +++ b/src/components/organisms/toolbar/toolbar.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Toolbar from './toolbar'; +import { Toolbar } from './toolbar'; const nav = [ { id: 'home-link', href: '/', label: 'Home' }, diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index 339dec4..218b4fb 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -1,9 +1,8 @@ import { FC, useState } from 'react'; -import useOnClickOutside from '../../../utils/hooks/use-on-click-outside'; -import useRouteChange from '../../../utils/hooks/use-route-change'; -import MainNav, { type MainNavProps } from '../toolbar/main-nav'; -import Search, { type SearchProps } from '../toolbar/search'; -import Settings, { type SettingsProps } from '../toolbar/settings'; +import { useOnClickOutside, useRouteChange } from '../../../utils/hooks'; +import { MainNav, type MainNavProps } from './main-nav'; +import { Search, type SearchProps } from './search'; +import { Settings, type SettingsProps } from './settings'; import styles from './toolbar.module.scss'; export type ToolbarProps = Pick<SearchProps, 'searchPage'> & @@ -23,7 +22,7 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> & * * Render the website toolbar. */ -const Toolbar: FC<ToolbarProps> = ({ +export const Toolbar: FC<ToolbarProps> = ({ ackeeStorageKey, className = '', motionStorageKey, @@ -49,18 +48,18 @@ const Toolbar: FC<ToolbarProps> = ({ return ( <div className={`${styles.wrapper} ${className}`}> <MainNav - items={nav} - isActive={isNavOpened} - setIsActive={() => setIsNavOpened(!isNavOpened)} className={styles.modal} + isActive={isNavOpened} + items={nav} ref={mainNavRef} + setIsActive={() => setIsNavOpened(!isNavOpened)} /> <Search - searchPage={searchPage} - isActive={isSearchOpened} - setIsActive={() => setIsSearchOpened(!isSearchOpened)} className={`${styles.modal} ${styles['modal--search']}`} + isActive={isSearchOpened} ref={searchRef} + searchPage={searchPage} + setIsActive={() => setIsSearchOpened(!isSearchOpened)} /> <Settings ackeeStorageKey={ackeeStorageKey} @@ -74,5 +73,3 @@ const Toolbar: FC<ToolbarProps> = ({ </div> ); }; - -export default Toolbar; diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx index 2271c03..9460060 100644 --- a/src/components/organisms/widgets/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ImageWidget from './image-widget'; +import { ImageWidget } from './image-widget'; /** * ImageWidget - Storybook Meta diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx index b41e6a8..4a0f29f 100644 --- a/src/components/organisms/widgets/image-widget.test.tsx +++ b/src/components/organisms/widgets/image-widget.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import ImageWidget from './image-widget'; +import { ImageWidget } from './image-widget'; const description = 'Ut vitae sit'; diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx index 7ca5d90..f3dc92f 100644 --- a/src/components/organisms/widgets/image-widget.tsx +++ b/src/components/organisms/widgets/image-widget.tsx @@ -1,8 +1,10 @@ import { FC } from 'react'; -import ResponsiveImage, { +import { + ResponsiveImage, type ResponsiveImageProps, -} from '../../molecules/images/responsive-image'; -import Widget, { type WidgetProps } from '../../molecules/layout/widget'; + Widget, + type WidgetProps, +} from '../../molecules'; import styles from './image-widget.module.scss'; export type Alignment = 'left' | 'center' | 'right'; @@ -43,7 +45,7 @@ export type ImageWidgetProps = Pick< * * Renders a widget that print an image and an optional text. */ -const ImageWidget: FC<ImageWidgetProps> = ({ +export const ImageWidget: FC<ImageWidgetProps> = ({ alignment = 'left', className = '', description, @@ -57,13 +59,11 @@ const ImageWidget: FC<ImageWidgetProps> = ({ return ( <Widget className={`${styles[alignmentClass]} ${className}`} {...props}> <ResponsiveImage - target={url} + {...image} caption={description} className={`${styles.figure} ${imageClassName}`} - {...image} + target={url} /> </Widget> ); }; - -export default ImageWidget; diff --git a/src/components/organisms/widgets/index.ts b/src/components/organisms/widgets/index.ts new file mode 100644 index 0000000..222ade0 --- /dev/null +++ b/src/components/organisms/widgets/index.ts @@ -0,0 +1,5 @@ +export * from './image-widget'; +export * from './links-list-widget'; +export * from './sharing'; +export * from './social-media'; +export * from './table-of-contents'; diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx index cdfa96a..3f62502 100644 --- a/src/components/organisms/widgets/links-list-widget.stories.tsx +++ b/src/components/organisms/widgets/links-list-widget.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import LinksListWidget from './links-list-widget'; +import { LinksListWidget } from './links-list-widget'; /** * LinksListWidget - Storybook Meta diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx index 8578040..9d3f975 100644 --- a/src/components/organisms/widgets/links-list-widget.test.tsx +++ b/src/components/organisms/widgets/links-list-widget.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import LinksListWidget from './links-list-widget'; +import { LinksListWidget } from './links-list-widget'; const title = 'Voluptatem minus autem'; diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx index 23392b9..df8430d 100644 --- a/src/components/organisms/widgets/links-list-widget.tsx +++ b/src/components/organisms/widgets/links-list-widget.tsx @@ -1,8 +1,7 @@ import { FC } from 'react'; -import { slugify } from '../../../utils/helpers/strings'; -import Link from '../../atoms/links/link'; -import List, { type ListProps, type ListItem } from '../../atoms/lists/list'; -import Widget, { type WidgetProps } from '../../molecules/layout/widget'; +import { slugify } from '../../../utils/helpers'; +import { Link, List, type ListItem, type ListProps } from '../../atoms'; +import { Widget, type WidgetProps } from '../../molecules'; import styles from './links-list-widget.module.scss'; export type LinksListItems = { @@ -33,7 +32,7 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> & * * Render a list of links inside a widget. */ -const LinksListWidget: FC<LinksListWidgetProps> = ({ +export const LinksListWidget: FC<LinksListWidgetProps> = ({ className = '', items, kind = 'unordered', @@ -63,20 +62,18 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({ return ( <Widget + {...props} + className={styles.widget} expanded={true} withBorders={true} - className={styles.widget} withScroll={true} - {...props} > <List - items={getListItems(items)} - kind={kind} className={`${styles.list} ${styles[listKindClass]} ${className}`} + items={getListItems(items)} itemsClassName={styles.list__item} + kind={kind} /> </Widget> ); }; - -export default LinksListWidget; diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx index 59b86d3..3f4a79e 100644 --- a/src/components/organisms/widgets/sharing.stories.tsx +++ b/src/components/organisms/widgets/sharing.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SharingWidget from './sharing'; +import { Sharing as SharingWidget } from './sharing'; /** * Sharing - Storybook Meta diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx index f05a73b..50f92e3 100644 --- a/src/components/organisms/widgets/sharing.test.tsx +++ b/src/components/organisms/widgets/sharing.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import Sharing, { type SharingData } from './sharing'; +import { Sharing, type SharingData } from './sharing'; const postData: SharingData = { excerpt: 'A post excerpt', diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx index 57578cb..61d54d8 100644 --- a/src/components/organisms/widgets/sharing.tsx +++ b/src/components/organisms/widgets/sharing.tsx @@ -1,9 +1,7 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import SharingLink, { - type SharingMedium, -} from '../../atoms/links/sharing-link'; -import Widget, { type WidgetProps } from '../../molecules/layout/widget'; +import { SharingLink, type SharingMedium } from '../../atoms'; +import { Widget, type WidgetProps } from '../../molecules'; import styles from './sharing.module.scss'; export type SharingData = { @@ -49,7 +47,7 @@ export type SharingProps = { * * Render a list of sharing links inside a widget. */ -const Sharing: FC<SharingProps> = ({ +export const Sharing: FC<SharingProps> = ({ className = '', data, media, @@ -205,10 +203,8 @@ const Sharing: FC<SharingProps> = ({ }; return ( - <Widget expanded={expanded} level={level} title={widgetTitle} {...props}> + <Widget {...props} expanded={expanded} level={level} title={widgetTitle}> <ul className={`${styles.list} ${className}`}>{getItems()}</ul> </Widget> ); }; - -export default Sharing; diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx index 6c9de4d..f012554 100644 --- a/src/components/organisms/widgets/social-media.stories.tsx +++ b/src/components/organisms/widgets/social-media.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SocialMediaWidget, { Media } from './social-media'; +import { SocialMedia as SocialMediaWidget, Media } from './social-media'; /** * SocialMedia - Storybook Meta diff --git a/src/components/organisms/widgets/social-media.test.tsx b/src/components/organisms/widgets/social-media.test.tsx index a9056af..7bb1a07 100644 --- a/src/components/organisms/widgets/social-media.test.tsx +++ b/src/components/organisms/widgets/social-media.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import SocialMedia, { Media } from './social-media'; +import { SocialMedia, Media } from './social-media'; const media: Media[] = [ { name: 'Github', url: '#' }, diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx index 1a261a9..40513f8 100644 --- a/src/components/organisms/widgets/social-media.tsx +++ b/src/components/organisms/widgets/social-media.tsx @@ -1,8 +1,6 @@ import { FC } from 'react'; -import SocialLink, { - type SocialLinkProps, -} from '../../atoms/links/social-link'; -import Widget, { type WidgetProps } from '../../molecules/layout/widget'; +import { SocialLink, type SocialLinkProps } from '../../atoms'; +import { Widget, type WidgetProps } from '../../molecules'; import styles from './social-media.module.scss'; export type Media = SocialLinkProps; @@ -16,7 +14,7 @@ export type SocialMediaProps = Pick<WidgetProps, 'level' | 'title'> & { * * Render a social media list with links. */ -const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => { +export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => { /** * Retrieve the social media items. * @@ -37,5 +35,3 @@ const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => { </Widget> ); }; - -export default SocialMedia; diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx index 27a9a15..3078e35 100644 --- a/src/components/organisms/widgets/table-of-contents.stories.tsx +++ b/src/components/organisms/widgets/table-of-contents.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ToCWidget from './table-of-contents'; +import { TableOfContents as ToCWidget } from './table-of-contents'; /** * TableOfContents - Storybook Meta diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx index dd0338a..32ff4ad 100644 --- a/src/components/organisms/widgets/table-of-contents.test.tsx +++ b/src/components/organisms/widgets/table-of-contents.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import TableOfContents from './table-of-contents'; +import { TableOfContents } from './table-of-contents'; describe('TableOfContents', () => { it('renders the ToC title', () => { diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx index 0c18f03..0e8789a 100644 --- a/src/components/organisms/widgets/table-of-contents.tsx +++ b/src/components/organisms/widgets/table-of-contents.tsx @@ -1,9 +1,7 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import useHeadingsTree, { - type Heading, -} from '../../../utils/hooks/use-headings-tree'; -import LinksListWidget, { type LinksListItems } from './links-list-widget'; +import { useHeadingsTree, type Heading } from '../../../utils/hooks'; +import { type LinksListItems, LinksListWidget } from './links-list-widget'; import styles from './table-of-contents.module.scss'; type TableOfContentsProps = { @@ -18,7 +16,7 @@ type TableOfContentsProps = { * * Render a table of contents. */ -const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => { +export const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => { const intl = useIntl(); const headingsTree = useHeadingsTree(wrapper); const title = intl.formatMessage({ @@ -45,13 +43,11 @@ const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => { return ( <LinksListWidget + className={styles.list} + items={getItems(headingsTree)} kind="ordered" - title={title} level={2} - items={getItems(headingsTree)} - className={styles.list} + title={title} /> ); }; - -export default TableOfContents; |