@takaro/lib-components 0.0.1

package/src/components/navigation/Steppers/reducer.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+export enum stepTypes {
+  SET_STEPS = 'SET_STEPS',
+  SET_CURRENT_STEP = 'SET_CURRENT_STEP',
+  INCREMENT_CURRENT_STEP = 'INCREMENT_CURRENT_STEP',
+  DECREMENT_CURRENT_STEP = 'DECREMNT_CURRENT_STEP',
+}
+
+export type StepperState = {
+  steps: ReactNode[];
+  currentStep: number;
+};
+
+export const defaultStepperState: StepperState = {
+  steps: [],
+  currentStep: 0,
+};
+
+export type ReducerAction =
+  | { type: stepTypes.SET_STEPS; payload: { steps: any } }
+  | { type: stepTypes.SET_CURRENT_STEP; payload: { amount: number } }
+  | { type: stepTypes.INCREMENT_CURRENT_STEP; payload: null }
+  | { type: stepTypes.DECREMENT_CURRENT_STEP; payload: null };
+
+export const reducer = (state: StepperState, action: ReducerAction) => {
+  switch (action.type) {
+    case stepTypes.SET_CURRENT_STEP:
+      return {
+        ...state,
+        currentStep: action.payload.amount,
+      };
+    case stepTypes.SET_STEPS:
+      return {
+        ...state,
+        steps: action.payload?.steps,
+      };
+    case stepTypes.INCREMENT_CURRENT_STEP:
+      return {
+        ...state,
+        currentStep: state.currentStep < state.steps.length - 1 ? state.currentStep + 1 : state.currentStep,
+      };
+    case stepTypes.DECREMENT_CURRENT_STEP:
+      return {
+        ...state,
+        currentStep: state.currentStep > 0 ? state.currentStep - 1 : state.currentStep,
+      };
+    default:
+      return state;
+  }
+};

package/src/components/navigation/Steppers/stepStates.ts

@@ -0,0 +1,5 @@
+export enum StepStates {
+  COMPLETE = 'COMPLETE',
+  CURRENT = 'CURRENT',
+  OTHER = 'OTHER',
+}

package/src/components/navigation/Tabs/Content.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+import { useTabsContext } from './Context';
+import { motion } from 'framer-motion';
+
+const Container = styled(motion.div)`
+  padding: ${({ theme }) => theme.spacing['2']};
+`;
+
+interface ContentProps {
+  value: string;
+}
+
+const variants = {
+  visible: { opacity: 1, x: 0 },
+  hidden: { opacity: 0, x: '20px' },
+};
+
+export const Content = forwardRef<HTMLDivElement, PropsWithChildren<ContentProps>>(({ children, value }, ref) => {
+  const { value: selectedValue } = useTabsContext();
+
+  const isHidden = value !== selectedValue;
+
+  return (
+    <Container
+      ref={ref}
+      role="tabpanel"
+      aria-labelledby={`tab-content-${value}`}
+      hidden={isHidden}
+      animate={isHidden ? 'hidden' : 'visible'}
+      variants={variants}
+    >
+      {children}
+    </Container>
+  );
+});

package/src/components/navigation/Tabs/Context.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+import { useTabs } from './useTabs';
+
+type ContextType =
+  | (ReturnType<typeof useTabs> & {
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    })
+  | null;
+
+export const TabsContext = createContext<ContextType>(null);
+
+export const useTabsContext = () => {
+  const context = useContext(TabsContext);
+
+  if (context == null) {
+    throw new Error('tabs components must be wrapped in <Tabs /> component');
+  }
+
+  return context;
+};

package/src/components/navigation/Tabs/List.tsx

