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

package/src/components/inputs/selects/SubComponents/Option.tsx

@@ -0,0 +1,114 @@
+import { FC, PropsWithChildren, useContext } from 'react';
+import { styled } from '../../../../styled';
+import { AiOutlineCheck as CheckIcon } from 'react-icons/ai';
+import { GenericCheckBox } from '../../CheckBox';
+import { OptionContainer } from './style';
+import { SelectContext, SelectItem } from '..';
+
+const StyledCheckIcon = styled(CheckIcon)`
+  margin-left: ${({ theme }) => theme.spacing[1]};
+`;
+
+export interface OptionProps extends PropsWithChildren {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  // These values are controlled by the SearchField component
+  index?: number;
+  onChange?: (values: string | string[]) => unknown;
+}
+
+// check if the index is already selected, if so remove it, otherwise add it.
+function toggleSelectedItem(selectedValues: SelectItem[], itemToToggle: SelectItem) {
+  // Check if the value already exists in the selectedValues
+  const existingIndex = selectedValues.findIndex((item) => item.value === itemToToggle.value);
+
+  if (existingIndex > -1) {
+    // If it exists, remove it from the array
+    return selectedValues.filter((_, index) => index !== existingIndex);
+  }
+  // If it doesn't exist, add it to the array
+  return [...selectedValues, itemToToggle];
+}
+
+function hasSelectedItem(selectedItems: SelectItem[], itemToCheck: SelectItem) {
+  return selectedItems.some((item) => item.value === itemToCheck.value);
+}
+
+export const Option: FC<OptionProps> = ({ children, index = 0, value, onChange, disabled = false, label }) => {
+  const { getItemProps, selectedItems, setSelectedItems, setOpen, listRef, activeIndex, dataRef, name, multiple } =
+    useContext(SelectContext);
+
+  const handleSelect = () => {
+    // array of values
+    if (multiple) {
+      const updatedItems = toggleSelectedItem(selectedItems, { value, label });
+
+      // NOTE: checking if the items actually changed here does not matter, since the onChange will have been triggered on the first selected/deselected item.
+      setSelectedItems(updatedItems);
+      if (onChange) onChange(updatedItems.map((item) => item.value));
+    } else {
+      // single value
+      // NOTE: Check if the item is actually changed, otherwise don't do anything. This prevents the dirty state from being triggered when the user clicks on the same item.
+      if (selectedItems[0]?.value !== value) {
+        setSelectedItems([{ value, label }]);
+        if (onChange) onChange(value);
+      }
+      setOpen(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+    }
+
+    // Prevent the spacebar from scrolling the page
+    if (e.key === ' ') {
+      e.preventDefault();
+    }
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent) => {
+    // select the option on spacebar
+    if (e.key === ' ' && !dataRef.current.typing) {
+      handleSelect();
+    }
+  };
+
+  return (
+    <OptionContainer
+      role="option"
+      ref={(node: any) => (listRef.current[index] = node)}
+      tabIndex={activeIndex === index ? 0 : 1}
+      isMultiSelect={multiple}
+      isActive={activeIndex === index}
+      disabled={disabled}
+      aria-disabled={disabled}
+      isGrouped={false}
+      aria-selected={activeIndex === index}
+      {...getItemProps({
+        role: 'option',
+        onClick: handleSelect,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+      })}
+    >
+      {multiple && (
+        <GenericCheckBox
+          size="tiny"
+          id={`${name}-checkbox-${index}`}
+          hasDescription={false}
+          hasError={false}
+          onChange={() => {
+            /* bubbles up tot he optionContainer which handles the selection */
+          }}
+          name={`${name}-checkbox-${index}`}
+          value={hasSelectedItem(selectedItems, { value, label })}
+        />
+      )}
+      <span style={{ marginLeft: multiple ? '10px' : 0 }}>{children}</span>{' '}
+      {!multiple && hasSelectedItem(selectedItems, { value, label }) && <StyledCheckIcon size={12} />}
+    </OptionContainer>
+  );
+};

package/src/components/inputs/selects/SubComponents/OptionGroup.tsx

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren, JSX } from 'react';
+
+export interface OptionGroupProps extends PropsWithChildren {
+  label?: string;
+  icon?: JSX.Element;
+}
+
+export const OptionGroup: FC<OptionGroupProps> = ({ children, label }) => {
+  {
+    /* This is actually never rendered, the optiongroup is build in the select fields themself*/
+  }
+  return (
+    <li>
+      {label && <div>{label}</div>}
+      <ul>{children}</ul>
+    </li>
+  );
+};

