@addev-be/ui 1.1.3 → 1.1.4

package/src/components/ui/Label.tsx

@@ -1,99 +1,99 @@
-import { ComponentProps, ForwardedRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-import { forwardRefWithName } from '../../helpers/components';
-
-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-base-100);
-          color: var(--color-text-700);
-          svg {
-            fill: var(--color-base-700);
-          }
-        `}
-
-  ${({ bordered, color }) =>
-    bordered
-      ? css`
-          border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-base-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 = forwardRefWithName(
-  (
-    {
-      children,
-      size = 'medium',
-      className = '',
-      ...props
-    }: ComponentProps<typeof StyledLabel> & LabelProps,
-    ref: ForwardedRef<HTMLSpanElement>
-  ) => (
-    <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-      {children}
-    </StyledLabel>
-  ),
-  'Label'
-);
+import { ComponentProps, ForwardedRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+import { forwardRefWithName } from '../../helpers/components';
+
+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-base-100);
+          color: var(--color-text-700);
+          svg {
+            fill: var(--color-base-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-base-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 = forwardRefWithName(
+  (
+    {
+      children,
+      size = 'medium',
+      className = '',
+      ...props
+    }: ComponentProps<typeof StyledLabel> & LabelProps,
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => (
+    <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+      {children}
+    </StyledLabel>
+  ),
+  'Label'
+);

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/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/styled/space';
+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,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/index.ts

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