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

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

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

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

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

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

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

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