react-restyle-components 0.2.23 → 0.2.24

package/README.md

@@ -13,17 +13,11 @@ yarn add react-restyle-components
 
 https://appasaheb4.github.io/react-restyle-components
 
-### Why we use this lib: 👇
-
-<img src="https://github.com/appasaheb4/react-restyle-components/blob/master/assets/img/libWapper.png">
-
 ☆━━━━━━━━━━━━━━━━━━━☆☆━━━━━━━━━━━━━━━━━━━☆
 Github: www.github.com/appasaheb4 <br />
 Website: www.tech-abl.com
 ☆━━━━━━━━━━━━━━━━━━━☆☆━━━━━━━━━━━━━━━━━━━☆
 
-### If you use pdf components ref : [a relative link](PDF-README.md)
-
 ## Contributes / Support
 
 1.  More content here : https://www.youtube.com/@techabl

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -19,7 +19,6 @@
     "dev": "DISABLE_ESLINT_PLUGIN=true craco start",
     "serve-webapp": "craco build && craco start",
     "build": "rm -rf ./lib && tsc && chmod +x npm-publish.sh && sh ./npm-publish.sh",
-    "test": "jest",
     "eject": "react-scripts eject",
     "precommit": "lint-staged --allow-empty",
     "storybook": "storybook dev -p 6006",
@@ -29,13 +28,18 @@
     "lint:fix": "eslint --fix .",
     "prettier": "prettier --write '**/*.{js,jsx}'",
     "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
-    "go": "npm run build && npm publish"
+    "go": "npm run build && npm publish",
+    "local": "yarn add file:/Users/appasaheb4/Documents/project/npm/react-restyle-components/lib",
+    "test": "vitest",
+    "test:ui": "vitest --ui --coverage",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@loadable/component": "^5.16.4",
     "@mui/material": "^5.15.19",
+    "@radix-ui/react-tooltip": "^1.1.5",
     "@react-pdf/renderer": "^4.1.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
@@ -65,6 +69,7 @@
     "@storybook/addon-interactions": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.6",
     "@storybook/react": "^8.0.6",
@@ -82,16 +87,22 @@
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
     "jest": "^29.7.0",
+    "@vitest/coverage-c8": "^0.31.4",
+    "@vitest/ui": "^0.31.4",
     "lint-staged": "^12.4.0",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
+    "react-router-dom": "^7.0.2",
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
     "storybook": "^8.0.6",
+    "storybook-multilevel-sort": "^2.0.1",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "webpack": "^5.72.0"
+    "webpack": "^5.72.0",
+    "vitest": "^0.31.4",
+    "vitest-dom": "^0.1.0"
   },
   "eslintConfig": {
     "extends": [

package/lib/src/App.js

@@ -1,10 +1,21 @@
 import React, { useState } from 'react';
 import './App.css';
-import { ColorPickerModal, PdfMedium, } from './core-components';
+import { ColorPickerModal, PdfMedium, Tab, Tabs, } from './core-components';
 function App() {
     const [color, setColor] = useState('#aabbcc');
     return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },
         React.createElement("p", { style: { margin: '0 0 10px 0' } }, "Autocomplete Comp."),
+        React.createElement(Tabs, { options: [
+                { title: 'Work History', icon: 'FaHistory' },
+                { title: 'Book Order', icon: 'FaBook' },
+                { title: 'Make Frame', icon: 'MdFilterFrames' },
+            ], onSelect: (item) => {
+                console.log({ item });
+            } },
+            React.createElement(Tab, { label: "Work History" },
+                React.createElement("span", null, "HI")),
+            React.createElement(Tab, { label: "Book Order" },
+                React.createElement("span", null, "Welcome"))),
         React.createElement(ColorPickerModal, { color: color, onChange: setColor }),
         React.createElement(PdfMedium, null, "hi")));
 }

package/lib/src/assets/styles/colors.css