package/src/components/inputs/selects/SubComponents/index.ts

@@ -0,0 +1,10 @@
+import { Option } from './Option';
+import { OptionGroup } from './OptionGroup';
+
+export type SubComponentTypes = {
+  Option: typeof Option;
+  OptionGroup: typeof OptionGroup;
+};
+
+export { Option } from './Option';
+export { OptionGroup } from './OptionGroup';

package/src/components/inputs/selects/SubComponents/style.ts

@@ -0,0 +1,51 @@
+import { styled } from '../../../../styled';
+
+export const OptionContainer = styled.li<{
+  isActive: boolean;
+  isMultiSelect: boolean;
+  isGrouped: boolean;
+  disabled: boolean;
+}>`
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['1']}`};
+  min-height: ${({ theme }) => theme.spacing[4]};
+  cursor: default;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAlt};
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: ${({ isMultiSelect }) => (isMultiSelect ? 'flex-start' : 'space-between')};
+  transition: transform 0.15s ease-out;
+  outline: 0;
+  scroll-margin: ${({ theme }) => theme.spacing['0_75']};
+  padding-left: ${({ isGrouped, theme }) => (isGrouped ? `calc(1.7 * ${theme.spacing['2']})` : theme.spacing['1'])}};
+
+
+  &:focus {
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  &:hover {
+    border-color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAlt : theme.colors.backgroundAccent)};
+    background-color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAlt : theme.colors.backgroundAccent)};
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: ${({ theme }) => theme.spacing[1]};
+
+    span {
+      cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+      color: ${({ theme, isActive, disabled }) => {
+        if (disabled) {
+          return theme.colors.backgroundAccent;
+        }
+        if (isActive) {
+          return theme.colors.white;
+        }
+        return theme.colors.text;
+      }};
+    }
+  }
+`;

package/src/components/inputs/selects/data.ts

@@ -0,0 +1,123 @@
+export const decades = ['1990s', '2000s', '2010s', '2020s'];
+export const films = [
+  {
+    name: 'Toy Story',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg',
+    decade: '1990s',
+  },
+  {
+    name: 'A Bugs Life',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/c/cc/A_Bug%27s_Life.jpg',
+    decade: '1990s',
+  },
+  {
+    name: 'Toy Story 2',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/c/c0/Toy_Story_2.jpg',
+    decade: '1990s',
+  },
+  {
+    name: 'Monsters, Inc.',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/6/63/Monsters_Inc.JPG',
+    decade: '2000s',
+  },
+  {
+    name: 'Finding Nemo',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/2/29/Finding_Nemo.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'The Incredibles',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/2/27/The_Incredibles_%282004_animated_feature_film%29.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'Cars',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'Ratatouille',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/5/50/RatatouillePoster.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'WALL-E',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/c/c2/WALL-Eposter.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'Up',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/0/05/Up_%282009_film%29.jpg',
+    decade: '2000s',
+  },
+  {
+    name: 'Cars 2',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/7/7f/Cars_2_Poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Toy Story 3',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/6/69/Toy_Story_3_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Brave',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/9/96/Brave_Poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Monsters University',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/2/2a/Monsters_University_poster_3.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Inside Out',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/0/0a/Inside_Out_%282015_film%29_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'The Good Dinosaur',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/8/80/The_Good_Dinosaur_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Finding Dory',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/3/3e/Finding_Dory.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Cars 3',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/thumb/9/94/Cars_3_poster.jpg/220px-Cars_3_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Coco',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/9/98/Coco_%282017_film%29_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Incredibles 2',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/1/1f/Incredibles_2_%282018_animated_film%29.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Toy Story 4',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/4/4c/Toy_Story_4_poster.jpg',
+    decade: '2010s',
+  },
+  {
+    name: 'Onward',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/0/03/Onward_poster.jpg',
+    decade: '2020s',
+  },
+  {
+    name: 'Soul',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/3/39/Soul_%282020_film%29_poster.jpg',
+    decade: '2020s',
+  },
+  {
+    name: 'Luca',
+    icon: 'https://upload.wikimedia.org/wikipedia/en/3/33/Luca_%282021_film%29.png',
+    decade: '2020s',
+  },
+];

package/src/components/inputs/selects/index.tsx

@@ -0,0 +1,49 @@
+import { Children, createContext, isValidElement, ReactElement, ReactNode } from 'react';
+import { ContextData } from '@floating-ui/react';
+import { OptionProps } from './SubComponents/Option';
+
+export interface SelectItem {
+  value: string;
+  label: string;
+}
+
+interface ContextValue {
+  selectedItems: SelectItem[];
+  setSelectedItems: (item: SelectItem[]) => void;
+  activeIndex: number | null;
+  setActiveIndex: (index: number | null) => void;
+  listRef: React.MutableRefObject<Array<HTMLLIElement | null>>;
+  setOpen: (open: boolean) => void;
+  getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => any;
+  dataRef: ContextData;
+  multiple: boolean;
+  name: string;
+}
+
+export const SelectContext = createContext<ContextValue>({} as ContextValue);
+
+export const getLabelFromChildren = (children: ReactNode, value: string) => {
+  const matchedGroup = Children.toArray(children).find((group) => {
+    if (!isValidElement(group)) return false;
+    const matchedOption = Children.toArray(group.props.children)
+      .filter(isValidElement)
+      .find((option: ReactElement) => option.props.value === value);
+
+    return Boolean(matchedOption);
+  });
+
+  if (matchedGroup && isValidElement(matchedGroup)) {
+    const matchedOption = Children.toArray(matchedGroup.props.children)
+      .filter(isValidElement)
+      .find((option: ReactElement) => option.props.value === value) as ReactElement<OptionProps>;
+
+    if (matchedOption) {
+      return matchedOption.props.label;
+    }
+  }
+
+  console.error(
+    `No label found for value ${value}. This occurs when a value is passed through the defaultValue prop of useForm, but the value is not present in the options.`,
+  );
+  return undefined;
+};

package/src/components/inputs/selects/sharedStyle.ts

@@ -0,0 +1,76 @@
+import { styled } from '../../../styled';
+import { FloatingOverlay } from '@floating-ui/react';
+import { AiOutlineDown as ArrowIcon } from 'react-icons/ai';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const SelectContainer = styled.div`
+  list-style-type: none;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  outline: 0;
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  z-index: ${({ theme }) => theme.zIndex.dropdown};
+`;
+
+export const SelectButton = styled.div<{
+  readOnly: boolean;
+  disabled: boolean;
+  isOpen: boolean;
+  hasError: boolean;
+}>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  width: 100%;
+  cursor: ${({ readOnly, disabled }) => {
+    if (disabled) {
+      return 'not-allowed';
+    }
+    if (readOnly) {
+      return 'default';
+    }
+    return 'pointer';
+  }};
+
+  font-family: inherit;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['1']}`};
+  outline: 0;
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 0.1rem solid
+    ${({ theme, isOpen, hasError }) => {
+      if (hasError) return theme.colors.error;
+      return isOpen ? theme.colors.primary : theme.colors.backgroundAccent;
+    }};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  font-weight: 500;
+
+  &:focus {
+    border-color: ${({ theme, hasError, disabled }) =>
+      hasError ? theme.colors.error : disabled ? theme.colors.backgroundAccent : theme.colors.primary};
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: ${({ theme }) => theme.spacing[1]};
+  }
+
+  span {
+    display: flex;
+  }
+`;
+
+export const StyledArrowIcon = styled(ArrowIcon)``;
+
+export const StyledFloatingOverlay = styled(FloatingOverlay)`
+  width: 100%;
+  height: 100%;
+`;

package/src/components/layout/Container/index.ts

@@ -0,0 +1,21 @@
+import { Size } from '../../../styled';
+import styled from 'styled-components';
+
+export const Container = styled.div<{ size?: Size; centered?: boolean }>`
+  max-width: ${({ size }) => {
+    switch (size) {
+      case 'tiny':
+        return '640px';
+      case 'small':
+        return '768px';
+      case 'medium':
+        return '1024px';
+      case 'large':
+        return '1280px';
+      case 'huge':
+        return '1536px';
+      default:
+    }
+  }};
+  margin: ${({ centered }) => (centered ? '0 auto' : '0')};
+`;

package/src/components/layout/index.ts

@@ -0,0 +1 @@
+export { Container } from './Container';

package/src/components/navigation/HorizontalNav/HorizontalNav.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { HorizontalNav, HorizontalNavProps } from '.';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  width: 100vw;
+`;
+
+export default {
+  title: 'Navigation/HorizontalNav',
+  component: HorizontalNav,
+  args: {
+    variant: 'clear',
+  },
+} as Meta<HorizontalNavProps>;
+
+export const Default: StoryFn<HorizontalNavProps> = ({ variant }) => {
+  return (
+    <Container>
+      <HorizontalNav variant={variant}>
+        <a>overview</a>
+        <a>analytics</a>
+        <a>reports</a>
+      </HorizontalNav>
+    </Container>
+  );
+};

