(null);
28 |
29 | useDetectKeyboard();
30 |
31 | useEffect(() => {
32 | const startProgress = () => {
33 | if (!progressTimer.current) {
34 | progressTimer.current = setTimeout(NProgress.start, 120);
35 | }
36 | };
37 |
38 | const onComplete = (url) => {
39 | pageview(url);
40 | endProgress(url);
41 | };
42 |
43 | const endProgress = (err) => {
44 | if (progressTimer.current) {
45 | clearTimeout(progressTimer.current);
46 | progressTimer.current = null;
47 |
48 | if (err?.cancelled) {
49 | NProgress.set(0.0);
50 | NProgress.remove();
51 | } else {
52 | NProgress.done();
53 | }
54 | }
55 | };
56 |
57 | router.events.on('routeChangeStart', startProgress);
58 | router.events.on('routeChangeComplete', onComplete);
59 | router.events.on('routeChangeError', endProgress);
60 |
61 | return () => {
62 | router.events.off('routeChangeStart', startProgress);
63 | router.events.off('routeChangeComplete', onComplete);
64 | router.events.off('routeChangeError', endProgress);
65 | };
66 | });
67 |
68 | return (
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | );
77 | };
78 |
79 | export default process.env.PASSWORD_PROTECT
80 | ? withPasswordProtect(MyApp)
81 | : MyApp;
82 |
--------------------------------------------------------------------------------
/.cz-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // add additional standard scopes here
3 | scopes: [{ name: "accounts" }, { name: "admin" }],
4 | // use this to permanently skip any questions by listing the message key as a string
5 | skipQuestions: [],
6 |
7 | /* DEFAULT CONFIG */
8 | messages: {
9 | type: "What type of changes are you committing:",
10 | scope: "\nEnlighten us with the scope (optional):",
11 | customScope: "Add the scope of your liking:",
12 | subject: "Write a short and simple description of the change:\n",
13 | body:
14 | 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
15 | breaking: "List any BREAKING CHANGES (optional):\n",
16 | footer:
17 | "List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n",
18 | confirmCommit: "Are you sure you the above looks right?",
19 | },
20 | types: [
21 | {
22 | value: "fix",
23 | name: "🐛 fix: Changes that fix a bug",
24 | emoji: "🐛",
25 | },
26 | {
27 | value: "feat",
28 | name: " 🚀 feat: Changes that introduce a new feature",
29 | emoji: "🚀",
30 | },
31 | {
32 | value: "refactor",
33 | name:
34 | "🔍 refactor: Changes that neither fixes a bug nor adds a feature",
35 | emoji: "🔍",
36 | },
37 | {
38 | value: "test",
39 | name: "💡 test: Adding missing tests",
40 | emoji: "💡",
41 | },
42 | {
43 | value: "style",
44 | name:
45 | "💅 style: Changes that do not impact the code base \n (white-space, formatting, missing semi-colons, etc)",
46 | emoji: "💅",
47 | },
48 | {
49 | value: "docs",
50 | name: "📝 docs: Changes to the docs",
51 | emoji: "📝",
52 | },
53 | {
54 | value: "chore",
55 | name:
56 | "🤖 chore: Changes to the build process or auxiliary tools\n and or libraries such as auto doc generation",
57 | emoji: "🤖",
58 | },
59 | {
60 | value: "ci",
61 | name:
62 | "👾 ci: Changes related to setup and usage of CI",
63 | emoji: "👾",
64 | },
65 | ],
66 | allowTicketNumber: false,
67 | isTicketNumberRequired: false,
68 | ticketNumberPrefix: "#",
69 | ticketNumberRegExp: "\\d{1,5}",
70 | allowCustomScopes: true,
71 | allowBreakingChanges: ["feat", "fix", "chore"],
72 | breakingPrefix: "🚧 BREAKING CHANGES 🚧",
73 | footerPrefix: "CLOSES",
74 | subjectLimit: 100,
75 | };
76 |
--------------------------------------------------------------------------------
/.github/workflows/test.yaml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [pull_request]
4 |
5 | jobs:
6 | run-tests:
7 | runs-on: ubuntu-latest
8 |
9 | steps:
10 | - name: Checkout repo
11 | uses: actions/checkout@v2
12 |
13 | - name: Setup Node.js
14 | uses: actions/setup-node@v2
15 | with:
16 | node-version: 12
17 |
18 | - name: Get yarn cache directory path
19 | id: yarn-cache-dir-path
20 | run: echo "::set-output name=dir::$(yarn cache dir)"
21 |
22 | - name: Cache yarn dependencies
23 | uses: actions/cache@v2
24 | id: yarn-cache
25 | with:
26 | path: |
27 | ${{ steps.yarn-cache-dir-path.outputs.dir }}
28 | node_modules
29 | */*/node_modules
30 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
31 | restore-keys: |
32 | ${{ runner.os }}-yarn-
33 |
34 | - name: Install modules
35 | run: yarn
36 |
37 | - name: Run tests
38 | run: yarn test
39 |
40 | run-cypress:
41 | runs-on: ubuntu-latest
42 |
43 | steps:
44 | - uses: actions/checkout@v2
45 |
46 | - name: Get deployment URL
47 | uses: patrickedqvist/wait-for-vercel-preview@master
48 | id: waitFor200
49 | with:
50 | token: ${{ secrets.GITHUB_TOKEN }}
51 | max_timeout: 300
52 |
53 | - name: Cypress run
54 | uses: cypress-io/github-action@v2
55 | with:
56 | config: 'baseUrl=${{ steps.waitFor200.outputs.url }}'
57 |
58 | # screenshots are only created on failure, thus we use the "failure()" condition
59 | - uses: actions/upload-artifact@v1
60 | if: failure()
61 | with:
62 | name: cypress-screenshots
63 | path: cypress/screenshots
64 |
65 | # videos are always created, thus we use the "always()" condition
66 | - uses: actions/upload-artifact@v1
67 | if: always()
68 | with:
69 | name: cypress-videos
70 | path: cypress/videos
71 |
72 | run-lighthouse:
73 | runs-on: ubuntu-latest
74 |
75 | steps:
76 | - uses: actions/checkout@v2
77 | - run: mkdir /tmp/artifacts
78 |
79 | - name: Get deployment URL
80 | uses: patrickedqvist/wait-for-vercel-preview@master
81 | id: waitFor200
82 | with:
83 | token: ${{ secrets.GITHUB_TOKEN }}
84 | max_timeout: 300
85 |
86 | - name: Run Lighthouse
87 | uses: foo-software/lighthouse-check-action@master
88 | with:
89 | outputDirectory: /tmp/artifacts
90 | urls: '${{ steps.waitFor200.outputs.url }}'
91 |
92 | - name: Upload artifacts
93 | uses: actions/upload-artifact@master
94 | with:
95 | name: Lighthouse reports
96 | path: /tmp/artifacts
97 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withBundleAnalyzer = require('@next/bundle-analyzer')({
2 | enabled: process.env.ANALYZE === 'true',
3 | });
4 |
5 | const SentryWebpackPlugin = require('@sentry/webpack-plugin');
6 | // const withOffline = require('next-offline')
7 | // Use the hidden-source-map option when you don't want the source maps to be
8 | // publicly available on the servers, only to the error reporting
9 | const withSourceMaps = require('@zeit/next-source-maps');
10 | const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
11 |
12 | // Use the SentryWebpack plugin to upload the source maps during build step
13 | const {
14 | NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
15 | SENTRY_ORG,
16 | SENTRY_PROJECT,
17 | SENTRY_AUTH_TOKEN,
18 | NODE_ENV,
19 | CI_COMMIT_SHA,
20 | PRODUCTION,
21 | } = process.env;
22 |
23 | process.env.SENTRY_DSN = SENTRY_DSN;
24 | const basePath = '';
25 |
26 | module.exports = withBundleAnalyzer(
27 | withSourceMaps({
28 | env: {
29 | // Make the COMMIT_SHA available to the client so that Sentry events can be
30 | // marked for the release they belong to. It may be undefined if running
31 | // outside of Vercel
32 | NEXT_PUBLIC_COMMIT_SHA: CI_COMMIT_SHA,
33 | // Protect staging with a password
34 | PASSWORD_PROTECT: process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging',
35 | },
36 | webpack(config, options) {
37 | config.resolve.plugins = [
38 | new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
39 | ];
40 |
41 | config.module.rules.push({
42 | test: /\.svg$/,
43 | use: [
44 | { loader: '@svgr/webpack', options: { icon: true, svgo: false } },
45 | ],
46 | });
47 |
48 | config.module.rules.push({
49 | test: /\.svg$/,
50 | use: [
51 | { loader: '@svgr/webpack', options: { icon: true, svgo: false } },
52 | ],
53 | });
54 |
55 | // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
56 | // @sentry/node will run in a Node.js environment. @sentry/node will use
57 | // Node.js-only APIs to catch even more unhandled exceptions.
58 | //
59 | // This works well when Next.js is SSRing your page on a server with
60 | // Node.js, but it is not what we want when your client-side bundle is being
61 | // executed by a browser.
62 | //
63 | // Luckily, Next.js will call this webpack function twice, once for the
64 | // server and once for the client. Read more:
65 | // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
66 | //
67 | // So ask Webpack to replace @sentry/node imports with @sentry/browser when
68 | // building the browser's bundle
69 | if (!options.isServer) {
70 | config.resolve.alias['@sentry/node'] = '@sentry/browser';
71 | }
72 |
73 | // Define an environment variable so source code can check whether or not
74 | // it's running on the server so we can correctly initialize Sentry
75 | config.plugins.push(
76 | new options.webpack.DefinePlugin({
77 | 'process.env.NEXT_IS_SERVER': JSON.stringify(
78 | options.isServer.toString(),
79 | ),
80 | }),
81 | );
82 |
83 | // When all the Sentry configuration env variables are available/configured
84 | // The Sentry webpack plugin gets pushed to the webpack plugins to build
85 | // and upload the source maps to sentry.
86 | // This is an alternative to manually uploading the source maps
87 | // Note: This is disabled in development mode.
88 | if (
89 | SENTRY_DSN &&
90 | SENTRY_ORG &&
91 | SENTRY_PROJECT &&
92 | SENTRY_AUTH_TOKEN &&
93 | CI_COMMIT_SHA &&
94 | NODE_ENV === 'production' &&
95 | PRODUCTION
96 | ) {
97 | config.plugins.push(
98 | new SentryWebpackPlugin({
99 | include: '.next',
100 | ignore: ['node_modules'],
101 | stripPrefix: ['webpack://_N_E/'],
102 | urlPrefix: `~${basePath}/_next`,
103 | release: CI_COMMIT_SHA,
104 | }),
105 | );
106 | }
107 |
108 | return config;
109 | },
110 | basePath,
111 | async redirects() {
112 | return [
113 | {
114 | source: '/sitemap.xml',
115 | destination: '/api/sitemap',
116 | permanent: true,
117 | },
118 | ];
119 | },
120 | }),
121 | );
122 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-boilerplate",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "commit": "./node_modules/cz-customizable/standalone.js",
10 | "test": "jest --coverage",
11 | "test:watch": "jest --watch",
12 | "lint": "eslint \"**/*.+(js|jsx|ts|tsx|mdx)\"",
13 | "ts-coverage": "typescript-coverage-report",
14 | "storybook": "start-storybook -s ./public/static -p 6006",
15 | "build-storybook": "build-storybook",
16 | "semantic-release": "semantic-release",
17 | "analyze": "ANALYZE=true next build",
18 | "cy:install": "cypress install",
19 | "cy:run": "cypress run",
20 | "cy:open": "cypress open"
21 | },
22 | "dependencies": {
23 | "@next/bundle-analyzer": "11.0.1",
24 | "@reach/alert": "0.15.3",
25 | "@reach/checkbox": "0.15.3",
26 | "@reach/dialog": "0.15.3",
27 | "@sentry/browser": "6.9.0",
28 | "@sentry/integrations": "6.9.0",
29 | "@sentry/node": "6.9.0",
30 | "@storyofams/next-api-decorators": "1.5.5",
31 | "@storyofams/next-password-protect": "^1.5.8",
32 | "@storyofams/react-helpers": "0.3.8",
33 | "@storyofams/react-ui": "1.2.0",
34 | "@styled-system/css": "5.1.5",
35 | "@styled-system/props": "5.1.5",
36 | "@svgr/webpack": "5.5.0",
37 | "@zeit/next-source-maps": "0.0.3",
38 | "date-fns": "2.22.1",
39 | "fontfaceobserver": "2.1.0",
40 | "framer-motion": "4.1.17",
41 | "next": "11.1.1",
42 | "next-seo": "4.26.0",
43 | "nprogress": "^0.2.0",
44 | "react": "17.0.2",
45 | "react-dom": "17.0.2",
46 | "react-flatpickr": "3.10.7",
47 | "react-hook-form": "7.11.1",
48 | "react-id-generator": "3.0.1",
49 | "react-lazyload": "3.2.0",
50 | "react-query": "3.21.1",
51 | "react-select": "4.3.1",
52 | "sitemap": "7.0.0",
53 | "styled-components": "5.3.0",
54 | "styled-system": "5.1.5",
55 | "system-props": "0.20.0",
56 | "yup": "0.32.9"
57 | },
58 | "devDependencies": {
59 | "@babel/core": "7.14.6",
60 | "@babel/plugin-proposal-decorators": "7.14.5",
61 | "@babel/runtime-corejs2": "7.14.6",
62 | "@commitlint/cli": "12.1.4",
63 | "@commitlint/config-conventional": "12.1.4",
64 | "@jest/types": "27.0.6",
65 | "@semantic-release/changelog": "5.0.1",
66 | "@sentry/webpack-plugin": "1.16.0",
67 | "@storybook/addon-actions": "6.3.4",
68 | "@storybook/addon-controls": "6.3.4",
69 | "@storybook/addon-docs": "6.3.4",
70 | "@storybook/addon-links": "6.3.4",
71 | "@storybook/addon-viewport": "6.3.4",
72 | "@storybook/addons": "6.3.4",
73 | "@storybook/react": "6.3.4",
74 | "@storyofams/eslint-config-ams": "1.1.4",
75 | "@testing-library/cypress": "7.0.6",
76 | "@testing-library/jest-dom": "^5.14.1",
77 | "@testing-library/react": "12.0.0",
78 | "@types/jest": "26.0.24",
79 | "@types/node": "16.3.3",
80 | "@types/react": "17.0.14",
81 | "@types/react-dom": "17.0.9",
82 | "@types/react-select": "4.0.17",
83 | "@types/rebass": "4.0.9",
84 | "@types/styled-components": "5.1.11",
85 | "@types/styled-system": "5.1.12",
86 | "@types/yup": "0.29.13",
87 | "@typescript-eslint/eslint-plugin": "4.28.3",
88 | "@typescript-eslint/parser": "4.28.3",
89 | "awesome-typescript-loader": "5.2.1",
90 | "babel-eslint": "10.1.0",
91 | "babel-loader": "8.2.2",
92 | "babel-plugin-parameter-decorator": "1.0.16",
93 | "babel-plugin-styled-components": "1.13.2",
94 | "babel-plugin-transform-typescript-metadata": "0.3.2",
95 | "babel-preset-react-app": "10.0.0",
96 | "cypress": "7.7.0",
97 | "cypress-hmr-restarter": "2.0.2",
98 | "cz-customizable": "git+https://github.com/storyofams/cz-customizable.git#v6.3.2",
99 | "eslint": "7.31.0",
100 | "eslint-config-next": "^11.0.1",
101 | "eslint-config-prettier": "8.3.0",
102 | "eslint-import-resolver-alias": "1.1.2",
103 | "eslint-plugin-cypress": "2.11.3",
104 | "eslint-plugin-import": "2.23.4",
105 | "eslint-plugin-jsx-a11y": "6.4.1",
106 | "eslint-plugin-mdx": "1.14.1",
107 | "eslint-plugin-prettier": "3.4.0",
108 | "eslint-plugin-react": "7.24.0",
109 | "eslint-plugin-react-hooks": "4.2.0",
110 | "fork-ts-checker-webpack-plugin": "6.2.12",
111 | "husky": "7.0.1",
112 | "jest": "27.0.6",
113 | "jest-axe": "5.0.1",
114 | "lint-staged": "11.0.1",
115 | "node-mocks-http": "1.10.1",
116 | "prettier": "2.3.2",
117 | "react-docgen-typescript-loader": "3.7.2",
118 | "react-select-event": "5.3.0",
119 | "react-test-renderer": "17.0.2",
120 | "semantic-release": "17.4.4",
121 | "ts-jest": "27.0.3",
122 | "ts-loader": "9.2.3",
123 | "ts-node": "10.1.0",
124 | "tsconfig-paths-webpack-plugin": "3.5.1",
125 | "typescript": "4.3.5",
126 | "typescript-coverage-report": "0.6.0"
127 | },
128 | "typeCoverage": {
129 | "atLeast": 90
130 | },
131 | "eslintConfig": {
132 | "extends": [
133 | "@storyofams/eslint-config-ams/web"
134 | ]
135 | },
136 | "commitlint": {
137 | "extends": [
138 | "@commitlint/config-conventional"
139 | ]
140 | },
141 | "config": {
142 | "commitizen": {
143 | "path": "node_modules/cz-customizable"
144 | }
145 | },
146 | "lint-staged": {
147 | "**/*.+(js|jsx|ts|tsx|mdx)": [
148 | "eslint --fix"
149 | ]
150 | }
151 | }
152 |
--------------------------------------------------------------------------------
/src/docs/introduction.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from '@storybook/addon-docs/blocks';
2 |
3 |
4 |
5 | # Next Boilerplate
6 |
7 | Next boilerplate starter template
8 |
9 | ## 🏁 Introduction
10 |
11 | [storybook](https://storybook.js.org/) is an open-source platform that allows developers to keep a consistent overview of the pieces and pages that all make the platform.
12 | In their own words;
13 |
14 | > Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
15 |
16 | There are various implemenations possible with storybook and the effectiveness of those implemenations differ per project.
17 | For our projects we use a simplistic, yet effective approach of displaying pure components and only combine those components into pages if it makes sense to do so.
18 |
19 | ---
20 |
21 | ### 🛠 How it works
22 |
23 | When initiating a project we start out by working out all the different components that exist within the desings.
24 | Those components are created and then replicated in something that storybook calls 'stories'. Stories are a simple representation of the component and the different varations it has within the platform.
25 |
26 | These stories are fun look at on it's own but the fun is just starting. [Addons](https://github.com/storybookjs/storybook/tree/master/addons) for storybook is where the party really starts.
27 |
28 | ### ⚡️ [Addons](https://storybook.js.org/addons/)
29 |
30 | There is a big landscape of storybook owned/maintained addons and some community build ones. It's easy to get overwhelmed when creating a the perfect setup but I think there is a minimal set of addons that can jumpstart any project.
31 | This is the reason why we are making use of a small selection addons of the various addon possibilities within storybook. The following addons are added to this project; [docs](https://github.com/storybookjs/storybook/tree/master/addons/docs), [controls](https://github.com/storybookjs/storybook/tree/master/addons/controls), [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions), [viewport](https://github.com/storybookjs/storybook/tree/master/addons/viewport).
32 | These addons allow for the components we make to be viewed in more documented way, allows for manipulating of the components and enables to choose diferent screen-size to view how that impacts the components (and pages).
33 |
34 | #### 💅 [Theming](https://github.com/storybookjs/storybook/tree/master/addons/theming)
35 |
36 | We all love our colours, fonts and logo's. Especially our logo's!
37 | With this addon we override the default (and boring, but solid) theming storybook provides out of the box and inject it with our owns settings.
38 |
39 | If you are a developer and are looking on how to make sure your storybook project utilizes brand colours, logo's and fonts?
40 | [Go to this section]() in the developer section.
41 |
42 | #### 📚 [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)
43 |
44 | This addon enables a different view from the canvas view. It enables to view all variations within one page and gives more of a documentation style of view.
45 | It has a collapsible box to show the actual code example that was used in the story and displays the different properties that can be passed to the component to influence it's appreance.
46 |
47 | This is the perfect place to show the product to someone at a glance but still get a detailed way of possibilities and possible implementations.
48 |
49 | #### ⚙️ [Controls](https://github.com/storybookjs/storybook/tree/master/addons/controls)
50 |
51 | This awesome new development within storybook alters the way developers write their stories.
52 | Where we used to manually write every property out by hand and define its possible values this is now autogenerated (especially nice for typescript) and manipulates the appearance of the component in real time.
53 |
54 | #### 📝 [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions)
55 |
56 | One of the older addons from this list, but it has been steady on the list since it's inception. This allows to visualize, in the form of logging, certain actions that can be initiated through certain actions.
57 |
58 | The most simple example that demonstrates the purpose of this addon is a button. A button can be used for many different things (code wise) but is only used for one purpose for the customer, which is to click the button.
59 | Some click actions can be recreated within storybook but when writing stupidly simple stories (which is where storybooks thrives by) adding logic just to make the button work is too much overhead.
60 | In this case we could still pass a function to the button by replacing all that logic with a simple `action('clicked')`.
61 | Which when fired will log this in a way that is visible for you.
62 |
63 | This allows for rapid development and gives a clear indication of the 'action(s)' a user executes during storybook usage.
64 |
65 | #### 📱 [viewport](https://github.com/storybookjs/storybook/tree/master/addons/viewport)
66 |
67 | Viewport is an enhancer that powers up storybook with the absolute powers of responsiveness. It allows to choose a viewport in which the component will be displayed. Very usefull if you want to check how the components looks on different sized screens.
68 |
69 | By default we extend the breakpoints to be part of the viewports because those are the screen sizes on which the design differs. Besides the breakpoints we also make use of the default extensive list of devices provided by addon;
70 |
71 | | OS | Devices |
72 | | ------- | -------------------------------------------------------------------------------------------------------------------------- |
73 | | iOS | iPhone 5, iPhone 6, iPhone 6 plus, iPhone 8 plus, iPhone X, iPhone XR, iPhone XS Max, iPad, iPad Pro 10.5', iPad Pro 12.9' |
74 | | Android | Galaxy S5, Galaxy S9, Nexus 5X, Nexus 6P, Pixel, Pixel XL |
75 |
76 | If you feel like you're missing a viewport or device feel free to submit a request to add a specific device.
77 |
78 | ---
79 |
80 | _❗️This document is subject to change over time and we reserve the right to do so without any obligations or restriction❗️_
81 |
--------------------------------------------------------------------------------
/src/styles/CSSreset.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle, css } from 'styled-components';
2 |
3 | const themeStyles = ({ theme }) => css`
4 | html {
5 | font-size: ${theme.fontSizes.root}px;
6 | font-weight: ${theme.fontWeights.regular};
7 |
8 | /* outline only when the user is using tab */
9 | &:not(.user-is-tabbing) {
10 | a[href],
11 | area[href],
12 | input:not([disabled]),
13 | select:not([disabled]),
14 | textarea:not([disabled]),
15 | button:not([disabled]),
16 | iframe,
17 | [tabindex],
18 | [contentEditable='true'] {
19 | outline: none;
20 | }
21 | }
22 | }
23 |
24 | .hidden {
25 | border: 0;
26 | clip: rect(0 0 0 0);
27 | height: 1px;
28 | width: 1px;
29 | margin: -1px;
30 | padding: 0;
31 | overflow: hidden;
32 | position: absolute;
33 | }
34 | `;
35 |
36 | const CSSreset = createGlobalStyle(
37 | ({ theme }) => css`
38 | html {
39 | line-height: 1.15;
40 | -webkit-text-size-adjust: 100%;
41 | }
42 | body {
43 | margin: 0;
44 | }
45 | main {
46 | display: block;
47 | }
48 | hr {
49 | box-sizing: content-box;
50 | height: 0;
51 | overflow: visible;
52 | }
53 | pre {
54 | font-family: monospace, monospace;
55 | font-size: 1em;
56 | }
57 | a {
58 | background-color: transparent;
59 | }
60 | abbr[title] {
61 | border-bottom: none;
62 | text-decoration: underline;
63 | -webkit-text-decoration: underline dotted;
64 | text-decoration: underline dotted;
65 | }
66 | b,
67 | strong {
68 | font-weight: bolder;
69 | }
70 | code,
71 | kbd,
72 | samp {
73 | font-family: monospace, monospace;
74 | font-size: 1em;
75 | }
76 | small {
77 | font-size: 80%;
78 | }
79 | sub,
80 | sup {
81 | font-size: 75%;
82 | line-height: 0;
83 | position: relative;
84 | vertical-align: baseline;
85 | }
86 | sub {
87 | bottom: -0.25em;
88 | }
89 | sup {
90 | top: -0.5em;
91 | }
92 | img {
93 | border-style: none;
94 | }
95 | button,
96 | input,
97 | optgroup,
98 | select,
99 | textarea {
100 | font-family: inherit;
101 | font-size: 100%;
102 | line-height: 1.15;
103 | margin: 0;
104 | }
105 | button {
106 | border: none;
107 | margin: 0;
108 | padding: 0;
109 | width: auto;
110 | overflow: visible;
111 | text-align: inherit;
112 | background: transparent;
113 |
114 | color: inherit;
115 | font: inherit;
116 |
117 | line-height: normal;
118 |
119 | -webkit-font-smoothing: inherit;
120 | -moz-osx-font-smoothing: inherit;
121 |
122 | -webkit-appearance: none;
123 | }
124 | button,
125 | input {
126 | overflow: visible;
127 | }
128 | button,
129 | select {
130 | text-transform: none;
131 | }
132 | button::-moz-focus-inner,
133 | [type='button']::-moz-focus-inner,
134 | [type='reset']::-moz-focus-inner,
135 | [type='submit']::-moz-focus-inner {
136 | border-style: none;
137 | padding: 0;
138 | }
139 | fieldset {
140 | padding: 0.35em 0.75em 0.625em;
141 | }
142 | legend {
143 | box-sizing: border-box;
144 | color: inherit;
145 | display: table;
146 | max-width: 100%;
147 | padding: 0;
148 | white-space: normal;
149 | }
150 | progress {
151 | vertical-align: baseline;
152 | }
153 | textarea {
154 | overflow: auto;
155 | }
156 | [type='checkbox'],
157 | [type='radio'] {
158 | box-sizing: border-box;
159 | padding: 0;
160 | }
161 | [type='number']::-webkit-inner-spin-button,
162 | [type='number']::-webkit-outer-spin-button {
163 | -webkit-appearance: none !important;
164 | }
165 | input[type='number'] {
166 | -moz-appearance: textfield;
167 | }
168 | [type='search'] {
169 | -webkit-appearance: textfield;
170 | outline-offset: -2px;
171 | }
172 | [type='search']::-webkit-search-decoration {
173 | -webkit-appearance: none !important;
174 | }
175 | ::-webkit-file-upload-button {
176 | -webkit-appearance: button;
177 | font: inherit;
178 | }
179 | details {
180 | display: block;
181 | }
182 | summary {
183 | display: list-item;
184 | }
185 | template {
186 | display: none;
187 | }
188 | [hidden] {
189 | display: none !important;
190 | }
191 | html {
192 | box-sizing: border-box;
193 | font-family: sans-serif;
194 | }
195 | *,
196 | *::before,
197 | *::after {
198 | box-sizing: border-box;
199 | }
200 | blockquote,
201 | dl,
202 | dd,
203 | h1,
204 | h2,
205 | h3,
206 | h4,
207 | h5,
208 | h6,
209 | hr,
210 | figure,
211 | p,
212 | pre {
213 | margin: 0;
214 | }
215 | button {
216 | background: transparent;
217 | padding: 0;
218 | }
219 | fieldset {
220 | margin: 0;
221 | padding: 0;
222 | }
223 | ol,
224 | ul {
225 | margin: 0;
226 | padding: 0;
227 | }
228 | html {
229 | font-family: ${theme.fonts.body};
230 | line-height: 1.5;
231 | -webkit-font-smoothing: antialiased;
232 | -webkit-text-size-adjust: 100%;
233 | text-rendering: optimizelegibility;
234 | }
235 | hr {
236 | border-top-width: 1px;
237 | }
238 | textarea {
239 | resize: vertical;
240 | }
241 | button,
242 | [role='button'] {
243 | cursor: pointer;
244 | }
245 | button::-moz-focus-inner {
246 | border: 0 !important;
247 | }
248 | table {
249 | border-collapse: collapse;
250 | }
251 | h1,
252 | h2,
253 | h3,
254 | h4,
255 | h5,
256 | h6 {
257 | font-family: ${theme.fonts.heading};
258 | }
259 | a {
260 | color: inherit;
261 | text-decoration: inherit;
262 | }
263 | button,
264 | input,
265 | optgroup,
266 | select,
267 | textarea {
268 | padding: 0;
269 | line-height: inherit;
270 | color: inherit;
271 | }
272 | pre,
273 | code,
274 | kbd,
275 | samp {
276 | font-family: ${theme.fonts.mono};
277 | }
278 | img,
279 | svg,
280 | video,
281 | canvas,
282 | audio,
283 | iframe,
284 | embed,
285 | object {
286 | display: block;
287 | vertical-align: middle;
288 | }
289 | img,
290 | video {
291 | max-width: 100%;
292 | height: auto;
293 | }
294 |
295 | #nprogress {
296 | z-index: 9999999;
297 |
298 | .bar {
299 | z-index: 9999999;
300 | background: ${theme.colors.primary500};
301 | }
302 |
303 | .peg {
304 | box-shadow: 0 0 10px ${theme.colors.primary500},
305 | 0 0 5px ${theme.colors.primary500};
306 | }
307 |
308 | .spinner {
309 | display: none;
310 | }
311 | }
312 |
313 | ${themeStyles}
314 | `,
315 | );
316 |
317 | export default CSSreset;
318 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
20 |
21 | ---
22 |
23 |
24 | Boilerplate to enable teams to build production grade, highly scalable and flexible react applications with Next.js
25 |
26 |
27 | ---
28 |
29 | # What's included? ([preview deployment](https://next-boilerplate-storyofams.vercel.app/))
30 |
31 | | Name | description |
32 | | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
33 | | [@storyofams/next-api-decorators](https://github.com/storyofams/next-api-decorators) | Collection of decorators to create typed Next.js API routes, with easy request validation and transformation. [View docs](https://next-api-decorators.vercel.app/) |
34 | | [@storyofams/react-ui](https://github.com/storyofams/react-ui) | Collection of UI components build to create a production grade front-end experience. [View components](https://react-ui-storyofams.vercel.app/) |
35 | | [@storyofams/next-password-protect](https://github.com/storyofams/next-password-protect) | Password protect your Next.js deployments. [View demo (Password is secret)](https://next-boilerplate-ten.vercel.app/) |
36 | | [cypress](https://www.cypress.io/) | [cypress-testing-library](https://testing-library.com/docs/cypress-testing-library/intro/) implemented throughout. Be sure to have a look at [their docs](https://testing-library.com/docs/cypress-testing-library/intro/) |
37 | | [date-fns](https://date-fns.org/) | Enabling data manipulation in a comprehensive, yet humanly understandable fashion |
38 | | [eslint](https://github.com/eslint/eslint) | Ensures best practices are top of mind. Uses [@storyofams/eslint-config-ams](https://github.com/storyofams/eslint-config-ams) to get up and running quickly. |
39 | | [husky](https://github.com/typicode/husky) | Used to trigger specific actions on commit (linting files and commit messages) |
40 | | [jest](https://jestjs.io/) | [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/) implemented throughout. Be sure to have a look at [their docs](https://testing-library.com/docs/react-testing-library/example-intro/) |
41 | | [sentry](https://sentry.io/welcome/) | Integration to toggle the sentry implementation on or off without the hassle |
42 | | [sitemap-handler](https://github.com/storyofams/next-boilerplate/blob/master/src/pages/api/sitemap.ts) | Simple implementation for xml-sitemap creation. |
43 | | [storybook](https://storybook.js.org/) | Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. |
44 | | [SWR](https://swr.vercel.app/) | For all your data-handling needs (might get replaced by react-query in the near future) |
45 | | [typescript](https://www.typescriptlang.org/docs/) | Because building a javascript in this day and age git just doesn't feel right without it |
46 |
47 | ## Getting started
48 | *While we are working on a fancy generator* to get the generics bits inserted for you, the easiest thing to do is to **clone the repo**.
49 |
50 | Replace the theme file with your own and go through the files and folders to replace "Story of AMS" references with your own.
51 |
52 | ### Theme
53 |
54 | Basic theming is located in `src/styles/theme` folder.
55 |
56 | For more information on theming and styling see [@storyofams/react-ui](https://github.com/storyofams/react-ui).
57 |
58 | ## File structure
59 |
60 | ```md
61 | - src
62 | - components
63 | - home // components specific to the home page
64 | - common // for all shared components
65 | - List
66 | - list.test.tsx
67 | - list.stories.tsx
68 | - index.tsx // actual component lives here
69 | - config // constants & env variable export
70 | - hooks // custom hooks
71 | - lib // utils, helpers, etc
72 | - pages
73 | - styles // theme folder location (& css-reset + typesript)
74 | ```
75 |
76 | ## SEO
77 |
78 | Uses [next-seo](https://github.com/garmeeh/next-seo).
79 |
80 | Utilizes a default config to get up and running quickly (see `src/config`).
81 | Always include a `` tag with minimal information included on page level.
82 |
83 | ## Sentry
84 |
85 | This project comes out of the box with a sample implementation of [Sentry](https://sentry.io/welcome/) (including sourcemaps).
86 |
87 | You can enable the implementation by setting the keys you've generated as environment variables in your application.
88 |
89 | To get it fully operational requires:
90 |
91 | - generating keys in sentry
92 | - setting up environment variables
93 |
94 | The following keys are needed for the sample implementation:
95 |
96 | ```md
97 | - NEXT_IS_SERVER
98 | - NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR (Used to improve readability of the framepaths in the sourcemaps)
99 | - NODE_ENV (Sentry is only enabled when the `NODE_ENV` is production)
100 | - NEXT_PUBLIC_SENTRY_DSN (The DSN tells the SDK where to send the events)
101 | - NEXT_PUBLIC_COMMIT_SHA (Sets the release)
102 | ```
103 |
104 | To be able to upload the sourcemaps, you will need to add the following keys
105 |
106 | ```md
107 | - SENTRY_ORG
108 | - SENTRY_PROJECT
109 | - SENTRY_AUTH_TOKEN
110 | ```
111 |
112 | When all the Sentry configuration env variables are set, the Sentry webpack plugin gets pushed to the webpack plugins, to build and upload the source maps to sentry.
113 |
114 | This is an alternative to manually uploading the source maps and is disabled in development mode.
115 |
116 | ## Missing something?
117 |
118 | [Open an issue](https://github.com/storyofams/next-boilerplate/issues/new/choose) with your proposed change.
119 |
120 | ## Wanna help out?
121 |
122 | See [contributing.md](https://github.com/storyofams/next-boilerplate/blob/master/.github/CONTRIBUTING.md) to see how you can get started.
123 |
--------------------------------------------------------------------------------
4 |
5 | 
5 | 
11 | 
14 | 
17 |