Update dependencies

.github/workflows/pull_request.yml

@@ -1,4 +1,4 @@
-name: Pull request workflow
+name: npm test
 
 on:
   pull_request:
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '20.9.0'
+          node-version-file: '.nvmrc'
           cache: 'yarn'
           cache-dependency-path: '**/yarn.lock'
       - name: Install dependencies

.prettierrc.mjs

@@ -0,0 +1,35 @@
+/** @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',
+      options: {
+        printWidth: 70,
+      },
+    },
+  ],
+};
+
+export default config;

.storybook/main.ts

@@ -1,5 +1,5 @@
+import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-vite';
-import { join, dirname } from 'path';
 
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));

.storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/react';
+
 import '@mantine/core/styles.css';
+
 import React, { useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';

README.md

@@ -1 +1,39 @@
-# mantine-extension-template
+# Mantine Extension Template
+
+This is a template repository for creating Mantine extensions. It includes all necessary configuration files and scripts to get you started.
+
+## Get started
+
+1. Click "Use this template" button at the top of the page to create a new repository based on this template.
+2. Clone the repository to your local machine and install dependencies (`yarn`)
+3. Run `nvm use` to switch to the correct node version
+4. Come up with a name for your extension and replace all occurrences of `mantine-extension-template` with your extension name
+5. Change `repository` field in [package/package.json](https://github.com/mantinedev/extension-template/blob/master/package/package.json) to point to your repository
+6. Run `npm run docgen` to generate files required for documentation
+7. To verify that everything works correctly, run `npm run build` and `npm test` to build and test your initial setup
+8. All good! Start developing your extension.
+
+## Local development
+
+To develop your extension locally, run the following commands:
+
+- Run `npm run storybook` to start the storybook
+- Run `npm run dev` to start the documentation
+- To regenerate props documentation, run `npm run docgen`
+
+## Publishing package
+
+1. Login with your npm account by running `npm login`, if you have 2FA enabled, [generate automation token](https://docs.npmjs.com/creating-and-viewing-access-tokens) and add it to your `~/.npmrc` file
+2. Make sure that your package name is unique and does not exist on npm yet
+3. Run `npm run release:patch`, `npm run release:minor` or `npm run release:major` to publish new version of your package
+
+## Publish documentation
+
+By default, the documentation is deployed to GitHub Pages. The script to deploy documentation runs automatically when the package is published. In order for
+this script to work correctly, you need to make sure that `repository` field in [package/package.json](https://github.com/mantinedev/extension-template/blob/master/package/package.json) points to your repository.
+
+To publish documentation manually, run `npm run docs:deploy`.
+
+## README file of your extension
+
+`README.md` file at the root repository directory (file that you are currently reading) is copied to to `package/README.md` during the build process to avoid duplication. To add content to the README file of your extension, remove extension template documentation from this file and add your own content.

docs/components/DocsTabs/DocsTabs.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { Tabs } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { Tabs } from '@mantine/core';
 import { PropsTablesList } from '../PropsTable';
+import { StylesApiTablesList } from '../StylesApiTable';
 import { TableOfContents } from '../TableOfContents';
 import classes from './DocsTabs.module.css';
-import { StylesApiTablesList } from '../StylesApiTable';
 
 interface DocsTabsProps {
   children: React.ReactNode;

docs/components/InstallScript/InstallScript.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLocalStorage } from '@mantine/hooks';
+import { NpmIcon, YarnIcon } from '@mantinex/dev-icons';
 import { CodeHighlightTabs } from '@mantinex/shiki';
-import { YarnIcon, NpmIcon } from '@mantinex/dev-icons';
 import classes from './InstallScript.module.css';
 
 interface InstallScriptProps {

docs/components/MdxElements/MdxElements.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'clsx';
 import type { MDXComponents } from 'mdx/types';
-import { Image, Code, Title, Anchor } from '@mantine/core';
+import { Anchor, Code, Image, Title } from '@mantine/core';
 import { Demo } from '@mantinex/demo';
 import { CodeHighlight } from '@mantinex/shiki';
 import classes from './MdxElements.module.css';
@@ -29,6 +29,7 @@ export const h = (order: 1 | 2 | 3 | 4 | 5 | 6) => (props: any) => (
 );
 
 function getLanguage(children: any) {
+  // @ts-ignore
   const matches = (children.props.className || '').match(/language-(?<lang>.*)/);
   return matches && matches.groups && matches.groups.lang ? matches.groups.lang : 'tsx';
 }

docs/components/PageHeader/PageHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Title, Container, Text } from '@mantine/core';
+import { IconEdit, IconLicense, IconUserCode } from '@tabler/icons-react';
+import { Container, Text, Title } from '@mantine/core';
 import { GithubIcon, NpmIcon } from '@mantinex/dev-icons';
-import { IconLicense, IconUserCode, IconEdit } from '@tabler/icons-react';
 import type { PackageData } from '../../data';
 import { PageHeaderLink } from './PageHeaderLink/PageHeaderLink';
 import classes from './PageHeader.module.css';

docs/components/PropsTable/PropsTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Table, Text, Highlight } from '@mantine/core';
-import { TableInlineCode } from '../TableInlineCode';
+import { Highlight, Table, Text } from '@mantine/core';
 import { TableError } from '../TableError';
+import { TableInlineCode } from '../TableInlineCode';
 
 export interface DocgenProp {
   defaultValue: {

docs/components/PropsTable/PropsTablesList.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { TextInput, Title } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import { PropsTable } from './PropsTable';
+import { TextInput, Title } from '@mantine/core';
 import { getComponentName } from './getComponentName';
+import { PropsTable } from './PropsTable';
 import classes from './PropsTablesList.module.css';
 
 export interface PropsTablesListProps {

docs/components/Shell/Shell.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import cx from 'clsx';
+import { AppShell, Container, Group, RemoveScroll, useMantineColorScheme } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { AppShell, Container, RemoveScroll, Group, useMantineColorScheme } from '@mantine/core';
-import { MantineLogo } from '@mantinex/mantine-logo';
 import { ColorSchemeControl, HeaderControls } from '@mantinex/mantine-header';
+import { MantineLogo } from '@mantinex/mantine-logo';
 import { meta } from '@mantinex/mantine-meta';
 import { PACKAGE_DATA } from '../../data';
 import classes from './Shell.module.css';

docs/components/StylesApiTable/StylesApiTable.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Title } from '@mantine/core';
-import { TableError } from '../TableError';
 import { getComponentName } from '../PropsTable';
+import { TableError } from '../TableError';
+import { ModifiersTable } from './ModifiersTable';
 import { SelectorsTable } from './SelectorsTable';
 import { VariablesTable } from './VariablesTable';
-import { ModifiersTable } from './ModifiersTable';
 import classes from './StylesApiTable.module.css';
 
 export interface StylesApiData {

docs/components/StylesApiTable/StylesApiTablesList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Code } from '@mantine/core';
-import { MdxParagraph, MdxLink, MdxTitle } from '../MdxElements/MdxElements';
+import { MdxLink, MdxParagraph, MdxTitle } from '../MdxElements/MdxElements';
 import { StylesApiTable } from './StylesApiTable';
 import classes from './StylesApiTable.module.css';
 

docs/components/TableError/TableError.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Anchor } from '@mantine/core';
+import { Anchor, Text } from '@mantine/core';
 
 interface TableErrorProps {
   errorOf: string;

docs/components/TableInlineCode/TableInlineCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'clsx';
-import { Text, TextProps, ElementProps } from '@mantine/core';
+import { ElementProps, Text, TextProps } from '@mantine/core';
 import classes from './TableInlineCode.module.css';
 
 interface TableInlineCodeProps extends TextProps, ElementProps<'span', 'color'> {}

docs/components/TableOfContents/TableOfContents.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
-import { Text, ScrollArea, rem, Box } from '@mantine/core';
 import { IconList } from '@tabler/icons-react';
+import { Box, rem, ScrollArea, Text } from '@mantine/core';
 import { getHeadings, Heading } from './get-headings';
 import classes from './TableOfContents.module.css';
 

docs/demos/TestComponent.demo.configurator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MantineDemo } from '@mantinex/demo';
 import { TestComponent } from 'mantine-extension-template';
+import { MantineDemo } from '@mantinex/demo';
 
 const code = `
 import { TestComponent } from 'mantine-extension-template';

docs/demos/TestComponent.demo.usage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MantineDemo } from '@mantinex/demo';
 import { TestComponent } from 'mantine-extension-template';
+import { MantineDemo } from '@mantinex/demo';
 
 const code = `
 import { TestComponent } from 'mantine-extension-template';

docs/next.config.mjs

@@ -1,7 +1,7 @@
+import createMDX from '@next/mdx';
 import fs from 'fs-extra';
-import signale from 'signale';
 import remarkSlug from 'remark-slug';
-import createMDX from '@next/mdx';
+import signale from 'signale';
 
 const withMDX = createMDX({
   options: {
@@ -14,6 +14,7 @@ let repository;
 try {
   const packageJson = fs.readJsonSync('../package/package.json');
   repository = packageJson.repository.split('/').at(-1).replace('.git', '');
+  signale.info(`gh-pages repository: ${repository}\n`);
 } catch {
   signale.error('Failed to read repository field of package/package.json\n');
   process.exit(1);
@@ -22,7 +23,6 @@ try {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
   output: 'export',
   basePath: process.env.NODE_ENV === 'production' ? `/${repository}` : undefined,
   pageExtensions: ['ts', 'tsx', 'mdx'],

docs/overrides.d.ts

@@ -0,0 +1,14 @@
+declare module '*.gql';
+declare module '*.md';
+declare module '*.graphql';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.webp';
+declare module '*.jpg';
+declare module '*.gif';
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.mdx';
+declare module '*.webp';
+declare module '*.css';
+declare module 'is-directory';

docs/package.json

@@ -1,38 +1,39 @@
 {
-  "name": "mantine-minimal-next-template",
+  "name": "extension-template-docs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --port 9281",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@mantine/core": "7.14.2",
     "@mantine/hooks": "7.14.2",
-    "@mantinex/demo": "^1.1.0",
+    "@mantinex/demo": "^1.1.1",
     "@mantinex/dev-icons": "^1.0.2",
     "@mantinex/mantine-header": "^1.0.2",
     "@mantinex/mantine-logo": "^1.0.1",
-    "@mantinex/mantine-meta": "^1.0.1",
-    "@mantinex/shiki": "^1.0.2",
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.0.0",
-    "@tabler/icons-react": "^2.40.0",
-    "@types/mdx": "^2.0.9",
+    "@mantinex/mantine-meta": "^1.0.2",
+    "@mantinex/shiki": "^1.0.3",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.0.3",
+    "@tabler/icons-react": "^3.22.0",
+    "@types/mdx": "^2.0.13",
     "mantine-extension-template": "workspace:*",
-    "next": "13.4.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "15.0.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "remark-slug": "^7.0.1",
-    "shikiji": "^0.7.4",
-    "type-fest": "^4.6.0"
+    "shikiji": "^0.10.2",
+    "type-fest": "^4.29.0"
   },
   "devDependencies": {
-    "@types/node": "^20.8.9",
+    "@types/node": "^22.10.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "typescript": "5.2.2"
+    "typescript": "5.7.2"
   }
 }

docs/pages/_app.tsx

@@ -4,13 +4,14 @@ import '@mantinex/mantine-logo/styles.css';
 import '@mantinex/mantine-header/styles.css';
 import '@mantinex/demo/styles.css';
 import 'mantine-extension-template/styles.css';
+
 import React from 'react';
-import Head from 'next/head';
 import { AppProps } from 'next/app';
+import Head from 'next/head';
 import { MantineProvider } from '@mantine/core';
 import { ShikiProvider } from '@mantinex/shiki';
-import { theme } from '../theme';
 import favicon from '../assets/favicon.svg';
+import { theme } from '../theme';
 
 async function loadShiki() {
   const { getHighlighter } = await import('shikiji');

docs/pages/_document.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 import { ColorSchemeScript } from '@mantine/core';
 
 export default function Document() {