@addev-be/ui 0.20.8 → 0.21.0

package/dist/services/index.d.ts

@@ -3,16 +3,9 @@ export * from './HttpService';
 export * from './hooks';
 export * from './globalSearch';
 export * from './requests/auth';
-export * from './requests/generic';
-export * from './requests/tracking';
 export * from './requests/users';
 export * from './requests/userProfiles';
 export * from './types/auth';
 export * from './types/base';
-export * from './types/generic';
-export * from './types/tracking';
 export * from './types/users';
 export * from './types/userProfiles';
-export * from './sqlRequests';
-export * from './updateSqlRequests';
-export * as SmartQueries from './smartQueries';

package/dist/services/index.js

@@ -10,38 +10,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmartQueries = void 0;
 __exportStar(require("./WebSocketService"), exports);
 __exportStar(require("./HttpService"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./globalSearch"), exports);
 __exportStar(require("./requests/auth"), exports);
-__exportStar(require("./requests/generic"), exports);
-__exportStar(require("./requests/tracking"), exports);
 __exportStar(require("./requests/users"), exports);
 __exportStar(require("./requests/userProfiles"), exports);
 __exportStar(require("./types/auth"), exports);
 __exportStar(require("./types/base"), exports);
-__exportStar(require("./types/generic"), exports);
-__exportStar(require("./types/tracking"), exports);
 __exportStar(require("./types/users"), exports);
 __exportStar(require("./types/userProfiles"), exports);
-__exportStar(require("./sqlRequests"), exports);
-__exportStar(require("./updateSqlRequests"), exports);
-exports.SmartQueries = __importStar(require("./smartQueries"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.20.8",
+  "version": "0.21.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.20.8",
+    "@addev-be/framework-utils": "^0.21.0",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts

@@ -34,12 +34,12 @@ export const ColumnsList = styled.ul.attrs({
   flex-direction: column;
   flex: 1;
   overflow: auto;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid var(--color-base-200);
   margin: 0;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
 
   & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-neutral-100);
+    border-bottom: 1px solid var(--color-base-100);
   }
 `;
 
@@ -66,17 +66,17 @@ export const ColumnItem = styled.li.attrs({
     width: var(--space-6);
     height: var(--space-6);
     border-radius: var(--rounded-full);
-    background-color: var(--color-neutral-200);
+    background-color: var(--color-base-200);
     border: none;
     align-items: center;
     justify-content: center;
   }
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
     button {
       display: flex;
-      background-color: var(--color-neutral-300);
+      background-color: var(--color-base-300);
     }
   }
 `;

package/src/components/data/DataGrid/DataGridEditableCell/styles.ts

@@ -8,7 +8,7 @@ export const EditableCellContainer = styled.div<{
   ${dataGridCellCss}
   padding: 1px 4px 0px 4px;
   overflow: visible;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
 
   & input,
   & select {
@@ -21,12 +21,12 @@ export const EditableCellContainer = styled.div<{
     font-weight: inherit;
     text-align: ${({ $textAlign = 'left' }) => $textAlign};
 
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--color-base-300);
     padding: var(--space-1) var(--space-2);
 
-    color: var(--color-neutral-900);
+    color: var(--color-base-900);
     &::placeholder {
-      color: var(--color-neutral-400);
+      color: var(--color-base-400);
     }
 
     border: none;

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -16,7 +16,7 @@ export const InputContainer = styled.div.attrs({
     left: var(--space-4);
     display: flex;
     align-items: center;
-    fill: var(--color-neutral-400);
+    fill: var(--color-base-400);
     width: var(--space-4);
     height: var(--space-4);
   }
@@ -34,10 +34,10 @@ export const CheckboxesContainer = styled.div.attrs({
   padding: var(--space-2);
   margin: var(--space-1);
   margin-bottom: 0;
-  border: 1px solid var(--color-neutral-300);
+  border: 1px solid var(--color-base-300);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-inner);
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   height: 20em;
   overflow-y: hidden;
   white-space: nowrap;
@@ -46,7 +46,7 @@ export const CheckboxesContainer = styled.div.attrs({
 export const Separator = styled.div.attrs({
   className: 'Separator',
 })`
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin: var(--space-1) 0;
 `;
 
@@ -61,7 +61,7 @@ export const FilterValueContainer = styled.div.attrs({
   align-items: center;
   cursor: pointer;
   &:hover {
-    background-color: var(--color-neutral-50);
+    background-color: var(--color-base-50);
   }
 `;
 
@@ -72,7 +72,7 @@ export const FilterValuesScrollerContainer = styled.div.attrs({
 }>`
   display: block;
   font-size: var(--text-base);
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   overflow-y: scroll;
   overflow-x: hidden;
   height: 100%;

package/src/components/data/DataGrid/styles.ts

@@ -39,10 +39,10 @@ export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
           }
         `
       : css`
-          background-color: var(--color-neutral-400);
+          background-color: var(--color-base-400);
           &:hover,
           &.active {
-            background-color: var(--color-neutral-500);
+            background-color: var(--color-base-500);
           }
         `}
 
@@ -96,10 +96,10 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
           }
         `
       : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-950);
+          background-color: var(--color-base-200);
+          color: var(--color-base-950);
           &:hover {
-            background-color: var(--color-neutral-300);
+            background-color: var(--color-base-300);
           }
         `}
 
@@ -138,9 +138,9 @@ export const dataGridCellCss = css<DataGridCellFCProps>`
   text-overflow: ellipsis;
   user-select: ${({ $userSelect }) => ($userSelect ? 'text' : 'none')};
   white-space: nowrap;
-  border-right: 1px solid var(--color-neutral-200);
-  border-bottom: 1px solid var(--color-neutral-200);
-  background-color: ${({ $color = 'neutral' }) => `var(--color-${$color}-50)`};
+  border-right: 1px solid var(--color-base-200);
+  border-bottom: 1px solid var(--color-base-200);
+  background-color: ${({ $color = 'base' }) => `var(--color-${$color}-50)`};
   text-align: ${({ $textAlign = 'left' }) => $textAlign};
 `;
 
@@ -152,7 +152,7 @@ DataGridCell.displayName = 'DataGridCell';
 export const DataGridHeaderTitle = styled.div`
   white-space: normal;
   font-weight: var(--font-bold);
-  color: var(--color-neutral-900);
+  color: var(--color-base-900);
   height: auto;
 `;
 
@@ -194,7 +194,7 @@ export const DataGridContainer = styled.div<{
   display: grid;
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
   font-size: var(--text-base);
   overflow: scroll;
   grid-template-rows: ${({
@@ -234,7 +234,7 @@ export const DataGridContainer = styled.div<{
               .map((w) => (typeof w === 'number' ? `${w}px` : w))
               .join(' + ')})`
       };
-      background-color: var(--color-neutral-200);
+      background-color: var(--color-base-200);
       z-index: 1;
     }`
     )}
@@ -252,7 +252,7 @@ export const DataGridContainer = styled.div<{
               .map((w) => (typeof w === 'number' ? `${w}px` : w))
               .join(' + ')})`
       };
-      background-color: var(--color-neutral-50);
+      background-color: var(--color-base-50);
       z-index: 1;
     }`
     )}
@@ -286,15 +286,15 @@ const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
           color: var(--color-${$headerColor}-900);
         `
       : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-900);
+          background-color: var(--color-base-200);
+          color: var(--color-base-900);
         `}
 
   ${DataGridHeaderCellContainer}:first-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
   ${DataGridHeaderCellContainer}:last-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
 `;
 
@@ -306,7 +306,7 @@ export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-top: 1px solid var(--color-neutral-300);
+  border-top: 1px solid var(--color-base-300);
   top: 0;
 `;
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';
@@ -319,7 +319,7 @@ export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
   bottom: 0;
 `;
 DataGridFooterRow.displayName = 'DataGridFooterRow';
@@ -332,10 +332,10 @@ export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
   ${DataGridCell}:first-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
   ${DataGridCell}:last-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
 
   &:hover > ${DataGridCell} {
@@ -361,7 +361,7 @@ export const LoadingCell = styled(DataGridCell)`
   box-sizing: border-box;
 
   &.animate-pulse > div {
-    background-color: var(--color-neutral-200);
+    background-color: var(--color-base-200);
     border-radius: var(--rounded-full);
     width: 100%;
     height: 100%;
@@ -382,7 +382,7 @@ const selectionCellStyle = css`
     height: var(--space-4);
     width: var(--space-4);
     border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--color-base-300);
     color: var(--color-primary-600);
   }
 `;

package/src/components/data/SqlRequestForeignList/styles.ts

@@ -7,7 +7,7 @@ export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
   padding: 0;
   position: relative;
   cursor: pointer;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
 
   & > svg {
     position: absolute;
@@ -17,7 +17,7 @@ export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
     pointer-events: none;
     width: var(--space-4);
     height: var(--space-4);
-    fill: var(--color-neutral-900);
+    fill: var(--color-base-900);
   }
 `;
 

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -18,8 +18,8 @@ export const FiltersSidebarContainer = styled.div`
   z-index: 1;
   overflow-y: auto;
   box-sizing: border-box;
-  background-color: var(--color-neutral-50);
-  border-right: 1px solid var(--color-neutral-300);
+  background-color: var(--color-base-50);
+  border-right: 1px solid var(--color-base-300);
   box-shadow: var(--shadow-sm);
 
   & > ${MenuContainer} {
@@ -43,7 +43,7 @@ export const FiltersSidebarHeader = styled.div`
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
 
   display: flex;
   justify-content: space-between;
@@ -52,7 +52,7 @@ export const FiltersSidebarHeader = styled.div`
   padding: var(--space-2);
 
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
 
   h3 {
     margin: 0;
@@ -64,11 +64,11 @@ export const FiltersSidebarFilter = styled.div`
   display: flex;
   align-items: center;
   padding: var(--space-4) var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
   }
   svg {
     margin-left: auto;

package/src/components/forms/Button.tsx

@@ -33,7 +33,7 @@ export const StyledButton = styled.button.withConfig({
   font-family: var(--font-sans);
   cursor: pointer;
 
-  ${({ $color = 'neutral', $bordered = false }) => {
+  ${({ $color = 'base', $bordered = false }) => {
     const colorWithIntensity = getColorWithIntensity($color);
     const colorName = getColor(colorWithIntensity);
     const intensity = getIntensity(colorWithIntensity);
@@ -111,8 +111,8 @@ export const Button = forwardRef<
       icon: Icon,
       className,
       rounded = false,
-      color = 'neutral',
-      bordered = false,
+      color = 'base',
+      bordered = true,
       ...props
     },
     ref

package/src/components/forms/Form/styles.ts

@@ -8,7 +8,7 @@ export const FormGroupContainer = styled.fieldset<{
 }>`
   display: flex;
   flex-direction: column;
-  background: var(--color-neutral-100);
+  background: var(--color-base-100);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
 
@@ -24,8 +24,8 @@ export const FormGroupContainer = styled.fieldset<{
   }
 
   margin: 0;
-  border: 1px solid var(--color-neutral-300);
-  border-left: 8px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+  border: 1px solid var(--color-base-300);
+  border-left: 8px solid ${({ color = 'base' }) => `var(--color-${color})`};
 `;
 
 export const FormGroupHeader = styled.div`
@@ -43,7 +43,7 @@ export const FormGroupHeader = styled.div`
     margin: 0;
     font-size: var(--text-sm);
     font-weight: var(--font-normal);
-    color: var(--color-neutral-500);
+    color: var(--color-base-500);
   }
 
   & > svg {
@@ -57,8 +57,8 @@ export const inputCss = css`
   font-size: var(--text-lg);
 
   border: none;
-  color: var(--color-neutral-900);
-  background: var(--color-neutral-0);
+  color: var(--color-base-900);
+  background: var(--color-base-0);
 
   box-sizing: border-box;
   width: 100%;
@@ -73,7 +73,7 @@ export const inputCss = css`
 `;
 
 export const FormRowLabel = styled.span`
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
   font-size: var(--text-base);
   padding: var(--space-1) 0;
   display: flex;
@@ -86,7 +86,7 @@ export const FormRowLabel = styled.span`
   & > svg {
     width: var(--space-4);
     height: var(--space-4);
-    fill: var(--color-neutral-500);
+    fill: var(--color-base-500);
     flex-shrink: 0;
   }
 `;
@@ -126,8 +126,8 @@ export const FormRowContainer = styled.label<{
     padding: var(--space-1) var(--space-2);
   }
 
-  border: 1px solid var(--color-neutral-200);
-  background: var(--color-neutral-0);
+  border: 1px solid var(--color-base-200);
+  background: var(--color-base-0);
   &:focus-within {
     outline: 2px solid var(--color-primary-500);
     z-index: 1;
@@ -141,7 +141,7 @@ export const FormRowContainer = styled.label<{
     }
 
     & + & {
-      border-top: 1px solid var(--color-neutral-300);
+      border-top: 1px solid var(--color-base-300);
     }
 
     & > div > select,
@@ -149,7 +149,7 @@ export const FormRowContainer = styled.label<{
     & > div > input,
     & > div > textarea {
       background: none;
-      color: var(--color-neutral-900);
+      color: var(--color-base-900);
     }
   }
 `;

package/src/components/forms/styles.ts

@@ -5,9 +5,9 @@ import { NumericFormat } from 'react-number-format';
 export const inputStyle = css`
   font-family: var(--font-sans);
   font-size: inherit;
-  color: var(--color-neutral-900);
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-300);
+  color: var(--color-base-900);
+  background-color: var(--color-base-50);
+  border: 1px solid var(--color-base-300);
   border-radius: var(--rounded-md);
   padding: var(--space-1);
   width: 100%;

package/src/components/layout/Dropdown/styles.ts

@@ -25,10 +25,10 @@ export type DropdownContainerProps = {
 export const DropdownContainer = styled.div.attrs({
   className: 'DropdownContainer',
 })<DropdownContainerProps>`
-  background: var(--color-neutral-0);
+  background: var(--color-base-0);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-lg);
-  outline: 1px solid var(--color-neutral-200);
+  outline: 1px solid var(--color-base-200);
 
   position: absolute;
   z-index: 1001;

package/src/components/layout/Modal/styles.ts

@@ -28,7 +28,7 @@ export type ModalContainerProps = {
 export const ModalContainer = styled.div.attrs({
   className: 'ModalContainer',
 })<ModalContainerProps>`
-  background: var(--color-neutral-100);
+  background: var(--color-base-100);
   border-radius: var(--rounded-lg);
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -68,7 +68,7 @@ export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
   font-weight: bold;
   font-size: var(--text-lg);
   padding: var(--space-2);
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
   padding: var(--space-4);
 `;
 
@@ -108,7 +108,7 @@ export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
   flex-direction: row;
   justify-content: space-between;
   padding: var(--space-2);
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
   padding: var(--space-4);
 `;
 

package/src/components/search/styles.ts

@@ -25,7 +25,7 @@ export const QuickSearchResultsListContainer = styled.div.attrs({
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
-  border-right: 1px solid var(--color-neutral-200);
+  border-right: 1px solid var(--color-base-200);
   flex: 1;
   overflow: auto;
 `;
@@ -42,7 +42,7 @@ export const QuickSearchResultsTitle = styled.div.attrs({
   font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
 `;
 
 export const QuickSearchResultsItem = styled.div.attrs({
@@ -52,7 +52,7 @@ export const QuickSearchResultsItem = styled.div.attrs({
   cursor: pointer;
   border-radius: 4px;
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
   }
 `;
 
@@ -69,7 +69,7 @@ export const QuickSearchResultsDetailsDivider = styled.hr`
   margin: var(--space-2) 0;
   height: 1px;
   border: none;
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
 `;
 
 export const QuickSearchResultDetailsTitle = styled.div.attrs({
@@ -92,5 +92,5 @@ export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
   text-transform: uppercase;
   font-size: var(--text-sm);
   font-weight: bold;
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
 `;