package/src/components/navigation/HorizontalNav/index.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+import { NavBar } from './style';
+
+export type HorizontalNavVariant = 'underline' | 'block' | 'clear';
+
+export interface HorizontalNavProps {
+  children: ReactNode;
+  variant: HorizontalNavVariant;
+}
+
+export const HorizontalNav: FC<HorizontalNavProps> = ({ children, variant }) => {
+  return <NavBar variant={variant}>{children}</NavBar>;
+};

package/src/components/navigation/HorizontalNav/style.ts

@@ -0,0 +1,93 @@
+import { styled } from '../../../styled';
+import { HorizontalNavVariant } from '.';
+import { shade } from 'polished';
+
+export const NavBar = styled.nav<{ variant: HorizontalNavVariant }>`
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing[1]};
+
+  ${({ variant, theme }) => {
+    switch (variant) {
+      case 'block':
+        return `
+          background-color: ${theme.colors.backgroundAlt}; 
+          width: fit-content;
+          padding: ${theme.spacing['0_75']} ${theme.spacing['0_75']};
+          border-radius: ${theme.borderRadius.medium};
+          border: 1px solid ${theme.colors.backgroundAccent};
+        `;
+      case 'underline':
+        return `
+          border-bottom: 1px solid ${theme.colors.backgroundAccent};
+          width: 100%;
+          padding-bottom: ${theme.spacing['0_75']};
+        `;
+      case 'clear':
+        return '';
+    }
+  }}
+
+  a {
+    position: relative;
+    ${({ variant, theme }) => {
+      switch (variant) {
+        case 'block':
+          return `
+            font-weight: bold;
+            padding: ${theme.spacing['0_75']};
+            span {
+              position: relative;
+              z-index: 10;
+            }
+          `;
+        case 'underline':
+          return `
+            font-weight: 500;
+            padding: 0 ${theme.spacing['0_75']};
+          `;
+        case 'clear':
+          return `
+          border-radius: ${theme.borderRadius.small};
+          padding: ${theme.spacing['0_5']} ${theme.spacing['0_75']};
+          font-weight: 500;
+          color: ${theme.colors.text};
+          border: 1px solid ${theme.colors.background};
+        `;
+      }
+    }}
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    color: ${({ theme }) => theme.colors.textAlt};
+    font-size: ${({ theme }) => theme.fontSize.medium};
+
+    &.active {
+      color: ${({ theme }) => theme.colors.primary};
+
+      ${({ variant, theme }) => {
+        switch (variant) {
+          case 'underline':
+            return `
+                  &:after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 0;
+        right: 0;
+        height: 1px;
+        width: 100%;
+        background-color: ${theme.colors.primary};
+      }
+      `;
+          case 'clear':
+            return `
+          background-color: ${shade('0.5', theme.colors.primary)};
+          color: white;
+          border-color: ${theme.colors.primary};
+        `;
+          case 'block':
+            return '';
+        }
+      }}
+  }
+`;

package/src/components/navigation/IconNav/IconNav.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { IconNav } from '.';
+import type { IconNavProps } from '.';
+import {
+  AiOutlineAppstore as DashboardIcon,
+  AiOutlineSetting as SettingsIcon,
+  AiOutlineFunction as ModulesIcon,
+} from 'react-icons/ai';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  width: 100vw;
+`;
+
+export default {
+  title: 'Navigation/IconNav',
+  component: IconNav,
+} as Meta<IconNavProps>;
+
+export const Default: StoryFn = () => {
+  return (
+    <Container>
+      <IconNav
+        items={[
+          {
+            title: 'option1',
+            to: '/option1',
+            icon: <DashboardIcon />,
+          },
+          {
+            title: 'option2',
+            to: '/option2',
+            icon: <SettingsIcon />,
+          },
+          {
+            title: 'option3',
+            to: '/option3',
+            icon: <ModulesIcon />,
+          },
+        ]}
+      />
+    </Container>
+  );
+};