added npm2yarn & updated some docs

Author: mCodex

docs/addToast.md

@@ -8,7 +8,7 @@ Use this method to render a toast on screen.
 
 The available options are:
 
-```javascript
+```jsx
 {
   type?: 'success' | 'error' | 'info' | 'warning'; // default: info
   title?: string;
@@ -18,7 +18,7 @@ The available options are:
 
 For example, displaying a success toast would be:
 
-```javascript
+```jsx
 import { addToast } from 'react-native-rooster';
 
 addToast({

docs/installation.md

@@ -6,17 +6,10 @@ sidebar_label: Installation
 
 To install react-native-rooster's package:
 
-### Using yarn
-
-```bash
-yarn add react-native-rooster styled-components
+```bash npm2yarn
+npm install --save react-native-rooster styled-components
 ```
 
-### Using npm
-
-```bash
-npm i react-native-rooster styled-components
-```
 
 **NOTE:** RNRooster relies on styled-components because it makes easier to handle different kinds of style props and also helps making the code cleaner. You should install manually styled-components in your project (using one of the commands above).
 
@@ -25,7 +18,7 @@ npm i react-native-rooster styled-components
 You must import and wrap your application using our provider. Check out this [example](https://github.com/mCodex/react-native-rooster/blob/master/example/src/routes/index.tsx#L18-L20).
 
 
-```javascript
+```jsx
 import { ToastProvider } from 'react-native-rooster';
 
 <ToastProvider>

docs/removeToast.md

@@ -4,11 +4,12 @@ title: removeToast
 sidebar_label: removeToast
 ---
 
-All toasts are automatically removed after 3s. However, you can manually pop the last toast from screen doing:
+All toasts are automatically removed after 1.5s. However, you can manually pop the last toast from screen doing:
 
-```javascript
+```jsx
 import { removeToast } from 'react-native-rooster';
 
 removeToast();
 ```
 
+**NOTE:** You can also change the default time to dismiss by setting `timeToDismiss`option in `setToastConfig`, for more information check [here](setToastConfig#timetodismiss).

docs/setToastConfig.md

@@ -6,7 +6,7 @@ sidebar_label: setToastConfig
 
 You can change some configs globally.
 
-# bgColor
+## bgColor
 
 You can change the default bgColors for each type of toast.
 
@@ -23,7 +23,7 @@ The default colors are:
 
 An example changing the default success' bgColor to olive:
 
-```javascript
+```jsx
 import { setToastConfig } from 'react-native-rooster';
 
 setToastConfig({
@@ -33,7 +33,7 @@ setToastConfig({
 })
 ```
 
-# font
+## font
 
 You can change the custom fontFamily for the texts.
 
@@ -46,7 +46,7 @@ You can change the custom fontFamily for the texts.
 
 An example changing `fontFamilyBold` to `Montserrat` family:
 
-```javascript
+```jsx
 import { setToastConfig } from 'react-native-rooster';
 
 setToastConfig({
@@ -56,7 +56,7 @@ setToastConfig({
 })
 ```
 
-# timeToDismiss
+## timeToDismiss
 
 You can change the default toast's time to dismiss.
 
@@ -66,7 +66,7 @@ You can change the default toast's time to dismiss.
 
 To change this to 4000ms you can just do:
 
-```javascript
+```jsx
 import { setToastConfig } from 'react-native-rooster';
 
 setToastConfig({

docusaurus.config.js

@@ -1,56 +1,62 @@
 module.exports = {
-  title: "react-native-rooster 🐔",
-  tagline: "An elegant and flexible toast solution for your react-native apps",
-  url: "https://mcodex.dev",
-  baseUrl: "/react-native-rooster/",
-  onBrokenLinks: "throw",
-  favicon: "img/favicon.ico",
-  organizationName: "mcodex",
-  projectName: "react-native-rooster",
+  title: 'react-native-rooster 🐔',
+  tagline: 'An elegant and flexible toast solution for your react-native apps',
+  url: 'https://mcodex.dev',
+  baseUrl: '/react-native-rooster/',
+  onBrokenLinks: 'throw',
+  favicon: 'img/favicon.ico',
+  organizationName: 'mcodex',
+  projectName: 'react-native-rooster',
   themeConfig: {
+    prism: {
+      theme: require('prism-react-renderer/themes/dracula'),
+    },
     googleAnalytics: {
-      trackingID: "UA-79205996-7",
+      trackingID: 'UA-79205996-7',
     },
     navbar: {
-      title: "react-native-rooster",
+      title: 'react-native-rooster',
       logo: {
-        alt: "react-native-rooster logo",
-        src: "img/logo.svg",
+        alt: 'react-native-rooster logo',
+        src: 'img/logo.svg',
       },
       items: [
         {
-          to: "docs/",
-          activeBasePath: "docs",
-          label: "Docs",
-          position: "right",
+          to: 'docs/',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'right',
         },
-        // { to: 'blog', label: 'Blog', position: 'left' },
         {
-          href: "https://github.com/mcodex/react-native-rooster",
-          label: "GitHub",
-          position: "right",
+          href: 'https://github.com/mcodex/react-native-rooster',
+          label: 'GitHub',
+          position: 'right',
         },
       ],
     },
     footer: {
-      style: "dark",
+      style: 'dark',
       copyright: `Copyright © ${new Date().getFullYear()} Made with ❤️ by mCodex`,
     },
   },
   presets: [
     [
-      "@docusaurus/preset-classic",
+      '@docusaurus/preset-classic',
       {
         docs: {
-          homePageId: "overview",
-          sidebarPath: require.resolve("./sidebars.js"),
+          homePageId: 'overview',
+          sidebarPath: require.resolve('./sidebars.js'),
           editUrl:
-            "https://github.com/mcodex/react-native-rooster/edit/website/website/",
+            'https://github.com/mcodex/react-native-rooster/edit/website/website/',
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
+          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
+        },
+        pages: {
+          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
         },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve('./src/css/custom.css'),
         },
       },
     ],

package.json

@@ -13,8 +13,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.0.0-alpha.61",
     "@docusaurus/preset-classic": "^2.0.0-alpha.61",
-    "@mdx-js/react": "^1.6.16",
-    "clsx": "^1.1.1",
+    "npm-to-yarn": "^1.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

src/plugins/remark-npm2yarn.js

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+
+const npmToYarn = require('npm-to-yarn');
+
+// E.g. global install: 'npm i' -> 'yarn'
+const convertNpmToYarn = (npmCode) => npmToYarn(npmCode, 'yarn');
+
+const transformNode = (node) => {
+  const npmCode = node.value;
+  const yarnCode = convertNpmToYarn(node.value);
+  return [
+    {
+      type: 'jsx',
+      value:
+        '<Tabs groupId="npm2yarn" defaultValue="npm" '
+        + `values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'Yarn', value: 'yarn', },
+  ]}
+>
+<TabItem value="npm">`,
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: npmCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n<TabItem value="yarn">',
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: yarnCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n</Tabs>',
+    },
+  ];
+};
+
+const matchNode = (node) => node.type === 'code' && node.meta === 'npm2yarn';
+const nodeForImport = {
+  type: 'import',
+  value:
+    "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
+};
+
+module.exports = () => {
+  let transformed = false;
+  const transformer = (node) => {
+    if (matchNode(node)) {
+      transformed = true;
+      return transformNode(node);
+    }
+    if (Array.isArray(node.children)) {
+      let index = 0;
+      while (index < node.children.length) {
+        const result = transformer(node.children[index]);
+        if (result) {
+          node.children.splice(index, 1, ...result);
+          index += result.length;
+        } else {
+          index += 1;
+        }
+      }
+    }
+    if (node.type === 'root' && transformed) {
+      node.children.unshift(nodeForImport);
+    }
+    return null;
+  };
+  return transformer;
+};

yarn.lock

@@ -1435,11 +1435,6 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.14.tgz#20c64d6691a894227cd04006b620e5fff85f79b1"
   integrity sha512-WN4OWXiSTN5x1Ee0ZeYQ9bjjSSgH3Mfx/ezcSV3T691C/PcHTNWwJa5qhcuq8V/NrVAeMc26aXuSdOAq6sRb1g==
 
-"@mdx-js/react@^1.6.16":
-  version "1.6.16"
-  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.16.tgz#538eb14473194d0b3c54020cb230e426174315cd"
-  integrity sha512-+FhuSVOPo7+4fZaRwWuCSRUcZkJOkZu0rfAbBKvoCg1LWb1Td8Vzi0DTLORdSvgWNbU6+EL40HIgwTOs00x2Jw==
-
 "@mdx-js/util@1.6.14":
   version "1.6.14"
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.14.tgz#e3c14aef1c721b79ca7afa4d54ed7b5817a973c7"
@@ -6926,6 +6921,11 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
+npm-to-yarn@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-to-yarn/-/npm-to-yarn-1.0.1.tgz#6cdb95114c4ff0be50a7a2381d4d16131a5f52df"
+  integrity sha512-bp8T8oNMfLW+N/fE0itFfSu7RReytwhqNd9skbkfHfzGYC+5CCdzS2HnaXz6JiG4AlK2eA0qlT6NJN1SoFvcWQ==
+
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"