update documentation

Author: JeremyDolle

documentation/.eslintrc.js

@@ -18,6 +18,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# ESLint
-.eslintcache

documentation/.gitignore

@@ -1,18 +1,11 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
   title: 'React Native Boilerplate',
   tagline: 'Ready to use react native architecture based on Separation of Concerns.',
   url: 'https://thecodingmachine.github.io',
   baseUrl: '/react-native-boilerplate/',
   onBrokenLinks: 'warn',
+  onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.png',
   organizationName: 'thecodingmachine',
   projectName: 'react-native-boilerplate',

documentation/.prettierignore

@@ -9,35 +9,24 @@
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
     "ci": "yarn lint && yarn prettier:diff",
     "lint": "eslint --cache \"**/*.js\" && stylelint \"**/*.css\"",
     "prettier": "prettier --config .prettierrc --write \"**/*.{js,md}\"",
     "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,md}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.72",
-    "@docusaurus/preset-classic": "2.0.0-alpha.72",
+    "@docusaurus/core": "2.0.0-alpha.73",
+    "@docusaurus/preset-classic": "2.0.0-alpha.73",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.1",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-header": "^3.0.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
-    "prettier": "^2.0.2",
-    "stylelint": "^13.2.1"
-  },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.5%",
       "not dead",
       "not op_mini all"
     ],

documentation/.prettierrc

@@ -1,49 +1,26 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-const fs = require('fs')
-
-const autoGenerated = (root = 'docs', path = root) => fs.readdirSync(path).filter(x => x !== 'assets').reduce((acc, item) => {
-  if (fs.lstatSync(`${path}/${item}`).isDirectory()) {
-    const listOfFilesInDirectory = autoGenerated(root, `${path}/${item}`)
-    return {
-      ...acc,
-      ...listOfFilesInDirectory || {}
-    }
-  }
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
 
-  const actualPath = path.split(`${root}/`)[1] || 'others'
-  const olderValues = actualPath !== 'others' ? (acc[path.split(`${root}/`)[1]] || []) : (acc.others || [])
+ The sidebars can be generated from the filesystem, or explicitly defined here.
 
-  return {
-    ...acc,
-    [actualPath]: [
-      ...olderValues,
-      `${path.split(`${root}/`).slice(1)}/${item}`.replace(/\.[^.]*$/, ''),
-    ]
-  }
-}, {})
+ Create as many sidebars as you want.
+ */
 
 module.exports = {
-  docs: Object.entries(autoGenerated()).reduce((acc, [key, value]) => {
-    if (key !== 'others') {
-      return [
-        ...acc,
-        {
-          type: 'category',
-          label: key.replace(/^[^_]*_/, ''),
-          items: value,
-        },
-      ]
-    }
-    return [
-      ...acc,
-      ...value.map(item=> ({type: 'doc', id: item.split('/').pop()}))
-    ]
-  }, [])
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
 };

documentation/.stylelintrc.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageDependencies.module.css';
+
+const DependencyList = [
+  {
+    title: 'Redux',
+    Svg: require('../../static/img/dependencies/redux.svg').default,
+  },
+  {
+    title: 'React-Navigation',
+    Svg: require('../../static/img/dependencies/react-navigation.svg').default,
+  },
+  {
+    title: 'Flipper',
+    path: '../../static/img/dependencies/flipper.png',
+  },
+  {
+    title: 'Prettier',
+    Svg: require('../../static/img/dependencies/prettier.svg').default,
+  },
+  {
+    title: 'Eslint',
+    Svg: require('../../static/img/dependencies/eslint.svg').default,
+  },
+  {
+    title: 'I18next',
+    Svg: require('../../static/img/dependencies/i18next.svg').default,
+  },
+];
+
+function Dependency({Svg, path, title}) {
+  return (
+    <div className={clsx('col col--2')}>
+      <div className="text--center">
+        { path && <img className={styles.dependencySvg} src={path} alt={title}/> }
+        { Svg && <Svg className={styles.dependencySvg} alt={title} />}
+      </div>
+      <div className="text--center padding-horiz--md">
+        <p className="text--bold text--secondary">{title}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <>
+      <h1 className="text--center text--primary">Based on solid libraries</h1>
+      <section className={styles.dependencies}>
+        <div className="container">
+          <div className="row">
+            {DependencyList.map((props, idx) => (
+              <Dependency key={idx} {...props} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+
+  );
+}

documentation/docusaurus.config.js

@@ -0,0 +1,13 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.dependencies {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.dependencySvg {
+  height: 100px;
+  width: 100px;
+}