mirror of
https://github.com/mantinedev/next-app-template.git
synced 2025-11-10 04:22:01 +10:00
Compare commits
2 Commits
mantine-te
...
sass
| Author | SHA1 | Date | |
|---|---|---|---|
| f5e9f6870b | |||
| 2a3b76badf |
@ -1,3 +1 @@
|
||||
*.cjs
|
||||
*.mjs
|
||||
*.js
|
||||
152
.gitignore
vendored
152
.gitignore
vendored
@ -1,132 +1,38 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
# vercel
|
||||
.vercel
|
||||
*.tsbuildinfo
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
.DS_Store
|
||||
# storybook
|
||||
storybook-static
|
||||
@ -1,16 +1,10 @@
|
||||
import type { StorybookConfig } from '@storybook/nextjs';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
|
||||
addons: [
|
||||
'@storybook/addon-essentials',
|
||||
'storybook-dark-mode',
|
||||
'@storybook/addon-styling-webpack',
|
||||
],
|
||||
addons: ['@storybook/addon-essentials', 'storybook-dark-mode', '@storybook/addon-styling'],
|
||||
framework: {
|
||||
name: '@storybook/nextjs',
|
||||
options: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
.next
|
||||
out
|
||||
@ -1,28 +0,0 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard-scss"],
|
||||
"rules": {
|
||||
"custom-property-pattern": null,
|
||||
"selector-class-pattern": null,
|
||||
"scss/no-duplicate-mixins": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"alpha-value-notation": null,
|
||||
"custom-property-empty-line-before": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"color-function-notation": null,
|
||||
"length-zero-no-unit": null,
|
||||
"selector-not-notation": null,
|
||||
"no-descending-specificity": null,
|
||||
"comment-empty-line-before": null,
|
||||
"scss/at-mixin-pattern": null,
|
||||
"scss/at-rule-no-unknown": null,
|
||||
"value-keyword-case": null,
|
||||
"media-feature-range-notation": null,
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": ["global"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
893
.yarn/releases/yarn-4.0.1.cjs
vendored
893
.yarn/releases/yarn-4.0.1.cjs
vendored
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
||||
nodeLinker: node-modules
|
||||
yarnPath: .yarn/releases/yarn-4.0.1.cjs
|
||||
52
_mantine.scss
Normal file
52
_mantine.scss
Normal file
@ -0,0 +1,52 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction mixins if you need rtl support
|
||||
@mixin rtl {
|
||||
[dir='rtl'] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr {
|
||||
[dir='ltr'] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
18
components/Welcome/Welcome.module.scss
Normal file
18
components/Welcome/Welcome.module.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.title {
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
font-size: 100px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -2px;
|
||||
|
||||
@include dark {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
@include light {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
@media (max-width: $mantine-breakpoint-md) {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
import { render, screen, tests } from '@/test-utils';
|
||||
import { render, screen } from '@/test-utils';
|
||||
import { Welcome } from './Welcome';
|
||||
|
||||
describe('Welcome component', () => {
|
||||
tests.itSupportsClassName({ component: Welcome, props: {} });
|
||||
|
||||
it('has correct Next.js theming section link', () => {
|
||||
render(<Welcome />);
|
||||
expect(screen.getByText('this guide')).toHaveAttribute(
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Title, Text, Anchor } from '@mantine/core';
|
||||
import classes from './Welcome.module.css';
|
||||
import classes from './Welcome.module.scss';
|
||||
|
||||
export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
export function Welcome() {
|
||||
return (
|
||||
<div {...props}>
|
||||
<>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Welcome to{' '}
|
||||
<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
|
||||
@ -18,6 +18,6 @@ export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
</Anchor>
|
||||
. To get started edit page.tsx file.
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ const createJestConfig = nextJest({
|
||||
});
|
||||
|
||||
const customJestConfig = {
|
||||
setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
|
||||
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
|
||||
moduleNameMapper: {
|
||||
'^@/components/(.*)$': '<rootDir>/components/$1',
|
||||
'^@/pages/(.*)$': '<rootDir>/pages/$1',
|
||||
@ -1,4 +1,4 @@
|
||||
require('@testing-library/jest-dom');
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
|
||||
const { getComputedStyle } = window;
|
||||
window.getComputedStyle = (elt) => getComputedStyle(elt);
|
||||
@ -1,10 +1,8 @@
|
||||
import bundleAnalyzer from '@next/bundle-analyzer';
|
||||
|
||||
const withBundleAnalyzer = bundleAnalyzer({
|
||||
const withBundleAnalyzer = require('@next/bundle-analyzer')({
|
||||
enabled: process.env.ANALYZE === 'true',
|
||||
});
|
||||
|
||||
export default withBundleAnalyzer({
|
||||
module.exports = withBundleAnalyzer({
|
||||
reactStrictMode: false,
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
@ -12,4 +10,8 @@ export default withBundleAnalyzer({
|
||||
experimental: {
|
||||
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
|
||||
},
|
||||
|
||||
sassOptions: {
|
||||
prependData: `@import "./_mantine.scss";`,
|
||||
},
|
||||
});
|
||||
85
package.json
85
package.json
@ -8,8 +8,7 @@
|
||||
"analyze": "ANALYZE=true next build",
|
||||
"start": "next start",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "next lint && npm run lint:stylelint",
|
||||
"lint:stylelint": "stylelint '**/*.css' --cache",
|
||||
"lint": "next lint",
|
||||
"jest": "jest",
|
||||
"jest:watch": "jest --watch",
|
||||
"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
|
||||
@ -19,56 +18,52 @@
|
||||
"storybook:build": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "7.2.2",
|
||||
"@mantine/hooks": "7.2.2",
|
||||
"@next/bundle-analyzer": "^14.0.1",
|
||||
"@tabler/icons-react": "^2.40.0",
|
||||
"next": "14.0.1",
|
||||
"@mantine/core": "7.1.3",
|
||||
"@mantine/hooks": "7.1.3",
|
||||
"@next/bundle-analyzer": "^13.5.3",
|
||||
"@tabler/icons-react": "^2.20.0",
|
||||
"next": "13.5.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.2",
|
||||
"@mantine-tests/core": "^1.0.1",
|
||||
"@next/eslint-plugin-next": "^14.0.1",
|
||||
"@storybook/addon-essentials": "^7.5.2",
|
||||
"@storybook/addon-styling-webpack": "^0.0.5",
|
||||
"@storybook/blocks": "^7.5.2",
|
||||
"@storybook/nextjs": "^7.5.2",
|
||||
"@storybook/react": "^7.5.2",
|
||||
"@testing-library/dom": "^9.3.3",
|
||||
"@testing-library/jest-dom": "^6.1.4",
|
||||
"@babel/core": "^7.22.1",
|
||||
"@next/eslint-plugin-next": "^13.5.3",
|
||||
"@storybook/addon-essentials": "^7.4.3",
|
||||
"@storybook/addon-styling": "^1.0.8",
|
||||
"@storybook/blocks": "^7.4.3",
|
||||
"@storybook/nextjs": "^7.4.3",
|
||||
"@storybook/react": "^7.4.3",
|
||||
"@testing-library/dom": "^9.3.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"@testing-library/user-event": "^14.5.1",
|
||||
"@types/jest": "^29.5.7",
|
||||
"@types/node": "^20.8.10",
|
||||
"@types/react": "18.2.34",
|
||||
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
||||
"@typescript-eslint/parser": "^6.9.1",
|
||||
"babel-loader": "^9.1.3",
|
||||
"eslint": "^8.53.0",
|
||||
"@testing-library/user-event": "^14.4.3",
|
||||
"@types/jest": "^29.5.1",
|
||||
"@types/node": "^20.2.5",
|
||||
"@types/react": "18.2.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.7",
|
||||
"@typescript-eslint/parser": "^5.59.7",
|
||||
"babel-loader": "^9.1.2",
|
||||
"eslint": "^8.41.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^17.1.0",
|
||||
"eslint-config-mantine": "3.0.0",
|
||||
"eslint-plugin-import": "^2.29.0",
|
||||
"eslint-plugin-jest": "^27.6.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-mantine": "2.0.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-jest": "^27.2.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-testing-library": "^6.1.0",
|
||||
"jest": "^29.7.0",
|
||||
"jest-axe": "^8.0.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss-preset-mantine": "1.11.0",
|
||||
"eslint-plugin-testing-library": "^5.11.0",
|
||||
"jest": "^29.5.0",
|
||||
"jest-environment-jsdom": "^29.5.0",
|
||||
"postcss": "^8.4.23",
|
||||
"postcss-preset-mantine": "1.8.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.0.3",
|
||||
"storybook": "^7.5.2",
|
||||
"storybook-dark-mode": "^3.0.1",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-standard-scss": "^11.1.0",
|
||||
"ts-jest": "^29.1.1",
|
||||
"prettier": "^2.8.8",
|
||||
"sass": "^1.69.3",
|
||||
"storybook": "^7.4.3",
|
||||
"storybook-dark-mode": "^3.0.0",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "5.2.2"
|
||||
},
|
||||
"packageManager": "yarn@4.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
export { tests } from '@mantine-tests/core';
|
||||
export * from '@testing-library/react';
|
||||
export { render } from './render';
|
||||
export { userEvent };
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": ["node", "jest", "@testing-library/jest-dom"],
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
@ -16,10 +19,23 @@
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"plugins": [{ "name": "next" }]
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user