@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/styles/theme/light.theme.js

@@ -0,0 +1,99 @@
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#989cad',
+  colorPrimary: '#3661ec',
+  colorSuccess: '#48d5cc',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(54, 97, 236, 0.2)',
+  colorActive: 'rgba(54, 97, 236, 0.2)',
+  scrollBarColor: 'rgba(54, 97, 236, 0.3)',
+  bgColor1: '#F0ECFF',
+  bgColor2: '#F8F4FF',
+  bgColor3: '#E6E1FF',
+  bgColor4: '#F8F4FF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)',
+};
+
+// Theme stylesheet
+const lightTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem',
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+};
+
+export default lightTheme;

package/src/styles/theme/midnight.theme.js

@@ -0,0 +1,93 @@
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#1F2430',
+  colorGrey: '#8A8FA3',
+  colorPrimary: '#00255B',
+  colorSuccess: '#1DA57A',
+  colorWarning: '#F2994A',
+  colorDanger: '#E5484D',
+  colorHover: 'rgba(0, 37, 91, 0.1)',
+  colorActive: 'rgba(0, 37, 91, 0.15)',
+  scrollBarColor: 'rgba(0, 37, 91, 0.3)',
+  bgColor1: '#F5F6F8',
+  bgColor2: '#FFFFFF',
+  bgColor3: '#EDEFF3',
+  bgColor4: '#00255B',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useModernIcons: false,
+  useLightBrand: true,
+  colorHoverSidebar: 'rgba(255, 255, 255, 0.12)',
+  colorActiveSidebar: 'rgba(255, 255, 255, 0.18)',
+  colorTextSidebar: '#FFFFFF',
+  colorIconHeader: '#FFFFFF',
+  colorArrowSidebar: '#FFFFFF',
+};
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(31, 36, 48, 0.6)',
+};
+const midnightTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem',
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+};
+export default midnightTheme;

package/src/styles/theme/white.theme.js

@@ -0,0 +1,103 @@
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#b7bbcd',
+  colorPrimary: '#345FEB',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(52, 95, 235, 0.2)',
+  colorActive: 'rgba(52, 95, 235, 0.2)',
+  scrollBarColor: 'rgba(52, 95, 235, 0.3)',
+  bgColor1: '#EEEEEE',
+  bgColor2: '#F7F7F7',
+  bgColor3: '#FFFFFF',
+  bgColor4: '#F7F7F7',
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  useModernIcons: false,
+  useLightBrand: false,
+  hideMainDecoration: false,
+  bgMainKey: 'default',
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)',
+};
+
+// Theme stylesheet
+const whiteTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem',
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem',
+  },
+};
+
+export default whiteTheme;

package/src/styles/themes.js

@@ -0,0 +1,15 @@
+import whiteTheme from './theme/white.theme';
+import lightTheme from './theme/light.theme';
+import darkTheme from './theme/dark.theme';
+import midnightThemet from './theme/midnight.theme';
+import emberTheme from './theme/ember.theme';
+
+const themes = {
+  White: whiteTheme,
+  Light: lightTheme,
+  Dark: darkTheme,
+  Midnight: midnightThemet,
+  Ember: emberTheme,
+};
+
+export default themes;

package/src/table/GridTable.js

