web-components storybook

Agenda

  • what the hell  is this?
  • how it look like
  • build your own step by step

what the hell  is this?

It is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Just like react-storybook

how it look like ?

build your own step by step

Add to left panel

toriesOf("签到")
.add('基础用法', props => 'test')

a little code

what you will get

Add component to draw panel

some more code

storiesOf("签到")
  .add("基础用法", props => (
    <div className={styles["basic-wrapper"]}>
      <duiba-calendar
        ref={stencil(
          {},

          isEmptyObject(props) ? {} : props
        )}
      />

      <div className={styles["duiba-collapse"]}>
        <duiba-collapse
          ref={stencil(
            {},
            {
              onClick: collapsed => toggle(props, collapsed),
              defaultCollapsed: false,
              collapsed: basicCollapsed
            }
          )}
        />
      </div>
    </div>
  ))
  .props({
    signin: date =>
      actionLogger({
        payload: `sigin with date：${date}`,
        name: "签到"
      }),
    showHeader: true,
    startTime: moment(1512132974336),
    endTime: moment(1514724974336),
    currentTime: moment(1512432000000),
    calendarType: "native",
    monthResignedMap: {
      3: true,
      8: true
    },
    monthSignedMap: {
      11: true,
      22: true
    },
    todayIndex: 3,
    count: null
  });

all in all, Put your component inside add()

and put the props down via props()

what you will get

Add APIs

storiesOf("签到")
  .add("基础用法", props => (
    <div className={styles["basic-wrapper"]}>
      <duiba-calendar
        ref={stencil(
          {},

          isEmptyObject(props) ? {} : props
        )}
      />

      <div className={styles["duiba-collapse"]}>
        <duiba-collapse
          ref={stencil(
            {},
            {
              onClick: collapsed => toggle(props, collapsed),
              defaultCollapsed: false,
              collapsed: basicCollapsed
            }
          )}
        />
      </div>
    </div>
  ))
  .props({
    signin: date =>
      actionLogger({
        payload: `sigin with date：${date}`,
        name: "签到"
      }),
    showHeader: true,
    startTime: moment(1512132974336),
    endTime: moment(1514724974336),
    currentTime: moment(1512432000000),
    calendarType: "native",
    monthResignedMap: {
      3: true,
      8: true
    },
    monthSignedMap: {
      11: true,
      22: true
    },
    todayIndex: 3,
    count: null
  })
  .api(calendarAPI)

a little code

put the apis inside api()

api is something like that

export default {
  signin: { type: Function },
  showHeader: {
    type: Boolean,
    api: {
      name: "showHeader",
      desc: "是否显示日历头部",
      type: "Boolean",
      defaultValue: ""
    }
  },
  startTime: {
    type: Date,
    api: {
      name: "startTime",
      desc: "日历的开始时间",
      type: "TimeStamp",
      defaultValue: ""
    }
  },
  endTime: {
    type: Date,
    api: {
      name: "endTime",
      desc: "日历的结束时间",
      type: "TimeStamp",
      defaultValue: ""
    }
  },
  currentTime: {
    type: Date,
    api: {
      name: "currentTime",
      desc: "当前时间",
      type: "TimeStamp",
      defaultValue: ""
    }
  },
  calendarType: {
    type: String,
    options: ["native", "normal"],
    api: {
      name: "calendarType",
      desc: "枚举值（native | normal）",
      type: "String",
      defaultValue: ""
    }
  },

  monthResignedMap: {
    type: Object,
    api: {
      name: "monthResignedMap",
      desc: "签到的映射表；形如{1: true, 11: true}",
      type: "Object",
      defaultValue: ""
    }
  },
  monthSignedMap: {
    type: Object,
    api: {
      name: "monthSignedMap",
      desc: "补签的映射表；形如{1: true, 11: true}",
      type: "Object",
      defaultValue: ""
    }
  },
  count: {
    type: Number,
    title: "",
    api: {
      name: "count",
      desc: "折叠起来的时候显示的日期个数",
      type: "Number",
      defaultValue: ""
    }
  },
  todayIndex: {
    type: Number,
    title: "",
    api: {
      name: "todayIndex",
      desc: "折叠的时候今天显示在第几个",
      type: "Number",
      defaultValue: ""
    }
  }
};

what you will get

missing piece

Discription and Component Name

storiesOf("签到")
  .add("基础用法", props => (
    <div className={styles["basic-wrapper"]}>
      <duiba-calendar
        ref={stencil(
          {},

          isEmptyObject(props) ? {} : props
        )}
      />

      <div className={styles["duiba-collapse"]}>
        <duiba-collapse
          ref={stencil(
            {},
            {
              onClick: collapsed => toggle(props, collapsed),
              defaultCollapsed: false,
              collapsed: basicCollapsed
            }
          )}
        />
      </div>
    </div>
  ))
  .cmpName("duiba-calendar")
  .props({
    signin: date =>
      actionLogger({
        payload: `sigin with date：${date}`,
        name: "签到"
      }),
    showHeader: true,
    startTime: moment(1512132974336),
    endTime: moment(1514724974336),
    currentTime: moment(1512432000000),
    calendarType: "native",
    monthResignedMap: {
      3: true,
      8: true
    },
    monthSignedMap: {
      11: true,
      22: true
    },
    todayIndex: 3,
    count: null
  })
  .desc("显示日历头部(初始化为展开，当前默认显示在第3天，原生日历样式)")
  .api(calendarAPI);

cmpName(name) 

desc(description)

what you will get

action logger

but I won't cover this section

thanks

web-components storybook

By lucifer

Made with Slides.com

web-components storybook

  • 1,207

More from lucifer