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

package/components/skeleton/Skeleton.esm.js

@@ -0,0 +1,131 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { keyframes, styled, colors } from '../../config/stitches.config.esm.js';
+import { Grid, GridItem } from '../../layout/grid/Grid.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import { Card } from '../card/Card.esm.js';
+import 'react-loading-skeleton/dist/skeleton.css';
+import Flex from '../../layout/flex/Flex.esm.js';
+
+const transform = keyframes({
+  '100%': {
+    transform: 'translateX(100%)'
+  }
+});
+const SkeletonContainer = styled(Box, {
+  '& .react-loading-skeleton::after': {
+    animation: `1.5s infinite normal ${transform} !important`,
+    animationTimingFunction: 'ease-in-out !important'
+  }
+});
+const StyledSkeleton = props => {
+  const {
+    color,
+    count,
+    width,
+    size,
+    circle
+  } = props;
+  function getBaseColor(color) {
+    switch (color) {
+      case 'primary':
+        return colors.gray300;
+      default:
+        return colors.gray150;
+    }
+  }
+  function getSize(size) {
+    switch (size) {
+      case 'md':
+        return 16;
+      case 'lg':
+        return 118;
+      default:
+        return 12;
+    }
+  }
+  return jsx(SkeletonTheme, {
+    width: width,
+    borderRadius: size === 'lg' ? 0 : 20,
+    baseColor: getBaseColor(color),
+    highlightColor: "#FAFAFA",
+    children: jsx(SkeletonContainer, {
+      children: jsx(ReactSkeleton, {
+        height: getSize(size),
+        count: count,
+        circle: circle
+      })
+    })
+  });
+};
+const Space = styled('div', {
+  height: 8,
+  variants: {
+    size: {
+      sm: {
+        height: 8
+      },
+      md: {
+        height: 16
+      }
+    }
+  }
+});
+const Container = styled(Flex, {
+  height: 'calc(100vh - 140px)',
+  flexDirection: 'column',
+  gap: '$spacing-06'
+});
+function Skeleton(props) {
+  const {
+    css,
+    variant,
+    width,
+    color,
+    patternCount = 2
+  } = props;
+  const renderGroup = count => jsx(Container, {
+    css: css,
+    children: jsx(Card, {
+      showBottomLine: false,
+      css: {
+        flex: 1,
+        padding: '$spacing-08 80px $spacing-08 $spacing-08',
+        background: '$bgWhite',
+        boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
+      },
+      children: jsx(Grid, {
+        columns: 6,
+        gapY: 5,
+        children: new Array(count).fill('').map((_, index) => jsxs(GridItem, {
+          colSpan: 6,
+          children: [jsx(StyledSkeleton, {
+            size: "md",
+            color: "primary"
+          }), jsx(Space, {
+            size: "md"
+          }), jsxs(Box, {
+            children: [jsx(StyledSkeleton, {
+              width: "70%"
+            }), jsx(Space, {}), jsx(StyledSkeleton, {
+              width: "30%"
+            })]
+          })]
+        }, index))
+      })
+    })
+  });
+  return variant === 'single' ? jsx(StyledSkeleton, {
+    width: width,
+    color: color
+  }) : renderGroup(patternCount);
+}
+Skeleton.defaultProps = {
+  variant: 'group',
+  color: 'secondary',
+  width: '100%'
+};
+
+export { Skeleton as default };

package/components/slider/Slider.esm.js

