@bigbinary/neetoui 2.0.57 → 2.0.61

package/README.md

@@ -39,7 +39,11 @@ NeetoUI gets auto-published to npm on new commit to master. You can checkout the
 
 ## Documentation
 
-Read the docs here: https://neetoui.netlify.app.
+Read the docs here
+
+v1 : https://neetoui.netlify.app
+
+v2 : https://neetoui-v2.netlify.app
 
 ## Theming
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "2.0.57",
+  "version": "2.0.61",
   "main": "./neetoui.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -39,12 +39,10 @@
     "postcss": "^7",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^4.0.3",
-    "postcss-prefixer": "^2.1.3",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
     "ramda": "^0.27.1",
     "react": "^16.13.1",
-    "react-classname-prefix-loader": "git+https://github.com/edwinbbu/react-classname-prefix-loader",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
@@ -84,7 +82,7 @@
     "react-toastify": "^8.0.2"
   },
   "dependencies": {
-    "@bigbinary/neeto-icons": "^1.6.5",
+    "@bigbinary/neeto-icons": "^1.7.0",
     "@popperjs/core": "^2.9.2",
     "@reach/auto-id": "^0.15.0",
     "@tailwindcss/forms": "^0.3.2",

package/postcss.config.js

@@ -9,16 +9,5 @@ module.exports = {
       stage: 3,
     }),
     require("cssnano"),
-    require("postcss-prefixer")({
-      prefix: "v2-",
-      ignore: [
-        /tw-/,
-        /Toastify/,
-        /tippy-box/,
-        /tippy-arrow/,
-        /tippy-content/,
-        /tippy-svg-arrow/,
-      ],
-    }),
   ],
 };

package/stories/Alert.stories.jsx

@@ -4,13 +4,13 @@ import Alert from "../lib/components/Alert";
 import Button from "../lib/components/Button";
 
 export default {
-  title: "Components/Alert",
+  title: "Overlays/Alert",
   component: Alert,
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Alert } from "@bigbinary/neetoui";`',
+        component: '`import { Alert } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Avatar.stories.jsx

@@ -14,9 +14,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Avatar } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Avatar } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Button.stories.jsx

@@ -10,11 +10,10 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Button } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Button } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
-
 };
 
 const Template = (args) => <Button {...args} />;

package/stories/Callout.stories.jsx

@@ -10,7 +10,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Callout } from "@bigbinary/neetoui";`',
+        component: '`import { Callout } from "@bigbinary/neetoui/v2";`',
       },
     },
   },
@@ -33,9 +33,5 @@ export const WarningCallout = () => {
 };
 
 export const DangerCallout = () => {
-  return (
-    <Callout style="danger">
-      This is an info callout!
-    </Callout>
-  );
+  return <Callout style="danger">This is an info callout!</Callout>;
 };

package/stories/Checkout.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Checkbox } from "@bigbinary/neetoui";`',
+        component: '`import { Checkbox } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Color.stories.mdx

