chore(stories): fix ts type

chore(stories): fix ts type

Author: akai

src/components/Video/index.tsx

@@ -1,16 +1,17 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import React, { useState, useRef } from 'react';
 import clsx from 'clsx';
 
-export interface VideoProps {
+export type VideoProps = React.VideoHTMLAttributes<HTMLVideoElement> & {
   className?: string;
   src?: string;
   cover?: string;
   duration?: string | number;
   style?: React.CSSProperties;
   videoRef?: React.RefObject<HTMLVideoElement>;
   onClick?: (paused: boolean, event: React.MouseEvent) => void;
-  onCoverLoad?: (event: React.SyntheticEvent) => void;
-}
+  onCoverLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
 
 export const Video: React.FC<VideoProps> = (props) => {
   const {
@@ -21,11 +22,14 @@ export const Video: React.FC<VideoProps> = (props) => {
     onClick,
     onCoverLoad,
     style,
-    videoRef = useRef<HTMLVideoElement>(null),
+    videoRef: outerVideoRef,
     children,
     ...other
   } = props;
 
+  const localVideoRef = useRef<HTMLVideoElement>(null!);
+  const videoRef = outerVideoRef || localVideoRef;
+
   const [isPlayed, setIsPlayed] = useState(false);
   const [paused, setPaused] = useState(true);
 
@@ -83,4 +87,4 @@ export const Video: React.FC<VideoProps> = (props) => {
       )}
     </div>
   );
-};
+};

storybook/stories/Carousel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta } from '@storybook/react/types-6-0';
 
-import { Carousel } from '../../src';
+import { Carousel, CarouselProps, CarouselHandle } from '../../src';
 
 export default {
   title: 'Carousel',
@@ -17,7 +17,7 @@ const imgs = [
 
 // const Template: Story<CarouselProps> = (args) => <Carousel {...args} />;
 
-export const ManyImages = (ars) => (
+export const ManyImages = (ars: CarouselProps) => (
   <Carousel {...ars}>
     {imgs.map((img, i) => (
       <div key={i}>
@@ -42,9 +42,9 @@ ManyImages.args = {
 };
 
 function TestMethods() {
-  const carouselRef = React.useRef(null);
+  const carouselRef = React.useRef<CarouselHandle>(null!);
 
-  function handleClick(e) {
+  function handleClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
     console.log('click item:', e);
   }
 

storybook/stories/ComponentProvider.stories.tsx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/react/types-6-0';
 import * as ChatUI from '../../src';
 import { ComponentsMap } from '../../src';
 
-const { ComponentsProvider, useComponents, LazyComponent } = ChatUI;
+const { ComponentsProvider, LazyComponent } = ChatUI;
 
 export default {
   title: 'ComponentsProvider',

storybook/stories/ErrorBoundary.stories.tsx

@@ -16,31 +16,14 @@ export default {
   ],
 } as Meta;
 
-export const WillCrashed = () => <BuggyCounter />;
-
-export const NoFallback = () => (
-  <ErrorBoundary>
-    <BuggyCounter />
-  </ErrorBoundary>
-);
-
-export const FallbackComponent = () => (
-  <div>
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <BuggyCounter />
-    </ErrorBoundary>
-  </div>
-);
-
-export const NoError = (args) => (
-  <ErrorBoundary {...args}>
-    <p>no error</p>
-  </ErrorBoundary>
-);
-
 // https://codepen.io/gaearon/pen/wqvxGa?editors=0010
 class BuggyCounter extends React.Component<{}, { counter: number }> {
-  state = { counter: 0 };
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      counter: 0,
+    };
+  }
 
   handleClick = () => {
     this.setState(({ counter }) => ({
@@ -54,11 +37,20 @@ class BuggyCounter extends React.Component<{}, { counter: number }> {
       // Simulate a JS error
       throw new Error('I crashed!');
     }
-    return <h1 onClick={this.handleClick}>{counter}</h1>;
+    return (
+      <button onClick={this.handleClick} type="button">
+        {counter}
+      </button>
+    );
   }
 }
 
-function ErrorFallback({ error, errorInfo }) {
+interface ErrorFallbackProps {
+  error: Error;
+  errorInfo: React.ErrorInfo;
+}
+
+function ErrorFallback({ error, errorInfo }: ErrorFallbackProps) {
   return (
     <div>
       <h2>Something went wrong.</h2>
@@ -70,3 +62,25 @@ function ErrorFallback({ error, errorInfo }) {
     </div>
   );
 }
+
+export const WillCrashed = () => <BuggyCounter />;
+
+export const NoFallback = () => (
+  <ErrorBoundary>
+    <BuggyCounter />
+  </ErrorBoundary>
+);
+
+export const FallbackComponent = () => (
+  <div>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <BuggyCounter />
+    </ErrorBoundary>
+  </div>
+);
+
+export const NoError = () => (
+  <ErrorBoundary>
+    <p>no error</p>
+  </ErrorBoundary>
+);

storybook/stories/List.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
-import { List, ListItem, ListProps, ListItemProps } from '../../src';
+import { List, ListItem, ListProps } from '../../src';
 import '../../src/styles/index.less';
 
 export default {
@@ -14,12 +14,10 @@ export default {
 
 export const Empty: Story<ListProps> = (args) => <List {...args} />;
 
-export const ManyItems = (args: ListProps) => {
-  return (
-    <List {...args}>
-      <ListItem content="item-1" />
-      <ListItem content="item-2" />
-      <ListItem content="item-3" />
-    </List>
-  );
-};
+export const ManyItems = (args: ListProps) => (
+  <List {...args}>
+    <ListItem content="item-1" />
+    <ListItem content="item-2" />
+    <ListItem content="item-3" />
+  </List>
+);

storybook/stories/Video.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import { Video, VideoProps } from '../../src';
-// import '../../src/components/Video/style.less';
 
 export default {
   title: 'Video',
@@ -14,8 +13,7 @@ const Template: Story<VideoProps> = (args) => <Video {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   src: '//interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
-  alt: 'flower',
   style: {
-    width: '320px'
-  }
+    width: '320px',
+  },
 };