@takaro/lib-components 0.0.1

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

@@ -0,0 +1,49 @@
+import { FC, cloneElement } from 'react';
+import { styled } from '../../../styled';
+import { Link, LinkProps } from '@tanstack/react-router';
+import { Tooltip } from '../../../components';
+
+const Container = styled.nav`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid ${({ theme }) => theme.colors.background};
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: ${({ theme }) => theme.spacing[1]};
+    border: 1px solid transparent;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.primaryShade};
+      border-color: ${({ theme }) => theme.colors.primary};
+    }
+  }
+`;
+
+export interface IconNavProps {
+  items: { icon: JSX.Element; link: LinkProps; title: string }[];
+}
+
+export const IconNav: FC<IconNavProps> = ({ items }) => {
+  return (
+    <Container>
+      {items.map(({ link, icon, title }, index) => (
+        <Tooltip placement="right" key={`icon-${title}-${index}`}>
+          <Tooltip.Trigger asChild>
+            {/*eslint-disable-next-line @typescript-eslint/ban-ts-comment*/}
+            {/*@ts-ignore reusable link*/}
+            <Link key={`icon-nav-${title}`} {...link}>
+              {cloneElement(icon, { size: 24 })}
+            </Link>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{title}</Tooltip.Content>
+        </Tooltip>
+      ))}
+    </Container>
+  );
+};

