feat(theme): rework the tom character and the ui of the boilerplate (#342)

* feat(theme): rework the tom character and the ui of the boilerplate

* chore(version): bump patch version

* fix(reanimated): mock the reanimated dep

---------

Co-authored-by: jeremydolle <j.dolle@thecodingmachine.com>

Author: JeremyDolle

README.md

@@ -37,5 +37,7 @@ module.exports = {
     'import/no-unresolved': [2, { ignore: ['^@theme', '^@docusaurus', '^@site'] }],
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
+    'import/no-relative-packages': 'off',
+    'global-require': 'off',
   },
 };

documentation/.eslintrc.js

@@ -1,3 +1,10 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  plugins: [
+    ['module-resolver', {
+      alias: {
+        'react-native': './mocks/react-native-mock',
+      },
+    }],
+  ],
 };

documentation/babel.config.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+function Tom() {
+  return (
+    <div className="flex justify-center items-center mb-5">
+      <img
+        width="300"
+        height="300"
+        className="dark:block hidden dark:block"
+        src={require('../../static/img/tom_dark.png').default}
+        alt="tom"
+      />
+
+      <img
+        width="300"
+        height="300"
+        className="dark:hidden sm:block"
+        src={require('../../static/img/tom_light.png').default}
+        alt="tom"
+      />
+    </div>
+  );
+}
+
+export default Tom;

documentation/docs/1_Introduction.mdx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import packageJson from '../../../template/package.json';
+
+type Props = {
+    name: string
+    dev: boolean
+};
+
+function VersionReader({ name, dev }: Props) {
+  return (
+    <span>
+      {packageJson[dev ? 'devDependencies' : 'dependencies'][name]}
+    </span>
+  );
+}
+
+export default VersionReader;

documentation/docs/assets/TOM.png

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const StyleSheet = {
+  create: (arg: any) => arg,
+};

documentation/docs/components/Tom.tsx

@@ -29,13 +29,14 @@
     "@tsconfig/docusaurus": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^10.4.13",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.7.4"

documentation/docs/components/VersionReader.tsx

@@ -29,9 +29,8 @@ export default function Quickstart() {
             <div>
               <button
                 type="button"
-                className="
-        transition-all
-        ease-in mt-5 hover:bg-green-700 hover:text-white hover:text text-md text-white font-bold py-3 px-4 rounded bg-green-500 shadow-lg shadow-green-500/50"
+                className="transition-all ease-in mt-5 hover:bg-green-700 hover:text-white hover:text text-md text-white
+                font-bold py-3 px-4 rounded bg-green-500 shadow-lg shadow-green-500/50"
                 onClick={() => { navigator.clipboard.writeText('npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate'); }}
               >
                 Copy and test it
@@ -41,14 +40,14 @@ export default function Quickstart() {
           </div>
 
           <img
-            className="dark:block pointer-events-none hidden dark:sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-            src="./img/phone-dark.png"
+            className="pointer-events-none hidden dark:sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            src="./img/phone_dark.png"
             alt="phone"
           />
 
           <img
-            className="dark:hidden pointer-events-none hidden sm:block w-full md:w-[80%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[32%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-1/3 md:-translate-y-1/3 lg:-translate-y-1/2"
-            src="./img/phone.png"
+            className="dark:hidden pointer-events-none hidden sm:block w-3/4 md:w-[70%] 2xl:w-[85%] lg:w-2/3 mr-0 translate-x-[27%] md:translate-x-[20%] lg:translate-x-[15%] 2xl:translate-x-[28%] -translate-y-[43%]"
+            src="./img/phone_light.png"
             alt="phone"
           />
         </div>