@scm-manager/ui-components 2.25.1-20211003-143409 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.25.1-20211003-143409",
+  "version": "2.26.0",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,10 +25,10 @@
     "@scm-manager/jest-preset": "^2.12.7",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.25.1-20211003-143409",
-    "@storybook/addon-actions": "^6.1.17",
-    "@storybook/addon-storyshots": "^6.1.17",
-    "@storybook/react": "^6.1.17",
+    "@scm-manager/ui-tests": "^2.26.0",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-storyshots": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@types/classnames": "^2.2.9",
     "@types/css": "^0.0.31",
     "@types/enzyme": "^3.10.3",
@@ -52,16 +52,18 @@
     "fetch-mock": "^7.5.1",
     "gitdiff-parser": "^0.1.2",
     "i18next-fetch-backend": "^2.2.0",
+    "mini-css-extract-plugin": "^1.6.2",
     "raf": "^3.4.0",
     "react-test-renderer": "^17.0.1",
     "storybook-addon-i18next": "^1.3.0",
+    "storybook-addon-themes": "^6.1.0",
     "to-camel-case": "^1.0.0",
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.25.1-20211003-143409",
-    "@scm-manager/ui-extensions": "^2.25.1-20211003-143409",
-    "@scm-manager/ui-types": "^2.25.1-20211003-143409",
+    "@scm-manager/ui-api": "^2.26.0",
+    "@scm-manager/ui-extensions": "^2.26.0",
+    "@scm-manager/ui-types": "^2.26.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

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 (
       <div className={classNames("field", className)}>
@@ -95,13 +95,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,
+                  },
                 });
               }}
             />

package/src/BranchSelector.stories.tsx

@@ -41,5 +41,5 @@ const Wrapper = styled.div`
 `;
 
 storiesOf("BranchSelector", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);

package/src/Breadcrumb.tsx