package/src/components/navigation/Steppers/SlimStepper/Stepper.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../../styled';
+import { useStepper } from '../context';
+import { Button, SlimStepper, SlimStepperProps } from '../../../../components';
+
+export default {
+  /** useStepper requires a context provider which is (currently) mounted on the root of the application.
+   *  <StepperProvider /> requires no parameters.
+   */
+  title: 'Navigation/SlimStepper',
+  component: SlimStepper,
+} as Meta<SlimStepperProps>;
+
+const StepBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  p,
+  button {
+    margin-bottom: 1rem;
+  }
+`;
+
+export const Numbers: StoryFn = () => {
+  const { incrementCurrentStep, decrementCurrentStep } = useStepper();
+
+  return (
+    <SlimStepper showTooltip="always">
+      <SlimStepper.Steps>
+        <SlimStepper.Step id="first" name="step 1">
+          <StepBody>
+            <p>Step 1</p>
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="second" name="step 2">
+          <StepBody>
+            <p>Step 2</p>
+            <Button onClick={decrementCurrentStep} text="previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="third" name="step 3">
+          <StepBody>
+            <p>Step 3</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="fourth" name="step 4">
+          <StepBody>
+            <p>Step 4</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="fifth" name="step 5">
+          <StepBody>
+            <p>Step 5</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="sixth" name="step 6">
+          <StepBody>
+            <p>Step 6</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="seventh" name="step 7">
+          <StepBody>
+            <p>Step 7</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </SlimStepper.Step>
+        <SlimStepper.Step id="eight" name="step 8">
+          <StepBody>
+            <p>Step 8</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+          </StepBody>
+        </SlimStepper.Step>
+      </SlimStepper.Steps>
+    </SlimStepper>
+  );
+};

package/src/components/navigation/Steppers/SlimStepper/index.tsx

@@ -0,0 +1,104 @@
+import { FC, useEffect, Children, isValidElement, PropsWithChildren } from 'react';
+import { Tooltip } from '../../../../components';
+import { useStepper } from '../context';
+import { Container, StepperBody, StepperHeader, StepperHeaderItem, Dot } from './style';
+import { StepStates } from '../stepStates';
+
+/* Dot behavior components */
+// wrapper <StepperSteps/> component around the multiple <step/>
+const StepperSteps: FC<PropsWithChildren<void>> = ({ children }) => {
+  const { currentStep, steps, setSteps } = useStepper();
+
+  useEffect(() => {
+    const stepperSteps = Children.toArray(children)
+      .filter((step) => isValidElement(step) && typeof step.type !== 'string' && step.type.name === 'StepperStep')
+      .map((step) => {
+        if (isValidElement(step)) {
+          return step.props;
+        }
+        return null;
+      });
+    setSteps(stepperSteps);
+  }, [setSteps, currentStep]);
+
+  return (
+    <div>
+      {children &&
+        Children.map(
+          children,
+          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child
+        )}
+    </div>
+  );
+};
+
+// Single <step/> subcomponent
+interface StepProps {
+  /// used as tooltip content
+  name: string;
+  id: string;
+}
+const StepperStep: FC<PropsWithChildren<StepProps>> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export interface SlimStepperProps {
+  canStepBack?: boolean; // disable step back via step header
+  showTooltip?: 'never' | 'always' | 'hover';
+}
+
+// Main <Stepper/> component which contains subcomponents
+export const SlimStepper: FC<PropsWithChildren<SlimStepperProps>> & {
+  Step: FC<StepProps>;
+  Steps: FC<PropsWithChildren<void>>;
+} = ({ showTooltip = 'hover', canStepBack = true, children }) => {
+  const { currentStep, steps, setCurrentStep } = useStepper();
+
+  function getStepState(index: number, currentStep: number) {
+    if (index === currentStep) {
+      return StepStates.CURRENT;
+    }
+    if (currentStep > index) {
+      return StepStates.COMPLETE;
+    }
+    return StepStates.OTHER;
+  }
+
+  function handleClick(index: number, currentStep: number) {
+    if (getStepState(index, currentStep) === StepStates.COMPLETE && canStepBack) {
+      setCurrentStep(index);
+    }
+  }
+
+  return (
+    <Container>
+      <StepperHeader>
+        {steps.length &&
+          steps.map(({ id, name }: StepProps, index: number) => (
+            <StepperHeaderItem
+              canStepBack={canStepBack}
+              key={id}
+              onClick={() => handleClick(index, currentStep)}
+              stepState={getStepState(index, currentStep)}
+            >
+              {StepStates.CURRENT === getStepState(index, currentStep) && showTooltip !== 'never' ? (
+                <Tooltip placement="bottom">
+                  <Tooltip.Trigger asChild>
+                    <Dot stepState={getStepState(index, currentStep)} />
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>{name}</Tooltip.Content>
+                </Tooltip>
+              ) : (
+                <Dot stepState={getStepState(index, currentStep)} />
+              )}
+            </StepperHeaderItem>
+          ))}
+      </StepperHeader>
+      <StepperBody>{children}</StepperBody>
+    </Container>
+  );
+};
+
+// Set dot components
+SlimStepper.Step = StepperStep;
+SlimStepper.Steps = StepperSteps;

package/src/components/navigation/Steppers/SlimStepper/style.ts

@@ -0,0 +1,86 @@
+import { styled } from '../../../../styled';
+import { StepStates } from '../stepStates';
+import { lighten } from 'polished';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${({ theme }) => theme.spacing[1]};
+`;
+
+export const StepperHeader = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 35vw;
+  height: 0.7rem;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  margin: auto;
+`;
+export const StepperHeaderItem = styled.div<{
+  stepState: StepStates;
+  canStepBack: boolean;
+}>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  ${({ theme, stepState }) => {
+    if (stepState === StepStates.COMPLETE) {
+      return `border-right: .6rem solid ${lighten(0.15, theme.colors.primary)}`;
+    } else {
+      return 'border-right: .6rem solid transparent';
+    }
+  }};
+
+  cursor: ${({ stepState, canStepBack }) => (stepState === StepStates.COMPLETE && canStepBack ? 'pointer' : 'inherit')};
+
+  &:first-child {
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+  }
+  &:last-child {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    border-right: none;
+  }
+
+  background-color: ${({ stepState, theme }) =>
+    stepState === StepStates.COMPLETE || stepState === StepStates.CURRENT
+      ? theme.colors.primary
+      : theme.colors.backgroundAccent};
+
+  @media (max-width: 768px) {
+    font-size: ${({ theme }) => theme.fontSize.small};
+  }
+`;
+
+export const Dot = styled.div<{ stepState: StepStates }>`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+  border-radius: 100%;
+  ${({ stepState, theme }) => {
+    switch (stepState) {
+      case StepStates.CURRENT:
+        return `
+        right: calc(-1.6rem / 2);
+        width: 1.6rem;
+        height: 1.6rem;
+        background-color: ${theme.colors.primary};
+      `;
+      case StepStates.OTHER:
+        return `
+        right: calc(-.7rem/2);
+        width: .7rem;
+        height: .7rem;
+        background-color: ${theme.colors.background};
+      `;
+    }
+  }}
+`;
+
+export const StepperBody = styled.div`
+  padding: ${({ theme }) => `${theme.spacing[9]} ${theme.spacing['1_5']}`};
+`;

package/src/components/navigation/Steppers/Stepper/Stepper.stories.tsx