@@ -2,112 +2,112 @@ import { Meta } from "@storybook/addon-docs";
 
 export const colorPalette = [
   {
-    name: "$nui-white",
+    name: "$neeto-ui-white",
     value: "#ffffff",
     compiledValue: "#ffffff",
   },
   {
-    name: "$nui-black",
+    name: "$neeto-ui-black",
     value: "#1b1f23",
     compiledValue: "#1b1f23",
   },
   {
-    name: "$nui-gray-800",
+    name: "$neeto-ui-gray-800",
     value: "#2f3941",
     compiledValue: "#2f3941",
   },
   {
-    name: "$nui-gray-700",
+    name: "$neeto-ui-gray-700",
     value: "#49545c",
     compiledValue: "#49545c",
   },
   {
-    name: "$nui-gray-600",
+    name: "$neeto-ui-gray-600",
     value: "#68737d",
     compiledValue: "#68737d",
   },
   {
-    name: "$nui-gray-500",
+    name: "$neeto-ui-gray-500",
     value: "#87929d",
     compiledValue: "#87929d",
   },
   {
-    name: "$nui-gray-400",
+    name: "$neeto-ui-gray-400",
     value: "#c2c8cc",
     compiledValue: "#c2c8cc",
   },
   {
-    name: "$nui-gray-300",
+    name: "$neeto-ui-gray-300",
     value: "#d8dcde",
     compiledValue: "#d8dcde",
   },
   {
-    name: "$nui-gray-200",
+    name: "$neeto-ui-gray-200",
     value: "#e9ebed",
     compiledValue: "#e9ebed",
   },
   {
-    name: "$nui-gray-100",
+    name: "$neeto-ui-gray-100",
     value: "#f8f9f9",
     compiledValue: "#f8f9f9",
   },
   {
-    name: "$nui-success",
+    name: "$neeto-ui-success",
     value: "#00ba88",
     compiledValue: "#00ba88",
   },
   {
-    name: "$nui-info",
+    name: "$neeto-ui-info",
     value: "#276ef1",
     compiledValue: "#276ef1",
   },
   {
-    name: "$nui-warning",
+    name: "$neeto-ui-warning",
     value: "#f3cd82",
     compiledValue: "#f3cd82",
   },
   {
-    name: "$nui-error",
+    name: "$neeto-ui-error",
     value: "#f56a58",
     compiledValue: "#f56a58",
   },
   {
-    name: "$nui-pastel-blue",
+    name: "$neeto-ui-pastel-blue",
     value: "#eaf3fc",
     compiledValue: "#eaf3fc",
   },
   {
-    name: "$nui-pastel-green",
+    name: "$neeto-ui-pastel-green",
     value: "#ebf5ec",
     compiledValue: "#ebf5ec",
   },
   {
-    name: "$nui-pastel-yellow",
+    name: "$neeto-ui-pastel-yellow",
     value: "#fff2d7",
     compiledValue: "#fff2d7",
   },
   {
-    name: "$nui-pastel-red",
+    name: "$neeto-ui-pastel-red",
     value: "#ffefed",
     compiledValue: "#ffefed",
   },
   {
-    name: "$nui-pastel-teal",
+    name: "$neeto-ui-pastel-teal",
     value: "#98f3f4",
     compiledValue: "#98f3f4",
   },
   {
-    name: "$nui-secondary-indigo",
+    name: "$neeto-ui-secondary-indigo",
     value: "#5e5ce6",
     compiledValue: "#5e5ce6",
   },
   {
-    name: "$nui-secondary-green",
+    name: "$neeto-ui-secondary-green",
     value: "#00ba88",
     compiledValue: "#00ba88",
   },
   {
-    name: "$nui-secondary-teal",
+    name: "$neeto-ui-secondary-teal",
     value: "#64d2ff",
     compiledValue: "#64d2ff",
   },
@@ -141,8 +141,8 @@ export const colorPalette = [
           <td>
             <div
               className={`w-12 h-12 cursor-pointer rounded-full shadow-xl ${color.name.replace(
-                "$nui",
-                "nui-bg"
+                "$neeto-ui",
+                "neeto-ui-bg"
               )}`}
             ></div>
           </td>
@@ -154,14 +154,14 @@ export const colorPalette = [
           </td>
           <td>
             <div className="flex justify-between">
-              <code>{`.${color.name.replace("$nui", "nui-text")}`}</code>
-              <b className={`ml-2 ${color.name.replace("$nui", "nui-text")}`}>
+              <code>{`.${color.name.replace("$neeto-ui", "neeto-ui-text")}`}</code>
+              <b className={`ml-2 ${color.name.replace("$neeto-ui", "neeto-ui-text")}`}>
                 Aa
               </b>
             </div>
           </td>
-          <td className={`${color.name.replace("$nui", "nui-bg")}`}>
-            <code>{`.${color.name.replace("$nui", "nui-bg")}`}</code>
+          <td className={`${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}>
+            <code>{`.${color.name.replace("$neeto-ui", "neeto-ui-bg")}`}</code>
           </td>
         </tr>
       );

package/stories/Dropdown.stories.jsx

@@ -10,9 +10,9 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Dropdown } from "@bigbinary/neetoui";`'
-      }
-    }
+        component: '`import { Dropdown } from "@bigbinary/neetoui/v2";`',
+      },
+    },
   },
 };
 

package/stories/Iconography.stories.jsx

@@ -1,15 +1,32 @@
 import React from "react";
 import * as iconset from "@bigbinary/neeto-icons";
 
