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

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

@@ -0,0 +1,124 @@
+import { AvatarVariant } from '.';
+import { styled, Size } from '../../../styled';
+
+export const GroupContainer = styled.div<{ size: Size; unStackOnHover: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    div {
+      ${({ unStackOnHover }) => (unStackOnHover ? 'margin-left: 0;' : '')}
+    }
+  }
+
+  div {
+    transition: margin-left 0.2s ease-in-out;
+    /* mind the negative sign here */
+    margin-left: -${({ theme }) => theme.spacing['5']};
+
+    :first-child {
+      margin-left: ${({ theme }) => theme.spacing[0]};
+    }
+
+    ${({ size, theme }) => {
+      switch (size) {
+        case 'tiny':
+          return `margin-left: -${theme.spacing['0_25']};`;
+        case 'small':
+          return `margin-left: -${theme.spacing['1']};`;
+        case 'medium':
+          return `margin-left: -${theme.spacing['3']};`;
+        case 'large':
+          return `margin-left: -${theme.spacing['8']};`;
+        case 'huge':
+          return `margin-left: -${theme.spacing['10']};`;
+      }
+    }}
+  }
+`;
+
+export const Container = styled.div<{ size: Size; variant?: AvatarVariant }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colors.text};
+  font-weight: 700;
+
+  img {
+    width: 100%;
+    height: 100%;
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'square':
+          return 'border-radius: 0;';
+        case 'rounded':
+          return `border-radius: ${theme.borderRadius['small']};`;
+        default:
+          return 'border-radius: 50%;';
+      }
+    }}
+  }
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 2px is the size of the border */
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'square':
+          return 'border-radius: 0;';
+        case 'rounded':
+          return `border-radius: ${theme.borderRadius['small']};`;
+        default:
+          return 'border-radius: 50%;';
+      }
+    }}
+    background-color: ${({ theme }) => theme.colors.background};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    margin-left: 0;
+  }
+
+  ${({ size, theme }) => {
+    switch (size) {
+      case 'tiny':
+        return `
+          width: 1rem;
+          height: 1rem;
+          font-size: .8rem;
+          line-height: .8rem;
+        `;
+      case 'small':
+        return `
+          width: 3.125rem;
+          height: 3.125rem;
+          font-size: ${theme.fontSize.small};
+          line-height: 3.125rem;
+        `;
+      case 'medium':
+        return `
+          width: 6rem;
+          height: 6rem;
+          font-size: 2rem;
+          line-height: 2rem;
+        `;
+      case 'large':
+        return `
+          width: 12.5rem;
+          height: 12.5rem;
+          font-size: 2.8rem;
+          line-height: 2.8rem;
+        `;
+      case 'huge':
+        return `
+          width: 16rem;
+          height: 16rem;
+          font-size: 3rem;
+          line-height: 3rem;
+        `;
+    }
+  }}
+`;

package/src/components/data/Avatar/useImageLoadingStatus.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useState } from 'react';
+import { ImageLoadingStatus } from './context';
+
+export function useImageLoadingStatus(src?: string) {
+  const [loadingStatus, setLoadingStatus] = useState<ImageLoadingStatus>('idle');
+
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus('error');
+      return;
+    }
+
+    let isMounted = true;
+    const image = new window.Image();
+
+    const updateStatus = (status: ImageLoadingStatus) => () => {
+      if (!isMounted) return;
+      setLoadingStatus(status);
+    };
+
+    setLoadingStatus('loading');
+    image.onload = updateStatus('loaded');
+    image.onerror = updateStatus('error');
+    image.src = src;
+
+    return () => {
+      isMounted = false;
+    };
+  }, [src]);
+
+  return loadingStatus;
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { styled } from '../../../styled';
+import { AiOutlineArrowRight as LinkIcon } from 'react-icons/ai';
+import { Chip, ChipProps } from '../../data';
+
+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/Chip',
+  component: Chip,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    label: 'Default chip',
+    color: 'backgroundAccent',
+    disabled: false,
+    dot: false,
+    variant: 'default',
+    isLoading: false,
+  },
+} as Meta<ChipProps>;
+
+export const Default: StoryFn<ChipProps> = (args) => <Chip {...args} />;
+
+export const ClickableChip: StoryObj<ChipProps> = {
+  args: {
+    label: 'Clickable chip',
+    onClick: () => {
+      /* */
+    },
+  },
+};
+export const DeletableChip: StoryObj<ChipProps> = {
+  args: {
+    label: 'Deletable chip',
+    onDelete: () => {
+      /* */
+    },
+  },
+};
+
+export const LoadingChip: StoryObj<ChipProps> = {
+  args: {
+    label: 'loading chip',
+    isLoading: true,
+  },
+};
+
+export const IconChip: StoryObj<ChipProps> = {
+  args: {
+    label: 'Chip with icon',
+    icon: <LinkIcon />,
+    showIcon: 'hover',
+  },
+};