@@ -128,7 +128,10 @@ const Breadcrumb: FC<Props> = ({
     if (path) {
       const paths = path.split("/");
       return paths.map((pathFragment, index) => {
-        let currPath = paths.slice(0, index + 1).map(encodeURIComponent).join("/");
+        let currPath = paths
+          .slice(0, index + 1)
+          .map(encodeURIComponent)
+          .join("/");
         if (!currPath.endsWith("/")) {
           currPath = currPath + "/";
         }

package/src/CardColumn.stories.tsx

@@ -43,8 +43,8 @@ const footerRight = <small>right footer</small>;
 const baseDate = "2020-03-26T12:13:42+02:00";
 
 storiesOf("CardColumn", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <CardColumn
       link={link}

package/src/CardColumn.tsx

@@ -69,13 +69,12 @@ const CardColumn: FC<Props> = ({
     createLink = <Link className="overlay-column" to={link} />;
   } else if (action) {
     createLink = (
-      <a
+      <button
         className="overlay-column"
         onClick={(e) => {
           e.preventDefault();
           action();
         }}
-        href="#"
       />
     );
   }

package/src/HelpIcon.tsx

@@ -28,6 +28,8 @@ type Props = {
   className?: string;
 };
 
-const HelpIcon: FC<Props> = ({ className }) => <Icon name="question-circle" color="blue-light" className={className} alt="" />;
+const HelpIcon: FC<Props> = ({ className }) => (
+  <Icon name="question-circle" color="blue-light" className={className} alt="" />
+);
 
 export default HelpIcon;

package/src/Icon.stories.tsx

@@ -36,7 +36,7 @@ const colors = ["primary", "link", "info", "success", "warning", "danger", "whit
 const sizing = ["xs", "sm", "lg", "2x", "3x", "5x", "7x", "10x"];
 
 storiesOf("Icon", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Default", () => (
     <>
       <Icon name="cat" />
@@ -48,7 +48,7 @@ storiesOf("Icon", module)
   .add("Colors", () => (
     <>
       <Icon title="default color" name="cat" />
-      {colors.map(color => (
+      {colors.map((color) => (
         <Icon key={color} title={color} name="cat" color={color} />
       ))}
     </>
@@ -56,7 +56,7 @@ storiesOf("Icon", module)
   .add("Sizing", () => (
     <>
       <Icon title="default size" name="cat" />
-      {sizing.map(size => (
+      {sizing.map((size) => (
         <Icon key={size} title={"fa-" + size} name={"cat fa-" + size} />
       ))}
     </>

package/src/Notification.stories.tsx

@@ -44,7 +44,7 @@ const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntrie
 
 storiesOf("Notification", module)
   .addDecorator(RoutingDecorator)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
   .add("Primary", () => <Notification type="primary">{content}</Notification>)
   .add("Success", () => <Notification type="success">{content}</Notification>)
   .add("Info", () => <Notification type="info">{content}</Notification>)

package/src/Paginator.test.tsx

@@ -28,7 +28,7 @@ import Paginator from "./Paginator";
 
 xdescribe("paginator rendering tests", () => {
   const dummyLink = {
-    href: "https://dummy"
+    href: "https://dummy",
   };
 
   it("should render all buttons but disabled, without links", () => {
@@ -36,13 +36,13 @@ xdescribe("paginator rendering tests", () => {
       page: 10,
       pageTotal: 20,
       _links: {},
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
     const buttons = paginator.find("Button");
     expect(buttons.length).toBe(7);
-    buttons.forEach(button => {
+    buttons.forEach((button) => {
       // @ts-ignore ???
       expect(button.props.disabled).toBeTruthy();
     });
@@ -55,9 +55,9 @@ xdescribe("paginator rendering tests", () => {
       _links: {
         first: dummyLink,
         next: dummyLink,
-        last: dummyLink
+        last: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
@@ -92,9 +92,9 @@ xdescribe("paginator rendering tests", () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink
+        last: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
@@ -132,9 +132,9 @@ xdescribe("paginator rendering tests", () => {
       pageTotal: 148,
       _links: {
         first: dummyLink,
-        prev: dummyLink
+        prev: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
@@ -169,9 +169,9 @@ xdescribe("paginator rendering tests", () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink
+        last: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
@@ -211,9 +211,9 @@ xdescribe("paginator rendering tests", () => {
         first: dummyLink,
         prev: dummyLink,
         next: dummyLink,
-        last: dummyLink
+        last: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     const paginator = shallow(<Paginator collection={collection} />);
@@ -258,12 +258,12 @@ xdescribe("paginator rendering tests", () => {
       _links: {
         first: dummyLink,
         prev: {
-          href: "https://www.scm-manager.org"
+          href: "https://www.scm-manager.org",
         },
         next: dummyLink,
-        last: dummyLink
+        last: dummyLink,
       },
-      _embedded: {}
+      _embedded: {},
     };
 
     let urlToOpen;

package/src/ProtectedRoute.tsx

@@ -33,7 +33,7 @@ class ProtectedRoute extends Component<Props> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      error: undefined
+      error: undefined,
     };
   }
 
@@ -49,8 +49,8 @@ class ProtectedRoute extends Component<Props> {
             to={{
               pathname: "/login",
               state: {
-                from: routeProps.location
-              }
+                from: routeProps.location,
+              },
             }}
           />
         );

package/src/Tag.tsx

@@ -64,7 +64,7 @@ const Tag: FC<Props> = ({
   }
   let showDelete = null;
   if (onRemove) {
-    showDelete = <a className="tag is-delete" onClick={onRemove} />;
+    showDelete = <button className="tag is-delete" onClick={onRemove} />;
   }
 
   return (

package/src/__resources__/Diff.markdown.ts

@@ -46,40 +46,40 @@ export default {
               type: "normal",
               oldLineNumber: 5,
               newLineNumber: 5,
-              isNormal: true
+              isNormal: true,
             },
             {
               content: "and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).",
               type: "normal",
               oldLineNumber: 6,
               newLineNumber: 6,
-              isNormal: true
+              isNormal: true,
             },
             {
               content: "",
               type: "normal",
               oldLineNumber: 7,
               newLineNumber: 7,
-              isNormal: true
+              isNormal: true,
             },
             {
               content: "## Unreleased",
               type: "delete",
               lineNumber: 8,
-              isDelete: true
+              isDelete: true,
             },
             {
               content: "## [2.7.1] - 2020-10-14",
               type: "insert",
               lineNumber: 8,
-              isInsert: true
+              isInsert: true,
             },
             {
               content: "### Fixed",
               type: "normal",
               oldLineNumber: 9,
               newLineNumber: 9,
-              isNormal: true
+              isNormal: true,
             },
             {
               content:
@@ -87,7 +87,7 @@ export default {
               type: "normal",
               oldLineNumber: 10,
               newLineNumber: 10,
-              isNormal: true
+              isNormal: true,
             },
             {
               content:
@@ -95,24 +95,22 @@ export default {
               type: "normal",
               oldLineNumber: 11,
               newLineNumber: 11,
-              isNormal: true
-            }
-          ]
-        }
+              isNormal: true,
+            },
+          ],
+        },
       ],
       _links: {
         lines: {
-          href:
-            "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/content/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/CHANGELOG.md?start={start}&end={end}",
-          templated: true
-        }
-      }
-    }
+          href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/content/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/CHANGELOG.md?start={start}&end={end}",
+          templated: true,
+        },
+      },
+    },
   ],
   _links: {
     self: {
-      href:
-        "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/diff/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/parsed"
-    }
-  }
+      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/diff/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/parsed",
+    },
+  },
 };