+const applications = [
+  "NeetoAnalytics",
+  "NeetoCal",
+  "NeetoChangelog",
+  "NeetoChat",
+  "NeetoDesk",
+  "NeetoForm",
+  "NeetoInsights",
+  "NeetoInterview",
+  "NeetoInvisible",
+  "NeetoKb",
+  "NeetoQuiz",
+  "NeetoReplay",
+  "NeetoWireframe",
+];
+
 export default {
   title: "Foundation/Iconography",
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { ClockIcon } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<ClockIcon color="#1e1e20" size={24} />`',
-      }
-    }
+        component:
+          '`import { ClockIcon } from "@bigbinary/neeto-icons";` <br><br> Anywhere in your React file <br><br> `<ClockIcon color="#1e1e20" size={24} />`',
+      },
+    },
   },
 };
 
@@ -38,13 +55,13 @@ export const Iconography = () => {
           <span>Source</span>
         </a>
       </p>
-      <div className="grid grid-cols-4 lg:grid-cols-8 gap-3">
+      <div className="grid grid-cols-4 gap-3 lg:grid-cols-8">
         {iconset.iconList.map((icon) => {
           const Component = iconset[icon];
           return (
             <div
               key={icon}
-              className="flex items-center justify-center p-5 bg-gray-50 hover:bg-gray-100 rounded-lg flex-col cursor-pointer transition-colors"
+              className="flex flex-col items-center justify-center p-5 transition-colors rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"
             >
               <Component />
               <div className="mt-2 text-xs">{icon}</div>
@@ -55,3 +72,49 @@ export const Iconography = () => {
     </div>
   );
 };
+
+export const ApplicationIcons = () => {
+  return (
+    <div className="p-4">
+      <div className="table border-collapse">
+        <thead>
+          <tr>
+            <th className="p-4 text-left border border-gray-200"></th>
+            <th className="p-4 text-left border border-gray-200">Application</th>
+            <th className="p-4 text-left border border-gray-200">Gradient Class</th>
+            <th className="p-4 text-left border border-gray-200">Icon</th>
+          </tr>
+        </thead>
+        <tbody>
+          {applications.map((application) => {
+            const Component = iconset[application];
+            return (
+              <tr className="">
+                <td className="p-4 text-center border border-gray-200">  
+                  <div
+                    className={`neeto-ui-app-switcher-link__icon-holder m-0 ${application
+                      .toLocaleLowerCase()
+                      .replace("neeto", "gradient--")}`}
+                  >
+                    <Component color="#fff" />
+                  </div>
+                </td>
+                <td className="p-4 text-left border border-gray-200">
+                  <b className="p-1 px-2 text-xs">{application}</b>
+                </td>
+                <td className="p-4 text-left border border-gray-200">
+                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{`.${application
+                    .toLocaleLowerCase()
+                    .replace("neeto", "gradient--")}`}</code>
+                </td>
+                <td className="p-4 text-left border border-gray-200">
+                  <code className="p-1 px-2 text-xs bg-gray-100 rounded">{application}</code>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </div>
+    </div>
+  );
+};

package/stories/Input.stories.jsx

@@ -10,7 +10,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Input } from "@bigbinary/neetoui";`',
+        component: '`import { Input } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Introduction.stories.mdx

@@ -58,7 +58,10 @@ yarn add @bigbinary/neetoui
 For other installation methods, refer our [**official npm page**](https://www.npmjs.com/package/@bigbinary/neetoui)
 
 <div className="tip-wrapper">
-  <span className="tip">To use NeetoUI, you need a recent version of React.js installed (version 16.13.1+ recommended)</span>
+  <span className="tip">
+    To use NeetoUI, you need a recent version of React.js installed (version
+    16.13.1+ recommended)
+  </span>
 </div>
 
 <div className="subheading">Basic Usage</div>
@@ -68,14 +71,14 @@ For other installation methods, refer our [**official npm page**](https://www.np
 NeetoUI exports all it’s component as named exports. You can individually import necessary components in the following way:
 
 ```
-import { Button, Tooltip, } from "@bigbinary/neetoui";
+import { Button, Tooltip, } from "@bigbinary/neetoui/v2";
 ```
 
 If you need access to an object that contains references to all the components you can do a wildcard import. This way, you can render dynamic components from NeetoUI.
 
 ```
 import React from "react";
-import * as NeetoUI from "@bigbinary/neetoui";
+import * as NeetoUI from "@bigbinary/neetoui/v2";
 
 export default function index() {
   const Button = NeetoUI.Button;
@@ -96,5 +99,3 @@ export default function index() {
 #### Acceptable props for Components
 
 Refer documentation of each component for a detailed list of available props and their usage.
-
-

package/stories/Label.stories.jsx

@@ -9,7 +9,7 @@ export default {
     layout: "padded",
     docs: {
       description: {
-        component: '`import { Label } from "@bigbinary/neetoui";`',
+        component: '`import { Label } from "@bigbinary/neetoui/v2";`',
       },
     },
   },

package/stories/Layouts.stories.jsx

@@ -169,7 +169,7 @@ export const Page = () => {
             <PageLoader />
           ) : (
             <table
-              className={`nui-table nui-table--checkbox nui-table--actions`}
+              className={`neeto-ui-table neeto-ui-table--checkbox neeto-ui-table--actions`}
             >
               <thead>
                 <tr>
@@ -236,7 +236,7 @@ export const Page = () => {
             </table>
           )}
         </Scrollable>
-        <div className="flex flex-row justify-end items-center w-full mt-6 mb-8">
+        <div className="flex flex-row items-center justify-end w-full mt-6 mb-8">
           <Pagination
             count={300}
             pageNo={1}

package/stories/MenuBar.stories.jsx

@@ -17,7 +17,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: '`import { MenuBar } from "@bigbinary/neetoui/layouts";`',
+        component: '`import { MenuBar } from "@bigbinary/neetoui/v2/layouts";`',
       },
     },
   },