@takaro/lib-components 0.0.1

package/src/components/actions/IconButton/index.tsx

@@ -0,0 +1,40 @@
+import { cloneElement, forwardRef, ReactElement } from 'react';
+import { Color, Size } from '../../../styled/types';
+import { Default } from './style';
+
+export interface IconButtonProps {
+  size?: Size;
+  color?: Color;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  icon: ReactElement;
+  disabled?: boolean;
+  /// Label for screen readers, must be descriptive of the action.
+  ariaLabel: string;
+  badge?: string;
+}
+
+const getSize = (size: Size) => {
+  switch (size) {
+    case 'tiny':
+      return 15;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 18;
+    case 'large':
+      return 20;
+    case 'huge':
+      return 24;
+  }
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, color = 'primary', size = 'medium', disabled, onClick = () => {}, ariaLabel, badge }, ref) => {
+    return (
+      <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
+        {cloneElement(icon, { size: getSize(size) })}
+        {badge && <div>{badge}</div>}
+      </Default>
+    );
+  }
+);

package/src/components/actions/IconButton/style.ts

@@ -0,0 +1,75 @@
+import { Color, styled } from '../../../styled';
+
+export const Default = styled.button<{ color: Color }>`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 150ms ease, fill 150ms ease, stroke 150ms ease;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  border: 0.01rem solid transparent;
+  background-clip: padding-box;
+  cursor: pointer;
+  background-color: transparent;
+  padding: ${({ theme }) => theme.spacing['0_5']};
+  line-height: 1.6rem;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    div {
+      background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    }
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+
+  &:focus {
+    border: 0.01rem solid ${({ theme, color }) => theme.colors[color]};
+    div {
+      border-color: ${({ theme, color }) => theme.colors[color]};
+    }
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: all;
+
+    svg {
+      cursor: not-allowed;
+
+      /* TODO: this should be the disabled color, but this is not set correctly right now */
+      fill: ${({ theme }) => theme.colors.placeholder};
+    }
+  }
+
+  div {
+    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.text};
+    font-size: ${({ theme }) => theme.fontSize.tiny};
+    font-weight: 600;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    width: fit-content;
+    height: 1.5rem;
+    line-height: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: -${({ theme }) => theme.spacing['0_75']};
+    right: -${({ theme }) => theme.spacing['0_75']};
+    padding: ${({ theme }) => theme.spacing['0_25']};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  }
+
+  svg {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.text};
+    stroke: ${({ theme }) => theme.colors.text};
+  }
+`;

package/src/components/actions/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { ToggleButtonGroup, ToggleButtonGroupProps } from '.';
+import {
+  MdOutlineFormatAlignLeft,
+  MdOutlineFormatAlignRight,
+  MdOutlineFormatAlignJustify,
+  MdOutlineFormatAlignCenter,
+} from 'react-icons/md';
+
+const WrapperDecorator = styled.div`
+  padding: 5rem;
+  border-radius: 1rem;
+  background-color: ${({ theme }): string => theme.colors.background};
+`;
+
+export default {
+  title: 'Actions/ToggleButton',
+  component: ToggleButtonGroup,
+  decorators: [(story) => <WrapperDecorator>{story()}</WrapperDecorator>],
+  args: {
+    exclusive: true,
+    orientation: 'horizontal',
+    fullWidth: false,
+  },
+} as Meta<ToggleButtonGroupProps>;
+
+export const Default: StoryFn<ToggleButtonGroupProps> = (args) => {
+  const [value, setValue] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <ToggleButtonGroup
+        onChange={(val) => handleOnChange(val as string)}
+        exclusive={args.exclusive}
+        orientation={args.orientation}
+        fullWidth={args.fullWidth}
+      >
+        <ToggleButtonGroup.Button value="left">
+          <MdOutlineFormatAlignLeft size={17} />
+        </ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value="center">
+          <MdOutlineFormatAlignCenter size={17} />
+        </ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value="right">
+          <MdOutlineFormatAlignRight size={17} />
+        </ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button disabled value="justify">
+          <MdOutlineFormatAlignJustify size={17} />
+        </ToggleButtonGroup.Button>
+      </ToggleButtonGroup>
+      <pre>{value}</pre>
+    </>
+  );
+};
+
+export const Text: StoryFn<ToggleButtonGroupProps> = (args) => {
+  const [value, setValue] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setValue(newValue);
+  };
+  return (
+    <>
+      <ToggleButtonGroup
+        onChange={(val) => handleOnChange(val as string)}
+        orientation={args.orientation}
+        exclusive={args.exclusive}
+        fullWidth={args.fullWidth}
+      >
+        <ToggleButtonGroup.Button value="left">left</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value="center">center</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value="right">right</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value="justify">justify</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>
+      <pre>{value}</pre>
+    </>
+  );
+};

