@takaro/lib-components 0.0.15 → 0.0.18

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>
-  );
-};