@takaro/lib-components 0.0.14 → 0.0.18

package/src/components/visual/Card/CardTitle.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: ${({ theme }) => theme.spacing[1]};
+`;
+
+interface CardTitleProps {
+  label: string;
+}
+
+export const CardTitle: FC<PropsWithChildren<CardTitleProps>> = (props) => {
+  return (
+    <Container>
+      <h2>{props.label}</h2>
+      <div>{props.children}</div>
+    </Container>
+  );
+};

package/src/components/visual/Card/index.tsx

@@ -1,5 +1,7 @@
-import { forwardRef, HTMLProps } from 'react';
+import { forwardRef, HTMLProps, PropsWithChildren } from 'react';
 import { styled } from '../../../styled';
+import { CardTitle } from './CardTitle';
+import { CardBody } from './CardBody';
 
 type Variant = 'default' | 'outline';
 
@@ -8,8 +10,8 @@ const Container = styled.div<{ canClick: boolean; variant: Variant }>`
   background-color: ${({ theme, variant }) =>
     variant === 'outline' ? theme.colors.background : theme.colors.backgroundAlt};
   border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
-  padding: ${({ theme }) => theme.spacing[2]};
   cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
+  height: fit-content;
 
   &:focus-within {
     border-color: none;
@@ -31,22 +33,30 @@ export interface CardProps extends HTMLProps<HTMLDivElement> {
   variant?: Variant;
 }
 
-// Forward ref and spread all props to the Container
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+interface SubComponentTypes {
+  Title: typeof CardTitle;
+  Body: typeof CardBody;
+}
+
+const _Card = forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(
   { children, variant = 'default', ...props },
   ref,
 ) {
   const canClick = 'onClick' in props;
-
-  // Extract the className prop, if present
   const { className, ...restProps } = props;
 
   return (
-    // TODO: type this properly
-    //eslint-disable-next-line
-    //@ts-ignore
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     <Container ref={ref} canClick={canClick} variant={variant} className={className} {...restProps}>
       {children}
     </Container>
   );
 });
+
+// TODO: type it correctly instead
+type CardType = typeof _Card & SubComponentTypes;
+export const Card = _Card as CardType;
+
+Card.Title = CardTitle;
+Card.Body = CardBody;

package/src/components/visual/Divider/Divider.test.tsx

@@ -1,5 +1,6 @@
 import { Divider } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <Accordion />', () => {
   const { container } = render(<Divider />);

package/src/components/visual/Divider/__snapshots__/Divider.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Accordion /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg ktErGV"
+  >
+    <div
+      class="sc-eqUAAy hsBlKB"
+    />
+  </div>
+</div>
+`;

package/src/components/visual/Divider/index.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Size, styled } from '../../../styled';
+import { Color, Size, styled } from '../../../styled';
 
 const Container = styled.div<{ size: Size; fullWidth: boolean }>`
   position: relative;
