@prosperitainova/mirage-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,201 @@
+/// <reference types="react" />
+import { ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes } from 'react';
+import { Props } from 'react-select';
+
+type ItemsProps = {
+    label: string;
+    href: string;
+    img?: string;
+};
+type BreadcrumbProps = {
+    menus: ItemsProps[];
+};
+declare const Breadcrumb: (props: BreadcrumbProps) => JSX.Element;
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    mode: "main" | "border" | "phantom";
+    link?: boolean;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    arrow?: "left" | "right";
+    danger?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    label?: string;
+    value?: string;
+    type?: string;
+};
+declare const Button: (props: ButtonProps) => JSX.Element;
+
+type DropdownOptions = {
+    value: string;
+    label: string;
+    color?: string;
+    onClick?: (value: string) => void;
+};
+type ButtonDropdownProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    mode: "main" | "border";
+    icon?: string;
+    label?: string;
+    loading?: boolean;
+    value?: string;
+    type?: string;
+    double?: boolean;
+    open?: boolean;
+    options: DropdownOptions[];
+};
+declare const ButtonDropdown: (props: ButtonDropdownProps) => JSX.Element;
+
+type CheckboxProps = {
+    label?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    position?: "top" | "bottom" | "left" | "right";
+    onChange?: (value: boolean) => void;
+};
+declare const Checkbox: ({ onChange, ...props }: CheckboxProps) => JSX.Element;
+
+type DropzoneProps = {
+    error: string;
+    helper: string;
+};
+declare function Previews(props: DropzoneProps): JSX.Element;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    error?: string;
+    success?: boolean;
+    helper?: string;
+    label?: string;
+};
+declare const Input: (props: InputProps) => JSX.Element;
+
+type ModalProps$1 = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    header?: boolean;
+    title: string;
+    children?: JSX.Element;
+    size: "md" | "lg";
+};
+declare const InteractiveModal: (props: ModalProps$1) => JSX.Element;
+
+type ModalProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    header?: boolean;
+    title: string;
+    children?: JSX.Element;
+};
+declare const lateralModal: (props: ModalProps) => JSX.Element;
+
+type UsersProps = {
+    img: string;
+    name: string;
+    label: string;
+};
+type MenuDropdownProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    open?: boolean;
+    onClick?: (props: string) => void;
+    users?: UsersProps[];
+};
+declare const MenuDropdown: (props: MenuDropdownProps) => JSX.Element;
+
+type NotificationsProps = {
+    img: string;
+    text: string;
+    time: string;
+};
+type NotificationsBarProps = {
+    title: string;
+    message?: string;
+    notifications?: NotificationsProps[];
+};
+declare const NotificationBar: (props: NotificationsBarProps) => JSX.Element;
+
+type RadioProps = {
+    label: string;
+    disabled?: boolean;
+    checked?: boolean;
+    position?: "top" | "bottom" | "left" | "right";
+    value: string;
+    onClick?: (value: string) => void;
+};
+
+type RadioGroupProps = HTMLAttributes<HTMLDivElement> & {
+    display: "row" | "column";
+    options: RadioProps[];
+    value: string;
+    onChange?: (value: string) => void;
+};
+declare const RadioGroup: ({ options, value, onChange, ...props }: RadioGroupProps) => JSX.Element;
+
+type ResultsProps = {
+    value: string;
+    label: string;
+};
+type SearchProps = InputHTMLAttributes<HTMLInputElement> & {
+    showResults?: ResultsProps[];
+    loading?: boolean;
+};
+declare const Search: (props: SearchProps) => JSX.Element;
+
+type SelectProps = Props & {
+    error?: string;
+    success?: boolean;
+    helper?: string;
+    label?: string;
+};
+declare const Sellect: (props: SelectProps) => JSX.Element;
+
+type TopMenusProps = {
+    icon: string;
+    text: string;
+    onClick?: () => void;
+};
+type BottomMenusProps = {
+    icon: string;
+    text: string;
+    onClick?: () => void;
+};
+type SideBarProps = {
+    activedIndex?: number;
+    topMenus: TopMenusProps[];
+    bottomMenus?: BottomMenusProps[];
+    logo: string;
+    active?: boolean;
+};
+declare const SideBar: (props: SideBarProps) => JSX.Element;
+
+type SpacerProps = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+declare const Spacer: (props: SpacerProps) => JSX.Element;
+
+type MenusProps = {
+    label: string;
+    value: string;
+};
+type TabMenuProps = {
+    menus: MenusProps[];
+};
+declare const TabMenu: (props: TabMenuProps) => JSX.Element;
+
+type ToastProps = HTMLAttributes<HTMLDivElement> & {
+    active?: boolean;
+    mode: "warning" | "success" | "error";
+    title: string;
+    text: string;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    onClick?: (props: string) => void;
+};
+declare const Toast: (props: ToastProps) => JSX.Element;
+
+type ToggleProps = {
+    mode: "small" | "large";
+    actived?: boolean;
+    checked?: boolean;
+};
+declare const Toggle: (props: ToggleProps) => JSX.Element;
+
+export { Breadcrumb, Button, ButtonDropdown, Checkbox, Previews as Dropzone, Input, InteractiveModal, lateralModal as LateralModal, MenuDropdown as Menudropdown, NotificationBar as NotificationsBar, RadioGroup, Search, Sellect, SideBar, Spacer, TabMenu as Table, Toast, Toggle };

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@prosperitainova/mirage-ui",
+  "version": "1.0.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.8",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-router-dom": "^6.6.1",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.7.0",
+    "styled-components": "^5.3.6",
+    "typescript": "^4.9.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "rollup": "rollup -c rollup.config.js --environment NODE_ENV:production --silent --no-treeshake --no-strict --bundleConfigAsCjs --configPlugin typescript",
+    "rollup-simple": "rollup -c --bundleConfigAsCjs"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-image": "^3.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
+    "@storybook/node-logger": "^6.5.14",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.14",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "postcss-assets": "^6.0.0",
+    "prop-types": "^15.8.1",
+    "rollup": "^3.10.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-dts": "^5.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-url": "^3.0.1",
+    "storybook-addon-styled-component-theme": "^2.0.0",
+    "webpack": "^5.75.0"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "type": "module"
+}