feat: Carousel

plop-template/componentIndex.hbs

@@ -6,7 +6,7 @@ import { easing } from "../../shared/animation";
 
 export interface {{headCaps name}}Props {}
 
-function {{headCaps name}}(props: PropsWithChildren<{{headCaps name}}Props>) {
+export function {{headCaps name}}(props: PropsWithChildren<{{headCaps name}}Props>) {
   const { children } = props;
   return <div>{children}</div>;
 }

src/components/carousel/__test__/carousel.test.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import Carousel from "../index";
+import { color, typography } from "../../../shared/styles";
+
+describe("test Carousel component", () => {
+  it(" ", () => {});
+});

src/components/carousel/carousel.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import Carousel from "./index";
+import {
+  withKnobs,
+  text,
+  boolean,
+  color,
+  select,
+  number,
+} from "@storybook/addon-knobs";
+
+export default {
+  title: "数据展示 /Carousel",
+  component: "Carousel",
+  decorators: [withKnobs],
+};
+
+const DivExample = (height: number, index: number) => {
+  return (
+    <div
+      style={{
+        background: "#364d79",
+      }}
+      key={index}
+    >
+      <span
+        style={{
+          lineHeight: `${height}px`,
+          color: "white",
+          fontSize: "20px",
+          fontWeight: 800,
+          width: "100%",
+          textAlign: "center",
+          display: "inline-block",
+        }}
+      >
+        {index + 1}
+      </span>
+    </div>
+  );
+};
+export const knobsCarousel = () => {
+  const height = number("height", 300);
+  const num = number("item number", 4);
+  return (
+    <Carousel
+      delay={number("delay", 300)}
+      height={height}
+      radioAppear={select(
+        "radioAppear",
+        Object.keys(color) as Array<keyof typeof color>,
+        "primary"
+      )}
+      defaultIndex={number("defaultIndex", 0)}
+      autoplay={boolean("autoplay", true)}
+      viewportBoxshadow={text("viewportBoxshadow", "2px 2px 4px #d9d9d9")}
+      autoplayReverse={boolean("autoplayReverse", false)}
+      animationDelay={number("animationDelay", 500)}
+      autoplayDelay={number("autoplayDelay", 5000)}
+    >
+      {new Array(num).fill(height).map((v, i) => DivExample(v, i))}
+    </Carousel>
+  );
+};