@addev-be/ui 0.12.0 → 0.12.2

package/src/components/search/index.ts

@@ -1,9 +1,9 @@
-export * from './QuickSearchBar';
-export * from './QuickSearchResults';
-export * from './HighlightedText';
-export * from './types';
-export {
-  QuickSearchResultDetailsTitle,
-  QuickSearchResultsDetailsList,
-  QuickSearchResultsDetailsTerm,
-} from './styles';
+export * from './QuickSearchBar';
+export * from './QuickSearchResults';
+export * from './HighlightedText';
+export * from './types';
+export {
+  QuickSearchResultDetailsTitle,
+  QuickSearchResultsDetailsList,
+  QuickSearchResultsDetailsTerm,
+} from './styles';

package/src/components/search/styles.ts

@@ -1,96 +1,96 @@
-import styled from 'styled-components';
-
-export const QuickSearchDropdownContainer = styled.div.attrs({
-  className: 'QuickSearchDropdownContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-export const QuickSearchResultsContainer = styled.div.attrs({
-  className: 'QuickSearchResultsContainer',
-})`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  flex: 1;
-  padding: var(--space-2) 0;
-  overflow: hidden;
-`;
-
-export const QuickSearchResultsListContainer = styled.div.attrs({
-  className: 'QuickSearchResultsListContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-2);
-  border-right: 1px solid var(--color-neutral-200);
-  flex: 1;
-  overflow: auto;
-`;
-
-export const QuickSearchResultsTitle = styled.div.attrs({
-  className: 'QuickSearchResultsTitle',
-})`
-  margin: 0;
-  margin-bottom: var(--space-1);
-  &:not(:first-child) {
-    margin-top: var(--space-2);
-  }
-  font-weight: bold;
-  font-size: var(--text-sm);
-  text-transform: uppercase;
-  letter-spacing: 120%;
-  color: var(--color-neutral-500);
-`;
-
-export const QuickSearchResultsItem = styled.div.attrs({
-  className: 'QuickSearchResultsItem',
-})`
-  padding: var(--space-2) var(--space-3);
-  cursor: pointer;
-  border-radius: 4px;
-  &:hover {
-    background-color: var(--color-neutral-100);
-  }
-`;
-
-export const QuickSearchResultsDetailsContainer = styled.div.attrs({
-  className: 'QuickSearchResultsDetailsContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-2);
-  flex: 1;
-`;
-
-export const QuickSearchResultsDetailsDivider = styled.hr`
-  margin: var(--space-2) 0;
-  height: 1px;
-  border: none;
-  background-color: var(--color-neutral-200);
-`;
-
-export const QuickSearchResultDetailsTitle = styled.div.attrs({
-  className: 'QuickSearchResultDetailsTitle',
-})`
-  margin: 0;
-`;
-
-export const QuickSearchResultsDetailsList = styled.dl.attrs({
-  className: 'QuickSearchResultsDetailsList',
-})`
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-gap: var(--space-2);
-`;
-
-export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
-  className: 'QuickSearchResultsDetailsTerm',
-})`
-  text-transform: uppercase;
-  font-size: var(--text-sm);
-  font-weight: bold;
-  color: var(--color-neutral-500);
-`;
+import styled from 'styled-components';
+
+export const QuickSearchDropdownContainer = styled.div.attrs({
+  className: 'QuickSearchDropdownContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const QuickSearchResultsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsContainer',
+})`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  flex: 1;
+  padding: var(--space-2) 0;
+  overflow: hidden;
+`;
+
+export const QuickSearchResultsListContainer = styled.div.attrs({
+  className: 'QuickSearchResultsListContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2);
+  border-right: 1px solid var(--color-neutral-200);
+  flex: 1;
+  overflow: auto;
+`;
+
+export const QuickSearchResultsTitle = styled.div.attrs({
+  className: 'QuickSearchResultsTitle',
+})`
+  margin: 0;
+  margin-bottom: var(--space-1);
+  &:not(:first-child) {
+    margin-top: var(--space-2);
+  }
+  font-weight: bold;
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  letter-spacing: 120%;
+  color: var(--color-neutral-500);
+`;
+
+export const QuickSearchResultsItem = styled.div.attrs({
+  className: 'QuickSearchResultsItem',
+})`
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  border-radius: 4px;
+  &:hover {
+    background-color: var(--color-neutral-100);
+  }
+`;
+
+export const QuickSearchResultsDetailsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsDetailsContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2);
+  flex: 1;
+`;
+
+export const QuickSearchResultsDetailsDivider = styled.hr`
+  margin: var(--space-2) 0;
+  height: 1px;
+  border: none;
+  background-color: var(--color-neutral-200);
+`;
+
+export const QuickSearchResultDetailsTitle = styled.div.attrs({
+  className: 'QuickSearchResultDetailsTitle',
+})`
+  margin: 0;
+`;
+
+export const QuickSearchResultsDetailsList = styled.dl.attrs({
+  className: 'QuickSearchResultsDetailsList',
+})`
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: var(--space-2);
+`;
+
+export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
+  className: 'QuickSearchResultsDetailsTerm',
+})`
+  text-transform: uppercase;
+  font-size: var(--text-sm);
+  font-weight: bold;
+  color: var(--color-neutral-500);
+`;

