@cashub/ui 0.22.9 → 0.22.11

package/package.json

@@ -1,59 +1,50 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.22.9",
-  "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.3.1",
-    "@cashub/utils": "^0.5.0",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@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",
-    "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",
-    "styled-components": "^5.3.0"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.22.11",
+  "private": false,
+  "author": "CASHUB Team",
+  "description": "CASHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CASHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@cashub/hooks": "^0.3.1",
+    "@cashub/utils": "^0.5.0",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@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",
+    "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",
+    "styled-components": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/{dist/table → table}/Table.js

@@ -166,6 +166,7 @@ const Table = _ref => {
         }
         let isCustom = false;
         let renderedData = null;
+        const customContent = customPop ? customPop(value, row) : null;
         if (custom && render) {
           // call render function to get custom data(fully)
           isCustom = true;
@@ -174,7 +175,7 @@ const Table = _ref => {
           // call render function to get custom data(part)
           renderedData = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             id: key,
-            onClick: event => showFullValue(event, customPop),
+            onClick: event => showFullValue(event, customContent),
             children: render ? render(value, row) : String(value)
           });
         }

package/dist/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.22.9",
-  "private": false,
-  "author": "CASHUB Team",
-  "description": "CASHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CASHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.3.1",
-    "@cashub/utils": "^0.5.0",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@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",
-    "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",
-    "styled-components": "^5.3.0"
-  },
-  "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 }) => {
-  return (
-    <TabContext.Provider value={{ selected, onChange }}>
-      {children}
-    </TabContext.Provider>
-  );
-};
-
-export default Tab;

