@takaro/lib-components 0.0.0-next.0da151e

package/src/components/data/Console/ConsoleInput/style.ts

@@ -0,0 +1,41 @@
+import { styled } from '../../../../styled';
+import { AiOutlineEnter as EnterIcon } from 'react-icons/ai';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  input {
+    position: relative;
+    width: 100%;
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    color: white;
+    font-size: 110%;
+    height: 40px;
+    font-weight: 500;
+    font-family: 'inconsolata';
+    border-radius: 0;
+    padding-right: ${({ theme }) => theme.spacing[6]};
+    ::placeholder {
+      color: white;
+    }
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  span {
+    font-family: 'inconsolata';
+    color: black;
+    font-weight: 500;
+    margin-left: ${({ theme }) => theme.spacing[1]};
+  }
+`;
+
+export const StyledEnterIcon = styled(EnterIcon)`
+  position: absolute;
+  right: 2rem;
+  cursor: pointer;
+`;

package/src/components/data/Console/ConsoleLine/index.tsx

@@ -0,0 +1,127 @@
+import { CSSProperties, FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AiFillWarning as WarningIcon,
+  AiFillCloseCircle as ErrorIcon,
+  AiFillBug as DebugIcon,
+  AiFillInfoCircle as InfoIcon,
+  AiFillMacCommand as CommandIcon,
+} from 'react-icons/ai';
+import { Tooltip } from '../../../../components';
+import { BsChevronExpand as EnterIcon } from 'react-icons/bs';
+import {
+  Wrapper,
+  Container,
+  Body,
+  Header,
+  IconContainer,
+  TimestampContainer,
+  TextContainer,
+  CollapsedContainer,
+  ExpandIconContainer,
+} from './style';
+import { Message, MessageType } from '../MessageModel';
+import { GUTTER_SIZE, LIST_PADDING_SIZE } from '../constants';
+
+const COLLAPSED_LENGTH = 125;
+
+interface ConsoleLineProps {
+  message: Message;
+  index: number;
+  collapsed: boolean;
+  style: CSSProperties;
+  setRowState: (i: number, height: number, collapsed: boolean) => void;
+}
+
+export const ConsoleLine: FC<ConsoleLineProps> = ({ message, collapsed, style, index, setRowState }) => {
+  const { data, type, timestamp } = message;
+
+  const canCollapse = useMemo(() => {
+    if (!message.data) return false;
+    if (message.type === 'command') return true;
+
+    // TODO: should calculate the max chars per line based on the font constant, font size and textcontent container
+    return message.data.length > COLLAPSED_LENGTH;
+  }, [index]);
+
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      setRowState(index, containerRef.current.clientHeight, isCollapsed);
+    }
+  }, [rowRef, isCollapsed]);
+
+  function defineCollapsableMessageLayout(): ReactElement {
+    let header = '';
+    let body = '';
+
+    if (type === 'command') {
+      if (message.result == undefined) {
+        throw new Error('Command messages should have a return type');
+      }
+      header = data;
+      body = message.result;
+    } else {
+      // TODO: maybe the header should contain the max on line with ...
+      // and the body the entire message?
+      header = data.split('\n')[0];
+      body = data.split('\n').slice(1).join('\n');
+    }
+
+    return (
+      <CollapsedContainer>
+        <Header isCollapsed={isCollapsed} type={type}>
+          <p>{header}</p>
+          {body && (
+            <Tooltip>
+              <Tooltip.Trigger asChild>
+                <ExpandIconContainer>
+                  <EnterIcon onClick={() => setIsCollapsed(!isCollapsed)} size={14} />
+                </ExpandIconContainer>
+              </Tooltip.Trigger>
+              <Tooltip.Content>{isCollapsed ? 'show body' : 'collapse body'}</Tooltip.Content>
+            </Tooltip>
+          )}
+        </Header>
+        <Body isCollapsed={isCollapsed} type={type}>
+          {body}
+        </Body>
+      </CollapsedContainer>
+    );
+  }
+
+  const setIcon = (messageType: MessageType): ReactElement => {
+    switch (messageType) {
+      case 'info':
+        return <InfoIcon size={14} />;
+      case 'warning':
+        return <WarningIcon size={14} />;
+      case 'debug':
+        return <DebugIcon size={14} />;
+      case 'error':
+        return <ErrorIcon size={14} />;
+      case 'command':
+        return <CommandIcon size={14} />;
+    }
+  };
+
+  return (
+    <Wrapper
+      messageType={type}
+      style={{
+        ...style,
+        top: `${(style.top as number) + GUTTER_SIZE + LIST_PADDING_SIZE}px`,
+        height: `${(style.height as number) - GUTTER_SIZE}px`,
+      }}
+      ref={rowRef}
+    >
+      <Container isCollapsed={isCollapsed} ref={containerRef}>
+        <IconContainer messageType={type}>{setIcon(type)}</IconContainer>
+        <TimestampContainer>[{timestamp}]</TimestampContainer>
+        {canCollapse ? defineCollapsableMessageLayout() : <TextContainer>{data}</TextContainer>}
+      </Container>
+    </Wrapper>
+  );
+};

package/src/components/data/Console/ConsoleLine/style.ts

@@ -0,0 +1,76 @@
+import { styled } from '../../../../styled';
+import { MessageType } from '../MessageModel';
+
+export const Wrapper = styled.div<{
+  messageType: MessageType;
+}>`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  font-family: 'inconsolata';
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const Container = styled.div<{ isCollapsed: boolean }>`
+  max-width: 100%;
+  width: 100%;
+  height: fit-content;
+  display: grid;
+  align-content: start;
+  grid-template-columns: 4rem 18rem 1fr;
+  margin: ${({ theme }) => theme.spacing[0]};
+`;
+
+export const IconContainer = styled.div<{ messageType: MessageType }>`
+  padding-left: ${({ theme }) => theme.spacing['0_75']};
+  display: flex;
+  align-items: center;
+  svg {
+    fill: ${({ theme, messageType }) => {
+      if (messageType === 'debug') return theme.colors.error;
+      if (messageType === 'command') return theme.colors.primary;
+      return theme.colors[messageType];
+    }};
+  }
+`;
+
+export const TimestampContainer = styled.div`
+  font-family: 'inconsolata';
+`;
+
+export const TextContainer = styled.div`
+  font-family: 'inconsolata';
+  font-size: ${({ theme }) => theme.fontSize.medium};
+  color: ${({ theme }) => theme.colors.text};
+`;
+
+export const CollapsedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Header = styled.div<{ isCollapsed: boolean; type: MessageType }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    font-family: 'inconsolata';
+  }
+`;
+
+export const Body = styled.pre<{ isCollapsed: boolean; type: MessageType }>`
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : 'block')};
+  font-family: 'inconsolata';
+  margin: 0;
+`;
+
+export const ExpandIconContainer = styled.span`
+  position: absolute;
+  cursor: pointer;
+  right: ${({ theme }) => theme.spacing['2']};
+`;

package/src/components/data/Console/MessageModel.ts

@@ -0,0 +1,9 @@
+export type MessageType = 'info' | 'warning' | 'error' | 'debug' | 'command';
+
+export interface Message {
+  type: MessageType;
+  timestamp: string;
+  data: string;
+  // in case it is a command
+  result?: string;
+}

package/src/components/data/Console/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_LINE_HEIGHT = 25;
+export const GUTTER_SIZE = 10;
+/*  TODO: this does not work with the scrollitemto because it has no knowledge of the padding.
+ *  https://gist.github.com/ValentinJS/4f3738ed426cac183e8446c869b162dd might be an option.
+ */
+export const LIST_PADDING_SIZE = 0;

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

@@ -0,0 +1,4 @@
+export { Console } from './Console';
+export type { ConsoleProps } from './Console';
+
+export type { Message } from './MessageModel';

package/src/components/data/Console/style.ts

@@ -0,0 +1,31 @@
+import { styled } from '../../../styled';
+
+export const Wrapper = styled.div`
+  height: 100%;
+  font-weight: 500;
+  border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-right: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  position: relative;
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.large};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const Header = styled.div`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  height: 50px;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing[1]};
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 ${({ theme }) => theme.spacing[1]};
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+`;
+
+export const MessageContainer = styled.div`
+  min-height: 550px;
+  height: calc(100% - 50px);
+  border-radius: 0;
+`;