@@ -0,0 +1,345 @@
+import 'react';
+import { styled } from '@stitches/react';
+import PropTypes from 'prop-types';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const StyledSlider = styled(SliderPrimitive.Root, {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  touchAction: 'none',
+  width: 'auto',
+  padding: '4px 0',
+  cursor: 'pointer',
+  '&[data-orientation="horizontal"]': {
+    height: 20
+  },
+  '&[data-orientation="vertical"]': {
+    flexDirection: 'column',
+    width: 20,
+    minHeight: 100
+  }
+});
+const StyledTrack = styled(SliderPrimitive.Track, {
+  position: 'relative',
+  flexGrow: 1,
+  borderRadius: '9999px',
+  backgroundColor: '$chartLightBrand',
+  '&:hover': {
+    backgroundColor: '$bgSelectedLight'
+  },
+  '&[data-orientation="horizontal"]': {
+    height: 4
+  },
+  '&[data-orientation="vertical"]': {
+    width: 4
+  },
+  variants: {
+    size: {
+      sm: {
+        '&[data-orientation="horizontal"]': {
+          height: 2
+        },
+        '&[data-orientation="vertical"]': {
+          width: 2
+        }
+      },
+      m: {
+        '&[data-orientation="horizontal"]': {
+          height: 4
+        },
+        '&[data-orientation="vertical"]': {
+          width: 4
+        }
+      },
+      lg: {
+        '&[data-orientation="horizontal"]': {
+          height: 6
+        },
+        '&[data-orientation="vertical"]': {
+          width: 6
+        }
+      }
+    },
+    color: {
+      green: {
+        backgroundColor: '$chartLightGreen',
+        '&:hover': {
+          backgroundColor: '$green100'
+        }
+      },
+      orange: {
+        backgroundColor: '$chartLightOrange',
+        '&:hover': {
+          backgroundColor: '$orange100'
+        }
+      },
+      blue: {
+        backgroundColor: '$chartLightBlue',
+        '&:hover': {
+          backgroundColor: '$blue100'
+        }
+      },
+      purple: {
+        backgroundColor: '$chartLightPurple',
+        '&:hover': {
+          backgroundColor: '$purple100'
+        }
+      },
+      yellow: {
+        backgroundColor: '$chartLightYellow',
+        '&:hover': {
+          backgroundColor: '$secondary100'
+        }
+      },
+      red: {
+        backgroundColor: '$chartLightRed',
+        '&:hover': {
+          backgroundColor: '$red100'
+        }
+      },
+      dark: {
+        backgroundColor: '$chartLightGray',
+        '&:hover': {
+          backgroundColor: '$gray200'
+        }
+      },
+      brand: {
+        backgroundColor: '$chartLightBrand',
+        '&:hover': {
+          backgroundColor: '$bgSelectedLight'
+        }
+      }
+    }
+  }
+});
+const StyledRange = styled(SliderPrimitive.Range, {
+  position: 'absolute',
+  borderRadius: '9999px',
+  backgroundColor: '$primary500',
+  '&[data-orientation="horizontal"]': {
+    height: '100%'
+  },
+  '&[data-orientation="vertical"]': {
+    width: '100%'
+  },
+  variants: {
+    color: {
+      green: {
+        backgroundColor: '$chartGreen',
+        '&:hover': {
+          backgroundColor: '$primary500'
+        }
+      },
+      orange: {
+        backgroundColor: '$chartOrange',
+        '&:hover': {
+          backgroundColor: '$orange600'
+        }
+      },
+      blue: {
+        backgroundColor: '$chartBlue',
+        '&:hover': {
+          backgroundColor: '$blue600'
+        }
+      },
+      purple: {
+        backgroundColor: '$chartPurple',
+        '&:hover': {
+          backgroundColor: '$purple600'
+        }
+      },
+      yellow: {
+        backgroundColor: '$chartYellow',
+        '&:hover': {
+          backgroundColor: '$secondary600'
+        }
+      },
+      red: {
+        backgroundColor: '$chartRed',
+        '&:hover': {
+          backgroundColor: '$red600'
+        }
+      },
+      dark: {
+        backgroundColor: '$chartDark',
+        '&:hover': {
+          backgroundColor: '$gray900'
+        }
+      },
+      brand: {
+        backgroundColor: '$chartBrand',
+        '&:hover': {
+          backgroundColor: '$primary600'
+        }
+      }
+    }
+  }
+});
+const StyledThumb = styled(SliderPrimitive.Thumb, {
+  all: 'unset',
+  display: 'block',
+  width: 17,
+  height: 17,
+  borderRadius: '50%',
+  backgroundColor: '$white',
+  border: '1px solid $chartLightBrand',
+  $$shadowColor: '$colors$gray200',
+  boxShadow: '0px 2px 10px $$shadowColor',
+  '&:hover': {
+    backgroundColor: '$chartBrand'
+  },
+  '&:focus': {
+    boxShadow: '0 0 0 3px $$shadowColor'
+  },
+  variants: {
+    size: {
+      sm: {
+        width: 14,
+        height: 14
+      },
+      m: {
+        width: 17,
+        height: 17
+      },
+      lg: {
+        width: 20,
+        height: 20
+      }
+    },
+    color: {
+      green: {
+        border: '1px solid $chartGreen',
+        '&:hover': {
+          backgroundColor: '$chartLightGreen'
+        }
+      },
+      orange: {
+        border: '1px solid $chartOrange',
+        '&:hover': {
+          backgroundColor: '$chartLightOrange'
+        }
+      },
+      blue: {
+        border: '1px solid $chartBlue',
+        '&:hover': {
+          backgroundColor: '$chartLightBlue'
+        }
+      },
+      purple: {
+        border: '1px solid $chartPurple',
+        '&:hover': {
+          backgroundColor: '$chartLightPurple'
+        }
+      },
+      yellow: {
+        border: '1px solid $chartYellow',
+        '&:hover': {
+          backgroundColor: '$chartLightYellow'
+        }
+      },
+      red: {
+        border: '1px solid $chartRed',
+        '&:hover': {
+          backgroundColor: '$chartLightRed'
+        }
+      },
+      dark: {
+        border: '1px solid $chartDark',
+        '&:hover': {
+          backgroundColor: '$chartLightGray'
+        }
+      },
+      brand: {
+        border: '1px solid $chartBrand',
+        '&:hover': {
+          backgroundColor: '$chartLightBrand'
+        }
+      }
+    }
+  }
+});
+function Slider({
+  className,
+  defaultValue,
+  value,
+  name,
+  disabled,
+  orientation,
+  dir,
+  min,
+  max,
+  step,
+  onValueChange,
+  minStepsBetweenThumbs,
+  color,
+  size,
+  width,
+  height,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(StyledSlider, {
+    className: className,
+    defaultValue: defaultValue,
+    value: value,
+    name: name,
+    disabled: disabled,
+    orientation: orientation,
+    dir: dir,
+    min: min,
+    max: max,
+    step: step,
+    onValueChange: onValueChange,
+    minStepsBetweenThumbs: minStepsBetweenThumbs,
+    color: color,
+    css: {
+      width: orientation === 'vertical' ? 20 : width,
+      height: orientation === 'vertical' ? height : 20,
+      ...props.css
+    },
+    ...props,
+    children: [/*#__PURE__*/jsx(StyledTrack, {
+      color: color,
+      size: size,
+      children: /*#__PURE__*/jsx(StyledRange, {
+        color: color
+      })
+    }), /*#__PURE__*/jsx(StyledThumb, {
+      color: color,
+      size: size
+    })]
+  });
+}
+Slider.propTypes = {
+  className: PropTypes.string,
+  defaultValue: PropTypes.arrayOf(PropTypes.number),
+  value: PropTypes.arrayOf(PropTypes.number),
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  onValueChange: PropTypes.func,
+  minStepsBetweenThumbs: PropTypes.number,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Slider.defaultProps = {
+  disabled: false,
+  orientation: 'horizontal',
+  dir: 'ltr',
+  min: 0,
+  max: 100,
+  step: 1,
+  minStepsBetweenThumbs: 0,
+  color: 'brand',
+  size: 'm'
+};
+
+export { Slider, Slider as default };