@takaro/lib-components 0.0.1

package/src/components/other/ClipBoard/index.tsx

@@ -0,0 +1,70 @@
+import { FC, useState, useEffect } from 'react';
+import { styled } from '../../../styled';
+import { AiOutlineCopy as CopyIcon, AiOutlineCheck as CheckmarkIcon } from 'react-icons/ai';
+import { useSnackbar } from 'notistack';
+
+const Container = styled.div<{ maxWidth: number | undefined; copied: boolean }>`
+  position: relative;
+  padding: ${({ theme }) => theme.spacing[0]};
+  outline: 0;
+  width: fit-content;
+
+  input {
+    width: ${({ maxWidth }): string => `${maxWidth}px`};
+    padding: ${({ theme }) =>
+      `${theme.spacing['0_75']} ${theme.spacing[4]} ${theme.spacing['0_75']} ${theme.spacing['0_75']}`};
+    border: 0.1rem solid ${({ copied, theme }): string => (copied ? theme.colors.primary : theme.colors.background)};
+    color: ${({ theme, copied }): string => (copied ? theme.colors.primary : theme.colors.text)};
+    cursor: default;
+
+    &:hover {
+      cursor: default;
+    }
+  }
+`;
+
+const IconContainer = styled.div<{ copied: boolean }>`
+  position: absolute;
+  top: 7px;
+  right: 7px;
+
+  svg {
+    fill: ${({ copied, theme }): string => (copied ? theme.colors.primary : theme.colors.background)};
+    stroke: ${({ copied, theme }): string => (copied ? theme.colors.primary : theme.colors.background)};
+    cursor: pointer;
+  }
+`;
+
+export interface ClipBoardProps {
+  text: string;
+  maxWidth?: number;
+}
+
+export const ClipBoard: FC<ClipBoardProps> = ({ text, maxWidth = 200 }) => {
+  const [copied, setCopied] = useState(false);
+  const { enqueueSnackbar } = useSnackbar();
+
+  function handleCopy() {
+    setCopied(true);
+    navigator.clipboard.writeText(text);
+  }
+
+  useEffect(() => {
+    /* If it was copied, show a checkmark for 2.5s thn make it possible to copy again */
+    if (copied) {
+      enqueueSnackbar('Copied to clipboard', { variant: 'default' });
+      setTimeout(() => {
+        setCopied(false);
+      }, 2500);
+    }
+  }, [copied]);
+
+  return (
+    <Container copied={copied} maxWidth={maxWidth} role="button" tabIndex={-1}>
+      <input aria-describedby="clipboard-input-error" aria-invalid="false" readOnly type="text" value={text} />
+      <IconContainer copied={copied}>
+        {copied ? <CheckmarkIcon size={20} /> : <CopyIcon onClick={handleCopy} size={20} />}
+      </IconContainer>
+    </Container>
+  );
+};

package/src/components/other/CollapseList/CollapseList.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { CollapseList } from '.';
+
+export default {
+  title: 'Other/CollapseList',
+  component: CollapseList,
+} as Meta;
+
+export const Default: StoryFn = (args) => {
+  return (
+    <CollapseList {...args}>
+      <CollapseList.Item title="Files">
+        <div> I am a container showcasing the files</div>
+      </CollapseList.Item>
+      <CollapseList.Item title="Settings">
+        <div> I am a container showcasing the settings</div>
+      </CollapseList.Item>
+    </CollapseList>
+  );
+};

package/src/components/other/CollapseList/index.tsx

