@addev-be/ui 0.20.5 → 0.20.8

package/dist/services/updateSqlRequests.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUpdateSqlRequestHandler = void 0;
+var hooks_1 = require("./hooks");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var useUpdateSqlRequestHandler = function (name) { return (0, hooks_1.useWebSocketRequestHandler)(name); };
+exports.useUpdateSqlRequestHandler = useUpdateSqlRequestHandler;

package/package.json

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

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

@@ -17,6 +17,7 @@ export const DataGridWrapper = styled.div<SpaceProps>`
   flex-direction: column;
   overflow: hidden;
   width: 100%;
+  height: 100%;
 
   ${space}
 `;

package/src/components/ui/Avatar/styles.ts

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;

package/src/components/ui/Label.tsx

@@ -1,90 +1,90 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-export const StyledLabel = styled.span.withConfig({
-  shouldForwardProp: () => true,
-})<LabelProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-  font-weight: 500;
-
-  ${({ color }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-100);
-          color: var(--color-${color}-700);
-          svg {
-            fill: var(--color-${color}-700);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          color: var(--color-neutral-700);
-          svg {
-            fill: var(--color-neutral-700);
-          }
-        `}
-
-  ${({ bordered, color }) =>
-    bordered
-      ? css`
-          border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
-        `
-      : 'border: none;'}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-0_5) var(--space-1_5);
-    font-size: var(--text-xs);
-    border-radius: var(--rounded-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-
-  &.medium {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    border-radius: var(--rounded-md);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3_5);
-      height: var(--space-3_5);
-    }
-  }
-
-  &.large {
-    padding: var(--space-1_5) var(--space-2_5);
-    font-size: var(--text-base);
-    border-radius: var(--rounded-lg);
-    svg {
-      margin-right: var(--space-1_5);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-`;
-
-export type LabelProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-export const Label = forwardRef<
-  HTMLSpanElement,
-  ComponentProps<typeof StyledLabel> & LabelProps
->(({ children, size = 'medium', className = '', ...props }, ref) => (
-  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-    {children}
-  </StyledLabel>
-));
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledLabel = styled.span.withConfig({
+  shouldForwardProp: () => true,
+})<LabelProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 500;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-100);
+          color: var(--color-${color}-700);
+          svg {
+            fill: var(--color-${color}-700);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          color: var(--color-neutral-700);
+          svg {
+            fill: var(--color-neutral-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
+        `
+      : 'border: none;'}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-0_5) var(--space-1_5);
+    font-size: var(--text-xs);
+    border-radius: var(--rounded-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+
+  &.medium {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    border-radius: var(--rounded-md);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3_5);
+      height: var(--space-3_5);
+    }
+  }
+
+  &.large {
+    padding: var(--space-1_5) var(--space-2_5);
+    font-size: var(--text-base);
+    border-radius: var(--rounded-lg);
+    svg {
+      margin-right: var(--space-1_5);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+`;
+
+export type LabelProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Label = forwardRef<
+  HTMLSpanElement,
+  ComponentProps<typeof StyledLabel> & LabelProps
+>(({ children, size = 'medium', className = '', ...props }, ref) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
+));

package/src/components/ui/TabsView/TabsList.tsx

@@ -1,44 +1,44 @@
-import { FC, useEffect, useState } from 'react';
-import { TabContainer, TabsListContainer } from './styles';
-
-import { SpaceProps } from '../../../helpers';
-import { Tab } from './types';
-
-type TabsListProps = {
-  tabs: Tab[];
-  selectedIndex?: number;
-  onSelectedIndexChanged?: (index: number) => void;
-} & SpaceProps;
-
-export const TabsList: FC<TabsListProps> = ({
-  tabs,
-  selectedIndex,
-  onSelectedIndexChanged,
-  ...spaceProps
-}) => {
-  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
-
-  useEffect(() => {
-    setActiveIndex(selectedIndex ?? 0);
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    onSelectedIndexChanged?.(activeIndex);
-  }, [activeIndex, onSelectedIndexChanged]);
-
-  return (
-    <TabsListContainer {...spaceProps}>
-      {tabs.map((tab, index) => (
-        <TabContainer
-          key={index}
-          $color={tab.color}
-          $isActive={activeIndex === index}
-          onClick={() => setActiveIndex(index)}
-        >
-          {tab.icon ? <tab.icon /> : null}
-          {tab.tabName}
-        </TabContainer>
-      ))}
-    </TabsListContainer>
-  );
-};
+import { FC, useEffect, useState } from 'react';
+import { TabContainer, TabsListContainer } from './styles';
+
+import { SpaceProps } from '../../../helpers';
+import { Tab } from './types';
+
+type TabsListProps = {
+  tabs: Tab[];
+  selectedIndex?: number;
+  onSelectedIndexChanged?: (index: number) => void;
+} & SpaceProps;
+
+export const TabsList: FC<TabsListProps> = ({
+  tabs,
+  selectedIndex,
+  onSelectedIndexChanged,
+  ...spaceProps
+}) => {
+  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
+
+  useEffect(() => {
+    setActiveIndex(selectedIndex ?? 0);
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    onSelectedIndexChanged?.(activeIndex);
+  }, [activeIndex, onSelectedIndexChanged]);
+
+  return (
+    <TabsListContainer {...spaceProps}>
+      {tabs.map((tab, index) => (
+        <TabContainer
+          key={index}
+          $color={tab.color}
+          $isActive={activeIndex === index}
+          onClick={() => setActiveIndex(index)}
+        >
+          {tab.icon ? <tab.icon /> : null}
+          {tab.tabName}
+        </TabContainer>
+      ))}
+    </TabsListContainer>
+  );
+};

package/src/components/ui/TabsView/TabsView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { TabContentContainer, TabsViewContainer } from './styles';
 
 import { Tab } from './types';
@@ -7,12 +7,21 @@ import { TabsList } from './TabsList';
 type TabsViewProps = {
   tabs: Tab[];
   overflow?: boolean;
+  onSelectedTabChanged?: (tab: Tab, index: number) => void;
 };
 
-export const TabsView: FC<TabsViewProps> = ({ tabs, overflow = false }) => {
+export const TabsView: FC<TabsViewProps> = ({
+  tabs,
+  overflow = false,
+  onSelectedTabChanged,
+}) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const activeTab = tabs[activeIndex];
 
+  useEffect(() => {
+    onSelectedTabChanged?.(tabs[activeIndex], activeIndex);
+  }, [activeIndex, tabs, onSelectedTabChanged]);
+
   return (
     <TabsViewContainer>
       <TabsList

package/src/components/ui/TabsView/index.ts

@@ -1,3 +1,3 @@
-export * from './types';
-export * from './TabsView';
-export * from './TabsList';
+export * from './types';
+export * from './TabsView';
+export * from './TabsList';

package/src/helpers/styled/index.ts

@@ -1 +1 @@
-export * from './space';
+export * from './space';