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

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <ClipBoard /> 1`] = `
+.c0 {
+  position: relative;
+  padding: 0;
+  outline: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.c0 input {
+  width: 200px;
+  padding: 8px 30px 8px 8px;
+  border: 1px solid #d3d3d3;
+  color: #d3d3d3;
+  cursor: default;
+}
+
+.c0 input:hover {
+  cursor: default;
+}
+
+.c1 {
+  position: absolute;
+  background-color: white;
+  top: 7px;
+  right: 7px;
+}
+
+.c1 svg {
+  fill: #d3d3d3;
+  stroke: #d3d3d3;
+  cursor: pointer;
+}
+
+<div>
+  <div
+    class="c0"
+    role="button"
+    tabindex="-1"
+  >
+    <input
+      aria-describedby="clipboard-input-error"
+      aria-invalid="false"
+      readonly=""
+      type="text"
+      value="ClipBoard text"
+    />
+    <div
+      class="c1"
+    >
+      <svg
+        fill="currentColor"
+        height="20"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 1024 1024"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/other/ClipBoard/__snapshots__/ClipBoard.test.tsx.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <ClipBoard /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg kRYlLL"
+    role="button"
+    tabindex="-1"
+  >
+    <input
+      aria-describedby="clipboard-input-error"
+      aria-invalid="false"
+      readonly=""
+      type="text"
+      value="ClipBoard text"
+    />
+    <div
+      class="sc-gEvEer juIItl"
+    >
+      <svg
+        fill="currentColor"
+        height="20"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 1024 1024"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

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,110 @@
+import { FC, PropsWithChildren, ReactElement, useState } from 'react';
+import { styled } from '../../../styled';
+import { IoMdArrowDropup as ArrowUp } from 'react-icons/io';
+import { 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>}
+      <motion.div
+        style={{ maxHeight: '100%', overflowY: 'hidden' }}
+        key={`collapse-item-${title}`}
+        variants={{
+          open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'unset', visibility: 'visible' },
+          collapsed: { opacity: 0, height: 0, visibility: 'hidden' },
+        }}
+        initial="collapsed"
+        animate={isCollapsed ? 'collapsed' : 'open'}
+        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>
+    </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,29 @@
+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;
+
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: 10px 5px 0px 5px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
+  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,83 @@
+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};
+  font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+
+  ${({ open }) => {
+    if (open) {
+      return `
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-bottom: 0;
+      `;
+    }
+  }}
+
+  svg {
+    fill: ${({ theme }) => theme.colors.textAlt};
+  }
+`;
+
+export type TriggerProps = HTMLProps<HTMLElement> & PropsWithChildren<{ asChild?: boolean }>;
+export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(function CollapsibleTrigger(
+  { children, asChild },
+  ref,
+) {
+  const { setOpen, open } = useCollapsibleContext();
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  if (asChild && isValidElement(children)) {
+    const hasOnClick = children.props.onClick;
+    const mergedOnClick = () => {
+      if (hasOnClick) {
+        hasOnClick();
+      }
+      handleClick();
+    };
+
+    return cloneElement(children as ReactElement, {
+      onClick: mergedOnClick,
+      role: 'button',
+    });
+  }
+
+  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,44 @@
+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>(function Company(
+  { iconColor = 'primary', iconVisible = true, textVisible = true, to, size = 'medium' },
+  ref,
+) {
+  if (to) {
+    return (
+      <Container size={size} textVisible={textVisible} ref={ref}>
+        <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,28 @@
+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 key="new-project-button " size="medium" icon={<AddIcon />}>
+        New project
+      </Button>,
+    ],
+    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,10 @@
+import { Empty } from '.';
+import { render } from '../../../test/testUtils.tsx';
+import { expect, it } from 'vitest';
+
+it('Should render <Empty />', () => {
+  const { container } = render(
+    <Empty header="this is the header" description="this is the description" actions={[]} />,
+  );
+  expect(container).toMatchSnapshot();
+});