revdev-components 0.55.0 → 0.56.0

package/build/frontHeader/index.d.ts

@@ -1,8 +1,24 @@
 import React from "react";
-interface Props {
+import { FrontControlSelect } from "src/interfaces";
+export interface FrontHeaderProps {
     children?: React.ReactNode;
     className?: string;
     logoHref: string;
+    loginHref: string;
+    registerHref: string;
+    language: FrontControlSelect;
+    text: {
+        login: string;
+        register: string;
+        portfolio: string;
+        settings: string;
+        logout: string;
+    };
+    user?: {
+        username: string;
+        profileHref: string;
+        settingsHref: string;
+        onLogOut: () => void;
+    };
 }
-export declare const FrontHeader: React.FC<Props>;
-export {};
+export declare const FrontHeader: React.FC<FrontHeaderProps>;

package/build/index.js

@@ -5046,17 +5046,11 @@ var RowDivision = function (_a) {
     return React.createElement("div", { className: classNames(s$3.root, className) }, children);
 };
 
-var s$2 = {"root":"index-module_root__Q7VjD","content":"index-module_content__T-JEW"};
+var s$2 = {"root":"index-module_root__Q7VjD","root__shadow":"index-module_root__shadow__OhPad","logo":"index-module_logo__KCA1E","content":"index-module_content__T-JEW","link":"index-module_link__nXsvL","select":"index-module_select__22zW6"};
 
-var FrontHeader = function (_a) {
-    var children = _a.children, className = _a.className, logoHref = _a.logoHref;
-    return (React.createElement("div", { className: classNames(s$2.root, className) },
-        React.createElement(AppLink, { className: s$2.logo, href: logoHref }, "AlfaSchool"),
-        React.createElement("div", { className: s$2.content }, children),
-        React.createElement("div", { className: s$2.right }, "Log Out")));
-};
+var s$1 = {"popover":"index-module_popover__lwzdT","item":"index-module_item__pfayG"};
 
-var s$1 = {"root":"index-module_root__UzFV2","column":"index-module_column__XEWzG","children":"index-module_children__y7-7m","flex":"index-module_flex__83M30","button":"index-module_button__U8D6K"};
+var s = {"root":"index-module_root__UzFV2","column":"index-module_column__XEWzG","children":"index-module_children__y7-7m","flex":"index-module_flex__83M30","button":"index-module_button__U8D6K"};
 
 var AppTooltip = function (_a) {
     var _b = _a.placement, placement = _b === void 0 ? "top" : _b, children = _a.children, props = __rest(_a, ["placement", "children"]);
@@ -5067,14 +5061,14 @@ var AppTooltip = function (_a) {
 var IconBoxContent = function (_a) {
     var _b;
     var flexRoot = _a.flexRoot, icon = _a.icon, rightIcon = _a.rightIcon, children = _a.children, className = _a.className, contentClassName = _a.contentClassName, onClick = _a.onClick, _c = _a.direction, direction = _c === void 0 ? "row" : _c, elementRev = _a.elementRev, style = _a.style;
-    return (React.createElement("div", { ref: elementRev, style: style, className: classNames(s$1.root, (_b = {},
-            _b[s$1.flex] = flexRoot,
-            _b[s$1.button] = !!onClick,
-            _b[s$1.column] = direction === "column",
+    return (React.createElement("div", { ref: elementRev, style: style, className: classNames(s.root, (_b = {},
+            _b[s.flex] = flexRoot,
+            _b[s.button] = !!onClick,
+            _b[s.column] = direction === "column",
             _b), className), onClick: onClick },
-        icon ? React.createElement(RegularIcon, { className: s$1.icon, name: icon }) : null,
-        children ? React.createElement("div", { className: classNames(contentClassName, s$1.root__children) }, children) : null,
-        rightIcon ? React.createElement(RegularIcon, { className: s$1.icon, name: rightIcon }) : null));
+        icon ? React.createElement(RegularIcon, { className: s.icon, name: icon }) : null,
+        children ? React.createElement("div", { className: classNames(contentClassName, s.root__children) }, children) : null,
+        rightIcon ? React.createElement(RegularIcon, { className: s.icon, name: rightIcon }) : null));
 };
 var IconDivision = function (props) {
     var tooltip = props.tooltip, tooltipPlacement = props.tooltipPlacement, hoverOpenDelay = props.hoverOpenDelay;
@@ -5082,13 +5076,11 @@ var IconDivision = function (props) {
         React.createElement(IconBoxContent, __assign({}, props)))) : (React.createElement(IconBoxContent, __assign({}, props)));
 };
 
-var s = {"popover":"index-module_popover__lwzdT","item":"index-module_item__pfayG"};
-
 var PopoverSelect = function (_a) {
-    var options = _a.options, value = _a.value, onChange = _a.onChange, icon = _a.icon, renderOption = _a.renderOption;
+    var options = _a.options, value = _a.value, onChange = _a.onChange, icon = _a.icon, renderOption = _a.renderOption, showValue = _a.showValue;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var handleChange = React.useCallback(function (newValue) {
-        onChange(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         setOpen(false);
     }, [open, onChange]);
     var handleOpen = React.useCallback(function () {
@@ -5100,11 +5092,60 @@ var PopoverSelect = function (_a) {
     var selectedOption = React.useMemo(function () {
         return options.find(function (x) { return x.value === value; });
     }, [options, value]);
-    var popoverContent = React.useMemo(function () { return (React.createElement("div", { className: s.popover }, options
+    var popoverContent = React.useMemo(function () { return (React.createElement("div", { className: s$1.popover }, options
         .filter(function (x) { return x.value !== value; })
-        .map(function (x) { return (React.createElement(React.Fragment, { key: x.value }, renderOption ? (renderOption(x, { className: s.item, onClick: function () { return handleChange(x.value); } })) : (React.createElement("div", { className: s.item, onClick: function () { return handleChange(x.value); } }, x.label)))); }))); }, [options, value, handleChange, renderOption]);
+        .map(function (x) { return (React.createElement(React.Fragment, { key: x.value }, renderOption ? (renderOption(x, { className: s$1.item, onClick: function () { return handleChange(x.value); } })) : (React.createElement("div", { className: s$1.item, onClick: function () { return handleChange(x.value); } }, x.label)))); }))); }, [options, value, handleChange, renderOption]);
     return (React.createElement(antd.Popover, { content: popoverContent, open: open, onOpenChange: closePopover, placement: "bottomRight" },
-        React.createElement(IconDivision, { icon: icon, onClick: handleOpen, rightIcon: open ? "expand-less" : "expand-more" }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)));
+        React.createElement(IconDivision, { icon: icon, onClick: handleOpen, rightIcon: open ? "expand-less" : "expand-more" }, showValue ? value : selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label)));
+};
+
+var FrontHeader = function (_a) {
+    var _b;
+    var user = _a.user, children = _a.children, className = _a.className, logoHref = _a.logoHref, loginHref = _a.loginHref, registerHref = _a.registerHref, language = _a.language, text = _a.text;
+    var _c = React.useState(false), shadow = _c[0], setShadow = _c[1];
+    function handleScroll() {
+        setShadow(window.scrollY > 50);
+    }
+    React.useEffect(function () {
+        if (window) {
+            window.addEventListener("scroll", handleScroll);
+            return function () { return window.removeEventListener("scroll", handleScroll); };
+        }
+    }, []);
+    var settingsOptions = React.useMemo(function () {
+        return user
+            ? [
+                {
+                    value: user.profileHref,
+                    label: text.portfolio,
+                },
+                {
+                    value: user.settingsHref,
+                    label: text.settings,
+                },
+                {
+                    value: "logout",
+                    label: text.logout,
+                },
+            ]
+            : [];
+    }, [user, text]);
+    var handleSettingRender = React.useCallback(function (_a, _b) {
+        var value = _a.value, label = _a.label;
+        var className = _b.className, onClick = _b.onClick;
+        return value === "logout" ? (React.createElement("div", { className: className, onClick: function () { return onClick(value); } }, label)) : (React.createElement(AppLink, { href: value, className: className }, label));
+    }, []);
+    return (React.createElement("div", { className: classNames(s$2.root, (_b = {},
+            _b[s$2.root__shadow] = shadow,
+            _b), className) },
+        React.createElement(AppLink, { className: s$2.logo, href: logoHref }, "AlfaSchool"),
+        React.createElement("div", { className: s$2.content }, children),
+        !user && (React.createElement("div", { className: s$2.link },
+            React.createElement(AppLink, { href: loginHref }, text.login || "Login"),
+            React.createElement(AppLink, { href: registerHref }, text.register || "Register"))),
+        React.createElement("div", { className: s$2.select },
+            user && React.createElement(PopoverSelect, { showValue: true, value: user.username, options: settingsOptions, renderOption: handleSettingRender }),
+            React.createElement(PopoverSelect, __assign({ icon: "language" }, language)))));
 };
 
 exports.AppForm = AppForm;

package/build/interfaces/control.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
+import { ValueOption } from "./option";
 export interface HeaderProps {
     children: React.ReactNode;
     className?: string;
 }
+export interface FrontControlSelect {
+    value: string;
+    options: ValueOption[];
+    onChange?: (newValue: string) => void;
+}

package/build/popoverSelect/index.d.ts

@@ -9,9 +9,10 @@ export type PopoverSelectRenderOption<TOption = ValueOption> = (option: TOption,
 interface Props<TOption = ValueOption> {
     value: string;
     options: TOption[];
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     icon?: RegularIconName;
     renderOption?: PopoverSelectRenderOption<TOption>;
+    showValue?: boolean;
 }
 export declare const PopoverSelect: React.FC<Props>;
 export {};

package/build/styles.css

@@ -1,9 +1,23 @@
 :root {
+  --fontFamily: roboto, sans-serif;
   --color: #222;
-  --headerBorderColor: #cecece88;
-  --linkColor: #1f2f5a;
-  --passiveColor: #aaa;
+  --passiveColor: #888;
+  --linkColor: #332e56;
+  --passiveLinkColor: #8c9eb8;
+  --backgroundColor: #fff;
+  --hoverBackgroundColor: #f2f2f2;
+  --optionBackgroundColor: #dcdee4;
+  --hoverOptionBackgroundColor: #c4c6cc;
+  --borderColor: #dadada;
+  --errorColor: #b50000;
+  --successColor: #32a800;
+  --errorBackgroundColor: #ffaaad;
+  --successBackgroundColor: #aae094;
+  --scrollTrackColor: #f2f2f2;
+  --scrollThumbColor: #e5e5e5;
+  --scrollThumbHoverColor: #d8d8d8;
   --spacing: 10px;
+  --headerBorderColor: #cecece88;
   --centralDivisionMaxWidth: 1000px;
   --frontHeaderHeight: 50px;
   --backSidebarBackgroundColor: rgb(58 63 81);
@@ -22,6 +36,7 @@
 html,
 body {
   color: var(--color);
+  font-family: var(--fontFamily);
 }
 .index-module_root__-LDR1 {
   display: inline-block;
@@ -356,15 +371,58 @@ body {
 .index-module_root__Q7VjD {
   display: flex;
   align-items: center;
-  gap: var(--spacing);
+  gap: 16px;
   padding-left: var(--spacing);
   padding-right: var(--spacing);
   height: var(--frontHeaderHeight);
+  border-bottom: 1px solid var(--borderColor);
+  background-color: var(--backgroundColor);
+}
+.index-module_root__shadow__OhPad {
+  box-shadow: 0 0 15px var(--borderColor);
+}
+
+.index-module_logo__KCA1E {
+  font-weight: 800;
+}
+.index-module_logo__KCA1E:hover {
+  text-decoration: none !important;
 }
 
 .index-module_content__T-JEW {
   flex: 1;
 }
+
+.index-module_link__nXsvL {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing);
+  text-transform: uppercase;
+}
+
+.index-module_select__22zW6 {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing);
+}
+.index-module_popover__lwzdT {
+  display: flex;
+  flex-direction: column;
+}
+
+.index-module_item__pfayG {
+  padding: 10px 15px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--borderColor);
+  font-weight: 500;
+  font-size: 16px;
+}
+.index-module_item__pfayG:last-of-type {
+  border: none;
+}
+.index-module_item__pfayG:hover {
+  background-color: var(--hoverBackgroundColor);
+}
 .index-module_root__UzFV2 {
   display: flex;
   align-items: center;
@@ -389,22 +447,4 @@ body {
 
 .index-module_button__U8D6K {
   cursor: pointer;
-}
-.index-module_popover__lwzdT {
-  display: flex;
-  flex-direction: column;
-}
-
-.index-module_item__pfayG {
-  padding: 10px 15px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--borderColor);
-  font-weight: 500;
-  font-size: 16px;
-}
-.index-module_item__pfayG:last-of-type {
-  border: none;
-}
-.index-module_item__pfayG:hover {
-  background-color: var(--hoverBackgroundColor);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {
@@ -36,6 +36,7 @@
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
     "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/addon-viewport": "^8.5.8",
     "@storybook/blocks": "^8.4.5",
     "@storybook/nextjs": "^8.4.5",
     "@storybook/react": "^8.4.5",