@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/chart/lineChart/components/ProductList.esm.js

@@ -0,0 +1,78 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import Tooltip from '../../../tooltip/Tooltip.esm.js';
+import { Tag } from '../../../tag/Tag.esm.js';
+
+const tooltipLabel = (name, variants) => {
+  if (variants && variants.length > 0) {
+    return `${name} - ${variants && variants.join(', ')}`;
+  }
+  return name;
+};
+const ProductList = props => {
+  const {
+    variants = [],
+    name,
+    direction,
+    css
+  } = props;
+  return jsx(Tooltip, {
+    label: tooltipLabel(name, variants),
+    children: jsxs(Box, {
+      gap: 2,
+      css: Object.assign({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: direction === 'column' ? 'column' : 'row',
+        gap: '4px',
+        maxWidth: '250px',
+        '@md': {
+          maxWidth: '124px',
+          flexDirection: direction === 'row' ? 'row' : 'column',
+          alignItems: 'flex-start'
+        }
+      }, css),
+      children: [jsx(Box, {
+        title: name && name,
+        css: {
+          maxWidth: '124px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          fontSize: 14,
+          fontWeight: 600,
+          color: '$textSecondary'
+        },
+        children: name
+      }), variants && variants.length > 0 && jsxs(React__default.Fragment, {
+        children: [jsx(Flex, {
+          gap: 2,
+          children: variants.slice(0, 2).map(variant => jsx(Tag, {
+            css: {
+              height: 'auto',
+              padding: '4px 8px'
+            },
+            type: "varian",
+            children: variant
+          }, variant))
+        }), variants.length > 2 && jsx(Tag, {
+          css: {
+            height: 'auto',
+            padding: '4px 8px',
+            minWidth: 'unset',
+            justifyContent: 'flex-start',
+            mr: 'auto'
+          },
+          type: "varian",
+          children: `+${variants.length - 2}`
+        }, "index")]
+      })]
+    })
+  });
+};
+
+export { ProductList as default };

package/components/chart/lineChart/components/TitleLegend.esm.js

@@ -0,0 +1,107 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Heading from '../../../heading/Heading.esm.js';
+import Text from '../../../text/Text.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import InputCheckbox from '../../../form/components/InputCheckbox/InputCheckbox.esm.js';
+
+const StyledDescription = styled('p', {
+  marginTop: '$spacing-03',
+  fontWeight: 400,
+  fontSize: 12,
+  color: '$textSecondary'
+});
+const TitleLegend = props => {
+  const {
+    title,
+    description,
+    legendData,
+    filteredData,
+    setFilteredData,
+    isComparator,
+    titleOnly
+  } = props;
+  return filteredData.length > 0 ? jsxs(Box, {
+    css: {
+      display: 'flex',
+      marginBottom: '$spacing-06',
+      '@sm': {
+        flexDirection: 'column',
+        gap: '$compact',
+        alignItems: 'start'
+      },
+      '@md': {
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    },
+    children: [jsxs(Box, {
+      css: {
+        marginBottom: '$spacing-03'
+      },
+      children: [jsx(Heading, {
+        heading: "sectionTitle",
+        css: {
+          lineHeight: '24px'
+        },
+        children: title
+      }), description && jsx(StyledDescription, {
+        children: description
+      })]
+    }), !titleOnly && !isComparator && jsx(Box, {
+      css: {
+        '@sm': {
+          display: 'grid',
+          gridTemplateColumns: legendData.length > 2 ? '1fr 1fr' : '1fr',
+          gap: legendData.length > 2 ? '$compact' : '4px'
+        },
+        '@md': {
+          display: 'flex',
+          flexWrap: 'nowrap',
+          gap: '$compact'
+        }
+      },
+      children: legendData.map(legend => jsxs(Box, {
+        css: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'start'
+        },
+        children: [legend.isHideable && jsx(InputCheckbox, {
+          id: legend.name,
+          checked: !filteredData.find(data => data.name === legend.name).hide,
+          onCheckedChange: status => setFilteredData(filteredData.map(data => data.name === legend.name ? Object.assign(Object.assign({}, data), {
+            hide: !status
+          }) : Object.assign({}, data)))
+        }), jsx(Box, {
+          css: {
+            backgroundColor: legend.color,
+            borderRadius: '50%',
+            display: 'inline-block',
+            margin: '0px 6px 0px 10px',
+            '@sm': {
+              height: legend.isHideable ? 4 : 10,
+              width: legend.isHideable ? 4 : 10
+            },
+            '@md': {
+              height: 6,
+              width: 6
+            }
+          }
+        }), jsx(Text, {
+          variant: "label",
+          children: legend.name
+        })]
+      }, legend.name))
+    })]
+  }) : jsx(Box, {});
+};
+TitleLegend.defaultProps = {
+  isComparator: undefined,
+  titleOnly: false
+};
+
+export { TitleLegend as default };