@@ -0,0 +1,217 @@
+html.theme--dark {
+  color-scheme: dark;
+}
+html.theme--light {
+  color-scheme: light;
+}
+
+:root {
+  --B25: #ebf3ff;
+  --B50: #dbeaff;
+  --B100: #b2d2ff;
+  --B200: #9bc5ff;
+  --B300: #7ab1fd;
+  --B400: #337ee7;
+  --B500: #145bbf;
+  --B600: #0c489c;
+  --B700: #033273;
+  --Brand: var(--B700);
+
+  --A50: #e0feff;
+  --A100: #adf8fb;
+  --A200: #5ae8ed;
+  --A300: #36dbe0;
+  --A400: #1ac7cd;
+  --A500: #16a8ad;
+  --A600: #108b8f;
+  --A700: #075255;
+  --Accent: var(--A400);
+
+  --N0: #ffffff;
+  --N25: #f9f9f9;
+  --N50: #f2f2f2;
+  --N75: #e6e6e6;
+  --N100: #dbdbdb;
+  --N200: #cbcbcb;
+  --N300: #b5b5b5;
+  --N400: #a4a2a2;
+  --N500: #808080;
+  --N600: #4d4d4d;
+  --N700: #242323;
+  --N1000: #000000;
+  --Natural: var(--N700);
+
+  --Gl25: #f7f9fc;
+  --Gl50: #e7edf8;
+  --Gl100: #d6e1f4;
+  --Gl200: #b9c8e7;
+  --Gl300: #9babd1;
+  --Gl400: #7a89b1;
+  --Gl500: #566384;
+  --Gl600: #4a5777;
+  --Gl700: #3f4b6a;
+  --Gl800: #2e3750;
+  --Gl850: #262e43;
+  --Gl900: #1e2537;
+  --Gl950: #1b1d24;
+  --Glacious: var(--Gl800);
+
+  --HO50: #ffded5;
+  --HO100: #feb9a5;
+  --HO200: #ff906e;
+  --HO300: #ff784f;
+  --HO400: #ff5d2d;
+  --HO500: #eb4d13;
+  --HO600: #7e2600;
+  --HO700: #421604;
+  --HotOrange: var(--HO400);
+
+  --Y50: #fbf3e0;
+  --Y100: #f9e3b6;
+  --Y200: #fcc003;
+  --Y300: #e4a201;
+  --Y400: #ca8501;
+  --Y500: #a35803;
+  --Y600: #6f3400;
+  --Y700: #2e2204;
+  --Yellow: var(--Y200);
+
+  --Gr25: #eafae6;
+  --Gr50: #cdefc4;
+  --Gr100: #91db8b;
+  --Gr200: #45c65a;
+  --Gr300: #3ba755;
+  --Gr400: #2e844a;
+  --Gr500: #22683e;
+  --Gr600: #194e31;
+  --Gr700: #0e3522;
+  --Green: var(--Gr300);
+
+  --CB50: #cfe9fe;
+  --CB100: #90d0fe;
+  --CB200: #1ab9ff;
+  --CB300: #08abed;
+  --CB400: #0d9dda;
+  --CB500: #107cad;
+  --CB600: #084968;
+  --CB700: #023248;
+  --CloudBlue: var(--CB500);
+
+  --I50: #e0e5f8;
+  --I100: #bec7f6;
+  --I200: #9ea9f1;
+  --I300: #8e9bef;
+  --I400: #7f8ced;
+  --I500: #5867e8;
+  --I600: #3a49da;
+  --I700: #260f8f;
+  --Indigo: var(--I500);
+
+  --Pu50: #ece1f9;
+  --Pu100: #d7bff2;
+  --Pu200: #c29ef1;
+  --Pu300: #b78def;
+  --Pu400: #ad7bee;
+  --Pu500: #9050e9;
+  --Pu600: #7526e3;
+  --Pu700: #401075;
+  --Purple: var(--Pu500);
+
+  --V50: #f2defe;
+  --V100: #e5b9fe;
+  --V200: #d892fe;
+  --V300: #d384fe;
+  --V400: #cb65ff;
+  --V500: #ba01ff;
+  --V600: #7b119a;
+  --V700: #3d0157;
+  --Violet: var(--V500);
+
+  --Pi50: #fddde3;
+  --Pi100: #fdb6c5;
+  --Pi200: #fe8aa7;
+  --Pi300: #fe7298;
+  --Pi400: #ff538a;
+  --Pi500: #e3066a;
+  --Pi600: #b60554;
+  --Pi700: #61022a;
+  --Pink: var(--Pi400);
+
+  --R25: #fcece8;
+  --R50: #ffdfd7;
+  --R100: #feb8ab;
+  --R200: #fe8f7d;
+  --R300: #fe7765;
+  --R400: #fe5c4c;
+  --R500: #ee3e3e;
+  --R600: #ba0517;
+  --R700: #640103;
+  --Red: var(--R400);
+
+  --color-impersonation-start: #ec4b4b;
+  --color-bloomberg: #fe9c29;
+}
+
+.theme--dark {
+  --global-focus-color: var(--B300);
+  --global-window-border-color: var(--Gl800);
+  --global-text-primary: var(--N0);
+  --global-text-primary-inverse: var(--N1000);
+  --global-text-secondary: var(--Gl100);
+  --global-input-disabled-color: var(--Gl600);
+  --global-input-bg: var(--Gl800);
+  --global-input-disabled-bg: var(--Gl800);
+  --global-input-disabled-label-color: var(--Gl600);
+  --global-input-error-highlight: var(--R400);
+  --global-input-placeholder-color: rgb(from var(--N0) r g b / 0.4);
+  --global-input-caret-color: var(--B300);
+  --global-input-error-caret-color: var(--R400);
+  --global-input-border-color: var(--Gl600);
+  --global-input-color: var(--N0);
+  --global-input-label-color: var(--Gl100);
+}
+
+.theme--light {
+  --global-focus-color: var(--B400);
+  --global-window-border-color: var(--N100);
+  --global-text-primary: var(--N1000);
+  --global-text-primary-inverse: var(--N0);
+  --global-text-secondary: var(--N700);
+  --global-input-disabled-color: var(--N300);
+  --global-input-bg: var(--N0);
+  --global-input-disabled-bg: var(--N50);
+  --global-input-disabled-label-color: var(--N300);
+  --global-input-error-highlight: var(--R500);
+  --global-input-placeholder-color: var(--N300);
+  --global-input-caret-color: var(--B500);
+  --global-input-error-caret-color: var(--R500);
+  --global-input-border-color: var(--N200);
+  --global-input-color: var(--N1000);
+  --global-input-label-color: var(--N700);
+}
+
+/* Menu colors - used for Dropdowns, Context Menus, etc */
+.theme--dark {
+  --menu-panel-bg-color: var(--Gl700);
+  --menu-panel-border-color: var(--Gl500);
+  --menu-button-bg-color-hover: var(--Gl500);
+  --menu-heading-color: var(--A400);
+  --menu-toggle_bg: var(--Gl400);
+  --menu-toggle_bg_disabled: var(--Gl800);
+  --menu-toggle_thumb_bg_disabled: var(--Gl500);
+  --menu-toggle_bg_active: var(--A400);
+  --menu-toggle_thumb_bg: var(--N0);
+  --menu-panel-shadow-color: rgba(0, 0, 0, 0.4);
+}
+.theme--light {
+  --menu-panel-bg-color: var(--N0);
+  --menu-panel-border-color: var(--N100);
+  --menu-button-bg-color-hover: var(--N50);
+  --menu-heading-color: var(--A500);
+  --menu-toggle_bg: var(--N200);
+  --menu-toggle_bg_disabled: var(--N50);
+  --menu-toggle_thumb_bg_disabled: var(--N300);
+  --menu-toggle_bg_active: var(--A500);
+  --menu-toggle_thumb_bg: var(--N0);
+  --menu-panel-shadow-color: rgba(0, 0, 0, 0.15);
+}

