@rabbitio/ui-kit 1.0.0-alpha.9 → 1.0.0-beta.1

package/index.js

@@ -1 +1 @@
-export * from "./stories";
+export * from "./stories/index.js";

package/package.json

@@ -1,25 +1,12 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-alpha.9",
+    "version": "1.0.0-beta.1",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
-    "files": [
-        "dist",
-        "stories",
-        "styles",
-        "README.md",
-        "index.js"
-    ],
     "exports": {
         ".": "./index.js",
         "./node": "./dist/node/index.js",
-        "./dist/node": "./dist/node/index.js",
         "./web": "./dist/web/index.js",
-        "./dist/web": "./dist/web/index.js",
-        "./node1": "./dist/node",
-        "./dist/node1": "./dist/node",
-        "./web1": "./dist/web",
-        "./dist/web1": "./dist/web",
         "./package.json": "./package.json"
     },
     "scripts": {
@@ -44,12 +31,13 @@
     "license": "MIT",
     "peerDependencies": {
         "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
+        "react-dom": ">=16.0.0",
+        "react-router-dom": ">=6.21.1"
     },
     "dependencies": {
         "react": ">=16.0.0",
         "react-dom": ">=16.0.0",
-        "react-router-dom": "6.21.1"
+        "react-router-dom": ">=6.21.1"
     },
     "devDependencies": {
         "@babel/core": "^7.23.7",

package/stories/index.js

@@ -1,4 +1,2 @@
-// export { default as Button } from "./atoms/buttons/Button/Button.jsx";
-// export { default as LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";
 export { Button } from "./atoms/buttons/Button/Button.jsx";
 export { LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";

package/stories/assets/icons/transactions-icon.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.4926 15.7679V18.5068C19.4926 19.2507 18.8422 19.8534 18.04 19.8534H5.45266C4.65042 19.8534 4 19.2507 4 18.5068V5.84658C4 5.10268 4.65042 4.5 5.45266 4.5H18.04C18.8422 4.5 19.4926 5.10268 19.4926 5.84658V8.92496" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1958 15.4383H15.9518C14.1789 15.4383 12.7422 14.0016 12.7422 12.2287C12.7422 10.4558 14.1789 9.01904 15.9518 9.01904H20.1958C20.6639 9.01904 21.0431 9.39829 21.0431 9.86637V14.5904C21.0431 15.0591 20.6639 15.4383 20.1958 15.4383Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 7.25582H8.04903" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 17.1181H8.04903" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1414 12.2284C17.1414 12.778 16.6958 13.2229 16.1469 13.2229C15.5972 13.2229 15.1523 12.778 15.1523 12.2284C15.1523 11.6794 15.5972 11.2339 16.1469 11.2339C16.6958 11.2339 17.1414 11.6794 17.1414 12.2284Z" fill="white"/>
-</svg>

package/stories/atoms/LoadingDots/LoadingDots.stories.jsx

@@ -1,47 +0,0 @@
-// import { LoadingDots } from "./../../../dist/index";
-import React from "react";
-import { LoadingDots } from "./LoadingDots.jsx";
-
-export default {
-    title: "LoadingDots",
-    component: LoadingDots,
-    parameters: {
-        backgrounds: {
-            default: "dark",
-        },
-    },
-    argTypes: {
-        size: {
-            control: {
-                type: "select",
-                options: ["big", "small", "extra-small"],
-            },
-        },
-        align: {
-            control: { type: "select", options: ["left", "right", false] },
-        },
-        isColored: { control: { type: "boolean" } },
-        noMargins: { control: { type: "boolean" } },
-    },
-    tags: ["autodocs"],
-};
-
-const Template = (args) => <LoadingDots {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Colored = Template.bind({});
-Colored.args = {
-    isColored: true,
-};
-
-export const NoMargins = Template.bind({});
-NoMargins.args = {
-    noMargins: true,
-};
-
-export const AlignRight = Template.bind({});
-AlignRight.args = {
-    align: "right",
-};

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

@@ -1,289 +0,0 @@
-import React from "react";
-import { Button } from "./Button.jsx";
-import icon from "../../../assets/icons/transactions-icon.svg";
-
-// import { Button } from "./../../../../dist/web/index";
-// const Button = RabbitioUiKit.Button;
-
-const sizes = ["xl", "lg", "md", "sm"];
-const modes = [
-    "transparent",
-    "white",
-    "primary",
-    "primary-bordered",
-    "primary-transparent",
-    "transparent-bordered",
-    "transparent-without-shadow",
-];
-
-export default {
-    title: "Button",
-    component: Button,
-    parameters: {
-        viewport: {
-            defaultViewport: "reset",
-        },
-        backgrounds: {
-            default: "dark",
-        },
-    },
-    argTypes: {
-        size: {
-            control: { type: "select", options: sizes },
-        },
-        content: { control: "text" },
-        className: { table: { disable: true } },
-        onClick: { table: { disable: true } },
-        to: { table: { disable: true } },
-        icon: { table: { disable: true } },
-        setClickTrigger: { table: { disable: true } },
-        isFormSubmittingButton: { table: { disable: true } },
-        propagatePrimaryButtonClick: { table: { disable: true } },
-        handleError: { table: { disable: true } },
-    },
-    tags: ["autodocs"],
-};
-
-const ModeStory = ({ mode }) => (
-    <>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } ${size.toUpperCase()} Button`}
-                />
-            </div>
-        ))}
-    </>
-);
-
-const Template = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = { content: "Button" };
-
-export const Transparent = () => <ModeStory mode="transparent" />;
-
-export const White = () => <ModeStory mode="white" />;
-
-export const Primary = () => <ModeStory mode="primary" />;
-
-export const PrimaryBordered = () => <ModeStory mode="primary-bordered" />;
-
-export const PrimaryTransparent = () => (
-    <ModeStory mode="primary-transparent" />
-);
-
-export const TransparentBordered = () => (
-    <ModeStory mode="transparent-bordered" />
-);
-
-export const TransparentWithoutShadow = () => (
-    <ModeStory mode="transparent-without-shadow" />
-);
-
-// TODO: [dev] requires fix
-// export const LinkButton = () => (
-//     <>
-//         <h3>Link Button</h3>
-//         {sizes.map((size) => (
-//             <div key={size} style={{ marginBottom: "10px" }}>
-//                 <Button
-//                     size={size}
-//                     mode="primary"
-//                     content={`Link ${size.toUpperCase()} Button`}
-//                     to="/example-path"
-//                 />
-//             </div>
-//         ))}
-//     </>
-// );
-
-export const LoadingButton = () => (
-    <>
-        <h3>Loading Button</h3>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode="primary"
-                    content={`Loading ${size.toUpperCase()} Button`}
-                    loader={true}
-                    loading={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const IconButton = () => (
-    <>
-        <h3>Button with Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Icon`}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const DisabledButton = () => (
-    <>
-        <h3>Disabled Button</h3>
-        {sizes.map((size) => (
-            <div
-                key={size}
-                style={{
-                    marginBottom: "10px",
-                    display: "flex",
-                    justifyContent: "space-between",
-                }}
-            >
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    content={`${size.toUpperCase()} Button`}
-                    isDisabled={true}
-                />
-                <div style={{ marginRight: "10px" }} />
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    icon={icon}
-                    content={`${size.toUpperCase()} Button with Icon`}
-                    isDisabled={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const CheckmarkOnClickButton = () => (
-    <>
-        <h3>Button with Checkmark on Click</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={"xl"}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } XL Button`}
-                    checkmarkOnClick={true}
-                    loader={false}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const BigIconButton = () => (
-    <>
-        <h3>Button with Big Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Big Icon`}
-                            bigIcon={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const FullWidthOnMobiles = () => (
-    <>
-        <h3>Full Width on Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Mobile ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnMobiles={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnMobiles.parameters = {
-    viewport: {
-        defaultViewport: "iphone14promax",
-    },
-};
-
-export const FullWidthOnTablets = () => (
-    <>
-        <h3>Full Width on Tablets</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Tablet ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnTablets={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnTablets.parameters = {
-    viewport: {
-        defaultViewport: "ipad",
-    },
-};
-
-export const SmallPaddingOnSmallMobilesButton = () => (
-    <>
-        <h3>Button with Small Padding on Small Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button`}
-                            smallPaddingOnSmallMobiles={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-SmallPaddingOnSmallMobilesButton.parameters = {
-    viewport: {
-        defaultViewport: "iphone14",
-    },
-};