@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.1

package/package.json

@@ -1,64 +1,55 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.49.0-beta.0",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "release": "npm run clean && npm run build && npm run copy",
-    "build": "node ../../scripts/build.js",
-    "copy": "node ../../scripts/copy-file.js",
-    "test": "node ../../scripts/test.js",
-    "test:coverage": "node ../../scripts/test.js --coverage",
-    "test:dev": "node ../../scripts/test.js --watch",
-    "clean": "rm -rf dist/*"
-  },
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.49.0-beta.1",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@monaco-editor/react": "^4.6.0",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
+    "styled-components": "^5.3.0",
+    "treeflex": "^2.0.1",
+    "xml-formatter": "^3.6.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/{dist/styles → styles}/theme/dark.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#13142e',
   bgColor2: '#222143',
   bgColor3: '#2d2a5d',
+  bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useLightBrand: true,
   hideMainDecoration: true

package/{dist/styles → styles}/theme/ember.theme.js

@@ -10,8 +10,8 @@ const colorStyle = {
   colorGrey: '#A38A8A',
   colorPrimary: '#D9211E',
   colorSuccess: '#3A86BD',
-  colorWarning: '#EC7084',
-  colorDanger: '#8B1E9E',
+  colorWarning: '#EAB308',
+  colorDanger: '#EC7084',
   colorHover: 'rgba(217, 33, 30, 0.1)',
   colorActive: 'rgba(217, 33, 30, 0.15)',
   scrollBarColor: 'rgba(217, 33, 30, 0.3)',

package/{dist/styles → styles}/theme/light.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#F0ECFF',
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
+  bgColor4: '#F8F4FF',
   backdropBg: 'rgba(0, 0, 0, 0.75)'
 };
 

package/{dist/styles → styles}/theme/white.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#EEEEEE',
   bgColor2: '#F7F7F7',
   bgColor3: '#FFFFFF',
+  bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useModernIcons: false,
   useLightBrand: false,

package/dist/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.48.30",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/setupTests.js

@@ -1,9 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-
-// mock ResizeObserverModule
-import * as ResizeObserverModule from 'resize-observer-polyfill';
-global.ResizeObserver = ResizeObserverModule.default;

package/src/Tab/Tab.js

@@ -1,11 +0,0 @@
-import TabContext from './subComponent/TabContext';
-
-const Tab = ({ children, selected, onChange, mode = 'view', onTitleChange }) => {
-  return (
-    <TabContext.Provider value={{ selected, onChange, mode, onTitleChange }}>
-      {children}
-    </TabContext.Provider>
-  );
-};
-
-export default Tab;

package/src/Tab/TabList.js

