Move css to component scope

.gitignore

@@ -16,7 +16,6 @@
 
 /formik*.js
 /formik.js.LICENSE.txt
-/index.css
 /index*.js
 /layouts*.js
 /molecules.js

.storybook/main.js

@@ -25,21 +25,24 @@ module.exports = {
   ],
 
   webpackFinal: async config => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      ...rootResolve.alias,
-      "@bigbinary/neetoui": path.resolve(__dirname, "..", "src"),
+    config.resolve = {
+      extensions: [".js", ".jsx", ".svg", ".scss"],
+      alias: {
+        ...config.resolve.alias,
+        ...rootResolve.alias,
+        "@bigbinary/neetoui": path.resolve(__dirname, "..", "src"),
+      },
     };
 
     return config;
   },
 
   framework: {
     name: "@storybook/react-webpack5",
-    options: {}
+    options: {},
   },
 
   docs: {
-    autodocs: true
-  }
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,5 +1,4 @@
 import "./style.scss";
-import "../src/styles/index.scss";
 import { themes } from "@storybook/theming";
 import neetoTheme from "./neetoTheme";
 
@@ -50,14 +49,7 @@ export const parameters = {
         ],
         "Molecules",
         "Overlays",
-        [
-          "Alert",
-          "Modal",
-          "Pane",
-          "Toastr",
-          "Tooltip",
-          "Popover"
-        ],
+        ["Alert", "Modal", "Pane", "Toastr", "Tooltip", "Popover"],
         "Formik",
         ["Form"],
         "Customize",

README.md

