Ryan/next-app-template
Template
1
0
Fork 0
mirror of https://github.com/mantinedev/next-app-template.git synced 2025-11-13 16:22:33 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: Ryan:da7b03909f46186e3cc4e3e99e317951a6a88033
Branches Tags
Ryan:master Ryan:renovate/major-all-dependencies Ryan:sass-embedded Ryan:next-15 Ryan:mantine-tests-package Ryan:sass
..
compare: Ryan:sass-embedded
Branches Tags
Ryan:master Ryan:renovate/major-all-dependencies Ryan:sass-embedded Ryan:next-15 Ryan:mantine-tests-package Ryan:sass

15 Commits
da7b03909f ... sass-embed

Author SHA1 Message Date
Vitaly Rtishchev
8d8c25b729 Add sass example 2024-11-08 13:29:20 +04:00
Vitaly Rtishchev
2dabfc6ca4 Update yarn to 4.5.1 2024-10-23 21:07:58 +04:00
Vitaly Rtishchev
763f36480d Update @mantine/* dependencies to 7.13.4 2024-10-23 21:05:27 +04:00
Vitaly Rtishchev
80772b4044 Add example with Next.js 15 2024-10-23 20:01:12 +04:00
Vitaly Rtishchev
8f50381361 Update @mantine/* dependencies to 7.13.3 2024-10-18 12:15:29 +04:00
Vitaly Rtishchev
6f71ff274f Cleanup Storybook configuration 2024-10-15 14:05:15 +04:00
Vitaly Rtishchev
bf2c8f2863 Update @mantine/* dependencies to 7.13.2 2024-10-15 11:45:28 +04:00
Vitaly Rtishchev
ba896e0c50 Update yarn to 4.5.0 2024-09-25 18:42:49 +04:00
Vitaly Rtishchev
aa2c27d9b9 Update @mantine/* dependencies to 7.13.0 2024-09-25 18:41:32 +04:00
Vitaly Rtishchev
406145dd0d Add prettier imports sorting 2024-09-02 14:53:41 +04:00
Vitaly Rtishchev
c89286ee36 Update @mantine/* dependencies to 7.12.2 2024-08-31 14:23:55 +04:00
Vitaly Rtishchev
33f5de903b Update yarn to 4.4.1 2024-08-26 14:58:26 +04:00
Vitaly Rtishchev
b5c4c6d84c Update @mantine/* dependencies to 7.12.1 2024-08-12 16:47:06 +04:00
Vitaly Rtishchev
fc2837d53d Update @mantine/* dependencies to 7.12.0 2024-08-05 20:18:30 +04:00
Vitaly Rtishchev
758f433e62 Update yarn to 4.4.0 2024-08-05 20:16:48 +04:00
17 changed files with 1910 additions and 1486 deletions
Expand all files Collapse all files

1
.prettierrc.cjs
View File

@ -1 +0,0 @@
module.exports = require('eslint-config-mantine/.prettierrc.js');

35
.prettierrc.mjs Normal file
View File

@ -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;

12
.storybook/main.ts
View File

@ -1,16 +1,16 @@
import type { StorybookConfig } from '@storybook/nextjs'; import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = { const config: StorybookConfig = {
core: {
disableWhatsNewNotifications: true,
disableTelemetry: true,
enableCrashReports: false,
},
stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'], stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
addons: [ addons: ['storybook-dark-mode'],
'@storybook/addon-essentials',
'storybook-dark-mode',
'@storybook/addon-styling-webpack',
],
framework: { framework: {
name: '@storybook/nextjs', name: '@storybook/nextjs',
options: {}, options: {},
}, },
}; };
export default config; export default config;

8
.storybook/preview.tsx
View File

@ -1,10 +1,18 @@
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { addons } from '@storybook/preview-api'; import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import { MantineProvider, useMantineColorScheme } from '@mantine/core'; import { MantineProvider, useMantineColorScheme } from '@mantine/core';
import { theme } from '../theme'; import { theme } from '../theme';
export const parameters = {
layout: 'fullscreen',
options: {
showPanel: false,
},
};
const channel = addons.getChannel(); const channel = addons.getChannel();
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) { function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {

894
.yarn/releases/yarn-4.3.1.cjs vendored
View File

File diff suppressed because one or more lines are too long

934
.yarn/releases/yarn-4.5.1.cjs vendored Executable file
View File

File diff suppressed because one or more lines are too long

2
.yarnrc.yml
View File

@ -1,3 +1,3 @@
nodeLinker: node-modules nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-4.3.1.cjs yarnPath: .yarn/releases/yarn-4.5.1.cjs

64
_mantine.scss Normal file
View File

@ -0,0 +1,64 @@
@use 'sass:math';
// Define variables for your breakpoints,
// values must be the same as in your theme
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';
@function rem($value) {
@return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
}
@mixin light {
[data-mantine-color-scheme='light'] & {
@content;
}
}
@mixin dark {
[data-mantine-color-scheme='dark'] & {
@content;
}
}
@mixin hover {
@media (hover: hover) {
&:hover {
@content;
}
}
@media (hover: none) {
&:active {
@content;
}
}
}
@mixin smaller-than($breakpoint) {
@media (max-width: $breakpoint) {
@content;
}
}
@mixin larger-than($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
// Add direction mixins if you need rtl support
@mixin rtl {
[dir='rtl'] & {
@content;
}
}
@mixin ltr {
[dir='ltr'] & {
@content;
}
}

5
app/layout.tsx
View File

@ -1,6 +1,7 @@
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import React from 'react'; import React from 'react';
import { MantineProvider, ColorSchemeScript } from '@mantine/core'; import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { theme } from '../theme'; import { theme } from '../theme';
export const metadata = { export const metadata = {
@ -10,7 +11,7 @@ export const metadata = {
export default function RootLayout({ children }: { children: any }) { export default function RootLayout({ children }: { children: any }) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<head> <head>
<ColorSchemeScript /> <ColorSchemeScript />
<link rel="shortcut icon" href="/favicon.svg" /> <link rel="shortcut icon" href="/favicon.svg" />

2
app/page.tsx
View File

@ -1,5 +1,5 @@
import { Welcome } from '../components/Welcome/Welcome';
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle'; import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
import { Welcome } from '../components/Welcome/Welcome';
export default function HomePage() { export default function HomePage() {
return ( return (

10
components/Welcome/Welcome.module.css
View File

@ -1,10 +0,0 @@
.title {
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
font-size: rem(100px);
font-weight: 900;
letter-spacing: rem(-2px);
@media (max-width: $mantine-breakpoint-md) {
font-size: rem(50px);
}
}

10
components/Welcome/Welcome.module.scss Normal file
View File

@ -0,0 +1,10 @@
.title {
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
font-size: mantine.rem(100px);
font-weight: 900;
letter-spacing: mantine.rem(-2px);
@media (max-width: mantine.$mantine-breakpoint-md) {
font-size: mantine.rem(50px);
}
}

4
components/Welcome/Welcome.tsx
View File

@ -1,5 +1,5 @@
import { Title, Text, Anchor } from '@mantine/core'; import classes from './Welcome.module.scss';
import classes from './Welcome.module.css'; import { Anchor, Text, Title } from '@mantine/core';
export function Welcome() { export function Welcome() {
return ( return (

2
next-env.d.ts vendored
View File

@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information. // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

6
next.config.mjs
View File

@ -1,3 +1,4 @@
import path from 'path';
import bundleAnalyzer from '@next/bundle-analyzer'; import bundleAnalyzer from '@next/bundle-analyzer';
const withBundleAnalyzer = bundleAnalyzer({ const withBundleAnalyzer = bundleAnalyzer({
@ -12,4 +13,9 @@ export default withBundleAnalyzer({
experimental: { experimental: {
optimizePackageImports: ['@mantine/core', '@mantine/hooks'], optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
}, },
sassOptions: {
implementation: 'sass-embedded',
additionalData: `@use "${path.join(process.cwd(), '_mantine')}" as mantine;`,
},
}); });

13
package.json
View File

@ -19,20 +19,18 @@
"storybook:build": "storybook build" "storybook:build": "storybook build"
}, },
"dependencies": { "dependencies": {
"@mantine/core": "7.11.2", "@mantine/core": "7.13.4",
"@mantine/hooks": "7.11.2", "@mantine/hooks": "7.13.4",
"@next/bundle-analyzer": "^14.2.4", "@next/bundle-analyzer": "^14.2.4",
"@tabler/icons-react": "^3.6.0", "@tabler/icons-react": "^3.6.0",
"next": "14.2.4", "next": "15.0.1",
"react": "18.3.1", "react": "18.3.1",
"react-dom": "18.3.1" "react-dom": "18.3.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.24.7", "@babel/core": "^7.24.7",
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
"@next/eslint-plugin-next": "^14.2.4", "@next/eslint-plugin-next": "^14.2.4",
"@storybook/addon-essentials": "^8.1.10",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/blocks": "^8.1.10",
"@storybook/nextjs": "^8.1.10", "@storybook/nextjs": "^8.1.10",
"@storybook/react": "^8.1.10", "@storybook/react": "^8.1.10",
"@testing-library/dom": "^10.1.0", "@testing-library/dom": "^10.1.0",
@ -61,6 +59,7 @@
"postcss-preset-mantine": "1.17.0", "postcss-preset-mantine": "1.17.0",
"postcss-simple-vars": "^7.0.1", "postcss-simple-vars": "^7.0.1",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"sass-embedded": "^1.80.6",
"storybook": "^8.1.10", "storybook": "^8.1.10",
"storybook-dark-mode": "^4.0.2", "storybook-dark-mode": "^4.0.2",
"stylelint": "^16.6.1", "stylelint": "^16.6.1",
@ -68,5 +67,5 @@
"ts-jest": "^29.1.5", "ts-jest": "^29.1.5",
"typescript": "5.5.2" "typescript": "5.5.2"
}, },
"packageManager": "yarn@4.3.1" "packageManager": "yarn@4.5.1"
} }

1394
yarn.lock
View File

File diff suppressed because it is too large Load Diff