@takaro/lib-components 0.0.1

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,7 @@
+import { Chip } from '.';
+import { render } from 'test-utils';
+
+it('Should render <Chip/>', () => {
+  const { container } = render(<Chip 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/index.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, ReactElement, cloneElement } from 'react';
+import { AiOutlineClose as Icon } from 'react-icons/ai';
+import { Container, Dot } from './style';
+import { AlertVariants, Color, Variant } 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;
+  variant?: Variant;
+  isLoading?: boolean;
+  icon?: ReactElement;
+  showIcon?: ShowIcon;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
+  (
+    {
+      color,
+      variant = 'default',
+      label,
+      disabled = false,
+      readOnly = false,
+      onClick = undefined,
+      onDelete = undefined,
+      isLoading = false,
+      dot = false,
+      icon,
+      showIcon = 'always',
+    },
+    ref
+  ) => {
+    if (isLoading) {
+      return (
+        <Container
+          ref={ref}
+          clickable={!readOnly && !disabled && onClick !== undefined}
+          color={color}
+          disabled={disabled}
+          outline={false}
+          onClick={onClick ? onClick : undefined}
+          className="placeholder"
+          showIcon={showIcon}
+        >
+          {dot && <Dot color={color} outline={variant !== 'default'} />}
+          <span style={{ minWidth: '70px', minHeight: '15px' }}></span>
+        </Container>
+      );
+    }
+
+    return (
+      <Container
+        ref={ref}
+        clickable={onClick !== undefined}
+        color={color}
+        disabled={disabled}
+        onClick={onClick ? onClick : undefined}
+        outline={variant !== 'default'}
+        showIcon={showIcon}
+      >
+        {dot && <Dot color={color} outline={variant !== 'default'} />}
+        <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,84 @@
+import { styled } from '../../../styled';
+import { ChipColor, ShowIcon } from '.';
+
+export const Container = styled.div<{
+  disabled: boolean;
+  color: ChipColor;
+  outline: boolean;
+  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;
+
+  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, outline }) => {
+      if (!outline) {
+        return 'fill: white; stroke: white;';
+      }
+      return `fill: ${theme.colors[color]};`;
+    }}
+  }
+
+  ${({ theme, color, outline }): string => {
+    if (!outline) {
+      return 'border: 0.1rem solid transparent;';
+    }
+    return `border: 0.1rem solid ${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;
+
+    ${({ theme, color, outline }) => {
+      if (!outline) {
+        return 'color: white;';
+      }
+      switch (color) {
+        case 'backgroundAccent':
+        case 'secondary':
+          return `color: ${theme.colors.text};`;
+        default:
+          return `color: ${theme.colors[color]};`;
+      }
+    }}
+  }
+
+  ${({ theme, color, outline }): string => {
+    if (outline) {
+      return 'background-color: transparent;';
+    }
+    return `background-color: ${theme.colors[color]};`;
+  }}
+`;
+
+export const Dot = styled.div<{ color: ChipColor; outline: boolean }>`
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  margin-right: ${({ theme }) => theme.spacing['0_5']};
+  background-color: ${({ outline, theme, color }) => (outline ? theme.colors[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';
+
+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;
+
+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>(({ style, ...rest }, ref) => (
+    <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)} text="Follow" disabled={isLiveModeEnabled} />
+        <Button onClick={() => setMessages([])} text="Clear" color="background" icon={<ClearIcon />} />
+      </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>
+  );
+};

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;
+`;