[CP-2347] Added theme and block boxes (#1624)

.eslintignore

@@ -3,3 +3,4 @@ jest
 jest.config.ts
 jest.preset.js
 demo-data
+auth-server.test.ts

.eslintrc.js

@@ -128,5 +128,4 @@ module.exports = {
       version: "detect",
     },
   },
-  ignorePatterns: ["auth-server.test.ts", "./jest"],
 }

libs/generic-view/feature/src/lib/generic-view/generic-view.tsx

@@ -8,6 +8,7 @@ import { useParams } from "react-router"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { isEmpty } from "lodash"
+import { GenericThemeProvider } from "generic-view/theme"
 import RecursiveLayout from "../recursive-layout/recursive-layout"
 
 export const GenericView: FunctionComponent = () => {
@@ -22,7 +23,11 @@ export const GenericView: FunctionComponent = () => {
     return <div>Not found</div>
   }
 
-  return <RecursiveLayout viewKey={viewKey} componentKey={"main"} />
+  return (
+    <GenericThemeProvider>
+      <RecursiveLayout viewKey={viewKey} componentKey={"main"} />
+    </GenericThemeProvider>
+  )
 }
 
 export default GenericView

libs/generic-view/store/src/lib/generic-dispatch-demo.ts

@@ -4,7 +4,6 @@
  */
 
 // TODO: demo code, file to be removed