@@ -12,13 +12,7 @@
 yarn add @bigbinary/neetoui
 ```
 
-This would install `neetoui` package inside your application. Starting `3.0.x`,
-neetoUI stylesheet has been separated from the bundle. To get the styles
-working, please import the neetoUI stylesheet to your main `scss` entry point.
-
-```scss
-@import "@bigbinary/neetoui";
-```
+This would install `neetoui` package inside your application.
 
 ## Dependencies
 

index.css

@@ -0,0 +1 @@
+/* Empty css file for backward compatiability */

jest.config.js

@@ -5,6 +5,7 @@ module.exports = () => ({
   moduleDirectories: ["node_modules", "src"],
   moduleNameMapper: {
     "^.+\\.(css|less|scss)$": "identity-obj-proxy",
+    "styles/*": "identity-obj-proxy",
     "^@bigbinary/neetoui/(.*)$": path.resolve(__dirname, "src", "$1"),
     "neetoicons/logos": path.resolve(
       __dirname,

jsconfig.json

@@ -33,7 +33,9 @@
       "constants": ["src/constants"],
       "constants/*": ["src/constants/*"],
       "managers": ["src/managers"],
-      "managers/*": ["src/managers/*"]
+      "managers/*": ["src/managers/*"],
+      "styles": ["src/styles/"],
+      "styles/*": ["src/styles/*"]
     },
     "pretty": true,
     "experimentalDecorators": true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "6.5.13",
+  "version": "6.6.0-css-beta.1",
   "author": "BigBinary",
   "license": "MIT",
   "description": "neetoUI drives the experience at all neeto products",
@@ -16,6 +16,7 @@
   "files": [
     "dist",
     "types",
+    "index.css",
     "*.d.ts"
   ],
   "lint-staged": {
@@ -32,7 +33,7 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/cjs/index.js",
-      "style": "./dist/index.css",
+      "style": "./index.css",
       "types": "./index.d.ts"
     },
     "./layouts": {

resolve.js

@@ -7,5 +7,6 @@ module.exports = {
     managers: path.resolve(__dirname, "./src/managers"),
     formikcomponents: path.resolve(__dirname, "./src/formik"),
     layouts: path.resolve(__dirname, "./src/layouts"),
+    styles: path.resolve(__dirname, "./src/styles"),
   },
 };

rollup.config.js

@@ -40,14 +40,14 @@ const config = args => {
     babel({ exclude: "node_modules/**", babelHelpers: "runtime" }),
     resolve({
       preferBuiltins: true,
-      extensions: [".js", ".jsx", ".svg"],
+      extensions: [".js", ".jsx", ".svg", ".scss"],
       moduleDirectories: ["node_modules"],
     }),
     commonjs({ include: /\**node_modules\**/ }),
     json(),
     styles({
       extensions: [".css", ".scss", ".min.css"],
-      mode: ["extract", "index.css"],
+      minimize: true,
     }),
     args.app &&
       copy({
@@ -56,6 +56,7 @@ const config = args => {
           { src: "index.d.ts", dest: destination },
           { src: "formik.d.ts", dest: destination },
           { src: "managers.d.ts", dest: destination },
+          { src: "index.css", dest: destination },
           { src: "types/", dest: destination },
         ],
       }),

src/components/Accordion/index.jsx

@@ -4,6 +4,9 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 import { isEmpty } from "ramda";
 
+import "styles/common";
+import "styles/components/_accordion";
+
 import Item from "./Item";
 
 const ACCORDION_STYLES = {

src/components/ActionDropdown.jsx

@@ -3,15 +3,14 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_action-dropdown";
 import { noop } from "utils";
 
 import Button from "./Button";
 import Dropdown from "./Dropdown";
 
-const BTN_STYLES = {
-  primary: "primary",
-  secondary: "secondary",
-};
+const BTN_STYLES = { primary: "primary", secondary: "secondary" };
 
 const BTN_SIZES = {
   small: "small",
@@ -32,18 +31,16 @@ const ActionDropdown = ({
 }) => (
   <div className={classnames(["neeto-ui-action-dropdown", className])}>
     <Button
+      {...{ disabled, label, onClick }}
       data-testid="action-dropdown-btn"
-      disabled={disabled}
-      label={label}
       size={size ?? buttonSize}
       style={style ?? buttonStyle}
-      onClick={onClick}
       {...buttonProps}
     />
     <Dropdown
+      {...{ disabled }}
       buttonProps={{ size: size ?? buttonSize }}
       buttonStyle={style ?? buttonStyle}
-      disabled={disabled}
       {...dropdownProps}
     >
       {children}

src/components/Avatar/index.jsx

@@ -6,6 +6,8 @@ import PropTypes from "prop-types";
 import { isNil } from "ramda";
 
 import Tooltip from "components/Tooltip";
+import "styles/common";
+import "styles/components/_avatar";
 
 import { COLOR_PALLETE, AVATAR_VARIANT } from "./constants";
 

src/components/Button.jsx

@@ -6,6 +6,8 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
 import Spinner from "atoms/Spinner";
+import "styles/common";
+import "styles/components/_button";
 
 import Tooltip from "./Tooltip";
 

src/components/Callout.jsx

@@ -3,6 +3,9 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_callout";
+
 const STYLES = {
   info: "info",
   warning: "warning",

src/components/Checkbox.jsx

@@ -4,6 +4,8 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 
 import { useId } from "hooks";
+import "styles/common";
+import "styles/components/_checkbox";
 import { hyphenize } from "utils";
 
 import Label from "./Label";

src/components/ColorPicker/index.jsx

@@ -13,6 +13,8 @@ import useEyeDropper from "use-eye-dropper";
 
 import Button from "components/Button";
 import Dropdown from "components/Dropdown";
+import "styles/common";
+import "styles/components/_color-picker";
 import { noop } from "utils";
 
 import Palette from "./Palette";

src/components/DatePicker/index.jsx

@@ -8,6 +8,8 @@ import PropTypes from "prop-types";
 
 import Label from "components/Label";
 import { useSyncedRef, useId } from "hooks";
+import "styles/common";
+import "styles/components/_date-time-picker";
 import { convertToDayjsObjects, noop, hyphenize } from "utils";
 
 import IconOverride from "./IconOverride";

src/components/Dropdown/index.jsx

@@ -7,6 +7,8 @@ import PropTypes from "prop-types";
 import { isNil } from "ramda";
 
 import Button from "components/Button";
+import "styles/common";
+import "styles/components/_dropdown";
 import { hyphenize, noop } from "utils";
 
 import Divider from "./Divider";

src/components/Input.jsx

@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 import { replace } from "ramda";
 
 import { useId } from "hooks";
+import "styles/common";
+import "styles/components/_input";
 import { hyphenize } from "utils";
 
 import Label from "./Label";

src/components/Kbd.jsx

@@ -3,6 +3,9 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_kbd";
+
 import Tooltip from "./Tooltip";
 
 const Kbd = ({ keyName, className, tooltipProps, ...otherProps }) => (

src/components/Label.jsx

@@ -4,6 +4,9 @@ import classnames from "classnames";
 import { Help } from "neetoicons";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_label";
+
 import Tooltip from "./Tooltip";
 
 const Label = ({

src/components/Modal/index.jsx

@@ -9,6 +9,8 @@ import Backdrop from "atoms/Backdrop";
 import Portal from "atoms/Portal";
 import Button from "components/Button";
 import { useOverlayManager, useOverlay } from "hooks";
+import "styles/common";
+import "styles/components/_modal";
 
 import Body from "./Body";
 import Footer from "./Footer";

src/components/MultiEmailInput/index.jsx

@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 import { mergeLeft, isEmpty } from "ramda";
 import CreatableSelect from "react-select/creatable";
 
+import "styles/common";
+import "styles/components/_email-input";
 import { noop, hyphenize } from "utils";
 
 import {

src/components/NoData/index.jsx

@@ -6,6 +6,8 @@ import { isEmpty } from "ramda";
 
 import Button from "components/Button";
 import Typography from "components/Typography";
+import "styles/common";
+import "styles/components/_no-data";
 
 import { renderImage } from "./utils";
 

src/components/Pagination/index.jsx

@@ -4,6 +4,9 @@ import classnames from "classnames";
 import { Left, Right } from "neetoicons";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_pagination";
+
 import { DOTS } from "./constants";
 import usePaginationQueryParams from "./hooks/usePaginationQueryParams";
 import { usePagination } from "./utils";

src/components/Pane/index.jsx

@@ -9,6 +9,8 @@ import Backdrop from "atoms/Backdrop";
 import Portal from "atoms/Portal";
 import Button from "components/Button";
 import { useOverlay, useOverlayManager } from "hooks";
+import "styles/common";
+import "styles/components/_pane";
 
 import Body from "./Body";
 import { DEFAULT_PANE_HEADER_HEIGHT } from "./constants";

src/components/Popover/index.jsx

@@ -3,6 +3,9 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_popover";
+
 import Title from "./Title";
 
 import Tooltip from "../Tooltip";

src/components/Radio/index.jsx

@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 
 import Label from "components/Label";
 import { useId } from "hooks";
+import "styles/common";
+import "styles/components/_radio";
 import { hyphenize } from "utils";
 
 import Item from "./Item";

src/components/Select.jsx

@@ -11,6 +11,8 @@ import AsyncCreatable from "react-select/async-creatable";
 import Creatable from "react-select/creatable";
 
 import { useId } from "hooks";
+import "styles/common";
+import "styles/components/_select";
 import { hyphenize } from "utils";
 
 import Label from "./Label";

src/components/Slider/index.jsx

@@ -5,6 +5,8 @@ import PropTypes from "prop-types";
 
 import Label from "components/Label";
 import { useId } from "hooks";
+import "styles/common";
+import "styles/components/_slider";
 import { ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, hyphenize, noop } from "utils";
 
 import { NEETO_UI_PRIMARY_500 } from "./constants";

src/components/Spinner.jsx

@@ -3,6 +3,9 @@ import React from "react";
 import classnames from "classnames";
 import PropTypes from "prop-types";
 
+import "styles/common";
+import "styles/components/_spinner";
+
 const SPINNER_THEMES = { dark: "dark", light: "light" };
 const SPINNER_SIZES = { small: "small", medium: "medium" };