@cashub/ui 0.22.8 → 0.22.9

package/src/wizard/Wizard.js

@@ -0,0 +1,276 @@
+import {
+  useState,
+  Children,
+  cloneElement,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import styled from 'styled-components';
+import { isReactComponent } from '@cashub/utils';
+import media from '../styles/mixin/media';
+
+const Wizard = (props) => {
+  const {
+    navNames = [],
+    defaultStep = 1,
+    children,
+    beforeNext,
+    beforePrevious,
+    clickableSteps = true,
+  } = props;
+  const [currentStep, setCurrentStep] = useState(defaultStep);
+
+  const goToStep = useCallback(
+    async (step) => {
+      if (step > currentStep) {
+        if (!beforeNext) {
+          setCurrentStep(step);
+        } else {
+          beforeNext({ current: currentStep })
+            .then(() => {
+              setCurrentStep(step);
+            })
+            .catch((error) => {});
+        }
+      }
+
+      if (step < currentStep) {
+        if (!beforePrevious) {
+          setCurrentStep(step);
+        } else {
+          beforePrevious({ current: currentStep })
+            .then(() => {
+              setCurrentStep(step);
+            })
+            .catch((error) => {});
+        }
+      }
+    },
+    [currentStep, beforeNext, beforePrevious],
+  );
+
+  const nextStep = useCallback(() => {
+    let next = currentStep + 1;
+    if (next > navNames.length) {
+      next = navNames.length;
+    }
+    if (!beforeNext) {
+      setCurrentStep(next);
+    } else {
+      beforeNext({ current: currentStep })
+        .then(() => {
+          setCurrentStep(next);
+        })
+        .catch((error) => {});
+    }
+  }, [navNames.length, beforeNext, currentStep]);
+
+  const previousStep = useCallback(() => {
+    let previous = currentStep - 1;
+    if (previous < 1) {
+      previous = 1;
+    }
+
+    if (!beforePrevious) {
+      setCurrentStep(previous);
+    } else {
+      beforePrevious({ current: currentStep })
+        .then(() => {
+          setCurrentStep(previous);
+        })
+        .catch((error) => {});
+    }
+  }, [beforePrevious, currentStep]);
+
+  const isLastStep = useCallback(() => {
+    return currentStep === navNames.length;
+  }, [currentStep, navNames.length]);
+
+  const api = useMemo(() => {
+    return {
+      goToStep,
+      nextStep,
+      previousStep,
+      isLastStep,
+    };
+  }, [goToStep, isLastStep, nextStep, previousStep]);
+
+  const childrenWithProps = useMemo(() => {
+    const validChildren = children.filter((child) => !!child);
+
+    return Children.map(validChildren, (child, index) => {
+      if (!child) return null;
+
+      const className = index + 1 === currentStep && 'active';
+
+      return (
+        <Step className={className} data-testid='step'>
+          {isReactComponent(child) ? cloneElement(child, api) : child}
+        </Step>
+      );
+    });
+  }, [api, children, currentStep]);
+
+  useEffect(() => {
+    setCurrentStep(defaultStep);
+  }, [defaultStep]);
+
+  return (
+    <>
+      <Nav>
+        {navNames.map((name, index, arr) => {
+          const step = index + 1;
+          const arrow =
+            step === currentStep && step !== arr.length ? 'arrow' : undefined;
+
+          let className = '';
+          if (step === currentStep) {
+            className += 'current';
+          } else if (step < currentStep) {
+            className += 'done';
+          }
+
+          return (
+            <NavItem
+              key={step}
+              className={className}
+              onClick={() => clickableSteps === true && goToStep(step)}
+            >
+              <NavTitle>
+                <span>{step}</span>
+                <p>{name}</p>
+                <span className={arrow}>
+                  <FaCaretRight />
+                </span>
+              </NavTitle>
+            </NavItem>
+          );
+        })}
+      </Nav>
+      <div>{childrenWithProps}</div>
+    </>
+  );
+};
+
+const Nav = styled.ul`
+  display: flex;
+  background: var(--color-background2);
+  border-radius: var(--border-radius-l);
+  margin-bottom: var(--spacing);
+
+  ${media.mobile`
+      display: block;
+    `}
+`;
+
+const NavItem = styled.li`
+  color: var(--font-on-mute);
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  padding: 0 var(--spacing-xs);
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  transition: 0.3s;
+  overflow: hidden;
+  flex: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+
+    > div > span:first-of-type {
+      color: var(--font-on-primary);
+      background: var(--font-on-background);
+    }
+  }
+
+  &.current,
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    > div > span:first-of-type {
+      color: var(--color-primary);
+      background: var(--font-on-primary);
+    }
+  }
+
+  &.current {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
+
+    &:first-child {
+      border-radius: var(--border-radius-l);
+    }
+
+    ${media.mobile`
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      `}
+  }
+
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    &:first-child {
+      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
+
+      ${media.mobile`
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+    }
+  }
+`;
+
+const NavTitle = styled.div`
+  display: flex;
+  align-items: center;
+
+  > span:first-of-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing-xs);
+    color: var(--font-on-mute);
+    flex: 0 0;
+    flex-basis: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-l);
+    background: var(--font-on-mute);
+  }
+
+  > p {
+    margin-right: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > span:last-of-type {
+    display: none;
+
+    &.arrow {
+      display: flex;
+      align-self: center;
+    }
+
+    ${media.mobile`
+        transform: rotate(90deg);
+      `}
+  }
+`;
+
+const Step = styled.div`
+  display: none;
+
+  &.active {
+    display: block;
+  }
+`;
+
+export default Wizard;

package/src/wizard/__stories__/Wizard.stories.js

@@ -0,0 +1,81 @@
+import Wizard from '../Wizard';
+
+const metadata = {
+  title: 'Wizard/Wizard',
+  component: Wizard,
+  decorators: [
+    (Story) => (
+      <div style={{ color: '#ffffff' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    navNames: {
+      description: 'It is a array, include title name of Wizard',
+    },
+    defaultStep: {
+      description: 'Default step',
+    },
+    children: {
+      description: 'Each title name of Wizard has each content',
+    },
+    clickableSteps: {
+      description: 'It is boolean, can click step or not',
+    },
+    beforeNext: {
+      description:
+        'A asynchronous callback, called when trigger change to next step,if callback return promise resolve result,Wizard component will proceed to the next step',
+    },
+    beforePrevious: {
+      description:
+        'A asynchronous callback, called when trigger change to previous step,if callback return promise resolve result,Wizard component will proceed to the previous step',
+    },
+  },
+};
+
+const Information = () => {
+  return <>Information content</>;
+};
+const License = () => {
+  return <>License content</>;
+};
+const Firmware = () => {
+  return <>Firmware content</>;
+};
+const Application = () => {
+  return <>Application content</>;
+};
+
+const Template = ({ beforeNext, beforePrevious, ...args }) => {
+  const handleBeforeNext = async () => {
+    beforeNext();
+  };
+
+  const handlePrevious = async () => {
+    beforePrevious();
+  };
+
+  return (
+    <Wizard
+      {...args}
+      beforeNext={handleBeforeNext}
+      beforePrevious={handlePrevious}
+    >
+      <Information />
+      <License />
+      <Firmware />
+      <Application />
+    </Wizard>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  navNames: ['Information', 'License', 'Firmware', 'Application'],
+  defaultStep: 2,
+  clickableSteps: true,
+};
+
+export default metadata;
+export { Default };

package/src/wizard/__test__/Wizard.test.js

@@ -0,0 +1,173 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import 'jest-styled-components';
+import Wizard from '../Wizard';
+import userEvent from '@testing-library/user-event';
+
+describe('test Wizard', () => {
+  const stepNames = ['Information', 'License', 'Firmware', 'Application'];
+
+  test('render Wizard', () => {
+    render(
+      <Wizard navNames={stepNames} defaultStep={1}>
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const nav = screen.getByRole('list');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveTextContent(stepNames[0]);
+    expect(nav).toHaveTextContent(stepNames[1]);
+    expect(nav).toHaveTextContent(stepNames[2]);
+    expect(nav).toHaveTextContent(stepNames[3]);
+
+    const navItems = screen.getAllByRole('listitem');
+    navItems.forEach((item, index) => {
+      expect(item.textContent).toBe(`${index + 1}${stepNames[index]}`);
+    });
+    expect(navItems[0]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: 'var(--border-radius-l)',
+    });
+    expect(navItems[1]).toHaveStyle({ color: 'var(--font-on-mute)' });
+    expect(navItems[2]).toHaveStyle({ color: 'var(--font-on-mute)' });
+    expect(navItems[3]).toHaveStyle({ color: 'var(--font-on-mute)' });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: block');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: none');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+
+  test('change step', () => {
+    render(
+      <Wizard navNames={stepNames} defaultStep={1} clickableSteps={true}>
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const navItems = screen.getAllByRole('listitem');
+    userEvent.click(navItems[2]);
+
+    expect(navItems[0]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+    });
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+    });
+    expect(navItems[2]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: block');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+
+  test('change step if using beforeNext and beforePrevious function', async () => {
+    const handleBeforeNext = jest.fn();
+    const handleBeforePrevious = jest.fn();
+
+    handleBeforeNext.mockImplementation(() => {
+      return Promise.resolve();
+    });
+
+    handleBeforePrevious.mockImplementation(() => {
+      return Promise.resolve();
+    });
+
+    render(
+      <Wizard
+        navNames={stepNames}
+        defaultStep={1}
+        clickableSteps={true}
+        beforeNext={handleBeforeNext}
+        beforePrevious={handleBeforePrevious}
+      >
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const navItems = screen.getAllByRole('listitem');
+    // test beforeNext function
+    userEvent.click(navItems[2]);
+    expect(handleBeforeNext).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      expect(navItems[0]).toHaveStyle({
+        background: 'var(--color-primary)',
+        color: 'var(--font-on-primary)',
+        borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+      });
+    });
+
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+    });
+
+    expect(navItems[2]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: block');
+    expect(steps[3]).toHaveStyle('display: none');
+
+    // test beforePrevious function
+    userEvent.click(navItems[1]);
+    expect(handleBeforePrevious).toHaveBeenCalledTimes(1);
+
+    await waitFor(() =>
+      expect(navItems[0]).toHaveStyle({
+        background: 'var(--color-primary)',
+        color: 'var(--font-on-primary)',
+        borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+      }),
+    );
+
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[2]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: block');
+    expect(steps[2]).toHaveStyle('display: none');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+});

package/src/wizard/index.js

@@ -0,0 +1 @@
+export { default as Wizard } from './Wizard';

package/transformer/fileTransformer.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  process(sourceText, sourcePath, options) {
+    return {
+      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
+    };
+  },
+};