Docs

app/.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require("path");
 
 module.exports = {
-  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)", "../layout/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../docs/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../components/**/*.stories.@(js|jsx|ts|tsx)", "../layout/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   /* nextjs -> no need to import React and can use alias modules */
   webpackFinal: async (config) => {

app/.storybook/preview.js

@@ -5,6 +5,15 @@ import { OverlayProvider } from '@react-aria/overlays';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      order: [
+        'Intro',
+        'Docs', ['Install', 'Deploy', 'Authentication', 'Fetching', 'Media', 'Tests'],
+        'Components'
+      ],
+    },
+  },
   docs: {
     theme: themes.dark,
   },

app/docs/authentication.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Authentication" />
+
+# Authentication
+
+- next-auth
+- react query hydratation
+- useMe hook

app/docs/deploy.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Deploy" />
+
+# Deploy
+
+- VERCEL for developing
+- DOCKER for staging and production

app/docs/fetching.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Fetching" />
+
+# Fetching
+
+- React query
+- Hooks

app/docs/install.stories.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Install" />
+
+# Install
+## 1. ENVIRONMENT VARIABLES
+create a `.env.local` at the root of the app
+
+```
+NODE_ENV=development
+
+NEXT_PUBLIC_MAPBOX_API_TOKEN=
+STORYBOOK_MAPBOX_API_TOKEN=
+
+NEXT_PUBLIC_API_URL=https://marxan49.westeurope.cloudapp.azure.com
+STORYBOOK_API_URL=https://marxan49.westeurope.cloudapp.azure.com
+
+NEXTAUTH_URL=http://localhost:3000
+```
+
+
+
+## 2. INSTALL DEPENDENCIES
+First, install all the dependencies and packages
+
+`yarn install`
+
+
+
+## 3. DEVELOPMENT
+Once you installed all the dependencies and packages you will be able to run these commands available in `package.json` by using `yarn dev`, `yarn build` or `yarn start`
+
+```json
+// package.json
+"scripts": {
+  "dev": "next dev",
+  "build": "next build",
+  "start": "next start"
+}
+```
+
+These scripts refer to the different stages of developing an application:
+
+- `dev` - Runs next dev which starts Next.js in development mode
+- `build` - Runs next build which builds the application for production usage
+- `start` - Runs next start which starts a Next.js production server

app/docs/intro.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Intro" />
+
+# Intro
+Welcome to `Marxan web`
+
+- [Install](?path=/docs/docs-install--page)
+
+- [Deploy](?path=/docs/docs-deploy--page)
+
+- [Authentication](?path=/docs/docs-authentication--page)
+
+- [Fetching](?path=/docs/docs-fetching--page)
+
+- [Media](?path=/docs/docs-media--page)
+
+- [Tests](?path=/docs/docs-tests--page)

app/docs/media.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Media" />
+
+# Media
+
+- next-optimized-images
+  - Icons and sprites
+  - Images?

app/docs/tests.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Docs/Tests" />
+
+# Tests
+
+- Cypress

app/package.json

@@ -36,7 +36,7 @@
     "@react-stately/searchfield": "^3.1.1",
     "@react-stately/slider": "^3.0.0",
     "@reduxjs/toolkit": "^1.5.0",
-    "@storybook/react": "^6.1.16",
+    "@storybook/react": "^6.2.9",
     "@tailwindcss/custom-forms": "^0.2.1",
     "@tippyjs/react": "^4.2.0",
     "@turf/area": "^6.3.0",
@@ -76,16 +76,16 @@
     "react-popper": "^2.2.4",
     "react-query": "^3.6.0",
     "react-redux": "^7.2.2",
-    "storybook-addon-next-router": "^2.0.3",
+    "storybook-addon-next-router": "^2.0.4",
     "tailwindcss": "^2.0.2",
     "use-debounce": "^6.0.1",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
-    "@storybook/addon-actions": "^6.1.16",
-    "@storybook/addon-essentials": "^6.1.16",
-    "@storybook/addon-links": "^6.1.16",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
     "@types/d3": "^6.3.0",
     "@types/lodash": "^4.14.165",
     "@types/next-auth": "^3.1.25",

app/public/styles/tailwind.storybook.css

@@ -18042,7 +18042,6 @@ input[type='search']::-webkit-search-decoration,
 }
 
 .sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
@@ -48435,7 +48434,6 @@ input[type='search']::-webkit-search-decoration,
   }
 
   .sm\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -78698,7 +78696,6 @@ input[type='search']::-webkit-search-decoration,
   }
 
   .md\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -108961,7 +108958,6 @@ input[type='search']::-webkit-search-decoration,
   }
 
   .lg\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -139224,7 +139220,6 @@ input[type='search']::-webkit-search-decoration,
   }
 
   .xl\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }
 
@@ -169487,7 +169482,6 @@ input[type='search']::-webkit-search-decoration,
   }
 
   .\32xl\:sticky {
-    position: -webkit-sticky;
     position: sticky;
   }