@@ -0,0 +1,115 @@
+import { FC, PropsWithChildren, ReactElement, useState } from 'react';
+import { styled } from '../../../styled';
+import { IoMdArrowDropup as ArrowUp } from 'react-icons/io';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useTheme } from '../../../hooks';
+
+const StyledList = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  & > *:not(:last-child) {
+    flex-shrink: 0;
+  }
+
+  & > div:last-child {
+    min-height: 0;
+    flex-grow: 1;
+  }
+`;
+
+export const CollapseList: FC<PropsWithChildren> & {
+  Item: FC<PropsWithChildren<ItemProps>>;
+} = ({ children }) => {
+  return <StyledList role="tree">{children}</StyledList>;
+};
+
+interface ItemProps {
+  collapsed?: boolean;
+  title: string | ReactElement;
+  description?: string;
+}
+
+const Header = styled.div<{ isCollapsed: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  min-height: 4rem;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  margin-bottom: ${({ theme, isCollapsed }) => (isCollapsed ? theme.spacing['0_75'] : 0)};
+
+  h3 {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    svg {
+      transform: none;
+    }
+  }
+
+  svg {
+    transform: ${({ isCollapsed }) => (isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)')};
+    transition: transform 0.1s ease-in-out;
+  }
+`;
+
+const Item: FC<PropsWithChildren<ItemProps>> = ({ collapsed = false, title, children, description }) => {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        width: '100%',
+      }}
+      role="treeitem"
+    >
+      <Header isCollapsed={isCollapsed} onClick={() => setIsCollapsed((prev) => !prev)}>
+        <h3>{title}</h3>
+        <ArrowUp size={18} />
+      </Header>
+      {description && <p>{description}</p>}
+      <AnimatePresence>
+        {!isCollapsed && (
+          <motion.div
+            style={{ maxHeight: '100%', overflowY: 'hidden' }}
+            key={`collapse-item-${title}`}
+            variants={{
+              open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'auto' },
+              collapsed: { opacity: 0, height: 0 },
+            }}
+            initial="collapsed"
+            animate="open"
+            exit="collapsed"
+            transition={{ duration: 0.125, ease: 'linear' }}
+          >
+            <motion.div
+              variants={{
+                open: { y: 0 },
+                collapsed: { y: -6 },
+              }}
+              transition={{ duration: 0.125, ease: 'linear' }}
+              style={{
+                transformOrigin: 'top center',
+                padding: `${theme.spacing['0_75']} ${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['1']}`,
+              }}
+            >
+              {children}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+CollapseList.Item = Item;

package/src/components/other/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Collapsible, CollapsibleProps } from '.';
+
+export default {
+  title: 'Other/Collapsible',
+  component: Collapsible,
+} as Meta<CollapsibleProps>;
+
+export const Default: StoryFn<CollapsibleProps> = () => {
+  return (
+    <Collapsible>
+      <Collapsible.Trigger>I am the trigger</Collapsible.Trigger>
+      <Collapsible.Content>
+        <div> I am a container showcasing the files</div>
+      </Collapsible.Content>
+    </Collapsible>
+  );
+};

