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

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

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <IconButton /> 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="sc-epRvzc floJoN"
+    color="primary"
+    type="button"
+  >
+    <div
+      size="18"
+    >
+      icon
+    </div>
+  </button>
+</div>
+`;

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

@@ -0,0 +1,16 @@
+import { Size } from '../../../styled/types';
+
+export const getIconSize = (size: Size) => {
+  switch (size) {
+    case 'tiny':
+      return 15;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 18;
+    case 'large':
+      return 20;
+    case 'huge':
+      return 24;
+  }
+};

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

@@ -0,0 +1,28 @@
+import { cloneElement, forwardRef, ReactElement } from 'react';
+import { Color, Size } from '../../../styled/types';
+import { Badge } from '../../../components';
+import { Default } from './style';
+import { getIconSize } from './getIconSize';
+
+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;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { 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: getIconSize(size) })}
+      {badge && <Badge>{badge}</Badge>}
+    </Default>
+  );
+});

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

@@ -0,0 +1,51 @@
+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_25']};
+  line-height: 1.6rem;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    div {
+      background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    }
+  }
+
+  &:focus {
+    border: 0.01rem solid ${({ theme, color }) => theme.colors[color]};
+    div {
+      border-color: ${({ theme, color }) => theme.colors[color]};
+    }
+  }
+
+  &: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};
+    }
+  }
+
+  svg {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.text};
+    stroke: ${({ theme }) => theme.colors.text};
+  }
+`;

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

@@ -0,0 +1,85 @@
+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',
+    defaultValue: 'left',
+    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>(function ToggleButton(
+  { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
+  ref,
+) {
+  const handleOnClick = (m: MouseEvent) => {
+    m.preventDefault();
+    m.stopPropagation();
+    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,107 @@
+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>();
+    Children.forEach(children, (child) => {
+      if (isValidElement(child)) {
+        if (child.props.value === defaultValue) {
+          m.set(child.props.value, true);
+        } else {
+          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);
+    }
+
+    // In case there always has to be one value selected, the clicked value is true and there is currently only one value selected then we don't do anything
+    if (
+      !canSelectNone &&
+      (selected as Map<string, boolean>).get(value) === true &&
+      Array.from((selected as Map<string, boolean>).values()).filter(Boolean).length === 1
+    ) {
+      return;
+    }
+
+    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,75 @@
+import { shade } from 'polished';
+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};
+          `;
+        }
+        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};
+          `;
+        }
+        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 }) =>
+    isDisabled ? theme.colors.disabled : isSelected ? shade(0.5, theme.colors.primary) : 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,103 @@
+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,
+    axisXLabel: '',
+    axisYLabel: 'Close Price',
+    grid: 'none',
+    animate: true,
+  },
+} as Meta<AreaChartProps<AppleStock>>;
+
+const Wrapper = styled.div`
+  height: 500px;
+  width: 500px;
+`;
+
+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}
+        axis={{
+          labelX: args.axis?.labelX,
+          labelY: args.axis?.labelY,
+        }}
+        grid={args.grid}
+        animate={args.animate}
+      />
+    </Wrapper>
+  );
+};
+
+interface PingData {
+  timestamp: string;
+  latency: number;
+}
+
+function generateData() {
+  const data: PingData[] = [];
+  for (let i = 0; i < 100; i++) {
+    const timestamp = faker.date.between({ from: '2021-01-01T00:00:00Z', to: '2021-01-31T23:59:59Z' }).toISOString();
+    const latency = faker.number.float({ min: 0, max: 70, fractionDigits: 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">
+        <Card.Title label="Ping latency">
+          <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>
+        </Card.Title>
+        <Card.Body>
+          <div style={{ height: '500px' }}>
+            <AreaChart<PingData>
+              name="Ping"
+              xAccessor={getDate}
+              yAccessor={getLatency}
+              tooltip={{
+                accessor: tooltipAccessor,
+              }}
+              data={generateData()}
+            />
+          </div>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};