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

package/src/syntax-highlighting.module.css

@@ -43,10 +43,10 @@
 
 pre[class*="language-"],
 code[class*="language-"] {
-  color: #363636;
+  color: var(--sh-base-color);
   font-size: 1rem;
   text-shadow: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: var(--sh-font-family);
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -67,7 +67,7 @@ code[class*="language-"]::selection,
 pre[class*="language-"]::-moz-selection,
 code[class*="language-"]::-moz-selection {
   text-shadow: none;
-  background: #7fe3cd;
+  background: var(--sh-selected-color);
 }
 
 @media print {
@@ -83,14 +83,14 @@ pre[class*="language-"] {
   padding: 1em;
   margin: .5em 0;
   overflow: auto;
-  background: #ffffff;
+  background: var(--sh-block-background);
 }
 
 :not(pre) > code[class*="language-"] {
   padding: .1em .3em;
   border-radius: .3em;
-  color: #ff3860;
-  background: #fbe7eb;
+  color: var(--sh-inline-code-color);
+  background: var(--sh-inline-code-background);
 }
 
 /*********************************************************
@@ -105,11 +105,11 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #9a9a9a;
+  color: var(--sh-comment-color);
 }
 
 .token.punctuation {
-  color: #9a9a9a;
+  color: var(--sh-punctuation-color);
 }
 
 .token.property,
@@ -119,7 +119,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #2c99c7;
+  color: var(--sh-property-color);
 }
 
 .token.selector,
@@ -128,7 +128,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #005f9a;
+  color: var(--sh-selector-color);
 }
 
 .token.operator,
@@ -136,23 +136,24 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #686868;
+  color: var(--sh-operator-color);
+  background: var(--sh-operator-bg);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #00a984;
+  color: var(--sh-keyword-color);
 }
 
 .token.function {
-  color: #ff3860;
+  color: var(--sh-function-color);
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-  color: #a74eb2;
+  color: var(--sh-variable-color);
 }
 
 .token.important,
@@ -188,8 +189,8 @@ pre[class*="language-"] > code[class*="language-"] {
   right: 0;
   padding: inherit 0;
   margin-top: 1em;
-  background: #f5f5f5;
-  box-shadow: inset 5px 0 0 #99d8f3;
+  background: var(--sh-highlight-background);
+  box-shadow: inset 5px 0 0 var(--sh-highlight-accent);
   z-index: 0;
   pointer-events: none;
   line-height: inherit;

package/src/syntax-highlighting.ts

@@ -27,10 +27,10 @@
 
 export default {
   'pre[class*="language-"]': {
-    color: "#363636",
+    color: "var(--sh-base-color)",
     fontSize: "1rem",
     textShadow: "none",
-    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    fontFamily: "var(--sh-font-family)",
     direction: "ltr",
     textAlign: "left",
     whiteSpace: "pre",
@@ -47,13 +47,13 @@ export default {
     padding: "1em",
     margin: ".5em 0",
     overflow: "auto",
-    background: "#ffffff"
+    background: "var(--sh-block-background)",
   },
   'code[class*="language-"]': {
-    color: "#363636",
+    color: "var(--sh-base-color)",
     fontSize: "1rem",
     textShadow: "none",
-    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
+    fontFamily: "var(--sh-font-family)",
     direction: "ltr",
     textAlign: "left",
     whiteSpace: "pre",
@@ -66,140 +66,145 @@ export default {
     WebkitHyphens: "none",
     MozHyphens: "none",
     msHyphens: "none",
-    hyphens: "none"
+    hyphens: "none",
   },
   'pre[class*="language-"]::selection': {
     textShadow: "none",
-    background: "#7fe3cd"
+    background: "var(--sh-selected-color)",
   },
   'code[class*="language-"]::selection': {
     textShadow: "none",
-    background: "#7fe3cd"
+    background: "var(--sh-selected-color)",
   },
   'pre[class*="language-"]::-moz-selection': {
     textShadow: "none",
-    background: "#7fe3cd"
+    background: "var(--sh-selected-color)",
   },
   'code[class*="language-"]::-moz-selection': {
     textShadow: "none",
-    background: "#7fe3cd"
+    background: "var(--sh-selected-color)",
   },
   ':not(pre) > code[class*="language-"]': {
     padding: ".1em .3em",
     borderRadius: ".3em",
-    color: "#ff3860",
-    background: "#fbe7eb"
+    color: "var(--sh-inline-code-color)",
+    background: "var(--sh-inline-code-background)",
   },
   ".namespace": {
-    Opacity: ".7"
+    Opacity: ".7",
   },
   comment: {
-    color: "#9a9a9a"
+    color: "var(--sh-comment-color)",
   },
   prolog: {
-    color: "#9a9a9a"
+    color: "var(--sh-comment-color)",
   },
   doctype: {
-    color: "#9a9a9a"
+    color: "var(--sh-comment-color)",
   },
   cdata: {
-    color: "#9a9a9a"
+    color: "var(--sh-comment-color)",
   },
   punctuation: {
-    color: "#9a9a9a"
+    color: "var(--sh-punctuation-color)",
   },
   property: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   tag: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   boolean: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   number: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   constant: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   symbol: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   deleted: {
-    color: "#2c99c7"
+    color: "var(--sh-property-color)",
   },
   selector: {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   "attr-name": {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   string: {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   char: {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   builtin: {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   inserted: {
-    color: "#005f9a"
+    color: "var(--sh-selector-color)",
   },
   operator: {
-    color: "#686868"
+    color: "var(--sh-operator-color)",
+    background: "var(--sh-operator-bg)",
   },
   entity: {
-    color: "#686868",
-    cursor: "help"
+    color: "var(--sh-operator-color)",
+    background: "var(--sh-operator-bg)",
+    cursor: "help",
   },
   url: {
-    color: "#686868"
+    color: "var(--sh-operator-color)",
+    background: "var(--sh-operator-bg)",
   },
   ".language-css .token.string": {
-    color: "#686868"
+    color: "var(--sh-operator-color)",
+    background: "var(--sh-operator-bg)",
   },
   ".style .token.string": {
-    color: "#686868"
+    color: "var(--sh-operator-color)",
+    background: "var(--sh-operator-bg)",
   },
   atrule: {
-    color: "#00a984"
+    color: "var(--sh-keyword-color)",
   },
   "attr-value": {
-    color: "#00a984"
+    color: "var(--sh-keyword-color)",
   },
   keyword: {
-    color: "#00a984"
+    color: "var(--sh-keyword-color)",
   },
   function: {
-    color: "#ff3860"
+    color: "var(--sh-function-color)",
   },
   regex: {
-    color: "#a74eb2"
+    color: "var(--sh-variable-color)",
   },
   important: {
-    color: "#a74eb2",
-    fontWeight: "bold"
+    color: "var(--sh-variable-color)",
+    fontWeight: "bold",
   },
   variable: {
-    color: "#a74eb2"
+    color: "var(--sh-variable-color)",
   },
   bold: {
-    fontWeight: "bold"
+    fontWeight: "bold",
   },
   title: {
-    fontWeight: "bold"
+    fontWeight: "bold",
   },
   italic: {
-    fontStyle: "italic"
+    fontStyle: "italic",
   },
   "pre[data-line]": {
-    position: "relative"
+    position: "relative",
   },
   'pre[class*="language-"] > code[class*="language-"]': {
     position: "relative",
-    zIndex: "1"
+    zIndex: "1",
   },
   ".line-highlight": {
     position: "absolute",
@@ -207,11 +212,11 @@ export default {
     right: "0",
     padding: "inherit 0",
     marginTop: "1em",
-    background: "#f5f5f5",
-    boxShadow: "inset 5px 0 0 #99d8f3",
+    background: "var(--sh-highlight-background)",
+    boxShadow: "inset 5px 0 0 var(--sh-highlight-accent)",
     zIndex: "0",
     pointerEvents: "none",
     lineHeight: "inherit",
-    whiteSpace: "pre"
-  }
+    whiteSpace: "pre",
+  },
 };

package/src/table/Table.stories.tsx

@@ -38,12 +38,12 @@ const StyledTable = styled(Table)`
   }
 `;
 
-storiesOf("Table|Table", module)
+storiesOf("Table", module)
   .add("Default", () => (
     <Table
       data={[
         { firstname: "Tricia", lastname: "McMillan", email: "tricia@hitchhiker.com" },
-        { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" }
+        { firstname: "Arthur", lastname: "Dent", email: "arthur@hitchhiker.com" },
       ]}
     >
       <Column header={"First Name"}>{(row: any) => <h4>{row.firstname}</h4>}</Column>
@@ -63,7 +63,7 @@ storiesOf("Table|Table", module)
       >
         {(row: any) => <b style={{ color: "red" }}>{row.lastname}</b>}
       </Column>
-      <Column header={"E-Mail"}>{(row: any) => <a>{row.email}</a>}</Column>
+      <Column header={"E-Mail"}>{(row: any) => <span>{row.email}</span>}</Column>
     </Table>
   ))
   .add("TextColumn", () => (
@@ -71,7 +71,7 @@ storiesOf("Table|Table", module)
       data={[
         { id: "21", title: "Pommes", desc: "Fried potato sticks" },
         { id: "42", title: "Quarter-Pounder", desc: "Big burger" },
-        { id: "-84", title: "Icecream", desc: "Cold dessert" }
+        { id: "-84", title: "Icecream", desc: "Cold dessert" },
       ]}
     >
       <TextColumn header="Id" dataKey="id" />
@@ -90,12 +90,12 @@ storiesOf("Table|Table", module)
       data={[
         {
           id: "42",
-          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp"
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp",
         },
         {
           id: "17",
-          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp"
-        }
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp",
+        },
       ]}
       emptyMessage="No data found."
     >

package/src/table/Table.tsx

@@ -127,7 +127,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
 };
 
 Table.defaultProps = {
-  sortable: true
+  sortable: true,
 };
 
 const renderSortIcon = (child: ReactElement, ascending: boolean, showIcon: boolean) => {

package/src/table/TextColumn.tsx

@@ -38,7 +38,7 @@ TextColumn.defaultProps = {
     return comparators.byKey(props.dataKey);
   },
   ascendingIcon: "sort-alpha-down-alt",
-  descendingIcon: "sort-alpha-down"
+  descendingIcon: "sort-alpha-down",
 };
 
 export default TextColumn;

package/src/textSplitAndReplace.test.ts

@@ -83,7 +83,7 @@ describe("text split and replace", () => {
       "'So this is it,' said Arthur, 'We are going to die.'",
       [
         { textToReplace: "'", replacement: { text: "“" }, replaceAll: true },
-        { textToReplace: "Arthur", replacement: { text: "Dent" }, replaceAll: true }
+        { textToReplace: "Arthur", replacement: { text: "Dent" }, replaceAll: true },
       ],
       testWrapper
     );
@@ -106,7 +106,7 @@ describe("text split and replace", () => {
         { textToReplace: "said Arthur", replacement: { text: "to be replaced" } },
         { textToReplace: " said", replacement: { text: "to be ignored 1" }, replaceAll: true },
         { textToReplace: "d A", replacement: { text: "to be ignored 2" }, replaceAll: true },
-        { textToReplace: "Arthur,", replacement: { text: "to be ignored 3" }, replaceAll: true }
+        { textToReplace: "Arthur,", replacement: { text: "to be ignored 3" }, replaceAll: true },
       ],
       testWrapper
     );
@@ -122,7 +122,7 @@ describe("text split and replace", () => {
       [
         { textToReplace: "'So this is it,'", replacement: { text: "one" } },
         { textToReplace: " said Arthur, ", replacement: { text: "two" } },
-        { textToReplace: "'We are going to die.'", replacement: { text: "three" } }
+        { textToReplace: "'We are going to die.'", replacement: { text: "three" } },
       ],
       testWrapper
     );

package/src/textSplitAndReplace.ts

@@ -36,7 +36,7 @@ type PartToReplace<T> = {
 
 function hasConflict<T>(alreadyFoundReplacements: PartToReplace<T>[], newReplacement: PartToReplace<T>) {
   return !!alreadyFoundReplacements.find(
-    existing =>
+    (existing) =>
       (existing.start <= newReplacement.start && existing.start + existing.length > newReplacement.start) ||
       (newReplacement.start <= existing.start && newReplacement.start + newReplacement.length > existing.start)
   );
@@ -49,7 +49,7 @@ export default function textSplitAndReplace<T>(
 ): T[] {
   const partsToReplace: PartToReplace<T>[] = [];
 
-  replacements.forEach(replacement => {
+  replacements.forEach((replacement) => {
     let lastIndex = -1;
     do {
       const start = text.indexOf(replacement.textToReplace, lastIndex);

package/src/toast/Toast.tsx

@@ -38,8 +38,8 @@ const Container = styled.div<Themeable>`
   padding: 1.5rem;
   right: 1.5rem;
   bottom: 1.5rem;
-  color: ${props => props.theme.primary};
-  background-color: ${props => props.theme.secondary};
+  color: ${(props) => props.theme.primary};
+  background-color: ${(props) => props.theme.secondary};
   max-width: 18rem;
   font-size: 0.75rem;
   border-radius: 5px;

package/src/toast/index.stories.tsx

@@ -77,7 +77,7 @@ const Closeable = () => {
 toastStories.add("Open/Close", () => <Animator />);
 toastStories.add("Click to close", () => <Closeable />);
 
-types.forEach(type => {
+types.forEach((type) => {
   toastStories.add(type.charAt(0).toUpperCase() + type.slice(1), () => (
     <Toast type={type} title="New Changes">
       <p>The underlying Pull-Request has changed. Press reload to see the changes.</p>
@@ -92,7 +92,7 @@ types.forEach(type => {
 
 toastStories.add("Multiple", () => (
   <ToastArea>
-    {types.map(type => (
+    {types.map((type) => (
       <ToastNotification key={type} type={type} title="New notification">
         <p>The notification received.</p>
       </ToastNotification>

package/src/toast/themes.ts

@@ -42,28 +42,28 @@ const themes: { [name in Type]: ToastTheme } = {
   info: {
     primary: "#363636",
     secondary: "#99d8f3",
-    tertiary: "white"
+    tertiary: "white",
   },
   primary: {
     primary: "#363636",
     secondary: "#7fe8ef",
-    tertiary: "white"
+    tertiary: "white",
   },
   success: {
     primary: "#363636",
     secondary: "#7fe3cd",
-    tertiary: "white"
+    tertiary: "white",
   },
   warning: {
     primary: "#905515",
     secondary: "#ffeeab",
-    tertiary: "white"
+    tertiary: "white",
   },
   danger: {
     primary: "#363636",
     secondary: "#ff9baf",
-    tertiary: "white"
-  }
+    tertiary: "white",
+  },
 };
 
 export const getTheme = (name: Type) => {

package/src/useDateFormatter.ts

@@ -34,7 +34,7 @@ export const supportedLocales: LocaleMap = {
   enUS,
   en: enUS,
   de,
-  es
+  es,
 };
 
 type Options = {
@@ -77,7 +77,7 @@ export type DateProps = {
 const createOptions = (locale: Locale, timeZone?: string) => {
   const options: Options = {
     addSuffix: true,
-    locale
+    locale,
   };
   if (timeZone) {
     options.timeZone = timeZone;
@@ -119,7 +119,7 @@ const useDateFormatter = ({ date, baseDate, timeZone }: DateProps) => {
     },
     formatDistance() {
       return formatDistance(isoDate, base, options);
-    }
+    },
   };
 };
 

package/src/validation.test.ts

@@ -40,7 +40,7 @@ describe("test name validation", () => {
     " invalid_name",
     "%",
     "test%name",
-    "test\\name"
+    "test\\name",
   ];
   for (const name of invalidNames) {
     it(`should return false for '${name}'`, () => {
@@ -75,7 +75,7 @@ describe("test name validation", () => {
     "법률",
     "المدن",
     "אחד",
-    "Hu-rëm"
+    "Hu-rëm",
   ];
   for (const name of validNames) {
     it(`should return true for '${name}'`, () => {
@@ -92,7 +92,7 @@ describe("test mail validation", () => {
     "s.sdorra@",
     "s.sdorra@ostfalia",
     "s.sdorra@ ostfalia.de",
-    "s.sdorra@[ostfalia.de"
+    "s.sdorra@[ostfalia.de",
   ];
   for (const mail of invalid) {
     it(`should return false for '${mail}'`, () => {
@@ -111,7 +111,7 @@ describe("test mail validation", () => {
     "s.sdorra@example.xn--p1ai",
     "s.sdorra@scm.solutions",
     "s'sdorra@scm.solutions",
-    '"S Sdorra"@scm.solutions'
+    '"S Sdorra"@scm.solutions',
   ];
   for (const mail of valid) {
     it(`should return true for '${mail}'`, () => {
@@ -172,7 +172,7 @@ describe("test url validation", () => {
     ":// should fail",
     "http://foo.bar/foo(bar)baz quux",
     "http://.www.foo.bar/",
-    "http://.www.foo.bar./"
+    "http://.www.foo.bar./",
   ];
   for (const url of invalid) {
     it(`should return false for '${url}'`, () => {
@@ -225,7 +225,7 @@ describe("test url validation", () => {
     "http://1337.net",
     "http://a.b-c.de",
     "http://223.255.255.254",
-    "http://0.0.0.0"
+    "http://0.0.0.0",
   ];
   for (const url of valid) {
     it(`should return true for '${url}'`, () => {

package/src/validation.ts

@@ -45,10 +45,7 @@ export const isNumberValid = (number: any) => {
 };
 
 export const isPathValid = (path: string) => {
-  return path !== "."
-    && !path.includes("../")
-    && !path.includes("//")
-    && path !== "..";
+  return path !== "." && !path.includes("../") && !path.includes("//") && path !== "..";
 };
 
 const urlRegex = /^[A-Za-z0-9]+:\/\/[^\s$.?#].[^\s]*$/;