package/src/components/other/Collapsible/CollapsibleContent.tsx

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren } from 'react';
+import { useCollapsibleContext } from './CollapsibleContext';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacing['1']};
+  hyphens: auto;
+
+  p {
+    hypens: auto;
+  }
+`;
+
+export const CollapsibleContent: FC<PropsWithChildren> = ({ children }) => {
+  const { open } = useCollapsibleContext();
+
+  if (!open) {
+    return null;
+  }
+
+  return <Container aria-expanded={open}>{children}</Container>;
+};

package/src/components/other/Collapsible/CollapsibleContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+type ContextType = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} | null;
+
+export const CollapsibleContext = createContext<ContextType>(null);
+
+export const useCollapsibleContext = () => {
+  const context = useContext(CollapsibleContext);
+
+  if (context == null) {
+    throw new Error('collapsible components must be wrapped in <Collapsible />');
+  }
+  return context;
+};

package/src/components/other/Collapsible/CollapsibleTrigger.tsx

@@ -0,0 +1,67 @@
+import {
+  cloneElement,
+  ForwardedRef,
+  forwardRef,
+  HTMLProps,
+  isValidElement,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { useCollapsibleContext } from './CollapsibleContext';
+import { AiOutlineCaretRight as ArrowRight, AiOutlineCaretDown as ArrowDown } from 'react-icons/ai';
+import { styled } from '../../../styled';
+
+const Container = styled.button<{ open: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  width: 100%;
+  color: ${({ theme }) => theme.colors.text};
+  padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing['1']}`};
+  margin-bottom: ${({ theme, open }) => (!open ? theme.spacing['1'] : theme.spacing['0_5'])};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  color: ${({ theme }) => theme.colors.textAlt};
+
+  svg {
+    fill: ${({ theme }) => theme.colors.textAlt};
+  }
+`;
+
+export type TriggerProps = HTMLProps<HTMLElement> & PropsWithChildren<{ asChild?: boolean }>;
+export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(({ children, asChild }, ref) => {
+  const { setOpen, open } = useCollapsibleContext();
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  if (asChild && isValidElement(children)) {
+    const existingOnClick = children.props.onClick;
+    const mergedOnClick = () => {
+      existingOnClick && existingOnClick();
+      handleClick();
+    };
+
+    return cloneElement(children as ReactElement, {
+      onClick: mergedOnClick,
+      role: 'button',
+    });
+  } else {
+  }
+
+  return (
+    <Container
+      open={open}
+      type="button"
+      onClick={handleClick}
+      aria-expanded={open}
+      tabIndex={0}
+      ref={ref as ForwardedRef<HTMLButtonElement>}
+    >
+      {children}
+      {open === false && <ArrowRight size={12} />}
+      {open === true && <ArrowDown size={12} />}
+    </Container>
+  );
+});

package/src/components/other/Collapsible/index.tsx

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren, useState } from 'react';
+import { CollapsibleContext } from './CollapsibleContext';
+import { CollapsibleContent } from './CollapsibleContent';
+import { CollapsibleTrigger } from './CollapsibleTrigger';
+
+interface SubComponent {
+  Trigger: typeof CollapsibleTrigger;
+  Content: typeof CollapsibleContent;
+}
+
+export type CollapsibleProps = PropsWithChildren<{ open?: boolean }>;
+
+export const Collapsible: FC<CollapsibleProps> & SubComponent = ({ children, open = false }) => {
+  const [isOpen, setIsOpen] = useState(open);
+  return (
+    <CollapsibleContext.Provider value={{ open: isOpen, setOpen: setIsOpen }}>{children}</CollapsibleContext.Provider>
+  );
+};
+
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;

package/src/components/other/Company/index.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react';
+import { Link } from '@tanstack/react-router';
+import { Container, Svg } from './style';
+import { Color, Size } from '../../../styled';
+
+export interface CompanyProps {
+  iconVisible?: boolean;
+  iconColor?: Color;
+  textColor?: Color;
+  textVisible?: boolean;
+  size?: Size;
+  to?: string;
+}
+
+export const Company = forwardRef<HTMLDivElement, CompanyProps>(
+  ({ iconColor = 'primary', iconVisible = true, textVisible = true, to, size = 'medium' }, ref) => {
+    if (to) {
+      return (
+        <Container size={size} textVisible={textVisible} ref={ref}>
+          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+          {/* @ts-ignore reusable link */}
+          <Link to={to}>
+            {iconVisible && (
+              <Svg color={iconColor} size={size} viewBox="0 0 512 512">
+                <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
+              </Svg>
+            )}
+            {textVisible && <div>Takaro</div>}
+          </Link>
+        </Container>
+      );
+    }
+
+    return (
+      <Container size={size} textVisible={textVisible} ref={ref}>
+        {iconVisible && (
+          <Svg color={iconColor} size={size} viewBox="0 0 512 512">
+            <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
+          </Svg>
+        )}
+        {textVisible && <div>Takaro</div>}
+      </Container>
+    );
+  }
+);

package/src/components/other/Company/style.ts

@@ -0,0 +1,58 @@
+import { Color, Size, styled } from '../../../styled';
+
+export const Container = styled.div<{ textVisible?: boolean; size: Size }>`
+  display: flex;
+  align-items: center;
+  justify-content: ${({ textVisible }) => (textVisible ? 'center' : 'flex-start')};
+  flex-direction: row;
+
+  gap: ${({ theme, textVisible }) => (textVisible ? theme.spacing['1'] : theme.spacing[0])};
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+  }
+
+  div {
+    font-weight: 700;
+    color: ${({ theme }): string => theme.colors.text};
+
+    font-size: ${({ size }) => {
+      switch (size) {
+        case 'tiny':
+          return '1.5rem';
+        case 'small':
+          return '2rem';
+        case 'medium':
+          return '3rem';
+        case 'large':
+          return '4rem';
+        case 'huge':
+          return '5rem';
+      }
+    }};
+  }
+`;
+
+export const Svg = styled.svg<{
+  size: Size;
+  color: Color;
+}>`
+  ${({ size }) => {
+    switch (size) {
+      case 'tiny':
+        return 'width: 1.5rem; height: 1.5rem;';
+      case 'small':
+        return 'width: 2rem; height: 2rem';
+      case 'medium':
+        return 'width: 3rem; height: 3rem;';
+      case 'large':
+        return 'width: 4rem; height: 4rem;';
+      case 'huge':
+        return 'width: 5rem; height: 5rem;';
+    }
+  }};
+  fill: ${({ theme, color }): string => theme.colors[color]};
+`;

package/src/components/other/Empty/Empty.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Empty, EmptyPage, EmptyProps } from '.';
+import { Button } from '../../../components';
+import { AiOutlinePlus as AddIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Other/Empty',
+  component: Empty,
+  args: {
+    header: 'Earn recurring revenue',
+    description: 'Subscriptions allow you to grow recurring revenue by charging subscribers on a regular basis',
+    actions: [<Button size="medium" icon={<AddIcon />} text="New project" />],
+    size: 'medium',
+  },
+} as Meta<EmptyProps>;
+
+export const Default: StoryFn<EmptyProps> = (args) => {
+  return (
+    <EmptyPage>
+      <Empty {...args} />
+    </EmptyPage>
+  );
+};

package/src/components/other/Empty/Empty.test.tsx

@@ -0,0 +1,7 @@
+import { Empty } from '.';
+import { render } from 'test-utils';
+
+it('Should render <Empty />', () => {
+  const { container } = render(<Empty />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/other/Empty/Empty.test.tsx.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Empty /> 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.7rem;
+}
+
+.c1 {
+  height: 40px;
+  margin-bottom: 1rem;
+}
+
+.c1 svg {
+  height: 100%;
+  margin: auto;
+}
+
+.c2 {
+  color: #d3d3d3;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        class="ant-empty-img-simple"
+        height="41"
+        viewBox="0 0 64 41"
+        width="64"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fill-rule="evenodd"
+          transform="translate(0 1)"
+        >
+          <ellipse
+            cx="32"
+            cy="33"
+            fill="#f5f5f5"
+            rx="32"
+            ry="7"
+          />
+          <g
+            fill="#d9d9d9"
+            fill-rule="nonzero"
+          >
+            <path
+              d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+            />
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="#fafafa"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class="c2"
+    >
+      No Data
+    </div>
+  </div>
+</div>
+`;