package/components/chart/lineChart/components/Tooltip.esm.js

@@ -0,0 +1,90 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.iterator.some.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Paragraph from '../../../paragraph/Paragraph.esm.js';
+import Box from '../../../../layout/box/Box.esm.js';
+import Flex from '../../../../layout/flex/Flex.esm.js';
+import moment from 'moment';
+import { styled } from '../../../../config/stitches.config.esm.js';
+import { isValidDate, currency, numSeparator } from '../../utils/index.esm.js';
+
+const StyledIconLeft = styled('div', {
+  margin: '5px 3px 5px 0px',
+  display: 'inline-flex',
+  verticalAlign: 'middle',
+  width: '8px',
+  height: '8px',
+  borderRadius: '50%'
+});
+const Tooltip = props => {
+  const {
+    hover,
+    payload,
+    active,
+    legendData,
+    xAxisKey,
+    chartTypeLabel,
+    customTooltipDate
+  } = props;
+  if (legendData.some(l => l.dataKey === 'novalue')) {
+    return jsx("div", {});
+  }
+  const formatValue = (legendDataKey, hoverKey, hoverValue) => {
+    let finalValue = '';
+    const selectedKey = legendDataKey.find(l => l.dataKey === hoverKey);
+    if (selectedKey === undefined) return finalValue;
+    const formattedValue = Number.isNaN(Number(hoverValue)) ? '0' : `${selectedKey.isCurrency ? currency({
+      value: hoverValue,
+      convertMinus: hoverValue < 0,
+      decimal: true
+    }) : numSeparator(hoverValue)}`;
+    finalValue = `${formattedValue} ${chartTypeLabel !== null && chartTypeLabel !== void 0 ? chartTypeLabel : selectedKey.name}`;
+    return finalValue;
+  };
+  if (active && hover) {
+    const visibleValue = legendData.filter(v => v.hide === false);
+    const mapValue = visibleValue.map(val => Object.assign(Object.assign({}, val), {
+      name: val.dataKey,
+      hoverValue: payload[0].payload[val.dataKey]
+    }));
+    const hoverDate = payload[0].payload[xAxisKey];
+    return jsxs(Box, {
+      css: {
+        backgroundColor: '$textContent',
+        color: '$white',
+        borderRadius: '$sm',
+        padding: '$spacing-03'
+      },
+      children: [payload && (customTooltipDate ? jsx(Paragraph, {
+        paragraph: "shortContentRegular",
+        children: isValidDate(hoverDate) ? customTooltipDate(hoverDate) : hoverDate
+      }) : jsx(Paragraph, {
+        paragraph: "shortContentRegular",
+        children: isValidDate(hoverDate) ? moment(hoverDate).locale('id-ID').format('DD MMMM YYYY') : hoverDate
+      })), mapValue.map((s, index) => jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [jsx(StyledIconLeft, {
+          css: {
+            backgroundColor: s.color
+          }
+        }), jsx(Paragraph, {
+          paragraph: "shortContentRegular",
+          children: formatValue(legendData, s.name, s.hoverValue)
+        }, s.name)]
+      }, `${s.name}_${index}`))]
+    });
+  }
+  return null;
+};
+Tooltip.defaultProps = {
+  hover: null,
+  payload: undefined,
+  active: undefined,
+  legendData: []
+};
+
+export { Tooltip as default };

