@addev-be/ui 1.0.0 → 1.0.2

package/src/components/search/QuickSearchResults.tsx

@@ -1,86 +1,86 @@
-import * as styles from './styles';
-
-import { ReactNode, useMemo, useState } from 'react';
-import { ResultArray, SearchResults, SearchTypeDefinitions } from './types';
-
-import { pickBy } from 'lodash';
-
-type QuickSearchResultsProps<R> = {
-  definitions: SearchTypeDefinitions<R>;
-  results: SearchResults<R>;
-  term: string;
-};
-
-export const QuickSearchResults = <R,>(props: QuickSearchResultsProps<R>) => {
-  const { definitions, results: allResults, term } = props;
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-
-  const notEmptyResults = pickBy<R[keyof R][]>(
-    allResults,
-    (results) => results.length > 0
-  );
-  const resultsArray = useMemo(
-    () =>
-      Object.keys(notEmptyResults).reduce(
-        (acc, type) => [
-          ...acc,
-          ...notEmptyResults[type].map((result) => ({
-            result,
-            type: type as keyof R,
-          })),
-        ],
-        [] as ResultArray<R>
-      ),
-    [notEmptyResults]
-  );
-
-  const elements = useMemo(() => {
-    const elements: ReactNode[] = [];
-    let currentType: keyof R | null = null;
-    resultsArray.forEach(({ result, type }, index) => {
-      const definition = definitions[type];
-      if (currentType !== type) {
-        currentType = type;
-        elements.push(
-          <styles.QuickSearchResultsTitle key={`title-${String(type)}`}>
-            {definition.title}
-          </styles.QuickSearchResultsTitle>
-        );
-      }
-      elements.push(
-        <styles.QuickSearchResultsItem
-          key={`result-${index}`}
-          onClick={() => definition.onClick?.(result)}
-          onMouseEnter={() => setHighlightedIndex(index)}
-          className={highlightedIndex === index ? 'highlighted' : ''}
-        >
-          {definition.quickRenderer(result, term)}
-        </styles.QuickSearchResultsItem>
-      );
-    });
-    return elements;
-  }, [definitions, highlightedIndex, resultsArray, term]);
-
-  const highlightedResult = resultsArray[highlightedIndex];
-  const highlightedDefinition = highlightedResult
-    ? definitions[highlightedResult?.type]
-    : null;
-
-  return (
-    <styles.QuickSearchResultsContainer>
-      <styles.QuickSearchResultsListContainer>
-        {elements}
-      </styles.QuickSearchResultsListContainer>
-      {highlightedDefinition && (
-        <styles.QuickSearchResultsDetailsContainer>
-          {highlightedDefinition.titleRenderer(highlightedResult.result, term)}
-          <styles.QuickSearchResultsDetailsDivider />
-          {highlightedDefinition.detailsRenderer(
-            highlightedResult.result,
-            term
-          )}
-        </styles.QuickSearchResultsDetailsContainer>
-      )}
-    </styles.QuickSearchResultsContainer>
-  );
-};
+import * as styles from './styles';
+
+import { ReactNode, useMemo, useState } from 'react';
+import { ResultArray, SearchResults, SearchTypeDefinitions } from './types';
+
+import { pickBy } from 'lodash';
+
+type QuickSearchResultsProps<R> = {
+  definitions: SearchTypeDefinitions<R>;
+  results: SearchResults<R>;
+  term: string;
+};
+
+export const QuickSearchResults = <R,>(props: QuickSearchResultsProps<R>) => {
+  const { definitions, results: allResults, term } = props;
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const notEmptyResults = pickBy<R[keyof R][]>(
+    allResults,
+    (results) => results.length > 0
+  );
+  const resultsArray = useMemo(
+    () =>
+      Object.keys(notEmptyResults).reduce(
+        (acc, type) => [
+          ...acc,
+          ...notEmptyResults[type].map((result) => ({
+            result,
+            type: type as keyof R,
+          })),
+        ],
+        [] as ResultArray<R>
+      ),
+    [notEmptyResults]
+  );
+
+  const elements = useMemo(() => {
+    const elements: ReactNode[] = [];
+    let currentType: keyof R | null = null;
+    resultsArray.forEach(({ result, type }, index) => {
+      const definition = definitions[type];
+      if (currentType !== type) {
+        currentType = type;
+        elements.push(
+          <styles.QuickSearchResultsTitle key={`title-${String(type)}`}>
+            {definition.title}
+          </styles.QuickSearchResultsTitle>
+        );
+      }
+      elements.push(
+        <styles.QuickSearchResultsItem
+          key={`result-${index}`}
+          onClick={() => definition.onClick?.(result)}
+          onMouseEnter={() => setHighlightedIndex(index)}
+          className={highlightedIndex === index ? 'highlighted' : ''}
+        >
+          {definition.quickRenderer(result, term)}
+        </styles.QuickSearchResultsItem>
+      );
+    });
+    return elements;
+  }, [definitions, highlightedIndex, resultsArray, term]);
+
+  const highlightedResult = resultsArray[highlightedIndex];
+  const highlightedDefinition = highlightedResult
+    ? definitions[highlightedResult?.type]
+    : null;
+
+  return (
+    <styles.QuickSearchResultsContainer>
+      <styles.QuickSearchResultsListContainer>
+        {elements}
+      </styles.QuickSearchResultsListContainer>
+      {highlightedDefinition && (
+        <styles.QuickSearchResultsDetailsContainer>
+          {highlightedDefinition.titleRenderer(highlightedResult.result, term)}
+          <styles.QuickSearchResultsDetailsDivider />
+          {highlightedDefinition.detailsRenderer(
+            highlightedResult.result,
+            term
+          )}
+        </styles.QuickSearchResultsDetailsContainer>
+      )}
+    </styles.QuickSearchResultsContainer>
+  );
+};

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-base-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: 0.1em;
-  color: var(--color-text-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-base-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-base-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-text-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-base-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: 0.1em;
+  color: var(--color-text-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-base-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-base-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-text-500);
+`;

package/src/components/search/types.ts

@@ -1,29 +1,29 @@
-import { FC, ReactNode } from 'react';
-import { ConditionDTO, OrderByDTO } from '../../services';
-
-export type SearchTypeDefinition<T> = {
-  title: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  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';
+import { ConditionDTO, OrderByDTO } from '../../services';
+
+export type SearchTypeDefinition<T> = {
+  title: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  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/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-base-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-4);
-  border: 1px solid var(--color-base-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-base-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-base-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-base-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-base-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-base-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-base-200);
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+`;