@addev-be/ui 1.0.0 → 1.0.2

package/src/components/ui/Message/index.tsx

@@ -1,57 +1,57 @@
-import * as styles from './styles';
-
-import {
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  TriangleExclamationIcon,
-} from '../../../Icons';
-import { FC, PropsWithChildren } from 'react';
-
-import { ThemeColor } from '../../../providers';
-
-type MessageType = 'success' | 'info' | 'warning' | 'error';
-
-type MessageProps = PropsWithChildren<{
-  className?: string;
-  title?: string;
-  type: MessageType;
-}>;
-
-const colorsMap: Record<
-  MessageType,
-  {
-    baseColor: ThemeColor;
-    iconComponent: FC<{ className?: string }>;
-  }
-> = {
-  success: {
-    baseColor: 'green',
-    iconComponent: CircleCheckIcon,
-  },
-  info: {
-    baseColor: 'sky',
-    iconComponent: CircleInfoIcon,
-  },
-  warning: {
-    baseColor: 'amber',
-    iconComponent: TriangleExclamationIcon,
-  },
-  error: {
-    baseColor: 'red',
-    iconComponent: CircleXMarkIcon,
-  },
-};
-
-export const Message: FC<MessageProps> = ({ children, title, type }) => {
-  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
-  return (
-    <styles.MessageContainer $baseColor={baseColor}>
-      <Icon className="MessageIcon" />
-      <styles.MessageContent>
-        {title && <h3>{title}</h3>}
-        <div>{children}</div>
-      </styles.MessageContent>
-    </styles.MessageContainer>
-  );
-};
+import * as styles from './styles';
+
+import {
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  TriangleExclamationIcon,
+} from '../../../Icons';
+import { FC, PropsWithChildren } from 'react';
+
+import { ThemeColor } from '../../../providers';
+
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+
+type MessageProps = PropsWithChildren<{
+  className?: string;
+  title?: string;
+  type: MessageType;
+}>;
+
+const colorsMap: Record<
+  MessageType,
+  {
+    baseColor: ThemeColor;
+    iconComponent: FC<{ className?: string }>;
+  }
+> = {
+  success: {
+    baseColor: 'green',
+    iconComponent: CircleCheckIcon,
+  },
+  info: {
+    baseColor: 'sky',
+    iconComponent: CircleInfoIcon,
+  },
+  warning: {
+    baseColor: 'amber',
+    iconComponent: TriangleExclamationIcon,
+  },
+  error: {
+    baseColor: 'red',
+    iconComponent: CircleXMarkIcon,
+  },
+};
+
+export const Message: FC<MessageProps> = ({ children, title, type }) => {
+  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
+  return (
+    <styles.MessageContainer $baseColor={baseColor}>
+      <Icon className="MessageIcon" />
+      <styles.MessageContent>
+        {title && <h3>{title}</h3>}
+        <div>{children}</div>
+      </styles.MessageContent>
+    </styles.MessageContainer>
+  );
+};

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

@@ -1,40 +1,40 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers';
-
-export const MessageContainer = styled.div.attrs({
-  className: 'MessageContainer',
-})<{
-  $baseColor: ThemeColor;
-}>`
-  display: flex;
-  flex-direction: row;
-  box-shadow: var(--shadow-md);
-  border-radius: var(--rounded-md);
-  padding: var(--space-4);
-  gap: var(--space-4);
-
-  ${({ $baseColor }) => css`
-    border: 1px solid var(--color-${$baseColor}-300);
-    background-color: var(--color-${$baseColor}-100);
-    color: var(--color-${$baseColor}-600);
-
-    .MessageIcon {
-      fill: var(--color-${$baseColor}-600);
-    }
-  `}
-
-  .MessageIcon {
-    width: var(--space-5);
-    height: var(--space-5);
-    flex-shrink: 0;
-  }
-`;
-
-export const MessageContent = styled.div.attrs({
-  className: 'MessageContent',
-})`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers';
+
+export const MessageContainer = styled.div.attrs({
+  className: 'MessageContainer',
+})<{
+  $baseColor: ThemeColor;
+}>`
+  display: flex;
+  flex-direction: row;
+  box-shadow: var(--shadow-md);
+  border-radius: var(--rounded-md);
+  padding: var(--space-4);
+  gap: var(--space-4);
+
+  ${({ $baseColor }) => css`
+    border: 1px solid var(--color-${$baseColor}-300);
+    background-color: var(--color-${$baseColor}-100);
+    color: var(--color-${$baseColor}-600);
+
+    .MessageIcon {
+      fill: var(--color-${$baseColor}-600);
+    }
+  `}
+
+  .MessageIcon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+  }
+`;
+
+export const MessageContent = styled.div.attrs({
+  className: 'MessageContent',
+})`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;

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

