@takaro/lib-components 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",

package/src/components/actions/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Should render <Button/> 1`] = `
 <div>
   <button
-    class="sc-cKXybt hgqaEX"
+    class="sc-djTQaJ ikqgQo"
     color="primary"
     tabindex="0"
     type="button"

package/src/components/actions/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Should render <IconButton /> 1`] = `
 <div>
   <button
     aria-label="test"
-    class="sc-cgjDci duTlkQ"
+    class="sc-dBFDNq dwHZij"
     color="primary"
     type="button"
   >

package/src/components/charts/GeoMercator/index.tsx

@@ -13,19 +13,7 @@ import { useCallback } from 'react';
 import { localPoint } from '@visx/event';
 import { ZoomControls } from '../ZoomControls';
 import { alpha2ToAlpha3 } from './iso3166-alpha2-to-alpha3';
-
-const getCountryFlag = (countryCode: string): string => {
-  if (!countryCode || countryCode.length !== 2) {
-    return '';
-  }
-
-  const codePoints = countryCode
-    .toUpperCase()
-    .split('')
-    .map((char) => 127397 + char.charCodeAt(0));
-
-  return String.fromCodePoint(...codePoints);
-};
+import { Flag } from '../../visual/Flag';
 
 const alpha3ToAlpha2: Record<string, string> = Object.entries(alpha2ToAlpha3).reduce(
   (acc, [alpha2, alpha3]) => {
@@ -92,9 +80,8 @@ const CountryCell = styled.div`
 `;
 
 const FlagCell = styled(CountryCell)`
-  width: 16px;
+  width: 20px;
   text-align: center;
-  font-size: 10px;
   padding-right: 4px;
 `;
 
@@ -151,13 +138,12 @@ const CountrySidebar = <T,>({ data, xAccessor, yAccessor }: CountrySidebarProps<
         const countryCode = xAccessor(item);
         const playerCount = yAccessor(item);
         const alpha2Code = countryCode.length === 3 ? alpha3ToAlpha2[countryCode] : countryCode;
-        const flag = getCountryFlag(alpha2Code);
         // Prefer 2-letter country codes for display if available
         const displayCode = alpha2Code || countryCode;
 
         return (
           <CountryRow key={`${countryCode}-${index}`}>
-            <FlagCell>{flag}</FlagCell>
+            <FlagCell>{alpha2Code && <Flag countryCode={alpha2Code} size={1} />}</FlagCell>
             <CountryCell2>{displayCode}</CountryCell2>
             <CountCell>{playerCount}</CountCell>
           </CountryRow>

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

@@ -1,14 +1,56 @@
 import { FC, useEffect, useState } from 'react';
-import { Chip } from '../../../components';
-import { AiFillCopy as CopyIcon, AiOutlineCheck as CheckmarkIcon } from 'react-icons/ai';
+import { Chip, Tooltip } from '../../../components';
+import { AiFillCopy as CopyIcon, AiOutlineCheck as CheckmarkIcon, AiOutlineLink as LinkIcon } from 'react-icons/ai';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+const LinkButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing['0_5']};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primary};
+    border-color: ${({ theme }) => theme.colors.primary};
+
+    svg {
+      color: ${({ theme }) => theme.colors.white};
+    }
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
 
 export interface CopyIdProps {
   id?: string;
   placeholder?: string;
   copyText?: string;
+  externalLink?: string;
+  externalLinkTooltip?: string;
 }
 
-export const CopyId: FC<CopyIdProps> = ({ id, placeholder, copyText = 'copied' }) => {
+export const CopyId: FC<CopyIdProps> = ({
+  id,
+  placeholder,
+  copyText = 'copied',
+  externalLink,
+  externalLinkTooltip = 'Open external link',
+}) => {
   const [copied, setCopied] = useState<boolean>(false);
 
   function handleCopy(text: string) {
@@ -27,6 +69,34 @@ export const CopyId: FC<CopyIdProps> = ({ id, placeholder, copyText = 'copied' }
 
   if (!id) return <></>;
 
+  if (externalLink) {
+    return (
+      <Container>
+        <Chip
+          icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
+          onClick={() => handleCopy(id)}
+          variant="outline"
+          label={copied ? copyText : placeholder ? placeholder : id}
+          color="backgroundAccent"
+        />
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <LinkButton
+              onClick={(e) => {
+                e.stopPropagation();
+                window.open(externalLink, '_blank', 'noopener,noreferrer');
+              }}
+              aria-label={externalLinkTooltip}
+            >
+              <LinkIcon />
+            </LinkButton>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{externalLinkTooltip}</Tooltip.Content>
+        </Tooltip>
+      </Container>
+    );
+  }
+
   return (
     <Chip
       icon={copied ? <CheckmarkIcon /> : <CopyIcon />}

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

@@ -0,0 +1,61 @@
+import { styled } from '../../../styled';
+import { FC, ImgHTMLAttributes, useState } from 'react';
+
+const FlagImg = styled.img`
+  width: 1rem;
+  height: 1rem;
+  object-fit: cover;
+  border-radius: 2px;
+`;
+
+const FallbackContainer = styled.div<{ size: number }>`
+  width: ${({ size }) => `${size}rem`};
+  height: ${({ size }) => `${size}rem`};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: 2px;
+  font-size: ${({ size }) => `${size * 0.5}rem`};
+  color: ${({ theme }) => theme.colors.textAlt};
+  font-weight: 600;
+`;
+
+export interface FlagProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+  /** 2-letter ISO country code (e.g., 'US', 'FR', 'JP') */
+  countryCode: string;
+  /** Optional country name for better accessibility */
+  countryName?: string;
+  /** Size of the flag in rem units */
+  size?: number;
+}
+
+export const Flag: FC<FlagProps> = ({ countryCode, countryName, size = 1, style, ...props }) => {
+  const [imageError, setImageError] = useState(false);
+
+  if (!countryCode || countryCode.length !== 2) {
+    return null;
+  }
+
+  const uppercaseCode = countryCode.toUpperCase();
+  const flagUrl = `https://purecatamphetamine.github.io/country-flag-icons/3x2/${uppercaseCode}.svg`;
+  const altText = countryName ? `Flag of ${countryName}` : `Flag of ${uppercaseCode}`;
+
+  if (imageError) {
+    return <FallbackContainer size={size}>{uppercaseCode}</FallbackContainer>;
+  }
+
+  return (
+    <FlagImg
+      src={flagUrl}
+      alt={altText}
+      onError={() => setImageError(true)}
+      style={{
+        width: `${size}rem`,
+        height: `${size}rem`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+};

package/src/components/visual/index.ts

@@ -3,3 +3,6 @@ export type { CardProps } from './Card';
 
 export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
+
+export { Flag } from './Flag';
+export type { FlagProps } from './Flag';