package/src/components/other/Empty/index.tsx

@@ -0,0 +1,87 @@
+import { FC, ReactElement } from 'react';
+import { Size, styled } from '../../../styled';
+import { AiOutlineContainer as Icon } from 'react-icons/ai';
+
+const Container = styled.div<{ size: Size }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 600px;
+
+  svg {
+    fill: ${({ theme }) => theme.colors.primary};
+  }
+
+  ${({ size }) => {
+    switch (size) {
+      case 'tiny':
+        return `
+          padding: 0.225rem;
+          border-radius: 0.5rem;
+        `;
+      case 'small':
+        return `
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+        `;
+      case 'medium':
+        return `
+          padding: 2rem;
+          border-radius: .7rem
+        `;
+      case 'large':
+        return `
+          padding: 6rem;
+          border-radius: .8rem
+        `;
+      case 'huge':
+        return `
+          border-radius: 1rem;
+          padding: 10rem 12rem
+        `;
+    }
+  }};
+`;
+
+const ActionContainer = styled.div`
+  display: grid;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing[2]};
+  justify-content: center;
+  align-content: center;
+  grid-auto-rows: auto;
+  grid-auto-flow: column;
+`;
+
+const Description = styled.p`
+  max-width: 300px;
+  margin: 0.5rem auto 1rem auto;
+  color: ${({ theme }) => theme.colors.textAlt};
+  text-align: center;
+`;
+
+export const EmptyPage = styled.div`
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  width: 100%;
+`;
+
+export interface EmptyProps {
+  header: string;
+  description: string;
+  actions: ReactElement[];
+  size?: Size;
+}
+
+export const Empty: FC<EmptyProps> = ({ description = 'No Data', header, actions, size = 'medium' }) => {
+  return (
+    <Container size={size}>
+      <Icon size={40} />
+      <h2>{header}</h2>
+      <Description>{description}</Description>
+      <ActionContainer>{actions}</ActionContainer>
+    </Container>
+  );
+};