@class101/cdn-ui-system 0.0.10 → 0.0.11

package/lib/Overlay/Overlay.stories.js

@@ -1,33 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Overlay/Overlay.stories.tsx
-init_react_shim();
-import {Box} from "../../private/Box/index.js";
-import {Image} from "../Media/Image/index.js";
-import {Overlay} from "./Overlay.js";
-var Overlay_stories_default = {
-  title: "ui-system/Overlay",
-  component: Overlay,
-  argTypes: {
-    level: {
-      defaultValue: 1,
-      options: [1, 2, 3, 4],
-      control: "select"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Box, {
-  size: 1e3
-}, /* @__PURE__ */ React.createElement(Overlay, {
-  ...props
-}, /* @__PURE__ */ React.createElement(Image, {
-  src: "https://cdn.class101.net/images/ef5a1b69-020c-40e7-ad90-af03b94b3e11/960xauto.webp"
-})));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Overlay_stories_default as default
-};

package/lib/Pagination/Pagination.stories.js

@@ -1,37 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Pagination/Pagination.stories.tsx
-init_react_shim();
-import {Pagination} from "./Pagination.js";
-var Pagination_stories_default = {
-  title: "ui-system/Pagination",
-  component: Pagination,
-  argTypes: {
-    totalPage: {
-      defaultValue: 10,
-      control: "number"
-    },
-    currentIndex: {
-      defaultValue: 1,
-      control: "number"
-    },
-    pageSize: {
-      defaultValue: 5,
-      control: "number"
-    },
-    onChange: {
-      action: "onChange"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Pagination, {
-  ...props
-});
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Pagination_stories_default as default
-};

package/lib/Progress/ProgressBar/ProgressBar.stories.js

@@ -1,57 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Progress/ProgressBar/ProgressBar.stories.tsx
-init_react_shim();
-import {VStack} from "../../Layout/VStack/index.js";
-import {ProgressBar} from "./ProgressBar.js";
-var ProgressBar_stories_default = {
-  title: "ui-system/Progress/ProgressBar",
-  component: ProgressBar,
-  argTypes: {
-    progress: {
-      defaultValue: 100,
-      control: {
-        type: "range",
-        min: 0,
-        max: 100,
-        step: 1
-      }
-    },
-    durationMs: {
-      defaultValue: 3e3,
-      control: {
-        type: "range",
-        min: 1e3,
-        max: 1e4,
-        step: 1e3
-      }
-    },
-    inProgress: {
-      defaultValue: true,
-      control: "boolean"
-    },
-    color: {
-      defaultValue: "black",
-      control: "color"
-    },
-    bgColor: {
-      defaultValue: "#d7d7d7",
-      control: "color"
-    },
-    height: {
-      defaultValue: 1,
-      control: "text"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(ProgressBar, {
-  ...props
-}));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  ProgressBar_stories_default as default
-};

package/lib/Progress/ProgressStep/ProgressStep.stories.js

@@ -1,43 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Progress/ProgressStep/ProgressStep.stories.tsx
-init_react_shim();
-import {Box} from "../../../private/Box/index.js";
-import {ProgressStep} from "./ProgressStep.js";
-var ProgressStep_stories_default = {
-  title: "ui-system/Progress/ProgressStep",
-  component: ProgressStep,
-  argTypes: {
-    kind: {
-      defaultValue: "primary",
-      control: "select",
-      options: ["primary", "secondary", "tertiary"]
-    },
-    step: {
-      defaultValue: 1,
-      control: "number"
-    },
-    lined: {
-      defaultValue: true,
-      control: "boolean"
-    },
-    direction: {
-      defaultValue: "vertical",
-      control: "select",
-      options: ["vertical", "horizontal"]
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Box, {
-  size: 50
-}, /* @__PURE__ */ React.createElement(ProgressStep, {
-  ...props
-}));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  ProgressStep_stories_default as default
-};

package/lib/Rank/Rank.stories.js

@@ -1,39 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Rank/Rank.stories.tsx
-init_react_shim();
-import {Rank} from "./Rank.js";
-var Rank_stories_default = {
-  title: "ui-system/Rank",
-  component: Rank,
-  argTypes: {
-    status: {
-      defaultValue: "up",
-      options: ["up", "down", "new"],
-      control: "select"
-    },
-    step: {
-      defaultValue: 1,
-      control: "number"
-    },
-    statusPosition: {
-      options: ["bottom", "right"],
-      control: {type: "radio"}
-    },
-    fontWeight: {
-      options: ["extraLight", "light"],
-      control: {type: "radio"}
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Rank, {
-  ...props
-}, "10");
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Rank_stories_default as default
-};

package/lib/Ratio/Ratio.stories.js

@@ -1,34 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Ratio/Ratio.stories.tsx
-init_react_shim();
-import {Image} from "../Media/Image/index.js";
-import {Ratio} from "./Ratio.js";
-var Ratio_stories_default = {
-  title: "ui-system/Ratio",
-  component: Ratio,
-  argTypes: {
-    width: {
-      defaultValue: 200
-    },
-    ratio: {
-      defaultValue: "1:1"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Ratio, {
-  ...props
-}, /* @__PURE__ */ React.createElement(Image, {
-  src: "https://upload.wikimedia.org/wikipedia/ko/2/24/Lenna.png",
-  width: "100%",
-  height: "100%",
-  objectFit: "cover"
-}));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Ratio_stories_default as default
-};

package/lib/Section/Section.stories.js

@@ -1,49 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Section/Section.stories.tsx
-init_react_shim();
-import {HStack} from "../Layout/HStack/index.js";
-import {Image} from "../Media/Image/index.js";
-import {Section} from "./Section.js";
-var Section_stories_default = {
-  title: "ui-system/Section",
-  component: Section,
-  argTypes: {
-    title: {
-      defaultValue: "On demand",
-      control: "text"
-    },
-    subTitle: {
-      defaultValue: "Start honing your skills today",
-      control: "text"
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(Section, {
-  ...props
-}, /* @__PURE__ */ React.createElement(HStack, {
-  spacing: 18
-}, /* @__PURE__ */ React.createElement(Image, {
-  src: "https://upload.wikimedia.org/wikipedia/ko/2/24/Lenna.png",
-  width: "200px",
-  height: "200px",
-  objectFit: "cover"
-}), /* @__PURE__ */ React.createElement(Image, {
-  src: "https://upload.wikimedia.org/wikipedia/ko/2/24/Lenna.png",
-  width: "200px",
-  height: "200px",
-  objectFit: "cover"
-}), /* @__PURE__ */ React.createElement(Image, {
-  src: "https://upload.wikimedia.org/wikipedia/ko/2/24/Lenna.png",
-  width: "200px",
-  height: "200px",
-  objectFit: "cover"
-})));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Section_stories_default as default
-};

package/lib/SlideList/SlideList.stories.js

@@ -1,60 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/SlideList/SlideList.stories.tsx
-init_react_shim();
-import {VStack} from "../Layout/VStack/index.js";
-import {Image} from "../Media/Image/index.js";
-import {Ratio} from "../Ratio/index.js";
-import {Skeleton} from "../Skeleton/index.js";
-import {data} from "./__mocks__/index.js";
-import {SlideList} from "./SlideList.js";
-var SlideList_stories_default = {
-  title: "ui-system/SlideList",
-  component: SlideList,
-  argTypes: {
-    loading: {
-      control: "boolean",
-      defaultValue: false
-    },
-    renderItem: {
-      control: false
-    },
-    keyExtractor: {
-      control: false
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(VStack, {
-  width: "100%"
-}, /* @__PURE__ */ React.createElement(SlideList, {
-  ...props
-}));
-var BasicUsage = Template.bind({});
-BasicUsage.args = {
-  data,
-  renderItem: ({item}) => /* @__PURE__ */ React.createElement(Ratio, {
-    width: "100%",
-    ratio: "1:1"
-  }, /* @__PURE__ */ React.createElement(Image, {
-    src: item.image,
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  })),
-  renderSkeleton: () => /* @__PURE__ */ React.createElement(Ratio, {
-    width: "100%",
-    ratio: "1:1"
-  }, /* @__PURE__ */ React.createElement(Skeleton, {
-    shape: "rect"
-  })),
-  keyExtractor: (_, index) => index,
-  column: [2, 3, 4, 5],
-  spacing: 18
-};
-export {
-  BasicUsage,
-  SlideList_stories_default as default
-};

package/lib/Slider/Slider.stories.js

@@ -1,47 +0,0 @@
-import {
-  React,
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/Slider.stories.tsx
-init_react_shim();
-import {VStack} from "../Layout/VStack/index.js";
-import {Image} from "../Media/Image/index.js";
-import {Ratio} from "../Ratio/index.js";
-import {Slider} from "./Slider.js";
-import {slides} from "./__mocks__/index.js";
-var Slider_stories_default = {
-  title: "ui-system/Slider",
-  component: Slider,
-  argTypes: {
-    autoPlayDelayMs: {
-      defaultValue: 3e3,
-      control: {
-        type: "range",
-        min: 1e3,
-        max: 1e4,
-        step: 1e3
-      }
-    }
-  }
-};
-var Template = (props) => /* @__PURE__ */ React.createElement(VStack, {
-  width: "400px"
-}, /* @__PURE__ */ React.createElement(Slider, {
-  ...props
-}, slides.map(({_id, imageUrl}) => /* @__PURE__ */ React.createElement(VStack, {
-  key: _id
-}, /* @__PURE__ */ React.createElement(Ratio, {
-  width: "100%",
-  ratio: "4:3"
-}, /* @__PURE__ */ React.createElement(Image, {
-  src: imageUrl,
-  width: "100%",
-  height: "100%",
-  objectFit: "cover"
-}))))));
-var BasicUsage = Template.bind({});
-export {
-  BasicUsage,
-  Slider_stories_default as default
-};

package/lib/Slider/__mocks__/index.js

@@ -1,51 +0,0 @@
-import {
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/__mocks__/index.ts
-init_react_shim();
-var slides = [
-  {
-    _id: "600fd00dabeb710014d5c743",
-    imageUrl: "https://cdn.class101.net/images/13aa7e1c-03ca-4a69-ba86-b0f8839303e3/750xauto"
-  },
-  {
-    _id: "5ffdc06c204c71000d4c4cf7",
-    imageUrl: "https://cdn.class101.net/images/311b5a84-c23b-43c1-8b73-62cb6b8700a7/750xauto"
-  },
-  {
-    _id: "5fff05b1d36e64000d684de5",
-    imageUrl: "https://cdn.class101.net/images/9518d768-4651-4101-ba7b-176e2c87569d/750xauto"
-  },
-  {
-    _id: "5ffdbf51682c26000e04aa91",
-    imageUrl: "https://cdn.class101.net/images/013bef9a-df9b-472e-8146-93996c63848e/750xauto"
-  },
-  {
-    _id: "600fcd2cdf6c64000dddef32",
-    imageUrl: "https://cdn.class101.net/images/063cef77-6f92-4de8-ac6b-48f93e0b2063/750xauto"
-  },
-  {
-    _id: "600e63115762640014791ff9",
-    imageUrl: "https://cdn.class101.net/images/f6067ab8-5675-4f20-b748-e717e255dcc1/750xauto"
-  },
-  {
-    _id: "6012488a1a31a20014f8855b",
-    imageUrl: "https://cdn.class101.net/images/32220596-6625-4c83-9bb9-732ee177f0cc/750xauto"
-  },
-  {
-    _id: "600e48d8dfc311000d6f388c",
-    imageUrl: "https://cdn.class101.net/images/54bcd444-9fd9-46f0-b67c-0531b0eb4ebd/750xauto"
-  },
-  {
-    _id: "5eccf579f2d36834e83e906b",
-    imageUrl: "https://cdn.class101.net/images/3f65161c-2a51-4faf-a301-6a9008af6dc1/750xauto"
-  },
-  {
-    _id: "5f1e910be6c41a00144965c9",
-    imageUrl: "https://cdn.class101.net/images/f77f51e6-3b31-42e9-869d-f488e491d731/750xauto"
-  }
-];
-export {
-  slides
-};

package/lib/Slider/constants.js

@@ -1,22 +0,0 @@
-import {
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/constants.ts
-init_react_shim();
-var ACTUAL_SLIDE_OFFSET = 2;
-var INITIAL_STATES = {
-  index: 1,
-  slidesPerView: 1
-};
-var BREAKPOINTS_KEYS = [
-  "(max-width: 413px)",
-  "(min-width: 414px) and (max-width: 767px)",
-  "(min-width: 768px) and (max-width: 1239px)",
-  "(min-width: 1240px)"
-];
-export {
-  ACTUAL_SLIDE_OFFSET,
-  BREAKPOINTS_KEYS,
-  INITIAL_STATES
-};

package/lib/Slider/internalHooks/useAutoPlay.js

@@ -1,40 +0,0 @@
-import {
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/internalHooks/useAutoPlay.ts
-init_react_shim();
-import {useCallback, useEffect, useRef} from "react";
-var useAutoPlay = ({slider, autoPlay, durationMs, onProgressStateChange}) => {
-  const autoPlayTimer = useRef(0);
-  const clearAutoPlayTimer = useCallback(() => {
-    if (!autoPlay) {
-      return;
-    }
-    onProgressStateChange?.(false);
-    clearTimeout(autoPlayTimer.current);
-  }, [autoPlay, onProgressStateChange]);
-  const setAutoPlayTimer = useCallback((sliderElement) => {
-    if (!autoPlay) {
-      return;
-    }
-    onProgressStateChange?.(true);
-    autoPlayTimer.current = window.setTimeout(() => {
-      clearAutoPlayTimer();
-      if (autoPlay) {
-        sliderElement.next();
-      }
-    }, durationMs);
-  }, [autoPlay, clearAutoPlayTimer, durationMs, onProgressStateChange]);
-  useEffect(() => {
-    if (autoPlay && slider) {
-      setAutoPlayTimer(slider);
-    } else {
-      clearAutoPlayTimer();
-    }
-  }, [autoPlay, clearAutoPlayTimer, setAutoPlayTimer, slider]);
-  return {setAutoPlayTimer, clearAutoPlayTimer};
-};
-export {
-  useAutoPlay
-};

package/lib/Slider/internalHooks/usePageControl.js

@@ -1,44 +0,0 @@
-import {
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/internalHooks/usePageControl.ts
-init_react_shim();
-import {useImperativeHandle} from "react";
-var usePageControl = ({controlRef, slider, callback}) => {
-  useImperativeHandle(controlRef, () => ({
-    moveToPrevSlide: () => {
-      slider?.prev();
-      callback();
-    },
-    moveToNextSlide: () => {
-      slider?.next();
-      callback();
-    },
-    moveToPrevPage: () => {
-      const {relativeSlide, slidesPerView} = slider.details();
-      slider?.moveToSlide(relativeSlide - slidesPerView);
-      callback();
-    },
-    moveToNextPage: () => {
-      const {relativeSlide, slidesPerView} = slider.details();
-      slider?.moveToSlide(relativeSlide + slidesPerView);
-      callback();
-    },
-    moveToSlide: (targetIndex) => {
-      slider?.moveToSlide(targetIndex);
-      callback();
-    },
-    refresh: () => {
-      slider?.refresh();
-      callback();
-    },
-    resize: () => {
-      slider?.resize();
-      callback();
-    }
-  }));
-};
-export {
-  usePageControl
-};

package/lib/Slider/internalHooks/useVirtual.js

@@ -1,27 +0,0 @@
-import {
-  init_react_shim
-} from "../../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/internalHooks/useVirtual.ts
-init_react_shim();
-import {useMemo, Children, createElement} from "react";
-import {ACTUAL_SLIDE_OFFSET} from "../constants.js";
-var useVirtual = ({currentSlidesPerView, slideElements, loop, currentIndex}) => {
-  const actualSlideFrom = useMemo(() => currentIndex - ACTUAL_SLIDE_OFFSET, [currentIndex]);
-  const actualSlideTo = useMemo(() => currentIndex + currentSlidesPerView + ACTUAL_SLIDE_OFFSET, [currentSlidesPerView, currentIndex]);
-  const slideLength = useMemo(() => slideElements.length, [slideElements]);
-  const slides = useMemo(() => Children.map(slideElements, (child, childIndex) => {
-    const {type, key, props} = child;
-    const targetIndices = [childIndex].concat(loop ? [childIndex - slideLength, childIndex + slideLength] : []);
-    const isActualSlide = targetIndices.map((target) => actualSlideFrom <= target && target < actualSlideTo).some(Boolean);
-    return createElement(type, {
-      ...isActualSlide && props,
-      className: [props.className ?? "", "keen-slider__slide"].join(""),
-      key
-    });
-  }), [slideElements, loop, slideLength, actualSlideFrom, actualSlideTo]);
-  return {slides};
-};
-export {
-  useVirtual
-};

package/lib/Slider/useSlider.js

@@ -1,42 +0,0 @@
-import {
-  init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
-
-// libs/shared/ui-system/src/lib/Slider/useSlider.ts
-init_react_shim();
-import {useCallback, useRef, useState} from "react";
-var useSlider = () => {
-  const sliderRef = useRef(null);
-  const [currentSliderIndex, setCurrentSliderIndex] = useState(0);
-  const [isSliderInProgress, setIsSliderInProgress] = useState(false);
-  const handleMoveToPrevSlide = useCallback(() => {
-    sliderRef.current?.moveToPrevSlide();
-  }, []);
-  const handleMoveToNextSlide = useCallback(() => {
-    sliderRef.current?.moveToNextSlide();
-  }, []);
-  const handleMoveToPrevPage = useCallback(() => {
-    sliderRef.current?.moveToPrevPage();
-  }, []);
-  const handleMoveToNextPage = useCallback(() => {
-    sliderRef.current?.moveToNextPage();
-  }, []);
-  const handleMoveTo = useCallback((index) => {
-    sliderRef.current?.moveToSlide(index);
-  }, []);
-  return {
-    sliderRef,
-    currentSliderIndex,
-    setCurrentSliderIndex,
-    isSliderInProgress,
-    setIsSliderInProgress,
-    handleMoveToPrevSlide,
-    handleMoveToNextSlide,
-    handleMoveToPrevPage,
-    handleMoveToNextPage,
-    handleMoveTo
-  };
-};
-export {
-  useSlider
-};