@mmb-digital/design-system-web 0.1.10 → 0.1.11

package/dist/jest.config.d.ts

@@ -0,0 +1,7 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+import type { Config } from 'jest';
+declare const config: Config;
+export default config;

package/dist/media/index.d.ts

@@ -0,0 +1 @@
+export { MediaType } from './media.types';

package/dist/media/media.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum MediaType {
+    desktop = "desktop",
+    mobile = "mobile"
+}

package/dist/style/styledComponents/theme.d.ts

@@ -26,6 +26,7 @@ export declare const theme: {
         grey800: string;
         grey900: string;
         grey1000: string;
+        grey1100: string;
         black: string;
         white: string;
         transparent: string;
@@ -369,10 +370,39 @@ export declare const theme: {
         };
         shadow: {
             buttonFocus: string;
+            cards: string;
+            ultraStrongBlueLg: string;
+            strongBlueMd: string;
+        };
+        focus: {
+            light: string;
+            dark: string;
         };
     };
     font: {
         size: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
             body: {
                 xs: string;
                 sm: string;
@@ -381,11 +411,33 @@ export declare const theme: {
             };
         };
         lineHeight: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
             body: {
-                xs: string;
-                sm: string;
-                md: string;
                 lg: string;
+                md: string;
+                sm: string;
+                xs: string;
             };
         };
         weight: {
@@ -401,8 +453,33 @@ export declare const theme: {
             ultra: number;
         };
         letterSpacing: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
             body: {
+                lg: string;
                 md: string;
+                sm: string;
+                xs: string;
             };
         };
     };
@@ -427,6 +504,16 @@ export declare const theme: {
         xl: string;
         full: string;
     };
+    shadow: {
+        box: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        border: {
+            sm: string;
+        };
+    };
     container: {
         xl: string;
     };

package/dist/util/colorScheme/colorScheme.types.d.ts

@@ -0,0 +1,10 @@
+export declare enum ColorScheme {
+    dark = "dark",
+    light = "light"
+}
+export interface ColorSchemeObject<Dark extends string = string, Light extends string = string> {
+    dark: Dark;
+    light: Light;
+}
+export type ChooseColor = <Dark extends string = string, Light extends string = string>(colorSchemeObject: ColorSchemeObject<Dark, Light>) => Dark | Light;
+export type GetColor = <Dark extends string = string, Light extends string = string>(colorScheme: ColorScheme, colorSchemeObject: ColorSchemeObject<Dark, Light>) => Dark | Light;

package/dist/util/colorScheme/getColor.d.ts

@@ -0,0 +1,2 @@
+import { GetColor } from './colorScheme.types';
+export declare const getColor: GetColor;

package/dist/util/colorScheme/index.d.ts

@@ -0,0 +1,3 @@
+export { useColorScheme } from './useColorScheme';
+export { getColor } from './getColor';
+export { ChooseColor, ColorScheme, ColorSchemeObject, GetColor } from './colorScheme.types';

package/dist/util/colorScheme/useColorScheme.d.ts

@@ -0,0 +1,2 @@
+import { ChooseColor, ColorScheme } from '@/util/colorScheme/colorScheme.types';
+export declare const useColorScheme: (colorScheme: ColorScheme) => ChooseColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/design-system-web",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "MMB design-system-web",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -27,6 +27,8 @@
     "build-storybook": "storybook build",
     "stylelint": "stylelint \"./src/**/*.ts\" \"./src/**/*.tsx\"",
     "sl": "yarn stylelint",
+    "stylelint:fix": "yarn stylelint --fix",
+    "slf": "yarn stylelint --fix",
     "jest": "jest",
     "j": "yarn jest",
     "jest:watch": "jest --watch",
@@ -53,11 +55,10 @@
     "@types/base-64": "1.0.2",
     "@types/jest": "29.5.11",
     "@types/react": "18.2.48",
+    "@types/react-datepicker": "6.2.0",
     "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "babel-plugin-styled-components": "2.1.4",
-    "base-64": "1.0.0",
     "eslint": "8.56.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "7.33.2",
@@ -73,7 +74,6 @@
     "postcss-styled-syntax": "0.6.4",
     "prettier": "3.2.4",
     "prop-types": "15.8.1",
-    "rc-slider": "10.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "3.29.4",
@@ -82,12 +82,11 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
     "storybook": "7.6.12",
-    "styled-components": "6.1.8",
     "stylelint": "15.11.0",
     "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3"
+    "typescript": "5.4.3"
   },
   "resolutions": {
     "jackspeak": "2.1.1"
@@ -95,5 +94,20 @@
   "lint-staged": {
     "*.{js,ts}": "l",
     "*.{css,scss}": "sl"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.9",
+    "babel-plugin-styled-components": "^2.1.4",
+    "base-64": "^1.0.0",
+    "immer": "^10.0.4",
+    "rc-slider": "^10.5.0",
+    "react-content-loader": "^7.0.0",
+    "react-datepicker": "^6.6.0",
+    "react-hook-form": "^7.51.0",
+    "react-intl": "^6.6.2",
+    "react-switch": "^7.0.0",
+    "short-unique-id": "^5.0.3",
+    "styled-components": "^6.1.8",
+    "usehooks-ts": "^3.0.2"
   }
 }

package/readme.md

@@ -46,3 +46,13 @@ Publishing package to npmjs.com:
 - `npm login`
 - `yarn build`
 - `npm publish --access public`
+
+
+## Styling rules
+For each component, a corresponding *.styles.ts file is created to manage its styles. 
+
+- styling is done primarily using styled-components.
+- all colors and other common values are in theme variables to ensure consistency throughout the project.
+- all components have to be responsive
+- the best approach is mobile first, set sizes for mobile and rules for higher resolutions
+