graphen 1.10.5 → 1.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [
@@ -40,16 +40,16 @@
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@types/react": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "classnames": "^2.2.6",
     "css-loader": "^3.6.0",
     "cypress": "^13.6.4",
-    "eslint": "^7.2.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-codait": "^1.1.1",
+    "eslint-config-codait": "^1.1.3",
     "eslint-config-prettier": "^8.10.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-cypress": "^2.11.2",

package/src/components/Accordion/styles/_styles.scss

@@ -1,6 +1,5 @@
 .gc-accordion {
   @extend .gc-panel;
-  @extend .gc-panel--separator;
 
   &__title {
     @extend .gc-panel__title;

package/src/components/Button/index.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import classNames from "classnames";
 
 type Props = {
-  className?: string,
-  children: string,
-  onClick?: () => void,
+  className?: string;
+  children: string;
+  onClick?: () => void;
+  isFull?: boolean;
 };
 
 function Button(props: Props) {
-  const { onClick, children, className } = props;
+  const { onClick, children, className, isFull } = props;
 
-  const buttonClasses = classNames(className, "gc-btn");
+  const buttonClasses = classNames(className, "gc-btn", {
+    "gc-btn--full": isFull,
+  });
 
   return (
     <button onClick={onClick} className={buttonClasses} type='button'>
@@ -22,6 +25,7 @@ function Button(props: Props) {
 Button.defaultProps = {
   className: '',
   onClick: () => {},
+  isFull: false,
 };
 
 export default Button;

package/src/components/Card/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+  skin?: string;
+  isGradient?: boolean;
+};
+
+function Card(props: Props) {
+  const { children, className, skin, isGradient } = props;
+  const dialogClasses = classNames(className, "gc-card", {
+    'gc-card--default': skin === 'default',
+    'gc-card--gradient': isGradient,
+  });
+
+  return <div className={dialogClasses}>{children}</div>;
+}
+
+// @ts-ignore
+Card.defaultProps = {
+  className: '',
+  children: null,
+  skin: "default",
+  isGradient: false,
+};
+
+export default Card;

package/src/components/Dropdown/index.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useCallback } from "react";
-import * as _ from "lodash";
+import React, { useState, useCallback, useEffect } from "react";
 import classNames from "classnames";
 
 type Props = {
@@ -11,20 +10,30 @@ type Props = {
 
 function Dropdown(props: Props) {
   const { initValue, label, items, onChange } = props;
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedItem, setSelectedItem] = useState(initValue);
+
+  useEffect(() => {
+    setSelectedItem(initValue);
+  }, [initValue, setSelectedItem]);
+
   const expandMenu = useCallback(() => {
     setIsExpanded((isShown) => !isShown);
   }, [setIsExpanded]);
+
   const selectItem = useCallback(
     (item) => {
       onChange(item.value);
       setIsExpanded(false);
-      setSelectedItem(_.find(items, (i) => i.value === item.value));
+      setSelectedItem(items.find((i) => i.value === item.value));
     },
     [setIsExpanded, setSelectedItem, items]
   );
-  const buttonClasses = `gc-dropdown__btn ${label ? 'gc-dropdown__btn--with-label' : ''}`;
+
+  const buttonClasses = classNames('gc-dropdown__btn', {
+    'gc-dropdown__btn--with-label': label,
+  });
 
   return (
     <div className="gc-dropdown">
@@ -44,10 +53,12 @@ function Dropdown(props: Props) {
           <div className="gc-dropdown__content">
             <ul className="gc-dropdown__list">
               {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-              {_.map(items, (item) => {
+              {items.map((item, index) => {
                 const dropdownItemClasses = classNames("gc-dropdown__item", {
-                  "gc-dropdown__item--first": item === items[0],
+                  "gc-dropdown__item--first": index === 0,
+                  "gc-dropdown__item--selected": item.value === selectedItem.value,
                 });
+
                 return (
                   /* eslint-disable react/button-has-type */
                   <li

package/src/components/Dropdown/styles/_styles.scss

@@ -62,8 +62,13 @@
       border-top: none;
     }
 
+    &--selected {
+      background-color: $colour-gallery;
+    }
+
     &:hover {
       cursor: pointer;
+      background-color: $color-michka;
     }
   }
 

package/src/components/Flex/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children?: React.ReactNode,
+  isVertical?: boolean,
+  alignItems?: string,
+  alignContent?: string,
+  wrap?: string,
+};
+
+function Flex(props: Props) {
+  const { children, className, isVertical, alignItems, alignContent, wrap } = props;
+  const dialogClasses = classNames(className, "gc-flex", {
+    'gc-flex--vertical': isVertical,
+    'gc-flex--align-items-center': alignItems === 'center',
+    'gc-flex--align-content-center': alignContent === 'center',
+    'gc-flex--wrap': wrap === 'wrap',
+  });
+
+  return <div className={dialogClasses}>{children}</div>;
+}
+
+// @ts-ignore
+Flex.defaultProps = {
+  className: '',
+  children: null,
+  isVertical: false,
+  alignItems: undefined,
+  alignContent: undefined,
+  wrap: undefined,
+};
+
+export default Flex;

package/src/components/Flex/styles/_styles.scss

@@ -1,11 +1,19 @@
 .gc-flex {
   display: flex;
 
-  &--wrap {
-    flex-wrap: wrap;
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--align-items-center {
+    align-items: center;
   }
 
-  &__item {
-    flex-grow: 1;
+  &--align-content-center {
+    align-content: center;
+  }
+
+  &--wrap {
+    flex-wrap: wrap;
   }
 }

package/src/components/FlexItem/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children?: React.ReactNode,
+  isGrow?: boolean;
+  isShrink?: boolean;
+};
+
+function FlexItem(props: Props) {
+  const { children, className, isGrow, isShrink } = props;
+  const dialogClasses = classNames(className, "gc-flex__item", {
+    'gc-flex__item--grow': isGrow,
+    'gc-flex__item--shrink': isShrink,
+  });
+
+  return <div className={dialogClasses}>{children}</div>;
+}
+
+// @ts-ignore
+FlexItem.defaultProps = {
+  className: '',
+  children: null,
+  isGrow: false,
+  isShrink: false,
+};
+
+export default FlexItem;

package/src/components/FlexItem/styles/_styles.scss

@@ -0,0 +1,11 @@
+.gc-flex {
+  &__item {
+    &--grow {
+      flex-grow: 1;
+    }
+
+    &--shrink {
+      flex-shrink: 1;
+    }
+  }
+}

package/src/components/Link/index.tsx

@@ -3,21 +3,21 @@ import classNames from "classnames";
 import * as constants from "src/variables/constants";
 
 type Props = {
-  link: string,
-  className?: string,
-  children?: React.ReactNode,
-  skin?: constants.Skin,
+  link: string;
+  className?: string;
+  children?: React.ReactNode;
+  skin?: constants.Skin;
 };
 
 function Link({
   link,
   className,
   children,
-  skin = constants.SKINS.primary,
+  skin,
 }: Props) {
   const classes = classNames("gc-link", className, {
-    "gc-link--primary": skin === constants.SKINS.primary,
-    "gc-link--default": skin === constants.SKINS.default,
+    "gc-link--primary": skin === constants.SKIN_PRIMARY,
+    "gc-link--default": skin === constants.SKIN_DEFAULT,
   });
 
   return (
@@ -31,7 +31,7 @@ function Link({
 Link.defaultProps = {
   className: '',
   children: null,
-  skin: undefined,
+  skin: constants.SKIN_DEFAULT,
 };
 
 export default Link;

package/src/components/Logo/index.tsx

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 import classNames from "classnames";
 

package/src/components/Panel/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+  isSeparator?: boolean;
+  isBordered?: boolean;
+};
+
+function Panel(props: Props) {
+  const { children, className, isSeparator, isBordered } = props;
+  const dialogClasses = classNames(className, "gc-panel", {
+    'gc-panel--separator': isSeparator,
+    'gc-panel--bordered': isBordered,
+  });
+
+  return <div className={dialogClasses}>{children}</div>;
+}
+
+// @ts-ignore
+Panel.defaultProps = {
+  className: '',
+  children: null,
+  isSeparator: false,
+  isBordered: false,
+};
+
+export default Panel;

package/src/components/PanelContent/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+function PanelContent(props: Props) {
+  const { children, className} = props;
+  const dialogClasses = classNames(className, "gc-panel__content");
+
+  return <article className={dialogClasses}>{children}</article>;
+}
+
+// @ts-ignore
+PanelContent.defaultProps = {
+  className: '',
+  children: null,
+};
+
+export default PanelContent;

package/src/components/PanelContent/styles/_styles.scss

@@ -0,0 +1,6 @@
+.gc-panel {
+  &__content {
+    padding: $spacing-medium;
+    flex-grow: 1;
+  }
+}

package/src/components/PanelFooter/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+function PanelFooter(props: Props) {
+  const { children, className} = props;
+  const dialogClasses = classNames(className, "gc-panel__footer");
+
+  return <div className={dialogClasses}>{children}</div>;
+}
+
+// @ts-ignore
+PanelFooter.defaultProps = {
+  className: '',
+  children: null,
+};
+
+export default PanelFooter;

package/src/components/PanelFooter/styles/_styles.scss

@@ -0,0 +1,5 @@
+.gc-panel {
+  &__footer {
+    padding: $spacing-medium;
+  }
+}

package/src/components/PanelTitle/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+function PanelTitle(props: Props) {
+  const { children, className} = props;
+  const dialogClasses = classNames(className, "gc-panel__title");
+
+  return <header className={dialogClasses}>{children}</header>;
+}
+
+// @ts-ignore
+PanelTitle.defaultProps = {
+  className: '',
+  children: null,
+};
+
+export default PanelTitle;

package/src/components/PanelTitle/styles/_styles.scss

@@ -0,0 +1,6 @@
+.gc-panel {
+  &__title {
+    font-size: 20px;
+    padding: $spacing-medium;
+  }
+}

package/src/components/Separator/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+};
+
+function Separator(props: Props) {
+  const { className} = props;
+  const dialogClasses = classNames(className, "gc-separator");
+
+  return <div className={dialogClasses} />;
+}
+
+// @ts-ignore
+Separator.defaultProps = {
+  className: '',
+};
+
+export default Separator;

package/src/example.tsx

@@ -125,7 +125,7 @@ class ExampleApp extends React.PureComponent<Props, State> {
           <header className="gc-panel__title">Link</header>
           <div className="gc-panel__content">
             <Link link="http://some-url">Primary Link</Link> ,{" "}
-            <Link link="http://some-url" skin={constants.SKINS.default}>
+            <Link link="http://some-url" skin={constants.SKIN_DEFAULT}>
               Default Link
             </Link>
           </div>

package/src/index.d.ts

@@ -0,0 +1 @@
+declare module 'src/components/*';

package/src/index.ts

@@ -1,6 +1,6 @@
-// @flow
 import Accordion from "src/components/Accordion";
 import Button from "src/components/Button";
+import Card from "src/components/Card";
 import Dialog from "src/components/Dialog";
 import Icon from "src/components/Icon";
 import Input from "src/components/Input";
@@ -9,15 +9,23 @@ import Joystick from "src/components/Joystick";
 import Link from "src/components/Link";
 import Loader from "src/components/Loader";
 import Scroller from "src/components/Scroller";
+import Separator from "src/components/Separator";
 import Tooltip from "src/components/Tooltip";
 import Validation from "src/components/Validation";
 import Logo from "src/components/Logo";
 import Dropdown from "src/components/Dropdown";
+import Flex from "src/components/Flex";
+import FlexItem from "src/components/FlexItem";
+import Panel from "src/components/Panel";
+import PanelContent from "src/components/PanelContent";
+import PanelFooter from "src/components/PanelFooter";
+import PanelTitle from "src/components/PanelTitle";
 import * as constants from "src/variables/constants";
 
 export {
   Accordion,
   Button,
+  Card,
   Dialog,
   Icon,
   Input,
@@ -25,10 +33,19 @@ export {
   Link,
   Loader,
   Scroller,
+  Separator,
   Tooltip,
   Validation,
   Logo,
   Image,
   Dropdown,
+  Flex,
+  FlexItem,
+  Panel,
+  PanelContent,
+  PanelFooter,
+  PanelTitle,
   constants
 };
+
+

package/src/style.scss

@@ -18,6 +18,7 @@
 @import "components/Card/styles/styles";
 @import "components/Dialog/styles/styles";
 @import "components/Flex/styles/styles";
+@import "components/FlexItem/styles/styles";
 @import "components/Input/styles/styles";
 @import "components/Image/styles/styles";
 @import "components/Joystick/styles/styles";
@@ -29,6 +30,9 @@
 @import "components/Navigation/styles/styles";
 @import "components/Navigation/styles/submenu";
 @import "components/Panel/styles/styles";
+@import "components/PanelContent/styles/styles";
+@import "components/PanelFooter/styles/styles";
+@import "components/PanelTitle/styles/styles";
 @import "components/Sample/styles/mixins";
 @import "components/Sample/styles/styles";
 @import "components/Separator/styles/styles";

package/src/variables/constants.ts

@@ -0,0 +1,4 @@
+export const SKIN_DEFAULT = "default";
+export const SKIN_PRIMARY = "primary";
+
+export type Skin = typeof SKIN_DEFAULT | typeof SKIN_PRIMARY;

package/src/variables/constants.js

@@ -1,7 +0,0 @@
-// @flow
-export const SKINS = {
-  primary: "primary",
-  default: "default",
-};
-
-export type Skin = $Keys<typeof SKINS>;