mirror of
https://github.com/mantinedev/next-app-template.git
synced 2025-11-14 00:31:17 +10:00
Compare commits
1 Commits
0c327e8247
...
sass-embed
| Author | SHA1 | Date | |
|---|---|---|---|
| 8d8c25b729 |
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
*.cjs
|
||||
*.mjs
|
||||
*.js
|
||||
17
.eslintrc.cjs
Normal file
17
.eslintrc.cjs
Normal file
@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
extends: ['mantine', 'plugin:@next/next/recommended', 'plugin:jest/recommended'],
|
||||
plugins: ['testing-library', 'jest'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
|
||||
extends: ['plugin:testing-library/react'],
|
||||
},
|
||||
],
|
||||
parserOptions: {
|
||||
project: './tsconfig.json',
|
||||
},
|
||||
rules: {
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'import/extensions': 'off',
|
||||
},
|
||||
};
|
||||
@ -10,9 +10,6 @@ export const parameters = {
|
||||
layout: 'fullscreen',
|
||||
options: {
|
||||
showPanel: false,
|
||||
storySort: (a, b) => {
|
||||
return a.title.localeCompare(b.title, undefined, { numeric: true });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
934
.yarn/releases/yarn-4.5.1.cjs
vendored
Executable file
934
.yarn/releases/yarn-4.5.1.cjs
vendored
Executable file
File diff suppressed because one or more lines are too long
942
.yarn/releases/yarn-4.9.4.cjs
vendored
942
.yarn/releases/yarn-4.9.4.cjs
vendored
File diff suppressed because one or more lines are too long
@ -1,3 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-4.9.4.cjs
|
||||
yarnPath: .yarn/releases/yarn-4.5.1.cjs
|
||||
|
||||
64
_mantine.scss
Normal file
64
_mantine.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import '@mantine/core/styles.css';
|
||||
|
||||
import React from 'react';
|
||||
import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core';
|
||||
import { ColorSchemeScript, MantineProvider } from '@mantine/core';
|
||||
import { theme } from '../theme';
|
||||
|
||||
export const metadata = {
|
||||
@ -11,7 +11,7 @@ export const metadata = {
|
||||
|
||||
export default function RootLayout({ children }: { children: any }) {
|
||||
return (
|
||||
<html lang="en" {...mantineHtmlProps}>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<ColorSchemeScript />
|
||||
<link rel="shortcut icon" href="/favicon.svg" />
|
||||
|
||||
@ -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
10
components/Welcome/Welcome.module.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import classes from './Welcome.module.scss';
|
||||
import { Anchor, Text, Title } from '@mantine/core';
|
||||
import classes from './Welcome.module.css';
|
||||
|
||||
export function Welcome() {
|
||||
return (
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import mantine from 'eslint-config-mantine';
|
||||
import tseslint from 'typescript-eslint';
|
||||
|
||||
export default tseslint.config(
|
||||
...mantine,
|
||||
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
|
||||
{
|
||||
files: ['**/*.story.tsx'],
|
||||
rules: { 'no-console': 'off' },
|
||||
}
|
||||
);
|
||||
2
next-env.d.ts
vendored
2
next-env.d.ts
vendored
@ -2,4 +2,4 @@
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import path from 'path';
|
||||
import bundleAnalyzer from '@next/bundle-analyzer';
|
||||
|
||||
const withBundleAnalyzer = bundleAnalyzer({
|
||||
@ -12,4 +13,9 @@ export default withBundleAnalyzer({
|
||||
experimental: {
|
||||
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
|
||||
},
|
||||
|
||||
sassOptions: {
|
||||
implementation: 'sass-embedded',
|
||||
additionalData: `@use "${path.join(process.cwd(), '_mantine')}" as mantine;`,
|
||||
},
|
||||
});
|
||||
|
||||
84
package.json
84
package.json
@ -8,9 +8,8 @@
|
||||
"analyze": "ANALYZE=true next build",
|
||||
"start": "next start",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "npm run eslint && npm run stylelint",
|
||||
"eslint": "next lint",
|
||||
"stylelint": "stylelint '**/*.css' --cache",
|
||||
"lint": "next lint && npm run lint:stylelint",
|
||||
"lint:stylelint": "stylelint '**/*.css' --cache",
|
||||
"jest": "jest",
|
||||
"jest:watch": "jest --watch",
|
||||
"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
|
||||
@ -20,46 +19,53 @@
|
||||
"storybook:build": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "8.3.0",
|
||||
"@mantine/hooks": "8.3.0",
|
||||
"@next/bundle-analyzer": "^15.3.3",
|
||||
"@tabler/icons-react": "^3.34.0",
|
||||
"next": "15.3.3",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
"@mantine/core": "7.13.4",
|
||||
"@mantine/hooks": "7.13.4",
|
||||
"@next/bundle-analyzer": "^14.2.4",
|
||||
"@tabler/icons-react": "^3.6.0",
|
||||
"next": "15.0.1",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.27.4",
|
||||
"@eslint/js": "^9.29.0",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.4.2",
|
||||
"@storybook/nextjs": "^8.6.8",
|
||||
"@storybook/react": "^8.6.8",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/eslint-plugin-jsx-a11y": "^6",
|
||||
"@types/jest": "^29.5.14",
|
||||
"@types/node": "^22.13.11",
|
||||
"@types/react": "19.1.8",
|
||||
"babel-loader": "^10.0.0",
|
||||
"eslint": "^9.29.0",
|
||||
"eslint-config-mantine": "^4.0.3",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"jest": "^30.0.0",
|
||||
"jest-environment-jsdom": "^30.0.0",
|
||||
"postcss": "^8.5.5",
|
||||
"@babel/core": "^7.24.7",
|
||||
"@ianvs/prettier-plugin-sort-imports": "^4.3.1",
|
||||
"@next/eslint-plugin-next": "^14.2.4",
|
||||
"@storybook/nextjs": "^8.1.10",
|
||||
"@storybook/react": "^8.1.10",
|
||||
"@testing-library/dom": "^10.1.0",
|
||||
"@testing-library/jest-dom": "^6.4.6",
|
||||
"@testing-library/react": "^16.0.0",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/node": "^20.14.8",
|
||||
"@types/react": "18.3.3",
|
||||
"@typescript-eslint/eslint-plugin": "^7.13.1",
|
||||
"@typescript-eslint/parser": "^7.13.1",
|
||||
"babel-loader": "^9.1.3",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^18.0.0",
|
||||
"eslint-config-mantine": "3.2.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-jest": "^28.6.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.9.0",
|
||||
"eslint-plugin-react": "^7.34.3",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-testing-library": "^6.2.2",
|
||||
"jest": "^29.7.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"postcss": "^8.4.38",
|
||||
"postcss-preset-mantine": "1.17.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.5.3",
|
||||
"storybook": "^8.6.8",
|
||||
"prettier": "^3.3.2",
|
||||
"sass-embedded": "^1.80.6",
|
||||
"storybook": "^8.1.10",
|
||||
"storybook-dark-mode": "^4.0.2",
|
||||
"stylelint": "^16.20.0",
|
||||
"stylelint-config-standard-scss": "^15.0.1",
|
||||
"ts-jest": "^29.4.0",
|
||||
"typescript": "5.8.3",
|
||||
"typescript-eslint": "^8.34.0"
|
||||
"stylelint": "^16.6.1",
|
||||
"stylelint-config-standard-scss": "^13.1.0",
|
||||
"ts-jest": "^29.1.5",
|
||||
"typescript": "5.5.2"
|
||||
},
|
||||
"packageManager": "yarn@4.9.4"
|
||||
"packageManager": "yarn@4.5.1"
|
||||
}
|
||||
|
||||
@ -5,9 +5,7 @@ import { theme } from '../theme';
|
||||
export function render(ui: React.ReactNode) {
|
||||
return testingLibraryRender(<>{ui}</>, {
|
||||
wrapper: ({ children }: { children: React.ReactNode }) => (
|
||||
<MantineProvider theme={theme} env="test">
|
||||
{children}
|
||||
</MantineProvider>
|
||||
<MantineProvider theme={theme}>{children}</MantineProvider>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user