react-restyle-components 0.2.40 → 0.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -16,8 +16,8 @@
   ],
   "scripts": {
     "start": "serve -s ./build",
-    "dev": "DISABLE_ESLINT_PLUGIN=true craco start",
     "serve-webapp": "craco build && craco start",
+    "dev": "DISABLE_ESLINT_PLUGIN=true craco start",
     "build": "rm -rf ./lib && tsc && chmod +x npm-publish.sh && sh ./npm-publish.sh",
     "eject": "react-scripts eject",
     "precommit": "lint-staged --allow-empty",
@@ -41,6 +41,7 @@
     "@mui/material": "^5.15.19",
     "@radix-ui/react-tooltip": "^1.1.5",
     "@react-pdf/renderer": "^4.1.4",
+    "@storybook/addon-styling-webpack": "^1.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
@@ -76,6 +77,7 @@
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.6",
     "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.4.7",
     "@storybook/react-webpack5": "^8.0.6",
     "@storybook/test": "^8.0.6",
     "@svgr/webpack": "^8.1.0",
@@ -87,6 +89,7 @@
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
     "css-loader": "^7.1.2",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.14.0",
     "eslint-plugin-storybook": "^0.8.0",
     "gh-pages": "^3.2.3",
@@ -103,9 +106,16 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
+    "webpack": "^5.72.0",
+    "vite": "^5.0.11",
+    "vite-plugin-css-injected-by-js": "^3.1.1",
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-static-copy": "^1.0.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.31.4",
-    "vitest-dom": "^0.1.0",
-    "webpack": "^5.72.0"
+    "vitest-dom": "^0.1.0"
   },
   "eslintConfig": {
     "extends": [

package/lib/src/App.css

@@ -1,45 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.react-bootstrap-table table {
-  table-layout: auto;
-}
-.bg-orange1 {
-  background-color: "#EF4444";
-}

package/lib/src/App.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './App.css';
-declare function App(): React.JSX.Element;
-export default App;

package/lib/src/App.js

@@ -1,13 +0,0 @@
-import React, { useState } from 'react';
-import './App.css';
-import { Tab, Tabs } from './core-components/atoms/tabs/_tabs.component';
-function App() {
-    const [color, setColor] = useState('#aabbcc');
-    return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },
-        React.createElement(Tabs, { options: [{ title: 'Work History' }, { title: 'Book Order' }] },
-            React.createElement(Tab, { title: "Work History" },
-                React.createElement("div", null, "Work")),
-            React.createElement(Tab, { title: "Book Order" },
-                React.createElement("div", null, "Book")))));
-}
-export default App;

package/lib/src/__mocks__/styleMock.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/__mocks__/styleMock.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,217 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/* 
-  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

@@ -1,17 +0,0 @@
-/* // 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

@@ -1,70 +0,0 @@
-.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

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