package/src/components/actions/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,48 @@
+import { Tooltip } from '../../../components';
+import { forwardRef, ReactNode, MouseEvent } from 'react';
+import { Item } from './style';
+
+export interface ToggleButtonProps {
+  children?: ReactNode;
+  disabled?: boolean;
+  onChange?: (event: MouseEvent<HTMLElement>, value: unknown) => void;
+  selected?: boolean;
+  onClick?: () => unknown;
+  parentClickEvent?: (value: unknown) => unknown;
+  value: NonNullable<string>;
+  tooltip?: string;
+}
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (
+    { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
+    ref
+  ) => {
+    const handleOnClick = () => {
+      if (disabled) return;
+      parentClickEvent(value);
+      if (onClick) {
+        onClick();
+      }
+    };
+
+    if (tooltip) {
+      return (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
+              {children}
+            </Item>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{tooltip}</Tooltip.Content>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
+        {children}
+      </Item>
+    );
+  }
+);

package/src/components/actions/ToggleButton/ToggleButtonGroup.tsx

@@ -0,0 +1,99 @@
+import {
+  cloneElement,
+  FC,
+  Children,
+  ReactNode,
+  useState,
+  isValidElement,
+  FunctionComponentElement,
+  ReactElement,
+  useEffect,
+} from 'react';
+import { Container } from './style';
+import { ToggleButton, ToggleButtonProps } from './ToggleButton';
+
+interface SubComponents {
+  Button: typeof ToggleButton;
+}
+
+export type orientation = 'horizontal' | 'vertical';
+
+export interface ToggleButtonGroupProps {
+  onChange?: (value: string | Map<string, boolean>) => unknown;
+  orientation?: orientation;
+  /// if `true` only allow one of the child ToggleButton values to be selected.
+  exclusive?: boolean;
+  children: ReactNode | FunctionComponentElement<ToggleButtonProps>;
+  /// The currently selected value within the group or an array of selected values when `exclusive` is false
+  defaultValue?: string;
+  fullWidth?: boolean;
+  canSelectNone?: boolean;
+}
+
+export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
+  children,
+  defaultValue,
+  exclusive,
+  onChange = () => {},
+  orientation = 'horizontal',
+  canSelectNone = false,
+  fullWidth = false,
+}) => {
+  const [selected, setSelected] = useState<string | Map<string, boolean>>(
+    exclusive ? defaultValue || '' : handleDefaultValueNonExclusive()
+  );
+
+  function handleDefaultValueNonExclusive() {
+    const m = new Map<string, boolean>();
+    selected as Map<string, boolean>;
+
+    Children.forEach(children, (child) => {
+      if (isValidElement(child)) {
+        m.set(child.props.value, false);
+      }
+    });
+    return m;
+  }
+
+  const clickEvent = (value: string) => {
+    if (exclusive) {
+      if (!canSelectNone && selected === value) {
+        return;
+      }
+
+      // handle exclusive (one value return)
+      if (selected === value) {
+        return setSelected('');
+      }
+      return setSelected(value);
+    } else {
+      // handle case that each button has a seperate state
+      setSelected(
+        new Map((selected as Map<string, boolean>).set(value, !(selected as Map<string, boolean>).get(value)))
+      );
+    }
+  };
+
+  useEffect(() => {
+    onChange(selected);
+  }, [selected]);
+
+  return (
+    <Container orientation={orientation} fullWidth={fullWidth} aria-orientation={orientation}>
+      {Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          return cloneElement(child as ReactElement<ToggleButtonProps | Record<string, unknown>>, {
+            selected: exclusive
+              ? selected == child.props.value
+              : (selected as Map<string, boolean>).get(child.props.value),
+            parentClickEvent: clickEvent,
+            orientation: orientation,
+          });
+        }
+        return child;
+      })}
+    </Container>
+  );
+};
+
+ToggleButtonGroup.Button = ToggleButton;

package/src/components/actions/ToggleButton/index.tsx

@@ -0,0 +1,2 @@
+export { ToggleButtonGroup } from './ToggleButtonGroup';
+export type { ToggleButtonGroupProps } from './ToggleButtonGroup';

package/src/components/actions/ToggleButton/style.ts

