@via-profit/ui-kit 0.1.0-rc.66 → 0.1.0-rc.68

package/Avatar/AvatarStandard.js

@@ -22,6 +22,8 @@ const AvatarBase_1 = __importDefault(require("./AvatarBase"));
 const AvatarOnlineBadge_1 = __importDefault(require("./AvatarOnlineBadge"));
 const Container = styled_1.default.span `
   position: relative;
+  width: ${({ size }) => (size ? size : '2.5em')};
+  height: ${({ size }) => (size ? size : '2.5em')};
 `;
 const StyledStandardAvatar = (0, styled_1.default)(AvatarBase_1.default) `
   color: ${({ $color }) => $color.toString()};
@@ -65,7 +67,7 @@ const StyledStandardAvatar = (0, styled_1.default)(AvatarBase_1.default) `
 }}
 `;
 const AvatarStandard = (props, ref) => {
-    const { children, color, onClick, isOnline } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline"]);
+    const { children, color, onClick, isOnline, size } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline", "size"]);
     const theme = (0, react_2.useTheme)();
     const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
     const { $background, $color } = react_1.default.useMemo(() => {
@@ -111,7 +113,7 @@ const AvatarStandard = (props, ref) => {
         }
     }, [color, theme.color]);
     return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(StyledStandardAvatar, Object.assign({ variant: "circular", "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children),
+        react_1.default.createElement(StyledStandardAvatar, Object.assign({ variant: "circular", "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick, size: size }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children),
         isOnline && react_1.default.createElement(AvatarOnlineBadge_1.default, null)));
 };
 exports.default = react_1.default.forwardRef(AvatarStandard);

package/Avatar/index.js

@@ -5,6 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const AvatarStandard_1 = __importDefault(require("./AvatarStandard"));
-//TODO add documentation
 const Avatar = (props, ref) => (react_1.default.createElement(AvatarStandard_1.default, Object.assign({}, props, { ref: ref })));
 exports.default = react_1.default.forwardRef(Avatar);

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.NamedExoticComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
 export default _default;

package/PhoneField/templates.js

@@ -15,8 +15,8 @@ const US_1 = __importDefault(require("../CountryFlags/US"));
 const IL_1 = __importDefault(require("../CountryFlags/IL"));
 exports.templates = [
     // Russian template
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/],
-    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/],
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
+    ['RU', react_1.default.createElement(RU_1.default, { key: "ru-2" }), '7', '8 (xxx) xxx-xx-xx', '8 (987) 654-32-10', /^8[^1]{0,}/], // 8912...
     [
         'RU',
         react_1.default.createElement(RU_1.default, { key: "ru-3" }),
@@ -24,7 +24,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (987) 654-32-10',
         /^\+{0,1}7([0-5]|[8-9])[0-9][0-9]/,
-    ],
+    ], // +79...
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
     ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
@@ -35,7 +35,7 @@ exports.templates = [
         '+7 (xxx) xxx-xx-xx',
         '+7 (600) 765-43-21',
         /^\+{0,1}7[6-7][0-9][0-9]/,
-    ],
+    ], // +7600 - +7700
     ['UA', react_1.default.createElement(UA_1.default, { key: "ua" }), '380', '+380 (xx) xxx-xxxx', '+380 (98) 765-4321', /^\+{0,1}380/],
     ['JP', react_1.default.createElement(JP_1.default, { key: "jp" }), '81', '+81 (xx) xxx-xxxx', '+81 (98) 765-4321', /^\+{0,1}81/],
     ['US', react_1.default.createElement(US_1.default, { key: "us" }), '1', '+1 xxx xxx-xx-xx', '+1 987 654-32-10', /^\+{0,1}1/],

package/Table/Table.js

@@ -37,6 +37,61 @@ const StyledTable = styled_1.default.table `
     (0, react_2.css) `
       width: 100%;
     `};
+
+  @media only screen and (max-width: 1200px) {
+    /* Force table to not be like tables anymore */
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+    }
+
+    /* Hide table headers (but not display: none;, for accessibility) */
+    thead tr {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+    }
+
+    tr {
+      margin: 0 0 1rem 0;
+      background: ${({ theme }) => theme.color.surface.toString()};
+    }
+
+    tr:nth-of-type(odd) {
+      background: ${({ theme }) => theme.color.surface.darken(30).toString()};
+    }
+
+    td {
+      /* Behave  like a "row" */
+      border: none;
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.surface.darken(20).alpha(0.8).toString()};
+      position: relative;
+      padding-left: 50%;
+      text-align: left !important;
+    }
+
+    tr:nth-of-type(odd) td {
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.surface.darken(50).alpha(0.8).toString()};
+    }
+
+    td:before {
+      /* Now like a table header */
+      position: absolute;
+      /* Top/left values mimic padding */
+      top: 50%;
+      transform: translateY(-50%);
+      left: 1em;
+      width: 45%;
+      padding-right: 1em;
+      white-space: nowrap;
+    }
+  }
 `;
 const Table = (props, ref) => {
     const { children, fullWidth } = props, nativeProps = __rest(props, ["children", "fullWidth"]);

package/Typography/Base.d.ts

@@ -5,6 +5,6 @@
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export default Base;

package/Typography/Blockquote.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const Blockquote: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, {}>;
 export default Blockquote;

package/Typography/List.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const Ul: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const Ol: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
 export declare const Li: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export default Ul;

package/Typography/U.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const U: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export default U;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.66",
+  "version": "0.1.0-rc.68",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -28,71 +28,71 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/plugin-transform-typescript": "^7.22.15",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@babel/runtime": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.6",
+    "@babel/plugin-transform-typescript": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.6",
     "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@loadable/babel-plugin": "^5.16.1",
     "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@types/node": "^20.8.10",
-    "@types/nodemon": "^1.19.4",
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-slick": "^0.23.11",
-    "@types/webpack-bundle-analyzer": "^4.6.2",
-    "@types/webpack-env": "^1.18.3",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@types/node": "^20.10.5",
+    "@types/nodemon": "^1.19.6",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-slick": "^0.23.13",
+    "@types/webpack-bundle-analyzer": "^4.6.3",
+    "@types/webpack-env": "^1.18.4",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "babel-loader": "^9.1.3",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-file-progress": "^1.3.0",
-    "eslint-plugin-formatjs": "^4.11.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-formatjs": "^4.11.3",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.3",
-    "nodemon": "^3.0.1",
+    "html-webpack-plugin": "^5.6.0",
+    "nodemon": "^3.0.2",
     "nodemon-webpack-plugin": "^4.8.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.18.0",
+    "react-router-dom": "^6.21.1",
     "react-test-renderer": "^18.2.0",
     "shebang-loader": "^0.0.1",
     "terser-webpack-plugin": "^5.3.9",
-    "ts-node": "^10.9.1",
-    "type-fest": "^4.6.0",
-    "typescript": "^5.2.2",
+    "ts-node": "^10.9.2",
+    "type-fest": "^4.8.3",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }