[refactor] Add prettier import order sorting

.prettierrc.mjs

@@ -1,8 +1,27 @@
-/** @type {import("prettier").Config} */
+/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
 const config = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'es5',
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '.*styles.css$',
+    '',
+    'dayjs',
+    '^react$',
+    '^next$',
+    '^next/.*$',
+    '<BUILTIN_MODULES>',
+    '<THIRD_PARTY_MODULES>',
+    '^@mantine/(.*)$',
+    '^@mantinex/(.*)$',
+    '^@mantine-tests/(.*)$',
+    '^@docs/(.*)$',
+    '^@/.*$',
+    '^../(?!.*.css$).*$',
+    '^./(?!.*.css$).*$',
+    '\\.css$',
+  ],
   overrides: [
     {
       files: '*.mdx',

.storybook/preview.tsx

@@ -3,11 +3,11 @@ import { addons } from '@storybook/preview-api';
 import { IconTextDirectionLtr, IconTextDirectionRtl } from '@tabler/icons-react';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import {
-  MantineProvider,
-  useMantineColorScheme,
   ActionIcon,
   DirectionProvider,
+  MantineProvider,
   useDirection,
+  useMantineColorScheme,
 } from '@mantine/core';
 import { theme } from '../docs/theme';
 

docs/src/app-shell-examples/AppShellPage/AppShellPage.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { CodeHighlightTabs } from '@mantinex/shiki';
 import { getCodeFileIcon } from '@mantinex/dev-icons';
+import { CodeHighlightTabs } from '@mantinex/shiki';
 import { PageHead } from '@/components/PageHead';
-import { ExamplesDrawer } from './ExamplesDrawer/ExamplesDrawer';
 import { APP_SHELL_EXAMPLES_COMPONENTS } from '../examples';
+import { ExamplesDrawer } from './ExamplesDrawer/ExamplesDrawer';
 
 export function AppShellPage() {
   const router = useRouter();

docs/src/app-shell-examples/AppShellPage/ExamplesDrawer/ExamplesDrawer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { IconArrowLeft, IconCode, IconLayoutBoard, IconMenu2 } from '@tabler/icons-react';
+import { Affix, Button, Drawer, Group, rem, ScrollArea, Text, UnstyledButton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { Button, Affix, Drawer, Group, rem, UnstyledButton, Text, ScrollArea } from '@mantine/core';
-import { IconMenu2, IconArrowLeft, IconCode, IconLayoutBoard } from '@tabler/icons-react';
 import { APP_SHELL_EXAMPLES_DATA } from '../../app-shell-examples-data';
 import classes from './ExamplesDrawer.module.css';
 

docs/src/app-shell-examples/examples/AltLayout/AltLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useDisclosure } from '@mantine/hooks';
 import { AppShell, Burger, Group, Skeleton, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 export function AltLayout() {

docs/src/app-shell-examples/examples/AltLayout/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "AltLayout.tsx",
     "language": "tsx",
-    "code": "import { useDisclosure } from '@mantine/hooks';\nimport { AppShell, Burger, Group, Skeleton, Text } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function AltLayout() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      layout=\"alt\"\n      header={{ height: 60 }}\n      footer={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        <Group>\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <Text>Navbar</Text>\n        </Group>\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        Alt layout – Navbar and Aside are rendered on top on Header and Footer\n      </AppShell.Main>\n      <AppShell.Aside p=\"md\">Aside</AppShell.Aside>\n      <AppShell.Footer p=\"md\">Footer</AppShell.Footer>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Burger, Group, Skeleton, Text } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function AltLayout() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      layout=\"alt\"\n      header={{ height: 60 }}\n      footer={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        <Group>\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <Text>Navbar</Text>\n        </Group>\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        Alt layout – Navbar and Aside are rendered on top on Header and Footer\n      </AppShell.Main>\n      <AppShell.Aside p=\"md\">Aside</AppShell.Aside>\n      <AppShell.Footer p=\"md\">Footer</AppShell.Footer>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/BasicAppShell/BasicAppShell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useDisclosure } from '@mantine/hooks';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 export function BasicAppShell() {

docs/src/app-shell-examples/examples/BasicAppShell/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "BasicAppShell.tsx",
     "language": "tsx",
-    "code": "import { useDisclosure } from '@mantine/hooks';\nimport { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function BasicAppShell() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>Main</AppShell.Main>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function BasicAppShell() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>Main</AppShell.Main>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/CollapseDesktop/CollapseDesktop.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useDisclosure } from '@mantine/hooks';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 export function CollapseDesktop() {

docs/src/app-shell-examples/examples/CollapseDesktop/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "CollapseDesktop.tsx",
     "language": "tsx",
-    "code": "import { useDisclosure } from '@mantine/hooks';\nimport { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function CollapseDesktop() {\n  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();\n  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{\n        width: 300,\n        breakpoint: 'sm',\n        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },\n      }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom=\"sm\" size=\"sm\" />\n          <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>Main</AppShell.Main>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function CollapseDesktop() {\n  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();\n  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{\n        width: 300,\n        breakpoint: 'sm',\n        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },\n      }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom=\"sm\" size=\"sm\" />\n          <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>Main</AppShell.Main>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/Disabled/Disabled.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { AppShell, Burger, Button, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { AppShell, Burger, Group, Skeleton, Button } from '@mantine/core';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 export function Disabled() {

docs/src/app-shell-examples/examples/Disabled/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "Disabled.tsx",
     "language": "tsx",
-    "code": "import { useDisclosure } from '@mantine/hooks';\nimport { AppShell, Burger, Group, Skeleton, Button } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function Disabled() {\n  const [opened, { toggle }] = useDisclosure();\n  const [disabled, { toggle: toggleDisabled }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      padding=\"md\"\n      disabled={disabled}\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        <Button onClick={toggleDisabled}>Toggle disabled</Button>\n      </AppShell.Main>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Burger, Button, Group, Skeleton } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function Disabled() {\n  const [opened, { toggle }] = useDisclosure();\n  const [disabled, { toggle: toggleDisabled }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      padding=\"md\"\n      disabled={disabled}\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        <Button onClick={toggleDisabled}>Toggle disabled</Button>\n      </AppShell.Main>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/FullLayout/FullLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useDisclosure } from '@mantine/hooks';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 export function FullLayout() {

docs/src/app-shell-examples/examples/FullLayout/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "FullLayout.tsx",
     "language": "tsx",
-    "code": "import { useDisclosure } from '@mantine/hooks';\nimport { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function FullLayout() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      footer={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        Aside is hidden on on md breakpoint and cannot be opened when it is collapsed\n      </AppShell.Main>\n      <AppShell.Aside p=\"md\">Aside</AppShell.Aside>\n      <AppShell.Footer p=\"md\">Footer</AppShell.Footer>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Burger, Group, Skeleton } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nexport function FullLayout() {\n  const [opened, { toggle }] = useDisclosure();\n\n  return (\n    <AppShell\n      header={{ height: 60 }}\n      footer={{ height: 60 }}\n      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}\n      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}\n      padding=\"md\"\n    >\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <Burger opened={opened} onClick={toggle} hiddenFrom=\"sm\" size=\"sm\" />\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n      <AppShell.Navbar p=\"md\">\n        Navbar\n        {Array(15)\n          .fill(0)\n          .map((_, index) => (\n            <Skeleton key={index} h={28} mt=\"sm\" animate={false} />\n          ))}\n      </AppShell.Navbar>\n      <AppShell.Main>\n        Aside is hidden on on md breakpoint and cannot be opened when it is collapsed\n      </AppShell.Main>\n      <AppShell.Aside p=\"md\">Aside</AppShell.Aside>\n      <AppShell.Footer p=\"md\">Footer</AppShell.Footer>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/Headroom/Headroom.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { AppShell, Group, rem, Text } from '@mantine/core';
 import { useHeadroom } from '@mantine/hooks';
-import { AppShell, Group, Text, rem } from '@mantine/core';
 import { MantineLogo } from '@mantinex/mantine-logo';
 
 const lorem =

docs/src/app-shell-examples/examples/Headroom/code.json

@@ -2,6 +2,6 @@
   {
     "fileName": "Headroom.tsx",
     "language": "tsx",
-    "code": "import { useHeadroom } from '@mantine/hooks';\nimport { AppShell, Group, Text, rem } from '@mantine/core';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nconst lorem =\n  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ullam, ex cum repellat alias ea nemo. Ducimus ex nesciunt hic ad saepe molestiae nobis necessitatibus laboriosam officia, reprehenderit, earum fugiat?';\n\nexport function Headroom() {\n  const pinned = useHeadroom({ fixedAt: 120 });\n\n  return (\n    <AppShell header={{ height: 60, collapsed: !pinned, offset: false }} padding=\"md\">\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n\n      <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>\n        {Array(40)\n          .fill(0)\n          .map((_, index) => (\n            <Text size=\"lg\" key={index} my=\"md\" maw={600} mx=\"auto\">\n              {lorem}\n            </Text>\n          ))}\n      </AppShell.Main>\n    </AppShell>\n  );\n}\n"
+    "code": "import { AppShell, Group, rem, Text } from '@mantine/core';\nimport { useHeadroom } from '@mantine/hooks';\nimport { MantineLogo } from '@mantinex/mantine-logo';\n\nconst lorem =\n  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos ullam, ex cum repellat alias ea nemo. Ducimus ex nesciunt hic ad saepe molestiae nobis necessitatibus laboriosam officia, reprehenderit, earum fugiat?';\n\nexport function Headroom() {\n  const pinned = useHeadroom({ fixedAt: 120 });\n\n  return (\n    <AppShell header={{ height: 60, collapsed: !pinned, offset: false }} padding=\"md\">\n      <AppShell.Header>\n        <Group h=\"100%\" px=\"md\">\n          <MantineLogo size={30} />\n        </Group>\n      </AppShell.Header>\n\n      <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>\n        {Array(40)\n          .fill(0)\n          .map((_, index) => (\n            <Text size=\"lg\" key={index} my=\"md\" maw={600} mx=\"auto\">\n              {lorem}\n            </Text>\n          ))}\n      </AppShell.Main>\n    </AppShell>\n  );\n}\n"
   }
 ]

docs/src/app-shell-examples/examples/MobileNavbar/MobileNavbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useDisclosure } from '@mantine/hooks';
 import { AppShell, Burger, Group, UnstyledButton } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';
 import classes from './MobileNavbar.module.css';