[83] Fix prettier-plugin-organize-imports.

.prettierignore

@@ -1,2 +1,3 @@
 source/01-global/icon/**/*.svg
 source/01-global/icon/**/*.tsx
+source/**/*.mdx

.prettierrc

@@ -3,6 +3,7 @@
   "bracketSpacing": true,
   "endOfLine": "lf",
   "bracketSameLine": false,
+  "plugins": ["prettier-plugin-organize-imports"],
   "printWidth": 80,
   "quoteProps": "as-needed",
   "semi": true,

pages/_app.tsx

@@ -7,8 +7,8 @@ import Header from '../source/02-layouts/Header/Header';
 import SiteContainer from '../source/02-layouts/SiteContainer/SiteContainer';
 import BackToTop from '../source/03-components/BackToTop/BackToTop';
 import Menu from '../source/03-components/Menu/Menu';
-import footerStyles from '../source/03-components/Menu/menu-footer.module.css';
 import ResponsiveMenu from '../source/03-components/Menu/ResponsiveMenu/ResponsiveMenu';
+import footerStyles from '../source/03-components/Menu/menu-footer.module.css';
 import SiteName from '../source/03-components/SiteName/SiteName';
 import Skiplink from '../source/03-components/Skiplink/Skiplink';
 import addBasePath from '../source/06-utility/addBasePath';

pages/_document.tsx