@@ -0,0 +1,17 @@
+/// Contains the triggers that are aligend along the edge of the active content
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.background};
+`;
+
+export const List: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <Container role="tablist" aria-orientation="horizontal">
+      {children}
+    </Container>
+  );
+};

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

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Tabs, TabsProps } from '.';
+import { styled } from '../../../styled';
+import { Empty, IconButton, Popover } from '../../../components';
+import { AiOutlineTag as TagIcon } from 'react-icons/ai';
+
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export default {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  args: {
+    placement: 'bottom',
+  },
+} as Meta<TabsProps>;
+
+export const UnControlled: StoryFn<TabsProps> = () => (
+  <Wrapper>
+    <Tabs defaultValue="tab1">
+      <Tabs.List>
+        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab1">
+        <h1>Content 1</h1>
+        <p>some long content here</p>
+      </Tabs.Content>
+      <Tabs.Content value="tab2">
+        <h1>Content 2</h1>
+        <p>some long content here</p>
+      </Tabs.Content>
+    </Tabs>
+  </Wrapper>
+);
+
+const InnerContent = styled.div`
+  min-width: 600px;
+`;
+
+export const PopOver: StoryFn<TabsProps> = () => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <IconButton icon={<TagIcon />} onClick={() => setOpen(!open)} ariaLabel="open popover" />
+      </Popover.Trigger>
+      <Popover.Content>
+        <Tabs defaultValue="tab1">
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Local</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Lambda</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
+            <InnerContent>
+              <Empty
+                header="No local environment set up"
+                description="You can set up a local environment by running the following command in your terminal:"
+                actions={[]}
+              />
+            </InnerContent>
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
+            <InnerContent>
+              <h3>Content 2</h3>
+              <p>some long content here</p>
+            </InnerContent>
+          </Tabs.Content>
+        </Tabs>
+      </Popover.Content>
+    </Popover>
+  );
+};
+
+const EditorContent = styled.div`
+  padding: ${({ theme }) => theme.spacing['2']};
+`;
+
+const Container = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const Editor: StoryFn<TabsProps> = () => {
+  return (
+    <Container>
+      <Tabs defaultValue="hello-world.ts">
+        <Tabs.List>
+          <Tabs.Trigger value="hello-world.ts">hello-world.ts</Tabs.Trigger>
+          <Tabs.Trigger value="hello-world.test.ts">hello-world.test.ts</Tabs.Trigger>
+          <Tabs.Trigger value="tsconfig.json">tsconfig.json</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="hello-world.ts">
+          <EditorContent>
+            <h1>hello-world.ts</h1>
+            <p>some long content here</p>
+          </EditorContent>
+        </Tabs.Content>
+        <Tabs.Content value="hello-world.test.ts">
+          <EditorContent>
+            <pre>
+              <code>const helloWorld = 'hello world'</code>
+            </pre>
+          </EditorContent>
+        </Tabs.Content>
+        <Tabs.Content value="tsconfig.json">
+          <EditorContent>
+            <pre>
+              <code>const helloWorld = 'hello world'</code>
+            </pre>
+          </EditorContent>
+        </Tabs.Content>
+      </Tabs>
+    </Container>
+  );
+};

package/src/components/navigation/Tabs/Trigger.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+import { useTabsContext } from './Context';
+import { motion } from 'framer-motion';
+
+const Container = styled(motion.button)<{ isActive: boolean }>`
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  padding: ${({ theme }) => `${theme.spacing['1']} 0`};
+  border-radius: 0;
+  border-bottom: 1px solid
+    ${({ theme, isActive }) => (isActive ? theme.colors.background : theme.colors.backgroundAccent)};
+
+  &:first-child {
+    border-top-left-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+  &:last-child {
+    border-top-right-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+
+  color: ${({ theme, isActive }) => (isActive ? theme.colors.text : theme.colors.textAlt)};
+
+  ${({ theme, isActive }) => {
+    if (!isActive) return;
+
+    return `
+        border-left: 1px solid ${theme.colors.backgroundAccent};
+        border-right: 1px solid ${theme.colors.backgroundAccent};
+      `;
+  }}
+`;
+
+interface TriggerProps {
+  value: string;
+  asChild?: boolean;
+  disabled?: boolean;
+}
+
+export const Trigger = forwardRef<HTMLButtonElement, PropsWithChildren<TriggerProps>>(
+  ({ children, disabled, value }, ref) => {
+    const { setValue, value: selectedValue } = useTabsContext();
+
+    const handleClick = () => {
+      if (disabled) return;
+      setValue(value);
+    };
+
+    const isActive = value === selectedValue;
+
+    return (
+      <Container
+        role="tab"
+        ref={ref}
+        onClick={handleClick}
+        disabled={disabled}
+        isActive={isActive}
+        aria-selected={isActive}
+        aria-controls={`tab-content-${value}`}
+      >
+        {children}
+      </Container>
+    );
+  }
+);

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

@@ -0,0 +1,35 @@
+import { PropsWithChildren, FC } from 'react';
+import { Trigger } from './Trigger';
+import { Content } from './Content';
+import { List } from './List';
+import { useTabs } from './useTabs';
+import { TabsContext } from './Context';
+import { styled } from '../../../styled';
+
+const Container = styled.div``;
+
+export interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  // activitationMode?: 'automatic' | 'manual';
+}
+
+interface SubComponents {
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  List: typeof List;
+}
+
+export const Tabs: FC<PropsWithChildren<TabsProps>> & SubComponents = ({ children, ...rest }) => {
+  const tabs = useTabs(rest);
+  return (
+    <TabsContext.Provider value={tabs}>
+      <Container>{children}</Container>
+    </TabsContext.Provider>
+  );
+};
+
+Tabs.Trigger = Trigger;
+Tabs.Content = Content;
+Tabs.List = List;

package/src/components/navigation/Tabs/useTabs.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+interface TabsOptions {
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  // activitationMode: 'automatic' | 'manual';
+}
+
+export function useTabs({ defaultValue = '', onValueChange }: TabsOptions) {
+  const [value, setValue] = useState<string>(defaultValue);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (onValueChange) {
+      onValueChange(value);
+    }
+  }, [value]);
+
+  return {
+    value,
+    setValue,
+    labelId,
+    descriptionId,
+    setLabelId,
+    setDescriptionId,
+  };
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,16 @@
+export { Stepper } from './Steppers/Stepper';
+export type { StepperProps } from './Steppers/Stepper';
+
+export { SlimStepper } from './Steppers/SlimStepper';
+export type { SlimStepperProps } from './Steppers/SlimStepper';
+
+export { StepperProvider, useStepper } from './Steppers/context';
+
+export { IconNav } from './IconNav';
+export type { IconNavProps } from './IconNav';
+
+export { HorizontalNav } from './HorizontalNav';
+export type { HorizontalNavProps, HorizontalNavLink } from './HorizontalNav';
+
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';

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

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Action, ActionMenu, ActionMenuProps } from '.';
+import { useEffect, useState } from 'react';
+import { styled } from '../../../styled';
+import { useOutsideAlerter } from '../../../hooks';
+import { useFloating } from '@floating-ui/react';
+
+export default {
+  title: 'Other/ActionMenu',
+  component: ActionMenu,
+} as Meta<ActionMenuProps>;
+
+const Reference = styled.div`
+  width: 200px;
+  margin: 0 auto;
+  background-color: orange;
+`;
+const ParentContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  width: 50%;
+  margin: 0 auto;
+  height: 30vh;
+`;
+
+export const Default: StoryFn<ActionMenuProps> = () => {
+  const [visible, setVisible] = useState(false);
+  const { x, y, refs, strategy } = useFloating();
+  const [selected, setSelected] = useState<number>(0);
+  const parentRef = useRef<HTMLDivElement>(null);
+  useOutsideAlerter(parentRef, () => {
+    setVisible(false);
+  });
+
+  useEffect(() => {
+    setVisible(false);
+  }, [selected]);
+
+  return (
+    <>
+      If you click outside of the gray parent component the popup will be closed. The popup is positioned based on the
+      reference element.
+      <ParentContainer ref={parentRef}>
+        <Reference onClick={() => setVisible(true)} ref={refs.setReference}>
+          reference element
+        </Reference>
+        {visible && (
+          <ActionMenu selectedState={[selected, setSelected]} attributes={{ x, y, strategy }} ref={refs.setFloating}>
+            <Action
+              onClick={() => {
+                console.log('action 1 fired');
+              }}
+              text="action 1"
+            >
+              action 1
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 2 fired');
+              }}
+              text="action 2"
+            >
+              action 2
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 3 fired');
+              }}
+              text="action 3"
+            >
+              action 3
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 4 fired');
+              }}
+              text="action 4"
+            >
+              action 4
+            </Action>
+          </ActionMenu>
+        )}
+      </ParentContainer>
+    </>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { Children, forwardRef, Dispatch, FC, ReactElement, SetStateAction, PropsWithChildren } from 'react';
+import { Container, Item } from './style';
+import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
+import { Elevation } from '../../../styled/';
+
+export interface ActionMenuProps {
+  attributes: {
+    x: number | null;
+    y: number | null;
+    strategy: 'absolute' | 'fixed';
+  };
+  selectedState: [number, Dispatch<SetStateAction<number>>];
+  children: ReactElement | ReactElement[];
+  elevation?: Elevation;
+}
+
+export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(
+  ({ attributes, children, selectedState, elevation = 4 }, ref) => {
+    const [selected, setSelected] = selectedState;
+
+    return (
+      <Container
+        elevation={elevation}
+        style={{
+          position: attributes.strategy,
+          top: attributes.y ? attributes.y + 5 : 0,
+          left: attributes.x ?? 0,
+        }}
+        ref={ref}
+      >
+        {Children.map(children, (child: ReactElement<ActionProps>, idx) => (
+          <Item onClick={() => setSelected(idx)}>
+            {child}
+            {selected === idx ? (
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <CheckMarkIcon size={15} />
+              </div>
+            ) : (
+              <div className="checkmark-placeholder"></div>
+            )}
+          </Item>
+        ))}
+      </Container>
+    );
+  }
+);
+
+interface ActionProps {
+  onClick: () => unknown;
+  text: string;
+  // TODO: implement disabled when needed
+}
+export const Action: FC<PropsWithChildren<ActionProps>> = ({ children }) => {
+  return <div>{children}</div>;
+};

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