-import { wait } from "fork-ts-checker-webpack-plugin/lib/utils/async/wait"
 import {
   generateMcCalendarLayout,
   generateMcOverviewLayout,
@@ -33,11 +32,9 @@ export const useGenericStoreDemo = () => {
       }
 
       // Simulate menu setup after device connection
-      await wait(2000)
       dispatch(setMenu(generateMenu(menuConfig)))
 
       // Simulate mc-overview layout
-      await wait(1000)
       dispatch(
         setViewLayout({
           feature: "mc-overview",
@@ -46,7 +43,6 @@ export const useGenericStoreDemo = () => {
       )
 
       // Simulate mc-calendar layout
-      await wait(1000)
       dispatch(
         setViewLayout({
           feature: "mc-calendar",
@@ -54,7 +50,6 @@ export const useGenericStoreDemo = () => {
         })
       )
 
-      await wait(1000)
       dispatch(
         setViewData({
           feature: "mc-overview",

libs/generic-view/theme/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "pure": true,
+        "ssr": true
+      }
+    ]
+  ]
+}

libs/generic-view/theme/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/generic-view/theme/README.md

@@ -0,0 +1,7 @@
+# generic-view-theme
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test generic-view-theme` to execute the unit tests via [Jest](https://jestjs.io).

libs/generic-view/theme/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: "generic-view-theme",
+  preset: "../../../jest.preset.js",
+  transform: {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nx/react/plugins/jest",
+    "^.+\\.[tj]sx?$": ["babel-jest", { presets: ["@nx/react/babel"] }],
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../../coverage/libs/generic-view/theme",
+}

libs/generic-view/theme/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "generic-view-theme",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/generic-view/theme/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/generic-view/theme/jest.config.ts"
+      }
+    }
+  }
+}

libs/generic-view/theme/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export * from "./lib/generic-theme-provider"
+export * from "./lib/theme"

libs/generic-view/theme/src/lib/color.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export const color = {
+  white: "#FFFFFF",
+  grey6: "#FBFBFB",
+} as const

libs/generic-view/theme/src/lib/font-size.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export const fontSize = {
+  headline3: "24px",
+} as const

libs/generic-view/theme/src/lib/generic-theme-provider.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, { FunctionComponent, PropsWithChildren } from "react"
+import { createGlobalStyle, ThemeProvider } from "styled-components"
+import { Theme, theme } from "./theme"
+
+export const GenericThemeProvider: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      {children}
+    </ThemeProvider>
+  )
+}
+
+const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
+  * {
+    box-sizing: border-box;
+  }
+`

libs/generic-view/theme/src/lib/line-height.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export const lineHeight = {
+  headline3: "32px",
+} as const

libs/generic-view/theme/src/lib/radius.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export const radius = {
+  sm: "4px",
+} as const

libs/generic-view/theme/src/lib/space.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export const space = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+} as const

libs/generic-view/theme/src/lib/theme.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { color } from "./color"
+import { fontSize } from "./font-size"
+import { radius } from "./radius"
+import { space } from "./space"
+import { lineHeight } from "./line-height"
+
+export const theme = {
+  color,
+  radius,
+  space,
+  fontSize,
+  lineHeight,
+} as const
+
+export type Theme = typeof theme

libs/generic-view/theme/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

libs/generic-view/theme/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/generic-view/theme/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/generic-view/ui/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["../../../.eslintrc.js"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "styled.d.ts"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -8,7 +8,9 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-unsafe-return": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

libs/generic-view/ui/src/lib/blocks/block-box.tsx

@@ -19,19 +19,24 @@ const BlockBox: APIFC<undefined, BlockBoxParameters> = ({
   ...props
 }) => {
   return (
-    <BoxWrapper {...props} className={`${className} custom`}>
+    <Block {...props} className={className}>
-      {config?.title && <h1>{config.title}</h1>}
+      {config?.title && <Headline>{config.title}</Headline>}
       {children}
-    </BoxWrapper>
+    </Block>
   )
 }
 
 export default withConfig(BlockBox)
 
-const BoxWrapper = styled.div`
+const Block = styled.div`
-  &.custom {
+  background-color: ${({ theme }) => theme.color.white};
-    height: 90%;
+  border-radius: ${({ theme }) => theme.radius.sm};
-  }
+  padding: ${({ theme }) => theme.space.xl};
-
+  box-sizing: border-box;
-  background-color: #ccc;
+`
+
+const Headline = styled.h3`
+  margin: 0;
+  font-size: ${({ theme }) => theme.fontSize.headline3};
+  line-height: ${({ theme }) => theme.lineHeight.headline3};
 `

libs/generic-view/ui/src/lib/blocks/block-plain.tsx

@@ -4,11 +4,9 @@
  */
 
 import React from "react"
-import styled from "styled-components"
 import { APIFC } from "generic-view/utils"
 
-export const BlockWrapper: APIFC = ({ config, data, ...props }) => {
+export const BlockPlain: APIFC = ({ config, data, ...props }) => {
-  return <Wrapper {...props} />
+  return <div {...props} />
 }
 
-const Wrapper = styled.div``

libs/generic-view/ui/src/lib/blocks/block-vanilla.tsx

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import React from "react"
-import styled from "styled-components"
-import { APIFC } from "generic-view/utils"
-
-export const BlockVanilla: APIFC = ({ config, data, ...props }) => {
-  return <BoxWrapper {...props} />
-}
-
-const BoxWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-`

libs/generic-view/ui/src/lib/blocks/blocks.ts

@@ -4,11 +4,9 @@
  */
 
 import BlockBox from "./block-box"
-import { BlockVanilla } from "./block-vanilla"
+import { BlockPlain } from "./block-plain"
-import { BlockWrapper } from "./block-wrapper"
 
 export const blocks = {
+  "block-plain": BlockPlain,
   "block-box": BlockBox,
-  "block-vanilla": BlockVanilla,
-  "block-wrapper": BlockWrapper,
 }

libs/generic-view/ui/styled.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import "styled-components"
+import { Theme } from "../theme/src"
+
+type CustomTheme = Theme
+
+declare module "styled-components" {
+  export interface DefaultTheme extends CustomTheme {}
+}

libs/generic-view/ui/tsconfig.json

@@ -7,7 +7,6 @@
     "strict": true
   },
   "files": [],
-  "include": [],
   "references": [
     {
       "path": "./tsconfig.lib.json"

libs/generic-view/ui/tsconfig.lib.json

@@ -4,7 +4,6 @@
     "outDir": "../../../dist/out-tsc",
     "types": [
       "node",
-
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]
@@ -20,5 +19,11 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "./styled.d.ts"
+  ]
 }

libs/generic-view/views/src/lib/mc-calendar.ts

@@ -18,7 +18,7 @@ export const generateMcCalendarLayout: ViewGenerator<CalendarConfig> = (
 ) => {
   return {
     main: {
-      component: "block-vanilla",
+      component: "block-plain",
       parameters: {
         layout: {
           gridLayout: {

libs/generic-view/views/src/lib/mc-overview.ts

@@ -124,11 +124,11 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
 ) => {
   return {
     main: {
-      component: "block-wrapper",
+      component: "block-plain",
       layout: {
-        padding: "2rem",
+        padding: "32px",
         gridLayout: {
-          rows: [1, 1, 1],
+          rows: ["261px", "205px", 1],
           columns: [1, 2],
           columnGap: "2rem",
           rowGap: "2rem",
@@ -137,11 +137,17 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
           grow: 1,
         },
       },
-      childrenKeys: ["summary", "status", "update"],
+      childrenKeys: [
+        "summary",
+        ...config.sections.map((section) => section.key),
+      ],
     },
     ...(config.summary.show && {
       summary: {
         component: "block-box",
+        config: {
+          title: "Summary",
+        },
         layout: {
           gridPlacement: {
             row: 1,
@@ -154,9 +160,7 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
             justifyContent: "space-between",
           },
         },
-        config: {
+
-          title: "Summary",
-        },
         childrenKeys: [
           config.summary.showImg ? "summaryImg" : undefined,
           config.summary.showSerialNumber ? "serial-number" : undefined,
@@ -164,7 +168,7 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
         ].filter(Boolean) as string[],
       },
       summaryImg: {
-        component: "block-box",
+        component: "block-plain",
         layout: {
           flexPlacement: {
             alignSelf: "center",
@@ -175,7 +179,7 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
         },
       },
       "serial-number": {
-        component: "block-box",
+        component: "block-plain",
         layout: {
           flexPlacement: {
             alignSelf: "center",
@@ -186,7 +190,7 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
         },
       },
       about: {
-        component: "block-box",
+        component: "block-plain",
         layout: {
           flexPlacement: {
             alignSelf: "center",
@@ -199,6 +203,9 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
     }),
     status: {
       component: "block-box",
+      config: {
+        title: "Status",
+      },
       layout: {
         gridPlacement: {
           row: 1,
@@ -210,9 +217,7 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
           direction: "column",
         },
       },
-      parameters: {
+
-        title: "Status",
-      },
       childrenKeys: ["battery", "connection"],
     },
     battery: {
@@ -228,6 +233,9 @@ export const generateMcOverviewLayout: ViewGenerator<OverviewConfig> = (
     },
     update: {
       component: "block-box",
+      config: {
+        title: "MuditaOS",
+      },
       layout: {
         gridPlacement: {
           row: 2,

tsconfig.base.json

@@ -33,6 +33,7 @@
       "device/models": ["libs/device/models/src/index.ts"],
       "generic-view/feature": ["libs/generic-view/feature/src/index.ts"],
       "generic-view/store": ["libs/generic-view/store/src/index.ts"],
+      "generic-view/theme": ["libs/generic-view/theme/src/index.ts"],
       "generic-view/ui": ["libs/generic-view/ui/src/index.ts"],
       "generic-view/utils": ["libs/generic-view/utils/src/index.ts"],
       "generic-view/views": ["libs/generic-view/views/src/index.ts"]
@@ -42,6 +43,7 @@
     "node_modules",
     "./apps/mudita-center/node_modules",
     "./apps/mudita-center/dist",
-    "./apps/mudita-center/__mocks__"
+    "./apps/mudita-center/__mocks__",
+    "./libs/generic-view/ui/styled.d.ts"
   ]
 }