@rabbitio/ui-kit 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -4,21 +4,28 @@ npm install --save @rabbitio/ui-kit
 ~~~
 
 # Using library
-1. To use components for web import the following way:
+1. To use components for web:
+* import the following way
 ~~~
-import { Button } from "@rabbitio/ui-kit/web";
+import { Button } from "@rabbitio/ui-kit";
 ~~~
-2. To use components for node import the following way:
+* add top-level styles import
 ~~~
-import { Button } from "@rabbitio/ui-kit/node";
+import "@rabbitio/ui-kit/index.css";
 ~~~
-3. To use components for next.js import the following way and add "@rabbitio/ui-kit" to transpilePackages inside your next.config.js:
+2. To use components for next.js import the following way and add "@rabbitio/ui-kit" to transpilePackages inside your next.config.js:
+
+* Import the following way
 ~~~
-import { Button } from "@rabbitio/ui-kit";
+import { Button } from "@rabbitio/ui-kit/next";
+~~~
+* add "@rabbitio/ui-kit" to transpilePackages in next.config.js
+~~~
+transpilePackages: ["@rabbitio/ui-kit"],
 ~~~
-4. [In progress] Also, you can import base styles into your scss index file: 
+* Import styles inside pages/_app.js
 ~~~
-@import "@rabbitio/ui-kit/styles/index";
+import "@rabbitio/ui-kit/index.css";
 ~~~
 
 # Adding new component

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.3",
+    "version": "1.0.0-beta.5",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -11,13 +11,12 @@
             "require": "./dist/index.cjs",
             "default": "./dist/index.modern.js"
         },
-        "./next": "./index.js"
+        "./next": "./index.js",
+        "./index.css": "./dist/index.css"
     },
     "scripts": {
         "build": "rm -rf dist && microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx --visualize",
-        "build-dev": "rm -rf dist && NODE_ENV=production webpack --mode development",
-        "build-prod": "rm -rf dist && NODE_ENV=production webpack --mode production",
-        "prepublish": "npm run build-prod",
+        "prepublish": "npm run build",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build"
     },
@@ -35,19 +34,14 @@
     "author": "admin@rabbit.io",
     "license": "MIT",
     "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0",
-        "react-router-dom": ">=6.21.1"
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
     },
     "dependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0",
-        "react-router-dom": ">=6.21.1"
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.7",
-        "@babel/preset-react": "^7.23.3",
         "@storybook/addon-actions": "^7.6.6",
         "@storybook/addon-backgrounds": "^7.6.6",
         "@storybook/addon-essentials": "^7.6.6",
@@ -60,19 +54,14 @@
         "@storybook/react": "^7.6.6",
         "@storybook/react-webpack5": "^7.6.6",
         "@storybook/test": "^7.6.6",
-        "babel-loader": "^9.1.3",
-        "css-loader": "^6.8.1",
         "microbundle": "^0.15.1",
-        "node-sass": "^7.0.3",
         "prettier": "^3.1.1",
         "prop-types": "^15.8.1",
         "resolve-url-loader": "^5.0.0",
-        "sass": "^1.69.5",
-        "sass-loader": "^13.3.3",
+        "sass": "^1.70.0",
+        "sass-loader": "^14.1.0",
         "storybook": "^7.6.6",
-        "style-loader": "^3.3.3",
-        "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "style-loader": "^3.3.3"
     },
     "prettier": {
         "trailingComma": "es5",

package/stories/atoms/buttons/Button/Button.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import styles from "./Button.module.scss";
@@ -9,7 +8,7 @@ import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
 /**
  * Button component - A versatile and customizable button for React applications.
  * It supports various sizes, styles, and functionalities, including loaders, icons, and handling of click events.
- * This component can also be used as a link when integrated with `react-router-dom`.
+ * This component can also be used as a link if "to" is provided.
  *
  * @component
  * @param {Object} props
@@ -108,11 +107,11 @@ export const Button = ({
         <>
             {isFormSubmittingButton ? <input type="submit" hidden /> : null}
             {to ? (
-                <Link
+                <a
                     className={classNames}
                     onClick={(e) => handleError(buttonClick, e)}
-                    to={to}
-                    innerRef={buttonRef}
+                    href={to}
+                    ref={buttonRef}
                 >
                     {icon ? (
                         <div
@@ -129,7 +128,7 @@ export const Button = ({
                     ) : (
                         content
                     )}
-                </Link>
+                </a>
             ) : (
                 <div
                     className={classNames}