@mindly/ui-components 3.75.3 → 4.1.0

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mindly/ui-components",
-  "version": "3.75.3",
+  "version": "4.1.0",
   "private": false,
   "scripts": {
-    "start": "react-scripts start",
     "clean": "rimraf dist",
     "build": "rollup -c",
     "build:watch": "tsc --watch",
@@ -12,26 +11,16 @@
     "test:lint": "eslint \"./src/**/*{ts,tsx}\" --ignore-pattern \"*.d.ts\" --fix",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "chromatic": "npx chromatic --project-token=aed221c4925d"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "-": "^0.0.1",
     "@babel/polyfill": "^7.12.1",
     "@capacitor/keyboard": "4.1.0",
+    "@fontsource/inter": "^5.0.8",
+    "@fontsource/inter-tight": "^5.0.12",
     "@ionic/react": "^6.1.11",
     "@ionic/react-router": "^6.1.11",
-    "@storybook/addon-viewport": "^6.3.10",
-    "@storybook/cli": "^6.4.20",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.21",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "auto": "^10.32.0",
+    "classnames": "^2.3.2",
     "date-fns": "^2.28.0",
     "html-react-parser": "^3.0.4",
     "luxon": "^2.4.0",
@@ -39,43 +28,25 @@
     "react-countdown": "^2.3.2",
     "react-day-picker": "^8.0.5",
     "react-dom": "^17.0.2",
+    "react-intersection-observer": "^9.5.2",
     "react-rating": "^2.0.5",
-    "react-refresh": "^0.9.0",
-    "react-scripts": "4.0.3",
     "styled-components": "^5.3.1",
-    "swiper": "^8.4.7",
-    "web-vitals": "^1.1.2"
+    "swiper": "^8.4.7"
   },
   "peerDependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.21",
-    "@types/react-dom": "^17.0.9",
-    "auto": "^10.32.0",
+    "@fontsource/inter": "^5.0.8",
+    "@fontsource/inter-tight": "^5.0.12",
+    "@ionic/react": "^6.1.11",
+    "@ionic/react-router": "^6.1.11",
+    "luxon": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "styled-components": "^5.3.1",
-    "web-vitals": "^1.1.2"
+    "styled-components": "^5.3.1"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/index.d.ts",
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-react",
-        "@babel/env",
-        "react-app",
-        {
-          "absoluteRuntime": false
-        }
-      ]
-    ]
-  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -107,6 +78,7 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.15.0",
     "@ionic/lab": "3.2.10",
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -114,21 +86,35 @@
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/node-logger": "^6.3.7",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.9",
+    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-interactions": "^7.4.2",
+    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.2",
+    "@storybook/preset-create-react-app": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/react-webpack5": "^7.4.2",
+    "@storybook/testing-library": "^0.2.1",
     "@svgr/rollup": "^5.5.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^26.0.24",
     "@types/luxon": "^2.3.2",
+    "@types/node": "^12.20.21",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.13",
     "@typescript-eslint/parser": "^4.30.0",
+    "autoprefixer": "^10.4.15",
     "babel-cli": "^6.26.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
-    "postcss": "^8.3.8",
+    "eslint-plugin-storybook": "^0.6.13",
+    "postcss": "^8.4.29",
+    "react-scripts": "^4.0.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.58.0",
     "rollup-plugin-dts": "^4.0.0",
@@ -139,12 +125,18 @@
     "rollup-plugin-svg-to-jsx": "^1.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "storybook": "^7.4.2",
+    "tailwindcss": "^3.3.3",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "webpack": "^5.88.2"
   },
   "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
   "files": [
     "dist",
+    "src/configs",
+    "src/lib2/shared/css",
     "README.md"
   ],
   "repository": {

package/src/configs/tailwind/colors.ts

@@ -0,0 +1,7 @@
+export default {
+  typography: {
+    typography: {
+      primary: 'rgb(var(--typography-typography-primary) / <alpha-value>)',
+    },
+  },
+};

package/src/configs/tailwind/fonts.ts

@@ -0,0 +1,30 @@
+export const fontSize = {
+  '3.5xl': [
+    '2rem',
+    {
+      lineHeight: '130%',
+    },
+  ],
+  '2.5xl': [
+    '1.75rem',
+    {
+      lineHeight: '130%',
+    },
+  ],
+  sl: [
+    '0.9375rem',
+    {
+      lineHeight: '140%',
+    },
+  ],
+  xm: [
+    '0.8125rem',
+    {
+      lineHeight: '120%',
+    },
+  ],
+};
+export default {
+  sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+  title: ['"Inter Tight"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+};

package/src/configs/tailwind/opacity.ts

@@ -0,0 +1,8 @@
+export default {
+  '65': '.65',
+  '45': '.45',
+  '35': '.35',
+  '15': '.15',
+  '8': '.08',
+  '6': '.06',
+};

package/src/lib2/shared/css/fonts.ts

@@ -0,0 +1,5 @@
+import '@fontsource/inter-tight/600.css';
+import '@fontsource/inter-tight/700.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';

package/src/lib2/shared/css/ionic.css

@@ -0,0 +1,70 @@
+:root {
+    --ion-font-family: Inter, system-ui, sans-serif;
+
+    --ion-color-primary: #212121;
+    --ion-color-primary-rgb: 33, 33, 33;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #1d1d1d;
+    --ion-color-primary-tint: #373737;
+
+    --ion-color-tertiary: #212121;
+    --ion-color-tertiary-rgb: 33, 33, 33;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #1d1d1d;
+    --ion-color-tertiary-tint: #373737;
+
+    --ion-color-success: #42AD52;
+    --ion-color-success-rgb: 66, 173, 82;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #3a9848;
+    --ion-color-success-tint: #55b563;
+
+    --ion-color-warning: #F90;
+    --ion-color-warning-rgb: 255, 153, 0;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e08700;
+    --ion-color-warning-tint: #ffa31a;
+
+    --ion-color-danger: #F24E1E;
+    --ion-color-danger-rgb: 242, 78, 30;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #d5451a;
+    --ion-color-danger-tint: #f36035;
+
+    --ion-color-medium: #909090;
+    --ion-color-medium-rgb: 144, 144, 144;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #7f7f7f;
+    --ion-color-medium-tint: #9b9b9b;
+
+    --ion-color-light: #F5F7FA;
+    --ion-color-light-rgb: 245, 247, 250;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d8d9dc;
+    --ion-color-light-tint: #f6f8fb;
+}
+
+:root[data-app-theme="specialist"] {
+    --ion-color-secondary: #28BFA1;
+    --ion-color-secondary-rgb: 40, 191, 161;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #23a88e;
+    --ion-color-secondary-tint: #3ec5aa;
+}
+
+:root[data-app-theme="client"] {
+    --ion-color-secondary: #048BA8;
+    --ion-color-secondary-rgb: 4, 139, 168;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #047a94;
+    --ion-color-secondary-tint: #1d97b1;
+}

package/src/lib2/shared/css/tailwind.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --typography-typography-primary: 33 33 33;
+    }
+
+    :root[data-app-theme="specialist"] {
+        /*specific app colors here*/
+    }
+
+    :root[data-app-theme="client"] {
+        /*specific app colors here*/
+    }
+
+    html {
+        font-family: Inter, system-ui, sans-serif;
+    }
+}

package/src/lib2/shared/css/variables.css

@@ -0,0 +1,7 @@
+:root {
+    --color-background-anti-flash-50: rgba(245, 247, 250, 0.50);
+
+    --buttons-btn-primary: #212121;
+    --buttons-btn-text: #FFF;
+    --buttons-btn-pressed: #3B3B3B
+}