urfu-ui-kit-react 0.0.0 → 0.0.2

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,33 +1,51 @@
-{
-  "name": "urfu-ui-kit-react",
-  "description": "UrFU UI-Kit for React Web",
-  "license": "UNLICENSED",
-  "private": false,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "less": "^4.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
-    "urfu-ui-kit-vanilla": "^1.1.1"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.2.0"
-  },
-  "files": [
-    "Select.jsx",
-    "Tabs.jsx",
-    "Modal.jsx",
-    "src/styles/*"
-  ]
-}
+{
+  "name": "urfu-ui-kit-react",
+  "description": "UrFU UI-Kit for React Web",
+  "license": "UNLICENSED",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "main": "dist/urfu-ui-kit-react",
+  "types": "dist/urfu-ui-kit-react",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "sb": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "less": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "urfu-ui-kit-vanilla": "^1.1.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.26",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-onboarding": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "files": ["dist"]
+}

package/Modal.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-import 'urfu-ui-kit-vanilla/src/main.css';
-
-export default function Modal({ active, setActive, children, nameClass }) {
-  return (
-    <div className={active ? `u-modal u-modal-active ${nameClass}` : "u-modal"}
-      onClick={() => setActive(false)}>
-
-      <div className="u-modal__container">
-
-        <div className="u-modal__body" onClick={(e) => { e.stopPropagation() }}>
-
-          {children}
-
-          <div className="u-modal__exit">
-
-            <button className="u-button-cross" onClick={() => setActive(false)}></button>
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/Select.jsx

@@ -1,57 +0,0 @@
-import React, { useState, useEffect } from "react";
-import 'urfu-ui-kit-vanilla/src/main.css';
-
-export default function Selectbox({ optionsArr, placeholder = "Не выбрано" }) {
-
-    const [open, setOpen] = useState(false);
-    const [value, setValue] = useState("");
-    const [isValue, setIsValue] = useState(false);
-
-    const options = optionsArr.map((text, index) => {
-        return <div className="u-selectbox-option" key={index} onClick={() => { setValue(`${text}`); setIsValue(true); }}>{text}</div>;
-    });
-
-    useEffect(() => {
-        document.addEventListener('click', handleClick)
-        return () => document.removeEventListener('click', handleClick)
-    }, [])
-
-    const handleClick = (e) => {
-        if (!e.target.closest('.u-selectbox')) {
-            setOpen(false);
-        }
-    }
-
-    return (
-        <>
-            <div className="u-selectbox">
-                <div className={open ? "u-selectbox-select u-selectbox-select-open" : "u-selectbox-select"}
-
-                    onClick={() => {
-                        setOpen(!open);
-                    }}>
-
-                    {isValue ? <></> : <span>{placeholder}</span>}
-
-                    <span className="u-selectbox-select-title">{value}</span>
-
-                    {isValue
-                        ? <i className="u-selectbox-select-icon-cross"
-                            onClick={(e) => { setValue(""); setIsValue(false); e.stopPropagation(); }}></i>
-                        : <></>}
-
-                    <i className="u-selectbox-select-icon-arrow"></i>
-
-                </div>
-
-                <div className="u-selectbox-options"
-                    onClick={() => {
-                        setOpen(false);
-                    }}>
-                    {options}
-                </div>
-
-            </div>
-        </>
-    )
-}

package/Tabs.jsx

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import "./src/styles/Tabs.less";
-import 'urfu-ui-kit-vanilla/src/main.css';
-
-export default function Tabs({ children, route, activeTab, setActiveTab }) {
-
-  const handleClick = (newActiveTab) => {
-    setActiveTab(newActiveTab);
-  };
-
-  return (
-    <div className="u-react-tabs">
-
-      {children.map((tab) => {
-
-        const label = tab.props.label;
-
-        return (
-          <div key={label}>
-
-            <Link
-              to={`${route}/${label}`}
-            >
-
-              <button className={label === activeTab ? "u-tab-line u-tab-active" : "u-tab-line"}
-                onClick={() => handleClick(label)}>
-                {tab.props.title}
-              </button>
-
-            </Link>
-
-          </div>
-        );
-      })}
-
-    </div>
-  );
-}

package/src/styles/Tabs.less

@@ -1,24 +0,0 @@
-// @import "../../style/const";
-
-.u-react-tabs {
-    display: flex;
-    margin: 16px 0 32px 0;
-
-    a {
-        text-decoration: none;
-    }
-}
-
-// @media screen and (max-width: 1012px) {
-
-//     /*для больших планшетов*/
-//     .tabs {
-//         margin: 24px 0 24px;
-//     }
-// }
-
-// @media screen and (max-width: 404px) {
-//     .tabs {
-//         margin: 24px 0 14px;
-//     }
-// }