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

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/Steppers/useStepper.ts

@@ -0,0 +1,34 @@
+import { useCallback, useContext } from 'react';
+import { StepperContext } from './context';
+import { stepTypes } from './reducer';
+import { ReactNode } from '@tanstack/react-router';
+
+export const useStepper = () => {
+  const [state, dispatch] = useContext(StepperContext);
+  const { currentStep, steps } = state;
+
+  if (!StepperContext) {
+    throw new Error('useStepper should be used inside StepperProvider');
+  }
+
+  // callback hooks otherwise we remake these fns on every change.
+  const incrementCurrentStep = useCallback(() => dispatch({ type: stepTypes.INCREMENT_CURRENT_STEP }), [dispatch]);
+  const decrementCurrentStep = useCallback(() => dispatch({ type: stepTypes.DECREMENT_CURRENT_STEP }), [dispatch]);
+  const setSteps = useCallback(
+    (steps: ReactNode[]) => dispatch({ type: stepTypes.SET_STEPS, payload: { steps } }),
+    [dispatch],
+  );
+  const setCurrentStep = useCallback(
+    (amount: number) => dispatch({ type: stepTypes.SET_CURRENT_STEP, payload: { amount } }),
+    [dispatch],
+  );
+
+  return {
+    incrementCurrentStep,
+    decrementCurrentStep,
+    setSteps,
+    setCurrentStep,
+    currentStep,
+    steps,
+  };
+};

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

@@ -0,0 +1,39 @@
+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>>(function TabsContent(
+  { 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,66 @@
+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>>(function TabsTrigger(
+  { 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,17 @@
+export { Stepper } from './Steppers/Stepper';
+export type { StepperProps } from './Steppers/Stepper';
+
+export { SlimStepper } from './Steppers/SlimStepper';
+export type { SlimStepperProps } from './Steppers/SlimStepper';
+
+export { StepperProvider } from './Steppers/provider';
+export { useStepper } from './Steppers/useStepper';
+
+export { IconNav } from './IconNav';
+export type { IconNavProps } from './IconNav';
+
+export { HorizontalNav } from './HorizontalNav';
+export type { HorizontalNavProps } from './HorizontalNav';
+
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';

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

@@ -0,0 +1,81 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Action, ActionMenu, ActionMenuProps } from '.';
+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');
+              }}
+            >
+              action 1
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 2 fired');
+              }}
+            >
+              action 2
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 3 fired');
+              }}
+            >
+              action 3
+            </Action>
+            <Action
+              onClick={() => {
+                console.log('action 4 fired');
+              }}
+            >
+              action 4
+            </Action>
+          </ActionMenu>
+        )}
+      </ParentContainer>
+    </>
+  );
+};

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

@@ -0,0 +1,62 @@
+import { Children, forwardRef, FC, ReactElement, PropsWithChildren } from 'react';
+import { Container, Item } from './style';
+import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
+
+export interface ActionMenuProps {
+  attributes: {
+    x: number | null;
+    y: number | null;
+    strategy: 'absolute' | 'fixed';
+  };
+  selected: number;
+  setSelected: (selected: number) => void;
+  children: ReactElement | ReactElement[];
+}
+
+export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function ActionMenu(
+  { attributes, children, selected, setSelected },
+  ref,
+) {
+  return (
+    <Container
+      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
+          aria-disabled={child.props.disabled}
+          onClick={() => {
+            if (child.props.disabled) {
+              return;
+            }
+            setSelected(idx);
+          }}
+        >
+          {child}
+          {selected === idx ? (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <CheckMarkIcon className="checkmark" size={15} />
+            </div>
+          ) : (
+            <div className="checkmark-placeholder" />
+          )}
+        </Item>
+      ))}
+    </Container>
+  );
+});
+
+interface ActionProps {
+  onClick: () => unknown;
+  text: string;
+  disabled?: boolean;
+}
+
+export const Action: FC<PropsWithChildren<ActionProps>> = ({ children, disabled = false }) => {
+  const _ = disabled;
+  return children;
+};

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

@@ -0,0 +1,47 @@
+import { styled } from '../../../styled';
+
+export const Container = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  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.checkmark {
+      fill: white;
+    }
+  }
+
+  svg.checkmark {
+    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,8 @@
+import { ClipBoard } from '.';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
+
+it('Should render <ClipBoard />', () => {
+  const { container } = render(<ClipBoard text="ClipBoard text" />);
+  expect(container).toMatchSnapshot();
+});