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

package/layout/box/Box.esm.js

@@ -0,0 +1,24 @@
+import { styled } from '../../config/stitches.config.esm.js';
+
+const Box = styled('div', {
+  variants: {
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'inherit !important'
+        }
+      }
+    }
+  }
+});
+Box.displayName = 'Box';
+
+export { Box as default };

package/layout/flex/Flex.esm.js

@@ -0,0 +1,135 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { seqNumberVariants } from '../../utils/variant.esm.js';
+
+const Flex = styled('div', {
+  display: 'flex',
+  variants: {
+    direction: {
+      row: {
+        flexDirection: 'row'
+      },
+      column: {
+        flexDirection: 'column'
+      },
+      rowReverse: {
+        flexDirection: 'row-reverse'
+      },
+      columnReverse: {
+        flexDirection: 'column-reverse'
+      }
+    },
+    align: {
+      start: {
+        alignItems: 'flex-start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      end: {
+        alignItems: 'flex-end'
+      },
+      stretch: {
+        alignItems: 'stretch'
+      },
+      baseline: {
+        alignItems: 'baseline'
+      }
+    },
+    justify: {
+      start: {
+        justifyContent: 'flex-start'
+      },
+      center: {
+        justifyContent: 'center'
+      },
+      end: {
+        justifyContent: 'flex-end'
+      },
+      between: {
+        justifyContent: 'space-between'
+      },
+      evenly: {
+        justifyContent: 'space-evenly'
+      },
+      around: {
+        justifyContent: 'space-around'
+      }
+    },
+    wrap: {
+      noWrap: {
+        flexWrap: 'nowrap'
+      },
+      wrap: {
+        flexWrap: 'wrap'
+      },
+      wrapReverse: {
+        flexWrap: 'wrap-reverse'
+      }
+    },
+    gap: seqNumberVariants(value => ({
+      gap: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    m: seqNumberVariants(value => ({
+      m: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    mt: seqNumberVariants(value => ({
+      mt: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    mb: seqNumberVariants(value => ({
+      mb: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    mr: seqNumberVariants(value => ({
+      mr: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    ml: seqNumberVariants(value => ({
+      ml: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    mx: seqNumberVariants(value => ({
+      mx: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    my: seqNumberVariants(value => ({
+      my: `$spacing-${value < 10 ? '0' + value : value}`
+    }), 12),
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  }
+});
+Flex.propTypes = {
+  direction: PropTypes.string,
+  align: PropTypes.string,
+  justify: PropTypes.string,
+  wrap: PropTypes.string,
+  gap: PropTypes.number,
+  m: PropTypes.number,
+  mt: PropTypes.number,
+  mb: PropTypes.number,
+  mr: PropTypes.number,
+  ml: PropTypes.number,
+  mx: PropTypes.number,
+  my: PropTypes.number
+};
+Flex.defaultProps = {
+  direction: 'row',
+  align: 'stretch',
+  justify: 'start',
+  wrap: 'noWrap',
+  gap: 0
+};
+Flex.displayName = 'Flex';
+
+export { Flex as default };

package/layout/grid/Grid.esm.js

@@ -0,0 +1,270 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { seqNumberVariants } from '../../utils/variant.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+//@ts-nocheck
+const GridComponent = styled('div', {
+  display: 'grid',
+  variants: {
+    align: {
+      start: {
+        alignItems: 'start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      end: {
+        alignItems: 'end'
+      },
+      stretch: {
+        alignItems: 'stretch'
+      },
+      baseline: {
+        alignItems: 'baseline'
+      }
+    },
+    justify: {
+      start: {
+        justifyContent: 'start'
+      },
+      center: {
+        justifyContent: 'center'
+      },
+      end: {
+        justifyContent: 'end'
+      },
+      between: {
+        justifyContent: 'space-between'
+      }
+    },
+    flow: {
+      row: {
+        gridAutoFlow: 'row'
+      },
+      column: {
+        gridAutoFlow: 'column'
+      },
+      dense: {
+        gridAutoFlow: 'dense'
+      },
+      rowDense: {
+        gridAutoFlow: 'row dense'
+      },
+      columnDense: {
+        gridAutoFlow: 'column dense'
+      }
+    },
+    columns: seqNumberVariants(value => ({
+      gridTemplateColumns: `repeat(${value}, 1fr)`
+    }), 10),
+    rows: seqNumberVariants(value => ({
+      gridTemplateRows: `repeat(${value}, 1fr)`
+    }), 10),
+    placeItems: {
+      stretch: {
+        placeItems: 'stretch'
+      },
+      start: {
+        placeItems: 'start'
+      },
+      end: {
+        placeItems: 'end'
+      },
+      center: {
+        placeItems: 'center'
+      },
+      left: {
+        placeItems: 'left'
+      },
+      right: {
+        placeItems: 'right'
+      }
+    },
+    gap: {
+      1: {
+        gap: '$spacing-03'
+      },
+      2: {
+        gap: '$spacing-05'
+      },
+      3: {
+        gap: '$spacing-06'
+      },
+      4: {
+        gap: '$spacing-07'
+      },
+      5: {
+        gap: '$spacing-08'
+      },
+      6: {
+        gap: '$spacing-09'
+      },
+      7: {
+        gap: '$spacing-10'
+      },
+      8: {
+        gap: '$spacing-11'
+      },
+      9: {
+        gap: '$spacing-12'
+      }
+    },
+    gapX: {
+      normal: {
+        columnGap: 'normal'
+      },
+      1: {
+        columnGap: '$spacing-03'
+      },
+      2: {
+        columnGap: '$spacing-05'
+      },
+      3: {
+        columnGap: '$spacing-06'
+      },
+      4: {
+        columnGap: '$spacing-07'
+      },
+      5: {
+        columnGap: '$spacing-08'
+      },
+      6: {
+        columnGap: '$spacing-09'
+      },
+      7: {
+        columnGap: '$spacing-10'
+      },
+      8: {
+        columnGap: '$spacing-11'
+      },
+      9: {
+        columnGap: '$spacing-12'
+      }
+    },
+    gapY: {
+      1: {
+        rowGap: '$spacing-03'
+      },
+      2: {
+        rowGap: '$spacing-05'
+      },
+      3: {
+        rowGap: '$spacing-06'
+      },
+      4: {
+        rowGap: '$spacing-07'
+      },
+      5: {
+        rowGap: '$spacing-08'
+      },
+      6: {
+        rowGap: '$spacing-09'
+      },
+      7: {
+        rowGap: '$spacing-10'
+      },
+      8: {
+        rowGap: '$spacing-11'
+      },
+      9: {
+        rowGap: '$spacing-12'
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'grid !important'
+        }
+      }
+    }
+  }
+});
+const Grid = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(GridComponent, {
+    ...props,
+    css: {
+      ...props.css,
+      gridAutoColumns: props.autoColumns,
+      gridAutoRows: props.autoRows,
+      gridTemplateColumns: props.templateColumns,
+      gridTemplateRows: props.templateRows
+    },
+    children: children
+  });
+};
+Grid.propTypes = {
+  align: PropTypes.string,
+  justify: PropTypes.string,
+  autoColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  autoRows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  autoFlow: PropTypes.string,
+  templateColumns: PropTypes.string,
+  templateRows: PropTypes.string,
+  columns: PropTypes.number,
+  rows: PropTypes.number,
+  gap: PropTypes.number,
+  gapX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  gapY: PropTypes.number
+};
+Grid.displayName = 'Grid';
+function spanFn(value) {
+  return value === 'auto' ? 'auto' : `span ${value}/span ${value}`;
+}
+const GridItemComponent = styled('div', {
+  variants: {
+    colSpan: {
+      auto: spanFn('auto'),
+      ...seqNumberVariants(value => ({
+        gridColumn: spanFn(value)
+      }), 10)
+    },
+    rowSpan: {
+      auto: spanFn('auto'),
+      ...seqNumberVariants(value => ({
+        gridRow: spanFn(value)
+      }), 10)
+    }
+  }
+});
+const GridItem = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(GridItemComponent, {
+    ...props,
+    css: {
+      ...props.css,
+      gridArea: props.area,
+      gridColumnStart: props.colStart,
+      gridColumnEnd: props.colEnd,
+      gridRowStart: props.rowStart,
+      gridRowEnd: props.rowEnd
+    },
+    children: children
+  });
+};
+GridItem.propTypes = {
+  gridArea: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  colSpan: PropTypes.number,
+  rowSpan: PropTypes.number,
+  colStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  colEnd: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  rowStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  rowEnd: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+GridItem.displayName = 'Grid Item';
+
+export { Grid, GridItem, Grid as default };

package/layout/pageContainer/PageContainer.esm.js

@@ -0,0 +1,60 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Flex from '../flex/Flex.esm.js';
+import { jsxs } from 'react/jsx-runtime';
+
+const StyledDiv = styled(Flex, {
+  justifyContent: 'center',
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  '@sm': {
+    padding: '0 $spacing-05 $spacing-06',
+    backgroundColor: '$white',
+    width: '100%'
+  },
+  '@lg': {
+    padding: '0',
+    backgroundColor: '$bgGray'
+  },
+  '@3xl': {
+    maxWidth: '1206px !important'
+  },
+  defaultVariants: {
+    direction: 'column'
+  },
+  mobileOnly: {
+    true: {
+      '@lg': {
+        display: 'none !important'
+      }
+    }
+  },
+  desktopOnly: {
+    true: {
+      display: 'none !important',
+      '@lg': {
+        display: 'inherit !important'
+      }
+    }
+  }
+});
+const PageContainer = ({
+  children,
+  isCollapse,
+  css,
+  contentHeader,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxs(StyledDiv, {
+    id: "retina-container",
+    css: {
+      maxWidth: isCollapse ? '1206px' : '1006px',
+      ...css
+    },
+    ...props,
+    children: [contentHeader, children]
+  });
+};
+PageContainer.displayName = 'PageContainer';
+
+export { PageContainer as default };

package/majoo-provider/MajooProvider.esm.js

@@ -0,0 +1,42 @@
+import 'react';
+import ThemeProvider from './ThemeProvider.esm.js';
+import { applyGlobalStyles } from './globalStyles.esm.js';
+import { theme } from '../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import moment from 'moment';
+import { jsx } from 'react/jsx-runtime';
+
+function MajooProvider({
+  children,
+  name,
+  theme: theme$1 = theme,
+  extendStyle,
+  disableGlobalStyle
+}) {
+  !disableGlobalStyle && applyGlobalStyles(extendStyle, theme$1);
+  const {
+    i18n
+  } = useTranslation();
+  moment.locale(i18n && i18n.language ? i18n.language : 'id');
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    name: name,
+    theme: theme$1,
+    children: children
+  });
+}
+MajooProvider.propTypes = {
+  name: PropTypes.string,
+  theme: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  extendStyle: PropTypes.object,
+  disableGlobalStyle: PropTypes.bool
+};
+MajooProvider.defaultProps = {
+  name: 'default',
+  theme: theme,
+  extendStyle: {},
+  disableGlobalStyle: false
+};
+
+export { MajooProvider as default };

package/majoo-provider/ThemeProvider.esm.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { jsx } from 'react/jsx-runtime';
+
+function ThemeProvider({
+  name,
+  theme,
+  children
+}) {
+  // Apply theme class to document.body so that Radix Portal content
+  // (which renders outside this ThemeProvider div) also inherits
+  // the active theme's CSS variables.
+  React__default.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const body = document.body;
+    const themeClass = theme?.className || String(theme || '');
+    if (themeClass) {
+      body.classList.add(themeClass);
+    }
+    return () => {
+      if (themeClass) {
+        body.classList.remove(themeClass);
+      }
+    };
+  }, [theme]);
+  return /*#__PURE__*/jsx("div", {
+    id: name,
+    className: theme,
+    children: children
+  });
+}
+ThemeProvider.propTypes = {
+  name: PropTypes.string,
+  theme: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired
+};
+ThemeProvider.defaultProps = {
+  name: 'default'
+};
+
+export { ThemeProvider as default };