Merge pull request #8 from skbkontur/dark-theme

Dark theme

Author: fakefeik

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.3.x - 2021.05.31
+- Add support for dark theme using react-ui ThemeContext
+- Update supported peerDependencies versions range
+
 ## v1.2.7 - 2021.03.26
 - Fix bug with TaskDataJsonSerializer: add TimeGuid and Timestamp converters
 

cassandra-distributed-task-queue-ui/.storybook/main.js

@@ -17,7 +17,7 @@ module.exports = {
                 exclude: /node_modules/,
             },
             {
-                test: /\.(c|le)ss$/,
+                test: /\.css$/,
                 loaders: [
                     require.resolve("style-loader"),
                     {
@@ -28,7 +28,6 @@ module.exports = {
                             },
                         },
                     },
-                    require.resolve("less-loader"),
                 ],
             },
             {

cassandra-distributed-task-queue-ui/.storybook/preview.js

@@ -0,0 +1 @@
+import '../public/index.css';

cassandra-distributed-task-queue-ui/.stylelintrc.json

@@ -4,19 +4,19 @@ import ReactDom from "react-dom";
 import { Switch, Redirect, Route } from "react-router";
 import { BrowserRouter } from "react-router-dom";
 
-import { RtqMonitoringApiFake } from "./RtqMonitoringApiFake";
 import { RemoteTaskQueueApplication, RtqMonitoringApi, ICustomRenderer } from "./src";
 import { RtqMonitoringSearchRequest } from "./src/Domain/Api/RtqMonitoringSearchRequest";
 import { RtqMonitoringTaskModel } from "./src/Domain/Api/RtqMonitoringTaskModel";
 import { TimeUtils } from "./src/Domain/Utils/TimeUtils";
 import { RangeSelector } from "./src/components/DateTimeRangePicker/RangeSelector";
+import { RtqMonitoringApiFake } from "./stories/Api/RtqMonitoringApiFake";
 
 const rtqApiPrefix = "/remote-task-queue/";
 
 export const rtqMonitoringApi =
     process.env.API === "fake" ? new RtqMonitoringApiFake() : new RtqMonitoringApi(rtqApiPrefix);
 
-class CustomRenderer implements ICustomRenderer {
+export class CustomRenderer implements ICustomRenderer {
     public getRelatedTasksLocation(taskDetails: RtqMonitoringTaskModel): Nullable<RtqMonitoringSearchRequest> {
         const documentCirculationId =
             taskDetails.taskData && typeof taskDetails.taskData["DocumentCirculationId"] === "string"

cassandra-distributed-task-queue-ui/index.tsx

@@ -23,7 +23,7 @@
     "build:clean": "rimraf dist",
     "build:tsc": "tsc --project tsconfig.prod.json",
     "build:patch": "node ./patch-version",
-    "build:copy:src": "copyfiles --up 1 \"src/**/*.js\" \"src/**/*.less\" dist",
+    "build:copy:src": "copyfiles --up 1 \"src/**/*.js\" dist",
     "build:copy:meta": "copyfiles --flat package.json \"../*.md\" ../LICENSE dist",
     "build:pack": "cd dist && npm pack",
     "build:types": "dotnet ts-gen --assembly ./../Cassandra.DistributedTaskQueue.Monitoring.TestService/bin/net5.0/SkbKontur.Cassandra.DistributedTaskQueue.Monitoring.TestService.dll --outputDir ./src/Domain/Api --nullabilityMode Pessimistic",
@@ -33,16 +33,15 @@
     "lint": "run-s \"lint:*\"",
     "lint:tsc": "tsc --noEmit",
     "lint:eslint": "eslint ./ --ext .js,.jsx,.ts,.tsx",
-    "lint:stylelint": "stylelint \"./**/*.less\"",
     "test": "mocha **/*.test.ts"
   },
   "peerDependencies": {
-    "@skbkontur/react-icons": ">=3 <=4",
-    "@skbkontur/react-ui": ">=2 <3",
+    "@skbkontur/react-icons": ">=3 <=5",
+    "@skbkontur/react-ui": ">=2 <=3",
     "react": ">=16 <=17",
     "react-dom": ">=16 <=17",
-    "react-router": ">=4 <=5",
-    "react-router-dom": ">=4 <=5"
+    "react-router": ">=5.1.0 <=6",
+    "react-router-dom": ">=5.1.0 <=6"
   },
   "dependencies": {
     "@skbkontur/react-stack-layout": "^1.0.3",
@@ -64,8 +63,8 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@skbkontur/react-icons": "^4.4.0",
-    "@skbkontur/react-ui": "^2.13.0",
+    "@skbkontur/react-icons": "^5.0.0",
+    "@skbkontur/react-ui": "^3.0.0",
     "@storybook/addon-actions": "^6.1.15",
     "@storybook/addons": "^6.1.15",
     "@storybook/react": "^6.1.15",
@@ -90,8 +89,6 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "less": "^4.1.0",
-    "less-loader": "^7.3.0",
     "mocha": "^8.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
@@ -103,9 +100,6 @@
     "rimraf": "^3.0.2",
     "storybook-react-router": "^1.0.8",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.9.0",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-config-standard": "^20.0.0",
     "tslib": "^2.1.0",
     "typescript": "^4.1.3",
     "url-loader": "^4.1.1",

cassandra-distributed-task-queue-ui/package.json

@@ -0,0 +1,31 @@
+@font-face {
+    font-family: 'Segoe UI';
+    font-weight: 300;
+    src: local('Segoe UI Semilight');
+}
+
+@font-face {
+    font-family: 'Segoe UI';
+    font-weight: 400;
+    src: local('Segoe UI');
+}
+
+@font-face {
+    font-family: 'Segoe UI';
+    font-weight: 600;
+    src: local('Segoe UI Semibold');
+}
+
+@font-face {
+    font-family: 'Segoe UI';
+    font-weight: 700;
+    src: local('Segoe UI Bold');
+}
+
+body {
+    font-family: 'Segoe UI', 'Helvetica', 'Arial', 'Tahoma', sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333;
+    margin: 0;
+}

cassandra-distributed-task-queue-ui/public/index.css

@@ -1,7 +1,7 @@
-import { RouteComponentProps } from "react-router";
+import { match } from "react-router";
 
 export class RouteUtils {
-    public static backUrl(props: RouteComponentProps): string {
-        return props.match.url.endsWith("/") ? ".." : ".";
+    public static backUrl(match: match<{}>) {
+        return match.url.endsWith("/") ? ".." : ".";
     }
 }

cassandra-distributed-task-queue-ui/src/Domain/Utils/RouteUtils.ts

@@ -0,0 +1,80 @@
+import { css } from "@skbkontur/react-ui/lib/theming/Emotion";
+import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
+
+import { baseSize } from "../Layouts/CommonLayout.styles";
+
+export const jsStyles = {
+    valueWrapper(): string {
+        return css`
+            padding-left: ${4 * baseSize}px;
+        `;
+    },
+
+    titleBlockHasTitle(t: Theme): string {
+        return css`
+            &:hover a {
+                color: ${t.linkColor};
+            }
+        `;
+    },
+
+    toggleAllLink(): string {
+        return css`
+            display: inline-block;
+            margin-left: ${2 * baseSize}px;
+        `;
+    },
+
+    stringWrapper(t: Theme): string {
+        return css`
+            padding: ${baseSize}px 0 ${baseSize}px ${4 * baseSize}px;
+
+            & + .stringWrapper {
+                border-top: 1px solid ${t.borderColorGrayLight};
+            }
+        `;
+    },
+
+    toggleButton(): string {
+        return css`
+            color: inherit;
+            font-size: inherit;
+            font-family: inherit;
+            background: none;
+            border: none;
+            padding: ${baseSize}px 0;
+            margin-left: ${-4 * baseSize}px;
+            cursor: pointer;
+            outline: none;
+            text-transform: capitalize;
+        `;
+    },
+
+    toggleButtonText(): string {
+        return css`
+            margin-left: ${baseSize}px;
+        `;
+    },
+
+    title(): string {
+        return css`
+            text-transform: capitalize;
+            min-width: 140px;
+            display: inline-block;
+            padding-right: ${2 * baseSize}px;
+        `;
+    },
+
+    value(): string {
+        return css`
+            min-width: 1%;
+            word-wrap: break-word;
+        `;
+    },
+
+    mutedKeyword(t: Theme): string {
+        return css`
+            color: ${t.textColorDisabled};
+        `;
+    },
+};