package/components/chart/utils/index.esm.js

@@ -0,0 +1,109 @@
+import moment from 'moment';
+
+//@ts-nocheck
+const formatHour = date => moment(date, 'YYYY-MM-DD HH:mm:ss').format('HH:mm');
+const formatDay = date => moment(date).locale('id-ID').format('DD MMM');
+const formatMonth = date => moment(date).locale('id-ID').format('MMM');
+const formatYear = date => new Date(Date.parse(date)).toLocaleDateString('id-ID', {
+  year: 'numeric'
+});
+const handleXaxis = (date, period) => {
+  switch (period) {
+    case 'jam':
+      return formatHour(date);
+    case 'hari':
+      return formatDay(date);
+    case 'minggu':
+      return formatDay(date);
+    case 'bulan':
+      return formatMonth(date);
+    case 'tahun':
+      return formatYear(date);
+    default:
+      return formatDay(date);
+  }
+};
+const currency = ({
+  value,
+  type = 'Rp',
+  thousandSeparator = '.',
+  decimal = false,
+  convertMinus = false
+}) => {
+  let formattedNumber;
+  if (decimal) {
+    const toFixedNum = parseFloat(value).toFixed(2);
+    const decimalSplit = toFixedNum ? toFixedNum.split('.') : ['0', '00'];
+    decimalSplit[0] = decimalSplit[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${thousandSeparator}`);
+    formattedNumber = decimalSplit.join(thousandSeparator === ',' ? '.' : ',');
+  } else {
+    formattedNumber = Math.round(value).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${thousandSeparator}`);
+  }
+  if (convertMinus && parseFloat(value) < 0) {
+    const numberWithoutMinus = formattedNumber.toString().replace('-', '');
+    return type.length > 0 ? `( ${type} ${numberWithoutMinus} )` : `( ${numberWithoutMinus} )`;
+  }
+  return type.length > 0 ? `${type} ${formattedNumber}` : formattedNumber;
+};
+const numSeparator = num => {
+  const toFixedNum = parseFloat(num).toFixed(2); // set two decimal places
+  const decimalSplit = toFixedNum.split('.');
+  let formatedNumber = decimalSplit[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.');
+  if (decimalSplit.length <= 2) {
+    const decimalNumber = decimalSplit[1];
+    if (decimalNumber) {
+      formatedNumber += `,${decimalNumber}`;
+    }
+  }
+  return formatedNumber;
+};
+const formatCurrency = (number, options) => new Intl.NumberFormat('id-Id', Object.assign({
+  style: 'currency',
+  currency: 'IDR'
+}, options)).format(number);
+const compactCurrency = number => formatCurrency(number, {
+  notation: 'compact',
+  compactDisplay: 'short'
+}).replace('Rp', '').trim();
+const roundUp = highestVal => {
+  let upper = 1;
+  for (let j = 0; j < Number.parseInt(highestVal, 10).toString().length; j += 1) {
+    upper += String(0);
+  }
+  if (highestVal === 0 || highestVal === Number.NEGATIVE_INFINITY) {
+    return 1;
+  }
+  if (highestVal <= 5) {
+    return 5;
+  }
+  if (Math.ceil(highestVal) % (upper / 10) !== 0) {
+    const newHighest = Math.ceil(highestVal / (upper * 0.2)) * (upper * 0.2);
+    return newHighest;
+  }
+  return highestVal;
+};
+const roundDown = lowestVal => {
+  let upper,
+    _lowestVal = 0;
+  if (lowestVal) {
+    if (parseFloat(lowestVal) < 0) {
+      upper = -1;
+      for (let z = 0; z < Math.abs(parseInt(lowestVal, 10)).toString().length; z += 1) {
+        upper += String(0);
+      }
+      if (Math.ceil(lowestVal) % (upper / 10) !== 0) {
+        const newLowest = Math.ceil(lowestVal / (upper * 0.2)) * (upper * 0.2);
+        _lowestVal = Math.ceil(newLowest);
+      } else {
+        _lowestVal = lowestVal;
+      }
+    }
+    return _lowestVal;
+  }
+  return _lowestVal;
+};
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+
+export { compactCurrency, currency, formatCurrency, formatDay, formatHour, formatMonth, formatYear, handleXaxis, isValidDate, numSeparator, roundDown, roundUp };

package/components/checkboxTable/CheckboxTable.esm.js

@@ -0,0 +1,287 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import React__default, { useState, createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronUpOutline, ChevronDownOutline, MinusOutline } from '@majoo-ui/icons';
+import { useTable, useExpanded } from 'react-table';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import InputCheckbox from '../form/components/InputCheckbox/InputCheckbox.esm.js';
+
+const TableContainer = styled('div', {
+  display: 'block',
+  flexDirection: 'column',
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto'
+});
+const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
+  borderCollapse: 'collapse'
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: '$white',
+  zIndex: 10
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1px solid $bgBorder'
+});
+const TableHeadCell = styled('th', {
+  height: 44,
+  fontSize: '$header-table',
+  fontWeight: 600,
+  color: '$textPrimary',
+  textAlign: 'left',
+  paddingLeft: 8
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  borderTop: '1pt solid $bgBorder',
+  '&:last-child': {
+    borderBottom: '1pt solid $bgBorder'
+  },
+  '&:hover': {
+    backgroundColor: '$bgGray'
+  },
+  variants: {
+    subRow: {
+      true: {
+        borderTop: 'none',
+        borderBottom: '1pt solid $bgBorder'
+      }
+    }
+  }
+});
+const TableCell = styled('td', {
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: 400,
+  color: '$textPrimary',
+  position: 'relative',
+  paddingLeft: 8,
+  height: 44,
+  '&:last-child': {
+    paddingRight: 8
+  },
+  variants: {
+    verticalAlign: {
+      top: {
+        verticalAlign: 'top'
+      },
+      middle: {
+        verticalAlign: 'middle'
+      },
+      bottom: {
+        verticalAlign: 'bottom'
+      }
+    }
+  }
+});
+const TableCellContent = styled('div', {
+  height: '100%',
+  paddingTop: 10,
+  paddingBottom: 10,
+  display: 'flex',
+  userSelect: 'none',
+  variants: {
+    align: {
+      top: {
+        alignItems: 'start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      bottom: {
+        alignItems: 'end'
+      }
+    }
+  }
+});
+const Required = styled('span', {
+  marginLeft: 4,
+  color: '$textRed !important'
+});
+function CheckboxTable(props) {
+  const {
+    columns,
+    data,
+    emptyDataMessage,
+    rowHeight,
+    align,
+    onChange
+  } = props;
+  const [datasets, setDatasets] = useState([...data]);
+  const instance = useTable({
+    columns,
+    data: datasets,
+    autoResetExpanded: false
+  }, useExpanded);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    rows,
+    headerGroups,
+    prepareRow,
+    toggleAllRowsExpanded,
+    state
+  } = instance;
+  return jsxs(TableContainer, {
+    css: props === null || props === void 0 ? void 0 : props.css,
+    children: [jsxs(TableContent, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead, {
+        children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => {
+          const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+          return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(column => jsxs(TableHeadCell, Object.assign({}, column.getHeaderProps({
+              style: {
+                minWidth: column.minWidth,
+                width: column.width,
+                maxWidth: column.maxWidth
+              }
+            }), {
+              children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                children: "*"
+              }) : '']
+            })))
+          }));
+        })
+      }), jsx(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: rows === null || rows === void 0 ? void 0 : rows.map((row, index) => {
+          var _a, _b, _c;
+          prepareRow(row);
+          const originalRow = row.original;
+          return jsxs(React__default.Fragment, {
+            children: [/*#__PURE__*/createElement(TableRow, Object.assign({}, row.getRowProps(), {
+              key: index
+            }), (_b = (_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.filter(cell => !cell.column.isSubRow)) === null || _b === void 0 ? void 0 : _b.map((cell, indexCell) => {
+              var _a;
+              const column = cell.column;
+              const originalCell = cell.row.original;
+              return /*#__PURE__*/createElement(TableCell, Object.assign({}, cell.getCellProps({
+                style: {
+                  minWidth: column.minWidth,
+                  width: column.width,
+                  maxWidth: column.maxWidth
+                }
+              }), {
+                key: index + indexCell + 'tb-cell',
+                css: {
+                  '@md': {
+                    height: rowHeight
+                  }
+                }
+              }), jsxs(TableCellContent, {
+                align: align,
+                children: [indexCell === 0 && jsx(Flex, {
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    marginRight: 12,
+                    cursor: 'pointer',
+                    display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none !important'
+                  },
+                  onClick: () => {
+                    if (!Object.keys(state.expanded).includes(row.id)) {
+                      toggleAllRowsExpanded(false);
+                    }
+                    row.toggleRowExpanded(!row.isExpanded);
+                  },
+                  children: row.isExpanded ? jsx(ChevronUpOutline, {}) : jsx(ChevronDownOutline, {})
+                }), cell.render('Cell')]
+              }));
+            })), (_c = originalRow === null || originalRow === void 0 ? void 0 : originalRow.detail) === null || _c === void 0 ? void 0 : _c.map((cell, index) => {
+              const id_row = originalRow === null || originalRow === void 0 ? void 0 : originalRow.id;
+              const {
+                id: id_subrow,
+                name,
+                detail_method
+              } = cell;
+              const headerRender = name;
+              return /*#__PURE__*/createElement(TableRow, Object.assign({}, row.getRowProps(), {
+                key: `row_collapse_${index}`,
+                css: {
+                  display: row.isExpanded ? 'table-row' : 'none'
+                }
+              }), jsx(TableCell, {
+                css: {
+                  '@md': {
+                    height: rowHeight
+                  }
+                },
+                children: jsx(Box, {
+                  css: {
+                    paddingLeft: 36
+                  },
+                  children: headerRender
+                })
+              }, index + 'tb-cell-collapse'), detail_method === null || detail_method === void 0 ? void 0 : detail_method.map((subRow, indexSubRow) => {
+                const {
+                  id: id_col,
+                  is_grant,
+                  is_show
+                } = subRow;
+                return jsx(TableCell, {
+                  css: {
+                    '@md': {
+                      height: rowHeight
+                    }
+                  },
+                  children: jsx(Box, {
+                    children: Number(is_show) === 1 ? jsx(InputCheckbox, {
+                      checked: Number(is_grant) === 1,
+                      indeterminate: false,
+                      onCheckedChange: e => {
+                        const newDatasets = [...datasets];
+                        for (const [indexDataRow, dataRow] of newDatasets.entries()) {
+                          const rowData = dataRow;
+                          if ((rowData === null || rowData === void 0 ? void 0 : rowData.id) === id_row) {
+                            for (const [indexDataSubRow, dataSubRow] of rowData.detail.entries()) {
+                              if ((dataSubRow === null || dataSubRow === void 0 ? void 0 : dataSubRow.id) === id_subrow) {
+                                for (const [indexDataCol, dataCol] of dataSubRow.detail_method.entries()) {
+                                  if ((dataCol === null || dataCol === void 0 ? void 0 : dataCol.id) === id_col) {
+                                    newDatasets[indexDataRow].detail[indexDataSubRow].detail_method[indexDataCol].is_grant = e ? 1 : 0;
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        }
+                        setDatasets(newDatasets);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(newDatasets);
+                      }
+                    }) : jsx(MinusOutline, {
+                      size: 16,
+                      color: colors.iconDisable
+                    })
+                  })
+                }, index + indexSubRow + 'tb-cell-collapse');
+              }));
+            })]
+          });
+        })
+      }))]
+    })), rows.length < 1 && jsx(Flex, {
+      css: {
+        padding: '$spacing-07'
+      },
+      align: "center",
+      justify: "center",
+      children: jsx(Paragraph, {
+        paragraph: "shortContentRegular",
+        color: "secondary",
+        children: emptyDataMessage || 'Tidak ada data'
+      })
+    })]
+  });
+}
+
+export { CheckboxTable as default };