@@ -0,0 +1,87 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../../styled';
+import { useStepper } from '../context';
+import { Button, Stepper } from '../../../../components';
+import { AiFillSafetyCertificate as Safety, AiFillBell as Bell } from 'react-icons/ai';
+import { MdLocalShipping as Shipping } from 'react-icons/md';
+
+export default {
+  /** useStepper requires a context provider which is (currenlty) mounted on the root of the application.
+   *  <StepperProvider /> requires no parameters.
+   */
+  title: 'Navigation/Stepper',
+  component: Stepper,
+} as Meta;
+
+const StepBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  p,
+  button {
+    margin-bottom: 1rem;
+  }
+`;
+
+export const Numbers: StoryFn = () => {
+  const { incrementCurrentStep, decrementCurrentStep } = useStepper();
+
+  return (
+    <Stepper>
+      <Stepper.Steps>
+        <Stepper.Step id="first" name="step 1">
+          <StepBody>
+            <p>Step 1</p>
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </Stepper.Step>
+        <Stepper.Step id="second" name="step 2">
+          <StepBody>
+            <p>Step 2</p>
+            <Button onClick={decrementCurrentStep} text="previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </Stepper.Step>
+        <Stepper.Step id="third" name="step 3">
+          <StepBody>
+            <p>Step 3</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+          </StepBody>
+        </Stepper.Step>
+      </Stepper.Steps>
+    </Stepper>
+  );
+};
+
+export const Icons: StoryFn = () => {
+  const { incrementCurrentStep, decrementCurrentStep } = useStepper();
+
+  return (
+    <Stepper>
+      <Stepper.Steps>
+        <Stepper.Step icon={<Bell size="24" />} id="first" name="Shopping">
+          <StepBody>
+            <p>Step 1</p>
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </Stepper.Step>
+        <Stepper.Step icon={<Shipping size="24" />} id="second" name="Shipping">
+          <StepBody>
+            <p>Step 2</p>
+            <Button onClick={decrementCurrentStep} text="previous step" />
+            <Button onClick={incrementCurrentStep} text="Next step" />
+          </StepBody>
+        </Stepper.Step>
+        <Stepper.Step icon={<Safety size="24" />} id="third" name="Payment">
+          <StepBody>
+            <p>Step 3</p>
+            <Button onClick={decrementCurrentStep} text="Previous step" />
+          </StepBody>
+        </Stepper.Step>
+      </Stepper.Steps>
+    </Stepper>
+  );
+};

package/src/components/navigation/Steppers/Stepper/index.tsx

@@ -0,0 +1,114 @@
+import { FC, useEffect, Children, isValidElement, ReactElement, PropsWithChildren } from 'react';
+import { useStepper } from '../context';
+import { Container, StepperBody, StepperHeader, StepperHeaderItem, StepCounter, StepName } from './style';
+import { AiOutlineCheck as CheckMark } from 'react-icons/ai';
+import { Spinner } from '../../..';
+import { StepStates } from '../stepStates';
+/* Dot behavior components */
+// wrapper <StepperSteps/> component around the multiple <step/>
+
+const StepperSteps: FC<PropsWithChildren<void>> = ({ children }) => {
+  const { currentStep, steps, setSteps } = useStepper();
+
+  useEffect(() => {
+    const stepperSteps = Children.toArray(children)
+      .filter((step) => isValidElement(step) && typeof step.type !== 'string' && step.type.name === 'StepperStep')
+      .map((step) => {
+        if (isValidElement(step)) {
+          return step.props;
+        }
+        return null;
+      });
+    setSteps(stepperSteps);
+  }, [setSteps, currentStep]);
+
+  return (
+    <div>
+      {children &&
+        Children.map(
+          children,
+          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child
+        )}
+    </div>
+  );
+};
+
+// Single <step/> subcomponent
+interface StepProps {
+  name: string;
+  id: string;
+  icon?: ReactElement;
+}
+export type FCStep = FC<PropsWithChildren<StepProps>>;
+
+const StepperStep: FCStep = ({ children }) => {
+  return <>{children}</>;
+};
+
+export interface StepperProps {
+  currentStepIsLoading?: boolean;
+  canStepBack?: boolean; // disable step back via step header
+}
+
+// Main <Stepper/> component which contains subcomponents
+export const Stepper: FC<PropsWithChildren<StepperProps>> & {
+  Step: FC<StepProps>;
+  Steps: FC<PropsWithChildren<void>>;
+} = ({ currentStepIsLoading = false, canStepBack = true, children }) => {
+  const { currentStep, steps, setCurrentStep } = useStepper();
+
+  function getStepState(index: number, currentStep: number) {
+    if (index === currentStep) {
+      return StepStates.CURRENT;
+    }
+    if (currentStep > index) {
+      return StepStates.COMPLETE;
+    }
+    return StepStates.OTHER;
+  }
+
+  function handleClick(index: number, currentStep: number) {
+    if (getStepState(index, currentStep) === StepStates.COMPLETE && canStepBack) {
+      setCurrentStep(index);
+    }
+  }
+
+  return (
+    <Container>
+      <StepperHeader>
+        {steps.length &&
+          steps.map((step: StepProps, index: number) => (
+            <StepperHeaderItem key={step.id} stepState={getStepState(index, currentStep)}>
+              <StepCounter
+                canStepBack={canStepBack}
+                onClick={() => handleClick(index, currentStep)}
+                stepState={getStepState(index, currentStep)}
+              >
+                {currentStep > index ? (
+                  <CheckMark size={24} />
+                ) : currentStep === index ? (
+                  currentStepIsLoading ? (
+                    <Spinner size="small" />
+                  ) : step.icon ? (
+                    step.icon
+                  ) : (
+                    index + 1
+                  )
+                ) : step.icon ? (
+                  step.icon
+                ) : (
+                  index + 1
+                )}
+              </StepCounter>
+              <StepName>{step.name}</StepName>
+            </StepperHeaderItem>
+          ))}
+      </StepperHeader>
+      <StepperBody>{children}</StepperBody>
+    </Container>
+  );
+};
+
+// Set dot components
+Stepper.Step = StepperStep;
+Stepper.Steps = StepperSteps;

package/src/components/navigation/Steppers/Stepper/style.ts

@@ -0,0 +1,105 @@
+import { styled } from '../../../../styled';
+import { StepStates } from '../stepStates';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StepperHeader = styled.div`
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+`;
+export const StepperHeaderItem = styled.div<{ stepState: StepStates }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+
+  &::after {
+    position: absolute;
+    content: '';
+    border-bottom: 2px solid ${({ theme }) => theme.colors.backgroundAccent};
+    width: 100%;
+    top: 22px;
+    left: calc(50% + 20px);
+  }
+
+  &:first-child {
+    &::before {
+      content: none;
+    }
+  }
+
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+
+  ${({ stepState, theme }): string => {
+    return stepState !== StepStates.OTHER
+      ? `
+    &::before {
+      position: absolute;
+      content: '';
+      border-bottom: 2px solid ${theme.colors.primary};
+      width: 100%;
+      top: 22px;
+      left: -50%;
+    `
+      : '';
+  }}
+
+  @media (max-width: 768px) {
+    font-size: ${({ theme }) => theme.fontSize.small};
+  }
+`;
+
+export const StepperBody = styled.div`
+  padding: ${({ theme }) => `${theme.spacing[7]} ${theme.spacing['1_5']}`};
+`;
+
+export const StepCounter = styled.div<{
+  stepState: StepStates;
+  canStepBack: boolean;
+}>`
+  position: relative;
+
+  /* makes sure the before and after lines don't show above the step circles */
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 5rem;
+  height: 5rem;
+  padding: 0.8rem;
+  border-radius: 50%;
+  border: 0.1rem solid
+    ${({ theme, stepState }) => (stepState !== StepStates.OTHER ? theme.colors.primary : theme.colors.backgroundAccent)};
+  background-color: ${({ stepState, theme }) =>
+    stepState === StepStates.CURRENT ? theme.colors.primaryShade : theme.colors.background};
+  transition: all 0.2s ease-in-out;
+  margin-bottom: ${({ theme }) => theme.spacing[1]};
+  color: ${({ theme, stepState }) => (stepState !== StepStates.OTHER ? theme.colors.white : theme.colors.text)};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  cursor: ${({ stepState, canStepBack }) => (stepState === StepStates.COMPLETE && canStepBack ? 'pointer' : 'inherit')};
+
+  svg {
+    fill: ${({ theme, stepState }) => {
+      switch (stepState) {
+        case StepStates.COMPLETE:
+          return theme.colors.primary;
+        case StepStates.CURRENT:
+          return theme.colors.white;
+        case StepStates.OTHER:
+          return '#ccc';
+      }
+    }};
+  }
+`;
+
+export const StepName = styled.h4``;

package/src/components/navigation/Steppers/context.tsx

@@ -0,0 +1,49 @@
+import { FC, createContext, useContext, useReducer, useCallback, PropsWithChildren, ReactNode } from 'react';
+import { reducer, StepperState, stepTypes } from './reducer';
+
+const StepperContext = createContext<any>(undefined);
+
+interface StepperProviderProps {
+  startStep?: number;
+}
+
+export const StepperProvider: FC<PropsWithChildren<StepperProviderProps>> = ({ startStep = 0, children }) => {
+  const defaultStepperState: StepperState = {
+    steps: [],
+    currentStep: startStep,
+  };
+
+  const [state, dispatch] = useReducer(reducer, defaultStepperState);
+
+  return <StepperContext.Provider value={[state, dispatch]}>{children}</StepperContext.Provider>;
+};
+
+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,
+  };
+};