@@ -1,159 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { Button } from '../button';
-
-const MAX_MOVE_PIXEL = 300;
-const TabList = ({ children, wrap = true, ...props }) => {
-  const wrapperRef = useRef(null);
-  const [exceedContainerWidth, setExceedContainerWidth] = useState(false);
-  const [hasPrevious, setHasPrevious] = useState(false);
-  const [hasNext, setHasNext] = useState(false);
-
-  const checkExceedContainerWidth = useCallback(() => {
-    if (wrapperRef.current) {
-      const { offsetWidth, scrollWidth } = wrapperRef.current;
-      let { marginLeft } = getComputedStyle(wrapperRef.current);
-      const currentMarginLeft = Math.abs(parseInt(marginLeft));
-
-      setHasPrevious(currentMarginLeft > 0);
-      setHasNext(scrollWidth - offsetWidth > 0);
-      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
-    }
-  }, []);
-
-  const handleResize = useCallback(() => {
-    checkExceedContainerWidth();
-  }, []);
-
-  const handleTransitionend = useCallback((event) => {
-    // only allow margin-left transition event
-    if (event && event.propertyName !== 'margin-left') {
-      return;
-    }
-
-    checkExceedContainerWidth();
-  }, []);
-
-  const getMovePixel = (offsetWidth) => {
-    // move 1/3 pixel as default
-    const defaultMovePixel = Math.ceil(offsetWidth / 3);
-    return defaultMovePixel > MAX_MOVE_PIXEL
-      ? MAX_MOVE_PIXEL
-      : defaultMovePixel;
-  };
-
-  const updateScrollPosition = (marginLeft) => {
-    wrapperRef.current.style.marginLeft = marginLeft;
-  };
-
-  const handlePrevious = () => {
-    const { offsetWidth } = wrapperRef.current;
-    const { marginLeft } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = currentMarginLeft;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition('0px');
-    } else {
-      updateScrollPosition(`-${currentMarginLeft - movePixel}px`);
-    }
-  };
-
-  const handleNext = () => {
-    const { offsetWidth, scrollWidth } = wrapperRef.current;
-    const { marginLeft } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = scrollWidth - offsetWidth;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition(`-${currentMarginLeft + availableMovePixel}px`);
-    } else {
-      updateScrollPosition(`-${currentMarginLeft + movePixel}px`);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [wrap, children]);
-
-  useEffect(() => {
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
-    }
-  }, [wrap]);
-
-  return (
-    <Container role='tablist' $wrap={wrap} {...props}>
-      {wrap ? (
-        children
-      ) : (
-        <>
-          <TabWrapper ref={wrapperRef}>{children}</TabWrapper>
-
-          {exceedContainerWidth && (
-            <Paginate>
-              <Button
-                aria-label='Previous'
-                reverse
-                onClick={handlePrevious}
-                iconOnly
-                disabled={!hasPrevious}
-              >
-                <FaAngleLeft />
-              </Button>
-              <Button
-                aria-label='Next'
-                reverse
-                onClick={handleNext}
-                iconOnly
-                disabled={!hasNext}
-              >
-                <FaAngleRight />
-              </Button>
-            </Paginate>
-          )}
-        </>
-      )}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: relative;
-  border-bottom: var(--border-width) solid var(--border-color);
-  margin-bottom: var(--spacing);
-
-  ${({ $wrap }) => !$wrap && 'white-space: nowrap;'}
-
-  ${({ noMargin }) => noMargin && 'margin-bottom: 0;'}
-`;
-
-const TabWrapper = styled.div`
-  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);
-  overflow: hidden;
-  margin-left: 0;
-  transition: margin-left 0.3s;
-`;
-
-const Paginate = styled.div`
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  > :not(:last-child) {
-    margin-right: var(--spacing-xs);
-  }
-`;
-
-export default TabList;

package/src/Tab/TabPanel.js

@@ -1,35 +0,0 @@
-import { useContext, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabPanel = ({ children, name, ...props }) => {
-  const { selected } = useContext(TabContext);
-  const [rendered, setRendered] = useState(false);
-
-  const tabContent = useMemo(() => {
-    if (rendered) {
-      return children;
-    }
-
-    return null;
-  }, [rendered, children]);
-
-  useEffect(() => {
-    if (name === selected) {
-      setRendered(true);
-    }
-  }, [selected, name]);
-
-  return (
-    <Panel role='tabpanel' $display={selected === name} {...props}>
-      {tabContent}
-    </Panel>
-  );
-};
-
-const Panel = styled.div`
-  display: ${({ $display }) => ($display ? 'block' : 'none')};
-  position: relative;
-`;
-
-export default TabPanel;

package/src/Tab/TabTab.js

@@ -1,99 +0,0 @@
-import { useContext, useState, useCallback } from 'react';
-import { KEY_CODE } from '@cashub/utils';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabTab = ({ children, name, title, onClick, ...props }) => {
-  const { selected, onChange, mode, onTitleChange } = useContext(TabContext);
-  const [isModify, setIsModify] = useState(false);
-  const [currentTitle, setCurrentTitle] = useState(title);
-
-  const handleClick = useCallback(() => {
-    if (selected !== name) {
-      onChange(name);
-    }
-
-    if (onClick && typeof onClick === 'function') {
-      onClick();
-    }
-  }, [name, selected, onChange, onClick]);
-
-  const handleDoubleClick = () => {
-    if (mode !== 'modify') return;
-
-    setIsModify(true);
-  };
-
-  const handleBlur = () => {
-    onTitleChange(name, currentTitle);
-    setIsModify(false);
-  };
-
-  const handleKeyUp = (event) => {
-    const key = event.keyCode;
-    if (key === KEY_CODE.ENTER) {
-      onTitleChange(name, currentTitle);
-      setIsModify(false);
-    }
-  };
-
-  return isModify ? (
-    <InputTab
-      role='tab'
-      type='text'
-      value={currentTitle}
-      onChange={(event) => {
-        setCurrentTitle(event.target.value);
-      }}
-      onBlur={handleBlur}
-      onKeyUp={handleKeyUp}
-      autoFocus
-    />
-  ) : (
-    <ButtonTab
-      role='tab'
-      onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
-      active={selected === name}
-      {...props}
-    >
-      {children}
-    </ButtonTab>
-  );
-};
-
-const Tab = styled.div`
-  background: transparent;
-  padding: 10px var(--spacing-s);
-  border: none;
-  border-bottom: 4px solid transparent;
-`;
-
-const ButtonTab = styled(Tab).attrs({
-  as: 'button',
-})`
-  color: var(--font-on-mute);
-  transition: color 0.3s, border 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--font-on-background);
-  }
-
-  ${({ active }) =>
-    active &&
-    `
-      border-color: var(--color-primary);
-      color: var(--font-on-background);
-    `}
-`;
-
-const InputTab = styled(Tab).attrs({
-  as: 'input',
-})`
-  color: var(--font-on-background);
-  border-color: var(--color-primary);
-  outline: none;
-`;
-
-export default TabTab;

package/src/Tab/__stories__/Tab.stories.js

@@ -1,55 +0,0 @@
-import { useState } from 'react';
-import Tab from '../';
-
-const metadata = {
-  title: 'Tab/Tab',
-  component: Tab,
-  argTypes: {
-    onChange: {},
-    onTitleChange: {},
-    mode: {
-      description: '',
-      control: 'radio',
-      options: ['view', 'modify'],
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange, ...props } = args;
-  const [selectedTab, setSelectedTab] = useState('dashboard');
-
-  return (
-    <Tab
-      selected={selectedTab}
-      onChange={(name) => {
-        setSelectedTab(name);
-        onChange(name);
-      }}
-      {...props}
-    >
-      <Tab.List>
-        <Tab.Tab name='dashboard' title='dashboard'>Dashboard</Tab.Tab>
-        <Tab.Tab name='information' title='information'>Information</Tab.Tab>
-        <Tab.Tab name='license' title='license'>License</Tab.Tab>
-      </Tab.List>
-      <Tab.Panel name='dashboard' style={{ color: '#ffff' }}>
-        Dashboard Content
-      </Tab.Panel>
-      <Tab.Panel name='information' style={{ color: '#ffff' }}>
-        Information Content
-      </Tab.Panel>
-      <Tab.Panel name='license' style={{ color: '#ffff' }}>
-        License Content
-      </Tab.Panel>
-    </Tab>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  mode: 'view',
-};
-
-export default metadata;
-export { Default };

package/src/Tab/__stories__/TabList.stories.js

@@ -1,49 +0,0 @@
-import { useState } from 'react';
-import Tab from '../';
-import { Tooltip } from '../../tooltip';
-import { BadgeFill } from '../../badge';
-
-const metadata = {
-  title: 'Tab/TabList',
-  component: Tab,
-};
-
-const Template = (args) => {
-  const [selectedTab, setSelectedTab] = useState('tab1');
-
-  return (
-    <>
-      <Tab
-        selected={selectedTab}
-        onChange={(event) => {
-          setSelectedTab(event);
-        }}
-      >
-        <Tab.List {...args}>
-          <Tab.Tab name='tab1'>Tab 1</Tab.Tab>
-          <Tab.Tab name='tab2'>Tab 2</Tab.Tab>
-          <Tab.Tab name='tab3'>Tab 3</Tab.Tab>
-          <Tab.Tab name='tab4'>Tab 4</Tab.Tab>
-          <Tab.Tab name='tab5'>Tab 5</Tab.Tab>
-          <Tab.Tab name='tab6'>
-            Tab 6&nbsp;
-            <Tooltip inline title='Descriptions'>
-              <BadgeFill small>
-              &nbsp;i&nbsp;
-              </BadgeFill>
-            </Tooltip>
-          </Tab.Tab>
-        </Tab.List>
-      </Tab>
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  wrap: true,
-  noMargin: false,
-};
-
-export default metadata;
-export { Default };