@@ -0,0 +1,76 @@
+import { styled } from '../../../styled';
+import { orientation } from './ToggleButtonGroup';
+
+export const Container = styled.div<{
+  orientation: orientation;
+  fullWidth: boolean;
+}>`
+  display: flex;
+  flex-direction: ${({ orientation }) => (orientation === 'horizontal' ? 'row' : 'column')};
+  align-items: center;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'max-content')};
+  height: 100%;
+
+  button {
+    padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing[1]}`};
+    flex-basis: ${({ fullWidth }) => (fullWidth ? '100%' : '')};
+    border: 0.1rem solid ${({ theme }): string => theme.colors.backgroundAccent};
+    border-bottom: ${({ orientation, theme }) =>
+      orientation === 'horizontal' ? `0.1rem solid ${theme.colors.backgroundAccent}` : 'none'};
+    border-right: ${({ orientation, theme }) =>
+      orientation === 'vertical' ? `0.1rem solid ${theme.colors.backgroundAccent}` : 'none'};
+
+    &:first-child {
+      ${({ orientation, theme }) => {
+        if (orientation == 'horizontal') {
+          return `
+            border-top-left-radius: ${theme.borderRadius.small};
+            border-bottom-left-radius: ${theme.borderRadius.small};
+          `;
+        } else {
+          return `
+        border-top-left-radius: ${theme.borderRadius.small};
+        border-top-right-radius: ${theme.borderRadius.small};
+          `;
+        }
+      }}
+    }
+
+    &:last-child {
+      ${({ orientation, theme }) => {
+        if (orientation == 'horizontal') {
+          return `
+            border-top-right-radius: ${theme.borderRadius.small};
+            border-bottom-right-radius: ${theme.borderRadius.small};
+            border-right: 0.1rem solid ${theme.colors.backgroundAccent};
+          `;
+        } else {
+          return `
+            border-bottom-right-radius: ${theme.borderRadius.small};
+            border-bottom-left-radius: ${theme.borderRadius.small};
+            border-bottom: 0.1rem solid ${theme.colors.backgroundAccent};
+      `;
+        }
+      }}
+    }
+  }
+`;
+
+export const Item = styled.button<{ isSelected: boolean; isDisabled: boolean }>`
+  color: none;
+  display: block;
+  border-radius: 0;
+  width: 100%;
+  position: relative;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: 400;
+  border-left: none;
+  background-color: ${({ theme, isSelected, isDisabled }) =>
+    isSelected ? theme.colors.primary : isDisabled ? theme.colors.disabled : theme.colors.background};
+  cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
+
+  svg {
+    fill: ${({ theme, isSelected }) => (isSelected ? theme.colors.white : theme.colors.text)};
+  }
+`;

package/src/components/actions/index.ts

@@ -0,0 +1,16 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { ToggleButtonGroup } from './ToggleButton';
+export type { ToggleButtonGroupProps } from './ToggleButton';
+
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+
+export { DropdownButton } from './DropdownButton';
+export type { DropdownButtonProps } from './DropdownButton';
+
+export { Dropdown } from './Dropdown';
+
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuProps } from './ContextMenu';

package/src/components/charts/AreaChart/AreaChart.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
+import { AreaChart, AreaChartProps } from '.';
+import { styled } from '../../../styled';
+import { Card, Dropdown, IconButton } from '../../../components';
+import { faker } from '@faker-js/faker';
+import { AiOutlineMenu as MenuIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Charts/AreaChart',
+  component: AreaChart,
+  args: {
+    showBrush: true,
+    showGrid: true,
+    axisXLabel: '',
+    axisYLabel: 'Close Price',
+  },
+} as Meta<AreaChartProps<AppleStock>>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 500px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Default: StoryFn<AreaChartProps<AppleStock>> = (args) => {
+  const getDate = (d: AppleStock) => new Date(d.date);
+  const getStockValue = (d: AppleStock) => d.close;
+  return (
+    <Wrapper>
+      <AreaChart<AppleStock>
+        name="AppleStock"
+        xAccessor={getDate}
+        yAccessor={getStockValue}
+        data={appleStock}
+        showBrush={args.showBrush}
+        showGrid={args.showGrid}
+        axisXLabel={args.axisXLabel}
+        axisYLabel={args.axisYLabel}
+      />
+    </Wrapper>
+  );
+};
+
+interface PingData {
+  timestamp: string;
+  latency: number;
+}
+
+function generateData() {
+  const data: PingData[] = [];
+  for (let i = 0; i < 100; i++) {
+    const timestamp = faker.date.between('2021-01-01T00:00:00Z', '2021-01-31T23:59:59Z').toISOString();
+    const latency = faker.datatype.number({ min: 0, max: 70, precision: 1 });
+    data.push({ timestamp, latency });
+  }
+  data.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+  return data;
+}
+
+export const PingExample: StoryFn = () => {
+  const getDate = (d: PingData) => new Date(d.timestamp);
+  const getLatency = (d: PingData) => d.latency;
+
+  const tooltipAccessor = (d: PingData) => {
+    return `${d.latency}ms`;
+  };
+
+  return (
+    <div style={{ width: 800, height: 300 }}>
+      <Card variant="outline">
+        <Header>
+          <h2 style={{ marginBottom: '10px' }}>Ping latency</h2>
+          <Dropdown>
+            <Dropdown.Trigger asChild>
+              <IconButton icon={<MenuIcon />} ariaLabel="open menu" />
+            </Dropdown.Trigger>
+            <Dropdown.Menu>
+              <Dropdown.Menu.Item onClick={() => {}} label="Option 1" />
+              <Dropdown.Menu.Item onClick={() => {}} label="Option 2" />
+              <Dropdown.Menu.Item onClick={() => {}} label="Option 3" />
+            </Dropdown.Menu>
+          </Dropdown>
+        </Header>
+        <div style={{ height: '500px' }}>
+          <AreaChart<PingData>
+            name="Ping"
+            xAccessor={getDate}
+            yAccessor={getLatency}
+            tooltipAccessor={tooltipAccessor}
+            data={generateData()}
+            showBrush={false}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};