@@ -18,21 +18,23 @@ const Container = styled.div<{ size: Size; fullWidth: boolean }>`
       case 'large':
         return `margin: ${theme.spacing['2_5']} auto ${theme.spacing['2_5']} auto`;
       case 'huge':
-        return `margin: ${theme.spacing[8]} auto ${theme.spacing[8]} auto`;
+        return `margin: ${theme.spacing[6]} auto ${theme.spacing[6]} auto`;
     }
   }}
 `;
 
 const Label = styled.label<{
   position: 'left' | 'center' | 'right';
+  color: Color | 'text' | 'textAlt';
 }>`
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%) translateX(-50%);
   p {
-    color: ${({ theme }) => theme.colors.textAlt};
-    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme, color }) => theme.colors[color]};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
     font-size: 1.325rem;
+    font-weight: 500;
     padding: ${({ theme }) => `0 ${theme.spacing['0_5']}`};
   }
 
@@ -62,6 +64,7 @@ const Line = styled.div`
 type LabelProps = {
   text: string;
   labelPosition: 'left' | 'center' | 'right';
+  color?: Color | 'text' | 'textAlt';
 };
 
 export interface DividerProps {
@@ -76,7 +79,7 @@ export const Divider: FC<DividerProps> = ({ label, size = 'medium', fullWidth =
     <Container fullWidth={fullWidth} size={size}>
       <Line />
       {label && (
-        <Label position={label.labelPosition}>
+        <Label position={label.labelPosition} color={label.color ? label.color : 'textAlt'}>
           <p>{label.text}</p>
         </Label>
       )}

package/src/errors/errors.ts

@@ -40,7 +40,7 @@ export function getErrorUserMessage(
   if (err instanceof UniqueConstraintError) {
     if (err.message === 'Unique constraint violation') {
       const messageType = err.constructor.name as keyof ErrorMessageMapping;
-      return errorMessages[messageType] || defaultMesssage;
+      return errorMessages[messageType] || err.message;
     } else {
       return err.message;
     }

package/src/helpers/regexprs.ts

@@ -2,7 +2,8 @@ export const REGEXPR_STEAM_API_KEY = /\w{32}/;
 export const IPV4_REGEX = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
 export const IPV4_AND_PORT_REGEX =
   /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):([0-9]{1,5})\b/;
-export const FQDN_REGEX = /(?=^.{4,253}$)(^((?!-)[a-zA-Z0-9-]{1,63}(?<!-)\.)+[a-zA-Z]{2,63}$)/;
+export const FQDN_AND_PORT_REGEX =
+  /^(?=.{4,253}(?::\d{1,5})?$)((?!-)[a-zA-Z0-9-]{1,63}(?<!-)\.)+[a-zA-Z]{2,63}(?::\d{1,5})?$/;
 
 export const IPV6_REGEX =
   /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

package/tsconfig.json

@@ -10,10 +10,5 @@
     "rootDir": "./src",
     "outDir": "dist",
     "baseUrl": "src",
-    "paths": {
-      "test-utils": [
-        "test/testUtils.tsx"
-      ]
-    }
   }
 }

package/vite.config.mts

@@ -0,0 +1,17 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import checker from 'vite-plugin-checker';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+  css: {
+    transformer: 'lightningcss',
+  },
+  plugins: [react(), checker({ typescript: true }), tsconfigPaths()],
+  envDir: '../../',
+});

package/src/components/data/LinkCard/index.tsx

@@ -1,28 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { styled } from '../../../styled';
-import { AiOutlineLink as LinkIcon } from 'react-icons/ai';
-import { FiExternalLink as ExternalLinkIcon } from 'react-icons/fi';
-
-const Container = styled.li`
-  border-radius: ${({ theme }) => theme.borderRadius.medium};
-  border: 1px solid ${({ theme }) => theme.colors.secondary};
-  padding: ${({ theme }) => theme.spacing['1']};
-`;
-
-export interface LinkCardProps {
-  icon?: ReactElement;
-  label: string;
-  href: string;
-}
-
-export const LinkCard: FC<LinkCardProps> = ({ label, href, icon }) => {
-  return (
-    <Container>
-      {icon || <LinkIcon />}
-      <span>{label}</span>
-      <a href={href}>
-        <ExternalLinkIcon />
-      </a>
-    </Container>
-  );
-};

package/src/components/feedback/QuestionTooltip/QuestionTooltip.stories.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { QuestionTooltip } from '.';
-
-export default {
-  title: 'Feedback/QuestionTooltip',
-  component: QuestionTooltip,
-  args: {
-    placement: 'bottom',
-    label: 'this is the tooltip content',
-  },
-} as Meta;
-
-export const Default: StoryFn = () => {
-  return (
-    <div>
-      <QuestionTooltip>this is the tooltip content</QuestionTooltip>
-    </div>
-  );
-};

package/src/components/feedback/QuestionTooltip/index.tsx

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { Tooltip, TooltipProps } from '../Tooltip';
-import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
-import { styled } from '../../../styled';
-
-const TriggerContainer = styled.div`
-  background-color: ${({ theme }) => theme.colors.backgroundAlt};
-  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  border-radius: ${({ theme }) => theme.borderRadius.medium};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${({ theme }) => theme.spacing['0_5']};
-  margin-right: ${({ theme }) => theme.spacing['0_5']};
-`;
-
-const ContentContainer = styled.div`
-  max-width: 450px;
-  hyphens: auto;
-`;
-
-export const QuestionTooltip: FC<TooltipProps> = ({ children }) => {
-  return (
-    <Tooltip>
-      <Tooltip.Trigger asChild>
-        <TriggerContainer>
-          <QuestionIcon size="18" />
-        </TriggerContainer>
-      </Tooltip.Trigger>
-      <Tooltip.Content>
-        <ContentContainer>{children}</ContentContainer>
-      </Tooltip.Content>
-    </Tooltip>
-  );
-};