@@ -1,38 +1,38 @@
-import { FC, useEffect, useState } from 'react';
-import { TabContentContainer, TabsViewContainer } from './styles';
-
-import { Tab } from './types';
-import { TabsList } from './TabsList';
-
-type TabsViewProps = {
-  tabs: Tab[];
-  overflow?: boolean;
-  onSelectedTabChanged?: (tab: Tab, index: number) => void;
-};
-
-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
-        tabs={tabs}
-        selectedIndex={activeIndex}
-        onSelectedIndexChanged={setActiveIndex}
-        p="2"
-      />
-      <TabContentContainer $isOverflow={overflow}>
-        {activeTab.content}
-      </TabContentContainer>
-    </TabsViewContainer>
-  );
-};
+import { FC, useEffect, useState } from 'react';
+import { TabContentContainer, TabsViewContainer } from './styles';
+
+import { Tab } from './types';
+import { TabsList } from './TabsList';
+
+type TabsViewProps = {
+  tabs: Tab[];
+  overflow?: boolean;
+  onSelectedTabChanged?: (tab: Tab, index: number) => void;
+};
+
+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
+        tabs={tabs}
+        selectedIndex={activeIndex}
+        onSelectedIndexChanged={setActiveIndex}
+        p="2"
+      />
+      <TabContentContainer $isOverflow={overflow}>
+        {activeTab.content}
+      </TabContentContainer>
+    </TabsViewContainer>
+  );
+};

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