@@ -0,0 +1,48 @@
+import { Elevation, styled } from '../../../styled';
+
+export const Container = styled.ul<{ elevation: Elevation }>`
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  box-shadow: ${({ theme, elevation }) => theme.elevation[elevation]};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const Item = styled.li`
+  display: grid;
+  grid-template-columns: ${({ theme }) => `1fr ${theme.spacing[3]}`};
+  align-content: center;
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  cursor: pointer;
+
+  &:first-child {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+  &:last-child {
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+  }
+
+  p {
+    color: ${({ theme }): string => theme.colors.secondary};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    * {
+      color: white;
+    }
+
+    svg {
+      fill: white;
+    }
+  }
+
+  svg {
+    margin-left: ${({ theme }) => theme.spacing[1]};
+    fill: ${({ theme }): string => theme.colors.text};
+  }
+`;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ClipBoard, ClipBoardProps } from '.';
+
+export default {
+  title: 'Other/ClipBoard',
+  component: ClipBoard,
+  args: {
+    text: 'https://docs.csmm.app/en/CSMM/advanced-feature-guide-chathook.html#creating-the-listen-hook-for-specific-content-in-a-chatmessage',
+    maxWidth: 500,
+  },
+} as Meta<ClipBoardProps>;
+
+export const Default: StoryFn<ClipBoardProps> = (args) => <ClipBoard {...args} />;

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

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

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>
+`;