package/src/components/data/Console/useConsoleLiveMode.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Message } from './MessageModel';
+
+export function useConsoleLiveModeScrolling(messages: Message[]) {
+  const [isLiveModeEnabled, setIsLiveModeEnabled] = useState<boolean>(true);
+  const [scrollOffset, setScrollOffset] = useState<number>(0);
+
+  // unfortunately the react-window libraries does not have up to date types
+  const consoleMessagesBoxRef = useRef<null | any>(null);
+
+  // scrolls to the latest message
+  const scrollNewMessages = useCallback(() => {
+    consoleMessagesBoxRef.current?.scrollToItem(messages.length, 'end');
+  }, [messages]);
+
+  const toggleLiveModeOnConsoleScroll = useCallback(() => {
+    if (consoleMessagesBoxRef.current) {
+      // in case we are scrolling down, don't do anything.
+      if (consoleMessagesBoxRef.current.state.scrollDirection === 'forward') {
+        return;
+      }
+
+      if (consoleMessagesBoxRef.current.state.scrollOffset < scrollOffset) {
+        setIsLiveModeEnabled(false);
+      }
+      setScrollOffset(consoleMessagesBoxRef.current.state.scrollOffset);
+    }
+  }, [scrollOffset]);
+
+  useEffect(() => {
+    if (isLiveModeEnabled) {
+      scrollNewMessages();
+    }
+  }, [messages, isLiveModeEnabled, scrollNewMessages]);
+
+  return {
+    consoleMessagesBoxRef,
+    isLiveModeEnabled,
+    setIsLiveModeEnabled,
+    toggleLiveModeOnConsoleScroll,
+  };
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { CopyId, CopyIdProps } from '../../../components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+  text-align: left;
+
+  & > div {
+    margin: 1rem;
+  }
+`;
+
+export default {
+  title: 'Data/CopyId',
+  component: CopyId,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    id: '3141592653589793238462643383279',
+  },
+} as Meta<CopyIdProps>;
+
+export const Default: StoryFn<CopyIdProps> = (args) => <CopyId {...args} />;
+
+export const CustomPlaceholder: StoryObj<CopyIdProps> = {
+  args: {
+    placeholder: 'custom placeholder',
+    id: '3141592653589793238462643383279',
+  },
+};

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

@@ -0,0 +1,107 @@
+import { FC, useEffect, useState } from 'react';
+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',
+  externalLink,
+  externalLinkTooltip = 'Open external link',
+}) => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  function handleCopy(text: string) {
+    setCopied(true);
+    navigator.clipboard.writeText(text);
+  }
+
+  useEffect(() => {
+    /* If it was copied, show a checkmark for 2.5s thn make it possible to copy again */
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 2500);
+    }
+  }, [copied]);
+
+  if (!id) return <></>;
+
+  if (externalLink) {
+    return (
+      <Container>
+        <Chip
+          icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
+          onClick={() => handleCopy(id)}
+          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 />}
+      onClick={() => handleCopy(id)}
+      label={copied ? copyText : placeholder ? placeholder : id}
+      color="backgroundAccent"
+    />
+  );
+};

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

@@ -0,0 +1,146 @@
+import { styled } from '../../../styled';
+import { Flag } from '../../visual/Flag';
+import { alpha2ToAlpha3 } from '../../charts/GeoMercator/iso3166-alpha2-to-alpha3';
+
+const alpha3ToAlpha2: Record<string, string> = Object.entries(alpha2ToAlpha3).reduce(
+  (acc, [alpha2, alpha3]) => {
+    acc[alpha3] = alpha2;
+    return acc;
+  },
+  {} as Record<string, string>,
+);
+
+const Container = styled.div`
+  width: 320px;
+  min-width: 320px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  padding: ${({ theme }) => theme.spacing['3']};
+`;
+
+const Title = styled.h3`
+  margin: 0 0 ${({ theme }) => theme.spacing['2']} 0;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.textAlt};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const CountryGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${({ theme }) => theme.spacing['2']};
+`;
+
+const CountryTable = styled.div`
+  display: table;
+  width: 100%;
+  font-size: ${({ theme }) => theme.fontSize.small};
+  border-collapse: collapse;
+`;
+
+const CountryRow = styled.div`
+  display: table-row;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+  }
+
+  &:last-child > div {
+    border-bottom: none;
+  }
+`;
+
+const CountryCell = styled.div`
+  display: table-cell;
+  padding: 2px 0;
+  vertical-align: middle;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  color: ${({ theme }) => theme.colors.text};
+  line-height: 1.3;
+`;
+
+const FlagCell = styled(CountryCell)`
+  width: 20px;
+  text-align: center;
+  padding-right: 4px;
+`;
+
+const CountryCodeCell = styled(CountryCell)`
+  padding-right: 4px;
+  font-weight: 500;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+`;
+
+const CountCell = styled(CountryCell)`
+  text-align: right;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+  width: 20px;
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+`;
+
+export interface CountryListProps<T> {
+  /** Array of data items containing country information */
+  data: T[];
+  /** Function to extract country code from data item (supports both alpha-2 and alpha-3 codes) */
+  xAccessor: (d: T) => string;
+  /** Function to extract numeric value from data item */
+  yAccessor: (d: T) => number;
+  /** Optional title for the list. Defaults to "Countries ({count})" */
+  title?: string;
+}
+
+/**
+ * CountryList displays a sorted list of countries with flags and numeric values in a two-column layout.
+ *
+ * Features:
+ * - Automatically sorts data by numeric value (descending)
+ * - Displays country flags when available
+ * - Supports both alpha-2 (US) and alpha-3 (USA) country codes
+ * - Two-column grid layout for compact display
+ * - Hover effects on rows
+ */
+export const CountryList = <T,>({ data, xAccessor, yAccessor, title }: CountryListProps<T>) => {
+  const sortedData = [...data].sort((a, b) => yAccessor(b) - yAccessor(a));
+
+  // Split data into two columns
+  const midPoint = Math.ceil(sortedData.length / 2);
+  const leftColumnData = sortedData.slice(0, midPoint);
+  const rightColumnData = sortedData.slice(midPoint);
+
+  const renderCountryTable = (columnData: T[]) => (
+    <CountryTable>
+      {columnData.map((item, index) => {
+        const countryCode = xAccessor(item);
+        const count = yAccessor(item);
+        const alpha2Code = countryCode.length === 3 ? alpha3ToAlpha2[countryCode] : countryCode;
+        // Prefer 2-letter country codes for display if available
+        const displayCode = alpha2Code || countryCode;
+
+        return (
+          <CountryRow key={`${countryCode}-${index}`}>
+            <FlagCell>{alpha2Code && <Flag countryCode={alpha2Code} size={1} />}</FlagCell>
+            <CountryCodeCell>{displayCode}</CountryCodeCell>
+            <CountCell>{count}</CountCell>
+          </CountryRow>
+        );
+      })}
+    </CountryTable>
+  );
+
+  return (
+    <Container>
+      <Title>{title || `Countries (${sortedData.length})`}</Title>
+      <CountryGrid>
+        {renderCountryTable(leftColumnData)}
+        {renderCountryTable(rightColumnData)}
+      </CountryGrid>
+    </Container>
+  );
+};

package/src/components/data/DateFormatter/DateFormatter.stories.tsx

@@ -0,0 +1,26 @@
+// TODO: save images locally so when there is no network they are still loaded.
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { DateFormatter, DateFormatterProps } from '.';
+import { DateTime } from 'luxon';
+
+export default {
+  title: 'Data/DateFormatter',
+  component: DateFormatter,
+  args: {
+    ISODate: DateTime.now().toISO(),
+    format: DateTime.DATE_FULL,
+  },
+} as Meta<DateFormatterProps>;
+
+export const Default: StoryFn<DateFormatterProps> = (args) => (
+  <div>
+    provides a wrapper component for formatting dates to the standard format used throughout takaro.
+    <br />
+    The current date is formatted to format <strong>DATE_FULL</strong>
+    <br />
+    <strong>
+      <DateFormatter ISODate={args.ISODate} format={args.format} />
+    </strong>
+  </div>
+);

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

@@ -0,0 +1,15 @@
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+import { FC } from 'react';
+
+export interface DateFormatterProps {
+  ISODate: string;
+  format?: DateTimeFormatOptions;
+}
+
+export const DateFormatter: FC<DateFormatterProps> = ({ ISODate, format }) => {
+  return format ? (
+    <>{DateTime.fromISO(ISODate).toLocaleString(format)}</>
+  ) : (
+    <>{DateTime.fromISO(ISODate).toLocaleString(DateTime.DATETIME_SHORT)}</>
+  );
+};