@cashub/ui 0.22.9 → 0.22.10

package/src/wizard/Wizard.js

@@ -1,276 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

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

package/transformer/fileTransformer.js

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