@@ -1,73 +1,73 @@
-import { SpaceProps, space } from '../../../helpers/styled';
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
-import styled, { css } from 'styled-components';
-
-import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
-
-export const TabsViewContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-export const TabsListContainer = styled.div<SpaceProps>`
-  display: flex;
-  gap: var(--space-4);
-  flex-shrink: 0;
-  overflow-x: scroll;
-  scrollbar-width: none;
-  font-size: var(--text-lg);
-  white-space: nowrap;
-
-  ${space}
-`;
-
-export const TabContainer = styled.div<{
-  $color?: ThemeColorWithIntensity | ThemeColor;
-  $isActive?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  height: var(--space-8);
-  gap: var(--space-2);
-  cursor: pointer;
-  padding: 0 var(--space-2);
-  color: var(--color-text-800);
-
-  svg {
-    height: var(--space-4);
-    width: var(--space-4);
-    fill: var(--color-base-800);
-  }
-
-  ${({ $color = 'primary' }) => css`
-    &:hover {
-      color: var(--color-${getColorWithIntensity($color, 500)});
-      svg {
-        fill: var(--color-${getColorWithIntensity($color, 500)});
-      }
-    }
-  `};
-
-  ${({ $isActive, $color = 'primary' }) =>
-    $isActive &&
-    css`
-      border-bottom: var(--space-0_5) solid;
-      color: var(--color-${getColorWithIntensity($color, 500)});
-      svg {
-        fill: var(--color-${getColorWithIntensity($color, 500)});
-      }
-    `}
-`;
-
-export const TabContentContainer = styled.div<{
-  $isOverflow?: boolean;
-}>`
-  display: flex;
-  height: 100%;
-
-  ${({ $isOverflow }) => css`
-    overflow: ${$isOverflow ? 'auto' : 'hidden'};
-    scroll-behavior: smooth;
-  `}
-`;
+import { SpaceProps, space } from '../../../helpers/styled';
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import styled, { css } from 'styled-components';
+
+import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
+
+export const TabsViewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const TabsListContainer = styled.div<SpaceProps>`
+  display: flex;
+  gap: var(--space-4);
+  flex-shrink: 0;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  font-size: var(--text-lg);
+  white-space: nowrap;
+
+  ${space}
+`;
+
+export const TabContainer = styled.div<{
+  $color?: ThemeColorWithIntensity | ThemeColor;
+  $isActive?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  height: var(--space-8);
+  gap: var(--space-2);
+  cursor: pointer;
+  padding: 0 var(--space-2);
+  color: var(--color-text-800);
+
+  svg {
+    height: var(--space-4);
+    width: var(--space-4);
+    fill: var(--color-base-800);
+  }
+
+  ${({ $color = 'primary' }) => css`
+    &:hover {
+      color: var(--color-${getColorWithIntensity($color, 500)});
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
+    }
+  `};
+
+  ${({ $isActive, $color = 'primary' }) =>
+    $isActive &&
+    css`
+      border-bottom: var(--space-0_5) solid;
+      color: var(--color-${getColorWithIntensity($color, 500)});
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
+    `}
+`;
+
+export const TabContentContainer = styled.div<{
+  $isOverflow?: boolean;
+}>`
+  display: flex;
+  height: 100%;
+
+  ${({ $isOverflow }) => css`
+    overflow: ${$isOverflow ? 'auto' : 'hidden'};
+    scroll-behavior: smooth;
+  `}
+`;

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

@@ -1,12 +1,12 @@
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
-
-import { IconFC } from '../../../Icons';
-import { ReactNode } from 'react';
-
-export type Tab = {
-  color?: ThemeColorWithIntensity | ThemeColor;
-  content: ReactNode;
-  icon?: IconFC;
-  key?: string;
-  tabName: string;
-};
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+
+import { IconFC } from '../../../Icons';
+import { ReactNode } from 'react';
+
+export type Tab = {
+  color?: ThemeColorWithIntensity | ThemeColor;
+  content: ReactNode;
+  icon?: IconFC;
+  key?: string;
+  tabName: string;
+};

package/src/components/ui/index.ts

@@ -1,7 +1,7 @@
-export * from './Avatar';
-export * from './Card';
-export * from './ContextMenu';
-export * from './Ellipsis';
-export * from './Label';
-export * from './Message';
-export * from './TabsView';
+export * from './Avatar';
+export * from './Card';
+export * from './ContextMenu';
+export * from './Ellipsis';
+export * from './Label';
+export * from './Message';
+export * from './TabsView';

package/src/config/index.ts

@@ -1,14 +1,14 @@
-export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
-
-export type Config = {
-  webSocketUrl: string;
-  httpServerUrl: `${string}/`;
-};
-
-type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
-
-export type PartialConfig = DeepPartial<Config>;
+export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
+
+export type Config = {
+  webSocketUrl: string;
+  httpServerUrl: `${string}/`;
+};
+
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+
+export type PartialConfig = DeepPartial<Config>;

package/src/helpers/dates.ts

@@ -1,17 +1,17 @@
-import moment from 'moment';
-
-export const formatDate = (
-  date: moment.MomentInput,
-  format: string = 'DD/MM/YYYY'
-): string => {
-  const m = moment.utc(date);
-  return m.isValid() ? m.format(format) : '';
-};
-
-export const formatDateTime = (
-  date: moment.MomentInput,
-  format: string = 'DD/MM/YYYY HH:mm:ss'
-): string => {
-  const m = moment.utc(date);
-  return m.isValid() ? m.format(format) : '';
-};
+import moment from 'moment';
+
+export const formatDate = (
+  date: moment.MomentInput,
+  format: string = 'DD/MM/YYYY'
+): string => {
+  const m = moment.utc(date);
+  return m.isValid() ? m.format(format) : '';
+};
+
+export const formatDateTime = (
+  date: moment.MomentInput,
+  format: string = 'DD/MM/YYYY HH:mm:ss'
+): string => {
+  const m = moment.utc(date);
+  return m.isValid() ? m.format(format) : '';
+};

package/src/helpers/getScrollbarSize.ts

@@ -1,14 +1,14 @@
-let scrollBarSize: number[] | undefined = undefined;
-
-export const getScrollBarSize = () => {
-  if (!scrollBarSize) {
-    const el = document.createElement('div');
-    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
-    document.body.appendChild(el);
-    const width = el.offsetWidth - el.clientWidth;
-    const height = el.offsetHeight - el.clientHeight;
-    el.remove();
-    scrollBarSize = [width, height];
-  }
-  return scrollBarSize;
-};
+let scrollBarSize: number[] | undefined = undefined;
+
+export const getScrollBarSize = () => {
+  if (!scrollBarSize) {
+    const el = document.createElement('div');
+    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
+    document.body.appendChild(el);
+    const width = el.offsetWidth - el.clientWidth;
+    const height = el.offsetHeight - el.clientHeight;
+    el.remove();
+    scrollBarSize = [width, height];
+  }
+  return scrollBarSize;
+};

package/src/helpers/index.ts

@@ -1,5 +1,6 @@
-export * from './dates';
-export * from './numbers';
-export * from './text';
-export * from './responsive';
-export * from './styled';
+export * from './dates';
+export * from './numbers';
+export * from './text';
+export * from './responsive';
+export * from './styled';
+export * from './types';