@@ -1,5 +1,4 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import React from 'react';
 
 class MyDocument extends Document {
   render() {

source/00-config/constants.ts

@@ -15,4 +15,4 @@ const KEYCODE = {
   DOWN: 'ArrowDown',
 };
 
-export { MAIN_ID, KEYCODE };
+export { KEYCODE, MAIN_ID };

source/00-config/mixins/button.css

@@ -4,7 +4,7 @@
   background-color: var(--button-background-color);
   @if $border-width != 0 {
     border: $border-width solid var(--button-border-color);
-  } @else {
+  } @else  {
     border: 0;
   }
 

source/00-config/mixins/link.css

@@ -19,17 +19,17 @@
   --text-link: $link;
   @if $hover != '' {
     --text-link-hover: $hover;
-  } @else {
+  } @else  {
     --text-link-hover: var(--text-link);
   }
   @if $active != '' {
     --text-link-active: $active;
-  } @else {
+  } @else  {
     --text-link-active: var(--text-link-hover);
   }
   @if $visit != '' {
     --text-link-visited: $visit;
-  } @else {
+  } @else  {
     --text-link-visited: var(--text-link);
   }
 }

source/00-config/vars/easing.css

@@ -1,6 +1,6 @@
 :root {
   --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --easing-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
+  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
 }

source/01-global/01-typography/line-height.module.css

@@ -1,4 +1,3 @@
-
 .line-height {
   margin: 1rem 1rem 3rem;
 }

source/02-layouts/Constrain/Constrain.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import SampleContent from '../../06-utility/storybook/SampleContent';
-import constrainArgs from './constrain.yml';
 import ConstrainLayout from './Constrain';
+import constrainArgs from './constrain.yml';
 
 const meta: Meta<typeof ConstrainLayout> = {
   title: 'Layouts/Constrain',

source/02-layouts/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
-import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
+import Constrain from '../Constrain/Constrain';
 import styles from './footer.module.css';
 
 interface FooterProps extends ConstrainComponent {

source/02-layouts/Header/Header.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
-import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
+import Constrain from '../Constrain/Constrain';
 import styles from './header.module.css';
 
 interface HeaderProps extends ConstrainComponent {

source/02-layouts/InlineForm/InlineForm.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import SampleContent from '../../06-utility/storybook/SampleContent';
-import inlineFormArgs from './inline-form.yml';
 import InlineFormLayout from './InlineForm';
+import inlineFormArgs from './inline-form.yml';
 
 const meta: Meta<typeof InlineFormLayout> = {
   title: 'Layouts/Inline Form',

source/02-layouts/Main/Main.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
-import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
+import Constrain from '../Constrain/Constrain';
 import styles from './main.module.css';
 
 interface MainProps extends ConstrainComponent {

source/02-layouts/Media/Media.stories.tsx

@@ -42,4 +42,4 @@ const Reversed: Story = {
 };
 
 export default meta;
-export { Default, Column, Reversed };
+export { Column, Default, Reversed };

source/02-layouts/ResponsiveTable/ResponsiveTable.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import responsiveTableArgs from './responsive-table.yml';
 import ResponsiveTableComponent from './ResponsiveTable';
+import responsiveTableArgs from './responsive-table.yml';
 
 const meta: Meta<typeof ResponsiveTableComponent> = {
   title: 'Layouts/Responsive Table',

source/02-layouts/Section/Section.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
-import Constrain from '../Constrain/Constrain';
 import { ElementType, ReactNode } from 'react';
+import Constrain from '../Constrain/Constrain';
 import styles from './section.module.css';
 
 interface SectionProps extends ConstrainComponent {

source/02-layouts/SiteContainer/SiteContainer.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import SampleContent from '../../06-utility/storybook/SampleContent';
-import siteContainerArgs from './site-container.yml';
 import SiteContainerLayout from './SiteContainer';
+import siteContainerArgs from './site-container.yml';
 
 const meta: Meta<typeof SiteContainerLayout> = {
   title: 'Layouts/Site Container',

source/03-components/Accordion/Accordion.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
 import AccordionComponent from './Accordion';
-import accordionArgs from './accordion.yml';
 import { AccordionItemProps } from './AccordionItem';
+import accordionArgs from './accordion.yml';
 
 const meta: Meta<typeof AccordionComponent> = {
   title: 'Components/Accordion',

source/03-components/Accordion/Accordion.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
 import { KeyboardEvent, createRef, useId, useMemo, useState } from 'react';
-import styles from './accordion.module.css';
-import getCssVar from '../../06-utility/getCssVar';
 import { KEYCODE } from '../../00-config/constants';
+import getCssVar from '../../06-utility/getCssVar';
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
+import styles from './accordion.module.css';
 
 interface AccordionProps extends GessoComponent {
   accordionItems: AccordionItemProps[];

source/03-components/Accordion/AccordionItem.tsx

@@ -7,8 +7,8 @@ import {
   useEffect,
   useRef,
 } from 'react';
-import styles from './accordion-item.module.css';
 import { slideCollapse, slideExpand } from '../../06-utility/slide';
+import styles from './accordion-item.module.css';
 
 export interface AccordionItemProps extends GessoComponent {
   id: string;

source/03-components/Accordion/accordion-item.module.css

@@ -43,7 +43,7 @@
     inset-inline-end: var(--spacing-3);
     position: absolute;
     transform: translateY(-50%);
-  
+
     &::before,
     &::after {
       background-color: var(--ui-accent);
@@ -60,11 +60,11 @@
       transition-property: transform;
       transition-timing-function: var(--easing-ease-out);
     }
-  
+
     &::after {
       transform: translate(-50%, -50%) rotate(90deg);
     }
-  
+
     [aria-expanded='true'] & {
       &::after {
         transform: translate(-50%, -50%) rotate(0deg);
@@ -79,7 +79,7 @@
   .drawerInner {
     padding-block: 0 var(--spacing-2);
     padding-inline: var(--spacing-2) var(--spacing-8);
-  
+
     > :last-child {
       margin-block-end: 0;
     }

source/03-components/BackToTop/BackToTop.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
+import BackToTopComponent from './BackToTop';
 import styles from './back-to-top.module.css';
 import backToTopArgs from './back-to-top.yml';
-import BackToTopComponent from './BackToTop';
 
 const meta: Meta<typeof BackToTopComponent> = {
   title: 'Components/Back To Top',

source/03-components/Breadcrumb/Breadcrumb.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
-import Constrain from '../../02-layouts/Constrain/Constrain';
 import Link from 'next/link';
 import { ElementType } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import styles from './breadcrumb.module.css';
 
 interface Crumbs {

source/03-components/Button/Button.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import {
   Button as ButtonComponent,
   LinkButton as LinkButtonComponent,
@@ -71,4 +70,4 @@ const Small: Story = {
 };
 
 export default meta;
-export { Primary, Secondary, Danger, Large, Small };
+export { Danger, Large, Primary, Secondary, Small };

source/03-components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
 import styles from './button.module.css';
 
 interface SharedButtonProps {
@@ -65,5 +65,5 @@ const LinkButton = ({
   );
 };
 
-export type { SharedButtonProps, ButtonProps, LinkProps };
 export { Button, LinkButton };
+export type { ButtonProps, LinkProps, SharedButtonProps };

source/03-components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import buttonGroupArgs from './button-group.yml';
 import ButtonGroupComponent from './ButtonGroup';
+import buttonGroupArgs from './button-group.yml';
 
 const meta: Meta<typeof ButtonGroupComponent> = {
   title: 'Components/Button Group',

source/03-components/ButtonGroup/button-group.yml

@@ -3,9 +3,9 @@ heading: 'Heading'
 element: 'div'
 modifierClasses: ''
 buttons:
- - text: 'First button'
- - text: 'Active middle button'
-   isActive: true
- - text: 'Middle button'
- - text: 'Last button'
+  - text: 'First button'
+  - text: 'Active middle button'
+    isActive: true
+  - text: 'Middle button'
+  - text: 'Last button'
 activeLabel: '(active)'

source/03-components/Card/card.yml

@@ -6,13 +6,13 @@ date: 'September 28, 2018'
 readMore: true
 media: '<img src="https://picsum.photos/id/1015/800/600" alt="Placeholder card image" />'
 tags:
-- url: '#0'
-  title: 'Tag 1'
-- url: '#0'
-  title: 'Tag 2'
-- url: '#0'
-  title: 'Tag 3'
-- url: '#0'
-  title: 'Tag 4'
+  - url: '#0'
+    title: 'Tag 1'
+  - url: '#0'
+    title: 'Tag 2'
+  - url: '#0'
+    title: 'Tag 3'
+  - url: '#0'
+    title: 'Tag 4'
 children: |-
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>

source/03-components/FormItem/FormItem.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import checkboxArgs from './checkbox.yml';
 import { Input } from './FormItem';
+import checkboxArgs from './checkbox.yml';
 import radioArgs from './radio.yml';
 
 const meta: Meta<typeof Input> = {

source/03-components/FormItem/FormItem.tsx

@@ -6,9 +6,9 @@ import {
   ReactNode,
   SelectHTMLAttributes,
 } from 'react';
-import styles from './form-item.module.css';
 import FormItemLabel from './FormItemLabel';
 import FormItemWrapper from './FormItemWrapper';
+import styles from './form-item.module.css';
 
 interface FormItemProps extends GessoComponent {
   id: string;

source/03-components/FormItem/Input.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './FormItem';
 import colorArgs from './color.yml';
 import dateArgs from './date.yml';
 import decimalArgs from './decimal.yml';
 import emailArgs from './email.yml';
 import fileArgs from './file.yml';
 import floatArgs from './float.yml';
-import { Input } from './FormItem';
 import integerArgs from './integer.yml';
 import monthArgs from './month.yml';
 import passwordArgs from './password.yml';

source/03-components/FormItem/form-item-input.css

@@ -1,4 +1,20 @@
-:is(.form-item--box, .form-item--color, .form-item--date, .form-item--email, .form-item--file, .form-item--month, .form-item--number, .form-item--password, .form-item--search, .form-item--select, .form-item--tel, .form-item--text, .form-item--time, .form-item--url, .form-item--week) {
+:is(
+    .form-item--box,
+    .form-item--color,
+    .form-item--date,
+    .form-item--email,
+    .form-item--file,
+    .form-item--month,
+    .form-item--number,
+    .form-item--password,
+    .form-item--search,
+    .form-item--select,
+    .form-item--tel,
+    .form-item--text,
+    .form-item--time,
+    .form-item--url,
+    .form-item--week
+  ) {
   & :is(input, select) {
     @include focus;
 

source/03-components/HeroBgImage/HeroBgImage.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import HeroBgImage from './HeroBgImage';
 import styles from './hero-bg-image.module.css';
 import heroBgImageArgs from './hero-bg-image.yml';
-import HeroBgImage from './HeroBgImage';
 
 const meta: Meta<typeof HeroBgImage> = {
   title: 'Components/Hero/Hero With Background Image',

source/03-components/HeroInlineImage/HeroInlineImage.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
+import HeroInlineImage from './HeroInlineImage';
 import styles from './hero-inline-image.module.css';
 import heroInlineImageArgs from './hero-inline-image.yml';
-import HeroInlineImage from './HeroInlineImage';
 
 const meta: Meta<typeof HeroInlineImage> = {
   title: 'Components/Hero/Hero With Inline Image',

source/03-components/ImageTeaser/ImageTeaser.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import parse from 'html-react-parser';
-import imageTeaserArgs from './image-teaser.yml';
 import ImageTeaserComponent from './ImageTeaser';
+import imageTeaserArgs from './image-teaser.yml';
 
 const meta: Meta<typeof ImageTeaserComponent> = {
   title: 'Components/Image Teaser',