@scm-manager/ui-components 2.27.3-20211117-144126 → 2.27.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.27.3-20211117-144126",
+  "version": "2.27.4",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.27.3-20211117-144126",
+    "@scm-manager/ui-tests": "^2.27.4",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -37,6 +37,7 @@
     "@types/fetch-mock": "^7.3.1",
     "@types/jest": "^24.0.19",
     "@types/lowlight": "^0.0.0",
+    "@types/query-string": "5",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-router-dom": "^5.1.0",
@@ -60,21 +61,22 @@
     "sass-loader": "^12.3.0",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-themes": "^6.1.0",
+    "tabbable": "^5.2.1",
     "to-camel-case": "^1.0.0",
     "webpack": "^5.61.0",
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.27.3-20211117-144126",
-    "@scm-manager/ui-extensions": "^2.27.3-20211117-144126",
-    "@scm-manager/ui-types": "^2.27.3-20211117-144126",
+    "@scm-manager/ui-api": "^2.27.4",
+    "@scm-manager/ui-extensions": "^2.27.4",
+    "@scm-manager/ui-types": "^2.27.4",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "lowlight": "^1.13.0",
     "prism-themes": "^1.4.0",
-    "query-string": "6.14.1",
+    "query-string": "5",
     "react": "^17.0.1",
     "react-diff-view": "^2.4.1",
     "react-dom": "^17.0.1",
@@ -91,7 +93,6 @@
     "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
-    "tabbable": "^5.2.1",
     "unified": "^9.2.1"
   },
   "babel": {

package/src/Autocomplete.tsx

@@ -47,7 +47,7 @@ class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available"
+    noOptionsMessage: "No suggestion available",
   };
 
   handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
@@ -64,7 +64,7 @@ class Autocomplete extends React.Component<Props, State> {
     selectValue: ValueType<SelectValue>,
     selectOptions: readonly SelectValue[]
   ): boolean => {
-    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
     const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
@@ -79,7 +79,7 @@ class Autocomplete extends React.Component<Props, State> {
       noOptionsMessage,
       loadSuggestions,
       creatable,
-      className
+      className,
     } = this.props;
 
     return (
@@ -88,7 +88,6 @@ class Autocomplete extends React.Component<Props, State> {
         <div className="control">
           {creatable ? (
             <AsyncCreatable
-              className="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}
@@ -97,13 +96,13 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={value => {
+              onCreateOption={(value) => {
                 this.selectValue({
                   label: value,
                   value: {
                     id: value,
-                    displayName: value
-                  }
+                    displayName: value,
+                  },
                 });
               }}
               aria-label={helpText || label}

package/src/BranchSelector.tsx

@@ -61,8 +61,8 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
             <MinWidthControl className="control">
               <Select
                 className="is-fullwidth"
-                options={branches.map(b => ({ label: b.name, value: b.name }))}
-                onChange={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
+                options={branches.map((b) => ({ label: b.name, value: b.name }))}
+                onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
                 disabled={!!disabled}
                 value={selectedBranch}
                 addValueToOptions={true}

package/src/Breadcrumb.tsx

@@ -110,7 +110,6 @@ const ActionBar = styled.div`
   }
 `;
 
-// TODO ersetzen?
 const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
 `;

package/src/CardColumnGroup.tsx

@@ -41,13 +41,13 @@ class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false
+      collapsed: false,
     };
   }
 
   toggleCollapse = () => {
-    this.setState(prevState => ({
-      collapsed: !prevState.collapsed
+    this.setState((prevState) => ({
+      collapsed: !prevState.collapsed,
     }));
   };
 
@@ -84,18 +84,18 @@ class CardColumnGroup extends React.Component<Props, State> {
 
     return (
       <div className="mb-4">
-        <h3>
+        <h2>
           <span className={classNames("is-size-4", "is-clickable")} onClick={this.toggleCollapse}>
             {icon}
           </span>{" "}
           {url ? (
-            <Link to={url} className="has-text-secondary-more">
+            <Link to={url} className="has-text-dark">
               {name}
             </Link>
           ) : (
             name
           )}
-        </h3>
+        </h2>
         <hr />
         <div className={classNames("columns", "card-columns", "is-multiline", "mx-3", "my-0")}>{content}</div>
         <div className="is-clearfix" />

package/src/DangerZone.tsx

@@ -40,7 +40,6 @@ export const DangerZone = styled.div`
     }
   }
 
-  // TODO ersetzen?
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;

package/src/DateFromNow.tsx

@@ -36,9 +36,8 @@ const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
-  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
+    <DateElement className={className} title={formatter.formatFull()}>
       {formatter.formatDistance()}
     </DateElement>
   );

package/src/DateShort.tsx

@@ -36,9 +36,8 @@ const DateShort: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
-  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} dateTime={dateTime} title={dateTime}>
+    <DateElement className={className} title={formatter.formatFull()}>
       {formatter.formatShort()}
     </DateElement>
   );

package/src/ErrorBoundary.tsx

@@ -113,7 +113,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo
+    errorInfo,
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -135,7 +135,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo
+      errorInfo,
     });
   }
 

package/src/Icon.tsx

@@ -40,20 +40,20 @@ type Props = {
 
 const Icon: FC<Props> = ({
   iconStyle = "fas",
-  color = "secondary",
+  color = "grey-light",
   title,
   name,
   className,
   onClick,
   testId,
-  tabIndex,
+  tabIndex = -1,
   onEnter,
-  alt = title
+  alt = title,
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}

package/src/Logo.stories.tsx

@@ -26,7 +26,6 @@ import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Logo from "./Logo";
 
-// TODO Ersetzen?
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;

package/src/OverviewPageActions.tsx

@@ -52,7 +52,7 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder
+  searchPlaceholder,
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -63,7 +63,7 @@ const OverviewPageActions: FC<Props> = ({
     <div className="column is-flex">
       <Select
         className="is-fullwidth"
-        options={groups.map(g => ({ value: g, label: g }))}
+        options={groups.map((g) => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
       />

package/src/SplitAndReplace.tsx

@@ -33,10 +33,9 @@ export type Replacement = {
 type Props = {
   text: string;
   replacements: Replacement[];
-  textWrapper?: (s: string) => ReactNode;
 };
 
-const defaultTextWrapper = (s: string) => {
+const textWrapper = (s: string) => {
   const first = s.startsWith(" ") ? <>&nbsp;</> : "";
   const last = s.endsWith(" ") ? <>&nbsp;</> : "";
   return (
@@ -48,7 +47,7 @@ const defaultTextWrapper = (s: string) => {
   );
 };
 
-const SplitAndReplace: FC<Props> = ({ text, replacements, textWrapper = defaultTextWrapper }) => {
+const SplitAndReplace: FC<Props> = ({ text, replacements }) => {
   const parts = textSplitAndReplace<ReactNode>(text, replacements, textWrapper);
   if (parts.length === 0) {
     return <>{parts[0]}</>;

package/src/SyntaxHighlighter.stories.tsx

@@ -48,7 +48,7 @@ storiesOf("SyntaxHighlighter", module)
   ))
   .add("Go", () => (
     <Spacing>
-      <SyntaxHighlighter language="go" value={GoHttpServer} />
+      <SyntaxHighlighter language="golang" value={GoHttpServer} />
     </Spacing>
   ))
   .add("Javascript", () => (

package/src/Tooltip.tsx

@@ -36,7 +36,7 @@ export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
 class Tooltip extends React.Component<Props> {
   static defaultProps = {
-    location: "right"
+    location: "right",
   };
 
   render() {