package/src/Tab/TabList.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const TabList = ({ children, ...props }) => {
-  return (
-    <Container role='tablist' {...props}>
-      {children}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  border-bottom: var(--border-width) solid var(--border-color);
-  margin-bottom: var(--spacing);
-
-  ${({ noMargin }) => noMargin && 'margin-bottom: 0;'}
-`;
-
-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,42 +0,0 @@
-import { useContext, useCallback } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabTab = ({ children, name, ...props }) => {
-  const { selected, onChange } = useContext(TabContext);
-
-  const handleClick = useCallback(() => {
-    if (selected !== name) {
-      onChange(name);
-    }
-  }, [name, selected, onChange]);
-
-  return (
-    <Tab role='tab' onClick={handleClick} active={selected === name} {...props}>
-      {children}
-    </Tab>
-  );
-};
-
-const Tab = styled.button`
-  background: transparent;
-  color: var(--font-on-mute);
-  padding: 10px var(--spacing-s);
-  border: none;
-  border-bottom: 4px solid transparent;
-  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);
-    `}
-`;
-
-export default TabTab;

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

@@ -1,48 +0,0 @@
-import { useState } from 'react';
-import Tab from '../';
-
-const metadata = {
-  title: 'Tab/Tab',
-  component: Tab,
-  argTypes: {
-    onChange: {
-      action: '123',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [selectedTab, setSelectedTab] = useState('dashboard');
-
-  return (
-    <Tab
-      selected={selectedTab}
-      onChange={(event) => {
-        setSelectedTab(event);
-        onChange();
-      }}
-    >
-      <Tab.List>
-        <Tab.Tab name='dashboard'>Dashboard</Tab.Tab>
-        <Tab.Tab name='information'>Information</Tab.Tab>
-        <Tab.Tab name='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 = {};
-
-export default metadata;
-export { Default };

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

@@ -1,26 +0,0 @@
-import Tab from '../';
-
-const metadata = {
-  title: 'Tab/TabList',
-  component: Tab,
-};
-
-const Template = (args) => {
-  return (
-    <>
-      <Tab>
-        <Tab.List style={{ color: '#ffff' }} {...args}></Tab.List>
-      </Tab>
-      <p style={{ color: '#ffff' }}>content</p>
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'this is a tab list',
-  noMargin: false,
-};
-
-export default metadata;
-export { Default };

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

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import Tab from '../';
-
-const metadata = {
-  title: 'Tab/TabPanel',
-  component: Tab,
-  argTypes: {
-    children: {
-      description: 'TabPanel contnet',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [selectedTab, setSelectedTab] = useState('dashboard');
-
-  return (
-    <Tab selected={selectedTab} onChange={setSelectedTab}>
-      <Tab.List>
-        <Tab.Tab name='dashboard'>Dashboard</Tab.Tab>
-        <Tab.Tab name='information'>Information</Tab.Tab>
-        <Tab.Tab name='license'>License</Tab.Tab>
-      </Tab.List>
-      <Tab.Panel
-        name='dashboard'
-        style={{ color: '#ffff' }}
-        {...args}
-      ></Tab.Panel>
-      <Tab.Panel
-        name='information'
-        style={{ color: 'orange' }}
-        {...args}
-      ></Tab.Panel>
-      <Tab.Panel name='license' style={{ color: 'red' }} {...args}></Tab.Panel>
-    </Tab>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: <p>content</p>,
-};
-
-export default metadata;
-export { Default };

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

@@ -1,30 +0,0 @@
-import Tab from '../';
-
-const metadata = {
-  title: 'Tab/TabTab',
-  component: Tab,
-  argTypes: {
-    name: {
-      //   description: "name",
-    },
-  },
-};
-
-const Template = (args) => {
-  return (
-    <Tab>
-      <Tab.List>
-        <Tab.Tab name='dashboard' {...args}></Tab.Tab>
-      </Tab.List>
-    </Tab>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  children: 'Dashboard',
-  //   name: "dashboard",
-};
-
-export default metadata;
-export { Default };

package/src/Tab/__test__/Tab.test.js

@@ -1,43 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import Tab from '../Tab';
-
-jest.mock('../subComponent/TabContext', () => {
-  return {
-    Provider: ({ value, children }) => {
-      return (
-        <div>
-          {children}
-          <div>selected: {value.selected}</div>
-          <div>onChange: {typeof value.onChange}</div>
-        </div>
-      );
-    },
-  };
-});
-
-describe('Test Tab Component', () => {
-  test('render Tab', () => {
-    render(<Tab>Tab content</Tab>);
-
-    const tab = screen.getByText('Tab content');
-    expect(tab).toBeInTheDocument();
-  });
-
-  test('context', () => {
-    const onChangeFunction = jest.fn();
-    const selectedValue = 'dashboard';
-
-    render(
-      <Tab onChange={onChangeFunction} selected={selectedValue}>
-        Tab content
-      </Tab>,
-    );
-
-    const selected = screen.getByText('selected: dashboard');
-    expect(selected).toBeInTheDocument();
-
-    const onChange = screen.getByText('onChange: function');
-    expect(onChange).toBeInTheDocument();
-  });
-});

package/src/Tab/__test__/TabList.test.js

@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import TabList from '../TabList';
-
-describe('Test TabList Component', () => {
-  test('render Tab list', () => {
-    render(<TabList>TabList content</TabList>);
-
-    const tablist = screen.getByRole('tablist');
-    expect(tablist).toBeInTheDocument();
-
-    const tabListChildren = screen.getByText('TabList content');
-    expect(tabListChildren).toBeInTheDocument();
-  });
-
-  test('variant style', () => {
-    render(<TabList noMargin>TabList content</TabList>);
-
-    const tablist = screen.getByRole('tablist');
-    expect(tablist).toHaveStyle('margin-bottom: 0');
-  });
-});

package/src/Tab/__test__/TabPanel.test.js

@@ -1,27 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import TabContext from '../subComponent/TabContext';
-import TabPanel from '../TabPanel';
-
-describe('Test TabPanel Component', () => {
-  const onChange = jest.fn();
-  const selected = 'dashboard';
-
-  test('render TabPanel', () => {
-    render(
-      <TabContext.Provider value={{ selected, onChange }}>
-        <TabPanel name='dashboard'>dashboard</TabPanel>
-      </TabContext.Provider>,
-    );
-
-    const tabpanel = screen.getByRole('tabpanel');
-    expect(tabpanel).toBeInTheDocument();
-
-    const tabPanelChildren = screen.getByText('dashboard');
-    expect(tabPanelChildren).toBeInTheDocument();
-
-    expect(tabpanel).toHaveStyle({
-      display: 'block',
-    });
-  });
-});

package/src/Tab/__test__/TabTab.test.js

@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import TabContext from '../subComponent/TabContext';
-import TabTab from '../TabTab';
-import userEvent from '@testing-library/user-event';
-
-describe('Test TabTab Component', () => {
-  const onChange = jest.fn();
-  const selected = 'dashboard';
-
-  test('render TabTab', () => {
-    render(
-      <TabContext.Provider value={{ selected, onChange }}>
-        <TabTab name='information'>Information</TabTab>
-      </TabContext.Provider>,
-    );
-
-    const tab = screen.getByRole('tab');
-    expect(tab).toBeInTheDocument();
-
-    const tabChildren = screen.getByText('Information');
-    expect(tabChildren).toBeInTheDocument();
-
-    userEvent.hover(tab);
-    expect(tab).toHaveStyleRule('color', 'var(--color-white)', {
-      modifier: ':hover',
-    });
-  });
-
-  test('on change', () => {
-    render(
-      <TabContext.Provider value={{ selected, onChange }}>
-        <TabTab name='information'>Information</TabTab>
-      </TabContext.Provider>,
-    );
-
-    const tab = screen.getByRole('tab');
-    expect(tab).toBeInTheDocument();
-
-    const tabChildren = screen.getByText('Information');
-    expect(tabChildren).toBeInTheDocument();
-
-    userEvent.click(tab);
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  test('variant style', () => {
-    render(
-      <TabContext.Provider value={{ selected, onChange }}>
-        <TabTab name='dashboard'>Dashboard</TabTab>
-      </TabContext.Provider>,
-    );
-
-    const tab = screen.getByText('Dashboard', { selector: 'button' });
-    expect(tab).toHaveStyleRule('border-color', 'var(--color-primary)');
-    expect(tab).toHaveStyleRule('color', 'var(--color-white)');
-  });
-});

package/src/Tab/index.js

@@ -1,10 +0,0 @@
-import Tab from './Tab';
-import TabList from './TabList';
-import TabTab from './TabTab';
-import TabPanel from './TabPanel';
-
-export default Object.assign(Tab, {
-  List: TabList,
-  Tab: TabTab,
-  Panel: TabPanel,
-});

package/src/Tab/subComponent/TabContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const TabContext = createContext(null);
-
-export default TabContext;