package/src/components/data/Chip/Chip.test.tsx

@@ -0,0 +1,8 @@
+import { Chip } from '.';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
+
+it('Should render <Chip/>', () => {
+  const { container } = render(<Chip variant="outline" label="chip label" />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/data/Chip/Chip.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Chip/> 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 3px 12px;
+  border-radius: 1.5rem;
+  cursor: auto;
+  border: 2px solid transparent;
+  background-color: #d3d3d3;
+}
+
+.c0 svg {
+  margin-left: 0.5rem;
+  cursor: pointer;
+  fill: white;
+  stroke: white;
+}
+
+.c0 span {
+  display: block;
+  white-space: nowrap;
+  margin-left: 0;
+  font-weight: 600;
+  font-size: 1.225rem;
+  color: white;
+}
+
+<div>
+  <div
+    class="c0"
+    color="gray"
+  >
+    <span>
+      chip label
+    </span>
+  </div>
+</div>
+`;

package/src/components/data/Chip/__snapshots__/Chip.test.tsx.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Chip/> 1`] = `
+<div>
+  <div
+    style="padding: 0.5rem; max-width: 100%;"
+  >
+    <div
+      style="display: flex; align-items: center; gap: .5rem;"
+    >
+      <strong
+        style="font-size: 1rem;"
+      >
+        Something went wrong!
+      </strong>
+      <button
+        style="appearance: none; font-size: 0.6em; border: 1px solid currentcolor; padding: 0.1rem 0.2rem; font-weight: bold; border-radius: .25rem;"
+      >
+        Hide Error
+      </button>
+    </div>
+    <div
+      style="height: 0.25rem;"
+    />
+    <div>
+      <pre
+        style="font-size: 0.7em; border: 1px solid red; border-radius: .25rem; padding: 0.3rem; color: red; overflow: auto;"
+      >
+        <code>
+          Passed an incorrect argument to a color function, please pass a string representation of a color.
+
+
+        </code>
+      </pre>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,67 @@
+import { forwardRef, ReactElement, cloneElement } from 'react';
+import { AiOutlineClose as Icon } from 'react-icons/ai';
+import { Container } from './style';
+import { AlertVariants, Color } from '../../../styled/types';
+
+export type ChipColor = Color | AlertVariants | 'backgroundAccent';
+
+export type ShowIcon = 'always' | 'hover';
+
+export interface ChipProps {
+  label: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  dot?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+  color: ChipColor;
+  isLoading?: boolean;
+  icon?: ReactElement;
+  showIcon?: ShowIcon;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
+  {
+    color,
+    label,
+    disabled = false,
+    readOnly = false,
+    onClick = undefined,
+    onDelete = undefined,
+    isLoading = false,
+    icon,
+    showIcon = 'always',
+  },
+  ref,
+) {
+  if (isLoading) {
+    return (
+      <Container
+        ref={ref}
+        clickable={!readOnly && !disabled && onClick !== undefined}
+        color={color}
+        disabled={disabled}
+        onClick={onClick ? onClick : undefined}
+        className="placeholder"
+        showIcon={showIcon}
+      >
+        <span style={{ minWidth: '70px', minHeight: '15px' }}></span>
+      </Container>
+    );
+  }
+
+  return (
+    <Container
+      ref={ref}
+      clickable={onClick !== undefined}
+      color={color}
+      disabled={disabled}
+      onClick={onClick ? onClick : undefined}
+      showIcon={showIcon}
+    >
+      <span>{label}</span>
+      {!onDelete && icon && cloneElement(icon, { size: 12, className: 'icon' })}
+      {onDelete && !readOnly && !disabled && <Icon onClick={onDelete} size={12} />}
+    </Container>
+  );
+});

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

@@ -0,0 +1,49 @@
+import { styled } from '../../../styled';
+import { ChipColor, ShowIcon } from '.';
+import { shade } from 'polished';
+
+export const Container = styled.div<{
+  disabled: boolean;
+  color: ChipColor;
+  clickable: boolean;
+  showIcon: ShowIcon;
+}>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => `${theme.spacing['0_25']} ${theme.spacing['0_5']}`};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  cursor: ${({ clickable }): string => (clickable ? 'pointer' : 'auto')};
+  width: fit-content;
+  height: 20px;
+  background-color: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+  border: 0.1rem solid ${({ theme, color }) => theme.colors[color]};
+
+  svg {
+    margin-left: ${({ theme }) => theme.spacing['0_5']};
+    cursor: pointer;
+    transition: width 0.2s ease-in-out;
+    will-change: width;
+    display: ${({ showIcon }): string => (showIcon === 'always' ? 'inline-block' : 'none')};
+    ${({ theme, color }) => {
+      return `fill: ${theme.colors[color]};`;
+    }}
+  }
+
+  &:hover {
+    svg {
+      display: inline-block;
+    }
+  }
+
+  span {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    user-select: none;
+    color: white;
+  }
+`;

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Console as ConsoleComponent } from '../Console';
+import { Message, MessageType } from './MessageModel';
+
+export default {
+  title: 'Data/Console',
+  component: ConsoleComponent,
+} as Meta;
+
+const MessageTypeMap: MessageType[] = ['command', 'info', 'debug', 'warning', 'error'];
+
+export const Console: StoryFn = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  function listenerFactory() {
+    const interval = setInterval(() => {
+      const r = Math.floor(Math.random() * 5);
+      const newMessage: Message = {
+        data: `this is a ${MessageTypeMap[r]} logline`,
+        result: '',
+        timestamp: new Date().toISOString(),
+        type: MessageTypeMap[r],
+      };
+
+      setMessages((prev: Message[]) => [...prev, newMessage]);
+    }, 200);
+
+    return {
+      on: () => {
+        /* Nothing to do here */
+      },
+      off: () => clearInterval(interval),
+    };
+  }
+
+  return (
+    <ConsoleComponent
+      messages={messages}
+      setMessages={setMessages}
+      listenerFactory={listenerFactory}
+      onExecuteCommand={async () => {
+        return {
+          type: 'command',
+          data: 'response here',
+          timestamp: new Date().toISOString(),
+        };
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,125 @@
+import { FC, useEffect, SetStateAction, Dispatch, useRef, forwardRef } from 'react';
+import { Wrapper, Header, MessageContainer } from './style';
+import { ConsoleLine } from './ConsoleLine';
+import { VariableSizeList } from 'react-window';
+import { Message } from './MessageModel';
+import { ConsoleInput } from './ConsoleInput';
+import { useConsoleLiveModeScrolling } from './useConsoleLiveMode';
+import Autosizer from 'react-virtualized-auto-sizer';
+import { AiOutlineDelete as ClearIcon } from 'react-icons/ai';
+import { Button } from '../../../components';
+import { GUTTER_SIZE, LIST_PADDING_SIZE, DEFAULT_LINE_HEIGHT } from './constants';
+
+interface RowState {
+  height: number;
+  collapsed: boolean;
+}
+
+export interface ConsoleProps {
+  // This should spit out messages of the format Message and add it using the setter.
+  listenerFactory: () => {
+    on: () => void;
+    off: () => void;
+  };
+  messages: Message[];
+  setMessages: Dispatch<SetStateAction<Message[]>>;
+  onExecuteCommand: (command: string) => Promise<Message>;
+}
+
+export const Console: FC<ConsoleProps> = ({ listenerFactory, onExecuteCommand, setMessages, messages }) => {
+  const rowHeights = useRef<RowState[]>([]);
+
+  const { consoleMessagesBoxRef, isLiveModeEnabled, setIsLiveModeEnabled, toggleLiveModeOnConsoleScroll } =
+    useConsoleLiveModeScrolling(messages);
+
+  useEffect(() => {
+    const { on, off } = listenerFactory();
+    on();
+
+    return () => {
+      off();
+    };
+  }, []);
+
+  const getRowHeight = (index: number) => {
+    if (rowHeights.current && rowHeights.current[index]) {
+      return rowHeights.current[index].height + GUTTER_SIZE || DEFAULT_LINE_HEIGHT;
+    }
+    return DEFAULT_LINE_HEIGHT;
+  };
+
+  const setRowState = (index: number, height: number, collapsed: boolean) => {
+    if (consoleMessagesBoxRef.current) {
+      consoleMessagesBoxRef.current.resetAfterIndex(index);
+    }
+    rowHeights.current = {
+      ...rowHeights.current,
+      [index]: { height, collapsed },
+    };
+  };
+
+  // this is required so that react-window knows the padding of the element
+  // again, react-window does not have types, cba to type this.
+  //
+  const InnerElementType = forwardRef<HTMLDivElement, any>(function InnerConsole({ style, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          height: `${style.height + LIST_PADDING_SIZE * 2}px`,
+          paddingTop: `${GUTTER_SIZE}px`,
+        }}
+        {...rest}
+      />
+    );
+  });
+
+  return (
+    <Wrapper>
+      <Header>
+        <Button onClick={() => setIsLiveModeEnabled(true)} disabled={isLiveModeEnabled}>
+          Follow
+        </Button>
+        <Button onClick={() => setMessages([])} color="background" icon={<ClearIcon />}>
+          Clear
+        </Button>
+      </Header>
+      <MessageContainer>
+        <Autosizer>
+          {({ width, height }: { width: number | undefined; height: number | undefined }) => {
+            if (width == undefined || height == undefined) {
+              return <>Could not render list</>;
+            }
+            return (
+              <VariableSizeList
+                itemCount={messages.length}
+                itemSize={getRowHeight}
+                itemData={messages}
+                width={width}
+                height={height}
+                onScroll={toggleLiveModeOnConsoleScroll}
+                innerElementType={InnerElementType}
+                ref={consoleMessagesBoxRef}
+              >
+                {({ data, index, style }) => {
+                  return (
+                    <ConsoleLine
+                      key={`console-line-${index}`}
+                      index={index}
+                      message={data[index]}
+                      style={style}
+                      collapsed={rowHeights.current[index] ? rowHeights.current[index].collapsed : false}
+                      setRowState={setRowState}
+                    />
+                  );
+                }}
+              </VariableSizeList>
+            );
+          }}
+        </Autosizer>
+      </MessageContainer>
+      <ConsoleInput setMessages={setMessages} onExecuteCommand={onExecuteCommand} />
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,87 @@
+import { ChangeEvent, useRef, KeyboardEvent, Dispatch, FC, SetStateAction, useState } from 'react';
+import { Message } from '../MessageModel';
+import { Container, StyledEnterIcon } from './style';
+import { useSnackbar } from 'notistack';
+
+export interface ConsoleInputProps {
+  setMessages: Dispatch<SetStateAction<Message[]>>;
+  onExecuteCommand: (command: string) => Promise<Message>;
+}
+
+export const ConsoleInput: FC<ConsoleInputProps> = ({ onExecuteCommand, setMessages }) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [input, setInput] = useState('');
+  const [commandHistoryIndex, setCommandHistoryIndex] = useState(-1);
+
+  async function executeCommand() {
+    if (input != '') {
+      try {
+        const message = await onExecuteCommand(input);
+        setMessages((prev: Message[]) => [...prev, message]);
+
+        const commandHistory = JSON.parse(localStorage.getItem('commandHistory') || '[]');
+        commandHistory.unshift(input);
+        if (commandHistory.length > 50) {
+          commandHistory.pop();
+        }
+        localStorage.setItem('commandHistory', JSON.stringify(commandHistory));
+        setCommandHistoryIndex(-1);
+      } catch {
+        enqueueSnackbar('Something went wrong while executing your command.', {
+          variant: 'default',
+          type: 'error',
+        });
+      }
+    }
+  }
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value);
+  };
+
+  const handleOnKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      executeCommand();
+      setInput('');
+      return;
+    }
+
+    const commandHistory = JSON.parse(localStorage.getItem('commandHistory') || '[]');
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (commandHistoryIndex >= -1 && commandHistoryIndex < commandHistory.length) {
+        setCommandHistoryIndex((prevIndex) => prevIndex + 1); // move backwards in command history
+        setInput(commandHistory[commandHistoryIndex + 1]);
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (commandHistoryIndex > 0) {
+        setCommandHistoryIndex((prevIndex) => prevIndex - 1); // move forward in command history
+        setInput(commandHistory[commandHistoryIndex - 1]);
+      } else if (commandHistoryIndex === 0) {
+        setCommandHistoryIndex(-1);
+        setInput(''); // Clear input if moving beyond available commands
+      }
+      return;
+    }
+  };
+
+  return (
+    <Container>
+      <input
+        placeholder="Type here to execute a command.."
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        value={input}
+        ref={inputRef}
+      />
+      <StyledEnterIcon fill="white" onClick={executeCommand} />
+    </Container>
+  );
+};