package/src/components/search/types.ts

@@ -1,26 +1,26 @@
-import { FC, ReactNode } from 'react';
-
-export type SearchTypeDefinition<T> = {
-  title: string;
-  quickRenderer: (result: T, term: string) => ReactNode;
-  titleRenderer: (result: T, term: string) => ReactNode;
-  detailsRenderer: (result: T, term: string) => ReactNode;
-  onClick?: (result: T) => void;
-};
-
-export type SearchTypeDefinitions<R> = {
-  [K in keyof R]: SearchTypeDefinition<R[K]>;
-};
-
-export type SearchResults<R> = {
-  [K in keyof R]: Array<R[K]>;
-};
-
-export type SearchDetailsFC<T> = FC<{
-  searchResult: T;
-}>;
-
-export type ResultArray<R> = {
-  result: R[keyof R];
-  type: keyof R;
-}[];
+import { FC, ReactNode } from 'react';
+
+export type SearchTypeDefinition<T> = {
+  title: string;
+  quickRenderer: (result: T, term: string) => ReactNode;
+  titleRenderer: (result: T, term: string) => ReactNode;
+  detailsRenderer: (result: T, term: string) => ReactNode;
+  onClick?: (result: T) => void;
+};
+
+export type SearchTypeDefinitions<R> = {
+  [K in keyof R]: SearchTypeDefinition<R[K]>;
+};
+
+export type SearchResults<R> = {
+  [K in keyof R]: Array<R[K]>;
+};
+
+export type SearchDetailsFC<T> = FC<{
+  searchResult: T;
+}>;
+
+export type ResultArray<R> = {
+  result: R[keyof R];
+  type: keyof R;
+}[];

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

