@cashub/ui 0.48.30 → 0.49.0-beta.0

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/src/xmleditor/XmlEditor.js

@@ -0,0 +1,25 @@
+import Editor from '@monaco-editor/react';
+import xmlFormat from 'xml-formatter';
+
+const XmlEditor = ({ mode, initialValue, onXmlEditorMounted }) => {
+  return (
+    <>
+      <Editor
+        height='150px'
+        theme='vs-dark'
+        defaultLanguage='xml'
+        defaultValue={
+          initialValue ? xmlFormat(initialValue, { indentation: '  ' }) : ''
+        }
+        options={{
+          readOnly: mode === 'view',
+          minimap: { enabled: false },
+          tabSize: 2,
+        }}
+        onMount={onXmlEditorMounted}
+      />
+    </>
+  );
+};
+
+export default XmlEditor;

package/src/xmleditor/index.js

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

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))};`,
+    };
+  },
+};

package/button/IconButton.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const IconButton = _styledComponents.default.div.attrs(() => ({
-  role: 'button'
-}))`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  transition: 0.3s;
-  position: relative;
-  border-radius: var(--border-radius-l);
-  color: ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
-}};
-  cursor: ${_ref2 => {
-  let {
-    disabled
-  } = _ref2;
-  return disabled ? 'no-drop' : 'pointer';
-}};
-  margin: auto;
-
-  ${_ref3 => {
-  let {
-    size
-  } = _ref3;
-  return size === 'small' && (0, _styledComponents.css)`
-      width: 32px;
-      height: 32px;
-    `;
-}}
-
-  &:hover {
-    ${_ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return !disabled && 'background: var(--color-hover)';
-}}
-  }
-
-  > svg {
-    font-size: 1.5rem;
-
-    ${_ref5 => {
-  let {
-    size
-  } = _ref5;
-  return size === 'small' && 'font-size: 1rem;';
-}}
-
-    ${_ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size === 'large' && 'font-size: 2rem;';
-}}
-  }
-`;
-var _default = exports.default = IconButton;

package/iconbox/IconBox.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
-var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const IconBox = _ref => {
-  let {
-    icon,
-    title,
-    children
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
-        sizeXS: true,
-        marginRight: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
-          sizeXS: true,
-          src: icon,
-          alt: `${title}'s icon`
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
-        children: title
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
-      children: children
-    })]
-  });
-};
-const Wrapper = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-l);
-  margin-bottom: var(--spacing);
-  border-radius: var(--border-radius);
-  background: var(--color-background2);
-  color: var(--font-on-background);
-
-  background: var(--color-background2);
-  background-image: url(${_bgChartTriangle.default});
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  background-size: 30% 70%;
-`;
-const IconBoxHead = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing);
-`;
-const IconBoxTitle = _styledComponents.default.div`
-  font-size: var(--font-h2);
-  font-weight: bold;
-  word-break: break-all;
-`;
-const IconBoxBody = _styledComponents.default.div`
-  font-size: var(--font-h1);
-  font-weight: bold;
-  text-align: center;
-`;
-var _default = exports.default = IconBox;

package/iconbox/subComponent/IconBoxImage.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const IconBoxImage = _styledComponents.default.img.attrs(() => ({
-  crossOrigin: 'anonymous'
-}))`
-  width: 120px;
-  height: 120px;
-
-  ${_ref => {
-  let {
-    rounded
-  } = _ref;
-  return rounded && 'border-radius: var(--border-radius);';
-}}
-
-  ${_ref2 => {
-  let {
-    sizeS
-  } = _ref2;
-  return sizeS && `
-      width: 80px;
-      height: 80px;
-    `;
-}}
-
-  ${_ref3 => {
-  let {
-    sizeXS
-  } = _ref3;
-  return sizeXS && `
-      width: 40px;
-      height: 40px;
-    `;
-}}
-`;
-var _default = exports.default = IconBoxImage;

package/layout/Aside.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _header = _interopRequireDefault(require("../styles/config/header.style"));
-var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Aside = _styledComponents.default.aside`
-  width: ${_ref => {
-  let {
-    $display
-  } = _ref;
-  return $display ? `${_sidebar.default.open.width}` : `${_sidebar.default.close.width}`;
-}};
-
-  padding-top: var(--spacing-s);
-  height: calc(100vh - ${_header.default.height} - var(--spacing));
-  background: url(${_bgAside.default}), var(--color-background2);
-  background-size: 356px 436px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  border-top-right-radius: var(--border-radius);
-  position: fixed;
-  top: calc(${_header.default.height} + var(--spacing));
-  transition: width 0.2s;
-  z-index: 60;
-
-  ${_media.default.tablet`
-    height: 100%;
-    top: 0;
-    padding-top:0;
-    border-top-right-radius:0;
-    left: 0;
-    box-shadow: var(--box-shadow);
-    
-    ${props => props.$display === false && (0, _styledComponents.css)`
-        left: -${_sidebar.default.open.width};
-      `}
-  `};
-`;
-var _default = exports.default = Aside;

package/layout/Container.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _header = _interopRequireDefault(require("../styles/config/header.style"));
-var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Container = _styledComponents.default.div`
-  transition: 0.3s;
-  width: 100%;
-  padding: calc(${_header.default.height} + var(--spacing)) var(--spacing)
-    var(--spacing);
-
-  ${_ref => {
-  let {
-    hasSidebar,
-    $display
-  } = _ref;
-  return hasSidebar === true && (0, _styledComponents.css)`
-        width: calc(
-          100% -
-            ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width}
-        );
-        margin-left: ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width};
-
-        ${_media.default.tablet`
-        width: 100%;
-        margin-left: 0;
-      `}
-      `;
-}}
-`;
-var _default = exports.default = Container;

package/layout/Header.jsx

@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-import media from '../styles/mixin/media';
-import MenuIcon from './MenuIcon';
-import Logo from './Logo';
-
-const Header = ({ theme, logo, hasSidebar, toggleSidebar, children }) => {
-  return (
-    <>
-      <Wrapper>
-        <Brand>
-          {hasSidebar && (
-            <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
-          )}
-          {logo && <Logo src={logo} />}
-        </Brand>
-        <Topbar>{children}</Topbar>
-      </Wrapper>
-    </>
-  );
-};
-
-const Wrapper = styled.header`
-  background: var(--color-background2);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: fixed;
-  z-index: 40;
-  width: 100%;
-  height: ${headerStyle.height};
-  padding: 0 calc(var(--spacing-s) + 0.25rem) 0 var(--spacing-s);
-
-  ${media.tablet`
-    padding: 0 var(--spacing-s) 0 calc(var(--spacing-s) - 0.25rem);
-  `}
-`;
-
-const Brand = styled.div`
-  display: flex;
-
-  > * {
-    flex: none;
-  }
-`;
-
-const Topbar = styled.div`
-  display: flex;
-
-  > *:not(:last-child) {
-    margin-right: calc(var(--spacing) - 0.5rem);
-  }
-`;
-
-export default Header;