@@ -0,0 +1,333 @@
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { useCalculateDataRange, useGenerateSort } from './hooks';
+import scrollbar from '../styles/mixin/scrollbar';
+import TH from './subComponent/GridTableHeadCell';
+import Resizer from './subComponent/Resizer';
+import GridTableFooter from './subComponent/GridTableFooter';
+import TableFooterInfo from './subComponent/TableFooterInfo';
+import TableFooterPager from './subComponent/TableFooterPager';
+import Paginate from '../paginate/Paginate';
+import Select from '../select/Select';
+import Popover from '../popover/Popover';
+
+const GridTable = ({
+  columns,
+  data,
+  currentPage,
+  limit,
+  total,
+  onPageChange,
+  onLimitChange,
+  sortColumn,
+  sortType,
+  onSortChange,
+  backgroundReverse,
+  translation,
+}) => {
+  const wrapperRef = useRef(null);
+  const tableRef = useRef(null);
+  const { start, end } = useCalculateDataRange(currentPage, limit, total);
+  const [tableWidth, setTableWidth] = useState(0);
+  const [restWidth, setRestWidth] = useState(0);
+
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table',
+    };
+
+    return { ...defaultTexts, ...translation };
+  }, [translation]);
+
+  const handleSortChange = useCallback(
+    (columnName) => {
+      if (onSortChange) {
+        onSortChange(columnName);
+      }
+    },
+    [onSortChange],
+  );
+
+  const handleResize = useCallback(() => {
+    setTableWidth(tableRef.current.offsetWidth);
+    setRestWidth((previousWidth) => {
+      const containerWidth = wrapperRef.current.offsetWidth;
+      const tableWidth = tableRef.current.offsetWidth - previousWidth;
+      if (containerWidth > tableWidth) {
+        return containerWidth - tableWidth;
+      }
+
+      return 0;
+    });
+  }, []);
+
+  const handleScroll = useCallback((event) => {
+    const { target } = event;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+
+  const showFullValue = useCallback((event) => {
+    let { id } = event.target;
+    if (!id) {
+      ({ id } = event.currentTarget);
+      event.target.id = id;
+    }
+
+    const { offsetWidth, scrollWidth, innerText } = event.target;
+    if (scrollWidth >= offsetWidth && innerText) {
+      event.stopPropagation();
+      Popover({
+        id,
+        target: event.target,
+        content: innerText,
+        boundary: tableRef.current,
+      });
+    }
+  }, []);
+
+  // generate sort icon area
+  const generateSort = useGenerateSort(sortColumn, sortType);
+
+  const tableHeads = useMemo(() => {
+    const tableHeads = columns.map((column, index) => {
+      const { title, fieldName, width, sortable, align } = column;
+
+      return (
+        <TH
+          key={`TH${index}`}
+          width={width}
+          align={align}
+          backgroundReverse={backgroundReverse}
+          sortable={sortable}
+          onClick={() => {
+            sortable && handleSortChange(fieldName);
+          }}
+        >
+          <div>
+            <span id={fieldName} onClick={showFullValue}>
+              {title}
+            </span>
+
+            {sortable && generateSort(fieldName)}
+          </div>
+          <Resizer onResize={handleResize} />
+        </TH>
+      );
+    });
+
+    tableHeads.push(
+      <TH
+        key='rest'
+        role='presentation'
+        width={restWidth}
+        backgroundReverse={backgroundReverse}
+      ></TH>,
+    );
+
+    return tableHeads;
+  }, [
+    backgroundReverse,
+    columns,
+    handleSortChange,
+    generateSort,
+    showFullValue,
+    handleResize,
+    restWidth,
+  ]);
+
+  const tableRows = useMemo(() => {
+    if (data.length === 0) {
+      return null;
+    }
+
+    return data.map((row, rowIndex) => {
+      const tds = columns.map((column, columnIndex) => {
+        const { title, fieldName, render, custom, ...props } = column;
+        const key = rowIndex + columnIndex.toString();
+
+        let renderedData = null;
+        if (custom && render) {
+          // call render function to get custom data(fully)
+          renderedData = render(row);
+        } else {
+          // call render function to get custom data(part)
+          renderedData = (
+            <span id={key} onClick={showFullValue}>
+              {render ? render(row[fieldName], row) : String(row[fieldName])}
+            </span>
+          );
+        }
+
+        return (
+          <TD
+            key={columnIndex}
+            data-label={title}
+            backgroundReverse={backgroundReverse}
+            {...props}
+          >
+            {renderedData}
+          </TD>
+        );
+      });
+
+      tds.push(
+        <TD
+          key='rest'
+          role='presentation'
+          backgroundReverse={backgroundReverse}
+        ></TD>,
+      );
+
+      return <tr key={rowIndex}>{tds}</tr>;
+    });
+  }, [backgroundReverse, columns, data, showFullValue]);
+
+  const generateEmptyMessage = useCallback(() => {
+    return (
+      <tr>
+        <TD
+          center
+          colSpan={columns.length}
+          backgroundReverse={backgroundReverse}
+        >
+          {texts.empty}
+        </TD>
+      </tr>
+    );
+  }, [backgroundReverse, columns, texts]);
+
+  useEffect(() => {
+    handleResize();
+  }, [columns, handleResize]);
+
+  useEffect(() => {
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
+
+  return (
+    <>
+      <TableWrapper ref={wrapperRef} backgroundReverse={backgroundReverse}>
+        <ResponsiveTable ref={tableRef}>
+          <thead>
+            <tr>{tableHeads}</tr>
+          </thead>
+          <tbody>{tableRows || generateEmptyMessage()}</tbody>
+        </ResponsiveTable>
+      </TableWrapper>
+      <Scrollbar
+        backgroundReverse={backgroundReverse}
+        width={tableWidth}
+        onScroll={handleScroll}
+      />
+      <GridTableFooter backgroundReverse={backgroundReverse}>
+        <TableFooterInfo>
+          {texts.info
+            .replace('_START_', start)
+            .replace('_END_', end)
+            .replace('_TOTAL_', total)}
+        </TableFooterInfo>
+        <TableFooterPager>
+          <Paginate
+            currentPage={currentPage}
+            totalCount={total}
+            pageSize={limit}
+            onPageChange={onPageChange}
+          />
+          {/* fix: page limit style */}
+          <Select
+            fill
+            fillReverse={!backgroundReverse}
+            allowSearch={false}
+            options={[
+              { id: 10, text: '10' },
+              { id: 20, text: '20' },
+              { id: 30, text: '30' },
+              { id: 40, text: '40' },
+              { id: 50, text: '50' },
+            ]}
+            selected={limit}
+            onSelect={onLimitChange}
+          />
+        </TableFooterPager>
+      </GridTableFooter>
+    </>
+  );
+};
+
+const TableWrapper = styled.div`
+  overflow: hidden;
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+`;
+
+const ResponsiveTable = styled.table`
+  /* make fixed width work */
+  width: 0px;
+  color: var(--font-on-background);
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+
+const TD = styled.td`
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  text-align: ${({ center }) => (center ? 'center' : 'left')};
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+
+  &:last-child {
+    border-right: none;
+  }
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    padding: 0 2px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+`;
+
+const Scrollbar = styled.div`
+  position: sticky;
+  bottom: 48px;
+  width: 100%;
+  overflow: auto;
+  background: ${({ backgroundReverse }) => {
+    return backgroundReverse
+      ? 'var(--color-background1)'
+      : 'var(--color-background2)';
+  }};
+
+  ::before {
+    display: block;
+    content: '';
+    width: ${({ width }) => `${width}px`};
+    height: 1px;
+  }
+
+  ${scrollbar({ size: 'large' })}
+`;
+
+export default GridTable;

package/src/table/ImageBox.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import IconFigure from '../figure/IconFigure';
+import ImageFluid from '../image/ImageFluid';
+
+const ImageBox = ({ image, text }) => {
+  return (
+    <Wrapper>
+      <IconFigure size='large'>
+        <ImageFluid
+          crossOrigin='anonymous'
+          src={image}
+          alt={`${text}'s pic`}
+          roundedCircle
+        />
+      </IconFigure>
+      <Text>{text}</Text>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  > figure {
+    flex: 0 0 auto;
+    margin-right: var(--spacing-xs);
+  }
+`;
+
+const Text = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export default ImageBox;