@@ -1,54 +1,54 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { ThemeColorWithIntensity } from '../../../providers';
-import { sha256 } from 'hash.js';
-
-type AvatarProps = PropsWithChildren<
-  {
-    className?: string;
-    name?: string;
-    color?: ThemeColorWithIntensity;
-  } & styles.AvatarContainerProps
->;
-
-const getInitials = (name: string) => {
-  const matches = name.matchAll(/(?:^|\s+)([A-Z0-9])/g);
-  return Array.from(matches)
-    .slice(0, 2)
-    .map((m) => m[1])
-    .join('');
-};
-
-export const Avatar: FC<AvatarProps> = ({
-  children,
-  className,
-  color,
-  name,
-  size = 'md',
-}) => {
-  const initials = useMemo(() => getInitials(name || ''), [name]);
-  const backgroundColor = useMemo(() => {
-    if (color) return `var(--color-${color})`;
-    const h =
-      parseInt(
-        sha256()
-          .update(name || '')
-          .digest('hex')
-          .substring(0, 4),
-        16
-      ) % 360;
-    return `hsl(${h}, 50%, 50%)`;
-  }, [color, name]);
-
-  return (
-    <styles.AvatarContainer
-      size={size}
-      className={className}
-      style={{ backgroundColor }}
-    >
-      {initials || children}
-    </styles.AvatarContainer>
-  );
-};
+import * as styles from './styles';
+
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import { ThemeColorWithIntensity } from '../../../providers';
+import { sha256 } from 'hash.js';
+
+type AvatarProps = PropsWithChildren<
+  {
+    className?: string;
+    name?: string;
+    color?: ThemeColorWithIntensity;
+  } & styles.AvatarContainerProps
+>;
+
+const getInitials = (name: string) => {
+  const matches = name.matchAll(/(?:^|\s+)([A-Z0-9])/g);
+  return Array.from(matches)
+    .slice(0, 2)
+    .map((m) => m[1])
+    .join('');
+};
+
+export const Avatar: FC<AvatarProps> = ({
+  children,
+  className,
+  color,
+  name,
+  size = 'md',
+}) => {
+  const initials = useMemo(() => getInitials(name || ''), [name]);
+  const backgroundColor = useMemo(() => {
+    if (color) return `var(--color-${color})`;
+    const h =
+      parseInt(
+        sha256()
+          .update(name || '')
+          .digest('hex')
+          .substring(0, 4),
+        16
+      ) % 360;
+    return `hsl(${h}, 50%, 50%)`;
+  }, [color, name]);
+
+  return (
+    <styles.AvatarContainer
+      size={size}
+      className={className}
+      style={{ backgroundColor }}
+    >
+      {initials || children}
+    </styles.AvatarContainer>
+  );
+};

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/Card/index.tsx

@@ -1,14 +1,14 @@
-import { CardContainer, CardFooter, CardHeader } from './styles';
-import { FC, HTMLAttributes } from 'react';
-
-type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
-  Header: typeof CardHeader;
-  Footer: typeof CardFooter;
-};
-
-export const Card: CardFC = ({ children, ...props }) => {
-  return <CardContainer {...props}>{children}</CardContainer>;
-};
-
-Card.Header = CardHeader;
-Card.Footer = CardFooter;
+import { CardContainer, CardFooter, CardHeader } from './styles';
+import { FC, HTMLAttributes } from 'react';
+
+type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+  Header: typeof CardHeader;
+  Footer: typeof CardFooter;
+};
+
+export const Card: CardFC = ({ children, ...props }) => {
+  return <CardContainer {...props}>{children}</CardContainer>;
+};
+
+Card.Header = CardHeader;
+Card.Footer = CardFooter;

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

@@ -1,37 +1,37 @@
-import styled from 'styled-components';
-
-export const CardContainer = styled.div.attrs({
-  className: 'CardContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-neutral-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-4);
-  border: 1px solid var(--color-neutral-100);
-`;
-
-export const CardHeader = styled.div.attrs({
-  className: 'CardHeader',
-})`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-200);
-  margin-bottom: var(--space-2);
-  gap: var(--space-2);
-`;
-
-export const CardFooter = styled.div.attrs({
-  className: 'CardFooter',
-})`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-top: var(--space-2);
-  border-top: 1px solid var(--color-neutral-200);
-  margin-top: var(--space-2);
-  gap: var(--space-2);
-`;
+import styled from 'styled-components';
+
+export const CardContainer = styled.div.attrs({
+  className: 'CardContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-neutral-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-neutral-100);
+`;
+
+export const CardHeader = styled.div.attrs({
+  className: 'CardHeader',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-200);
+  margin-bottom: var(--space-2);
+  gap: var(--space-2);
+`;
+
+export const CardFooter = styled.div.attrs({
+  className: 'CardFooter',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-neutral-200);
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+`;