package/lib/src/assets/styles/decorations.css

@@ -0,0 +1,15 @@
+/* 
+  Consuming apps can expect these variables to exist and use them directly - much like the colors.css file.
+  We shouldn't resort to using this for every case where we want 2 or more components to share a style.
+*/
+:root {
+  --menu-panel-border: 1px solid var(--menu-panel-border-color);
+  --menu-panel-shadow: 0px 16px 40px var(--menu-panel-shadow-color);
+  --menu-panel-radius: 4px;
+  --menu-panel-vertical-padding: 4px;
+  --menu-clickable-color: var(--global-text-primary);
+  --menu-clickable-font-size: 12px;
+  --menu-clickable-font-weight: 400;
+  --menu-clickable-disabled: 0.5;
+  --menu-clickable-vertical-padding: 6px;
+}

package/lib/src/assets/styles/fontface.css

@@ -0,0 +1,17 @@
+/* // Inter (variable weight fonts) Main typeface used throughout the app */
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/Inter-roman.var.woff2?v=3.19') format('woff2');
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
+}

package/lib/src/assets/styles/scrollbars.css

@@ -0,0 +1,70 @@
+.theme--dark {
+  --scrollbar-background: transparent;
+  --scrollbar-button-display: none;
+  --scrollbar-thumb: rgb(142 142 142);
+}
+.theme--light {
+  --scrollbar-background: transparent;
+  --scrollbar-button-display: none;
+  --scrollbar-thumb: rgb(163 179 221);
+}
+/* The bar/track */
+::-webkit-scrollbar {
+  background: var(--scrollbar-background);
+  width: var(--scrollbar-size, 20px);
+  height: var(--scrollbar-size, 20px);
+}
+/* The thumb/drag/pill */
+::-webkit-scrollbar-thumb {
+  border: calc(var(--scrollbar-size, 20px) * var(--scrollbar-inset, 0.2)) solid transparent;
+  border-radius: calc(var(--scrollbar-size, 20px) / 2);
+  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.3);
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.7);
+}
+/* The buttons */
+::-webkit-scrollbar-button:single-button {
+  display: var(--scrollbar-button-display, block);
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: var(--scrollbar-size, 20px);
+  width: var(--scrollbar-size, 20px);
+  height: var(--scrollbar-size, 20px);
+}
+::-webkit-scrollbar-button:single-button:hover {
+  background-color: rgb(from var(--scrollbar-thumb) r g b / 0.25);
+}
+::-webkit-scrollbar-button:not(:single-button) {
+  display: none;
+}
+/* Left button */
+.theme--dark ::-webkit-scrollbar-button:horizontal:start {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='12,6 12,14 8,10'/></svg>");
+}
+.theme--light ::-webkit-scrollbar-button:horizontal:start {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='12,6 12,14 8,10'/></svg>");
+}
+/* Right button */
+.theme--dark ::-webkit-scrollbar-button:horizontal:end {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='8,6 8,14 12,10'/></svg>");
+}
+.theme--light ::-webkit-scrollbar-button:horizontal:end {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='8,6 8,14 12,10'/></svg>");
+}
+/* Up button */
+.theme--dark ::-webkit-scrollbar-button:vertical:start {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,12 14,12 10,8'/></svg>");
+}
+.theme--light ::-webkit-scrollbar-button:vertical:start {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,12 14,12 10,8'/></svg>");
+}
+/* Down button */
+.theme--dark ::-webkit-scrollbar-button:vertical:end {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,8 14,8 10,12'/></svg>");
+}
+.theme--light ::-webkit-scrollbar-button:vertical:end {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,8 14,8 10,12'/></svg>");
+}

package/lib/src/assets/styles/typography.css

@@ -0,0 +1,3 @@
+:root {
+  font-family: 'Inter var', sans-serif;
+}