Merge pull request #292 from storybookjs/typescript/more-conversion

convert more to typescript

Author: ndelangen

.eslintrc.js

@@ -1,7 +1,3 @@
-// const error = 2;
-// const warn = 1;
-const ignore = 0;
-
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],

.github/workflows/type-checking.yml

@@ -10,4 +10,4 @@ jobs:
     - run: |
         yarn
     - run: |
-        yarn types
+        yarn typescript:check

package.json

@@ -17,14 +17,15 @@
   ],
   "scripts": {
     "build": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --ignore \"**/*.test.js\" --ignore \"**/*.stories.js\"",
-    "types": "tsc --declaration --emitDeclarationOnly --outDir dist --declarationMap",
     "build-docs": "build-storybook --docs",
     "build-storybook": "build-storybook -s .storybook/static",
     "lint": "yarn lint:js && yarn lint:package",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:package": "sort-package-json",
-    "release": "dotenv yarn build & yarn types && auto shipit",
-    "storybook": "start-storybook -p 6006 -s .storybook/static"
+    "release": "dotenv yarn build & yarn typescript:generate && auto shipit",
+    "storybook": "start-storybook -p 6006 -s .storybook/static",
+    "typescript:check": "tsc --project ./tsconfig.json --noEmit",
+    "typescript:generate": "tsc --declaration --emitDeclarationOnly --outDir dist --declarationMap"
   },
   "husky": {
     "hooks": {
@@ -48,11 +49,13 @@
   "dependencies": {
     "@types/pluralize": "^0.0.29",
     "@types/prismjs": "^1.16.6",
+    "@types/react-modal": "^3.12.1",
+    "@types/styled-components": "^5.1.0",
+    "@types/uuid": "^8.3.1",
     "copy-to-clipboard": "^3.3.1",
     "pluralize": "^8.0.0",
     "polished": "^3.6.4",
     "prismjs": "1.23.0",
-    "prop-types": "^15.5.4",
     "react-github-button": "^0.1.11",
     "react-modal": "^3.11.2",
     "react-popper-tooltip": "^2.11.1",
@@ -77,7 +80,6 @@
     "@storybook/linter-config": "^2.5.0",
     "@storybook/react": "^6.2.0",
     "@types/fs-extra": "^9.0.1",
-    "@types/styled-components": "^5.1.0",
     "auto": "^9.50.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
@@ -89,17 +91,17 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "node-fetch": "^2.6.0",
-    "prettier": "^2.0.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "prettier": "^2.3.0",
+    "react": "17",
+    "react-dom": "17",
     "seedrandom": "^3.0.5",
     "sort-package-json": "^1.44.0",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
   },
   "engines": {
     "node": ">=10",

src/components/CodeSnippets.stories.js src/components/CodeSnippets.stories.tsxsrc/components/CodeSnippets.stories.js renamed to src/components/CodeSnippets.stories.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from './Button';
 import { CodeSnippets } from './CodeSnippets';
-import { Highlight } from './Highlight';
 import { javascriptCodeWithWrappers, typescriptCodeWithWrappers } from './Highlight.stories';
 import { color } from './shared/styles';
 

src/components/CodeSnippets.js src/components/CodeSnippets.tsxsrc/components/CodeSnippets.js renamed to src/components/CodeSnippets.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { ComponentProps, ComponentType, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { Clipboard } from './clipboard/Clipboard';
@@ -53,9 +52,9 @@ const StyledClipboard = styled(Clipboard)`
   }
 `;
 
-function Snippet({ snippet }) {
+function Snippet({ snippet }: { snippet: SnippetType }) {
   const { PreSnippet: PreSnippetComponent, Snippet: SnippetComponent } = snippet;
-  const snippetRef = useRef();
+  const snippetRef = useRef<HTMLDivElement>();
   const getCopyContent = () => snippetRef.current && snippetRef.current.textContent;
 
   return (
@@ -71,13 +70,6 @@ function Snippet({ snippet }) {
   );
 }
 
-Snippet.propTypes = {
-  snippet: PropTypes.shape({
-    Snippet: PropTypes.elementType.isRequired,
-    PreSnippet: PropTypes.elementType,
-  }).isRequired,
-};
-
 const TabsWrapper = styled.div`
   background: ${color.lightest};
   border-top-left-radius: ${spacing.borderRadius.small}px;
@@ -97,7 +89,7 @@ const StyledTabs = styled(LinkTabs)`
   }
 `;
 
-function SnippetList({ snippets }) {
+function SnippetList({ snippets }: { snippets: SnippetType[] }) {
   const [activeSnippet, setActiveSnippet] = useState(snippets[0]);
 
   const tabItems = snippets.map((snippet, index) => {
@@ -123,16 +115,10 @@ function SnippetList({ snippets }) {
   );
 }
 
-SnippetList.propTypes = {
-  snippets: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      renderTabLabel: PropTypes.func.isRequired,
-    }).isRequired
-  ).isRequired,
-};
-
-export function CodeSnippets({ snippets, ...rest }) {
+export function CodeSnippets({
+  snippets,
+  ...rest
+}: Props & ComponentProps<typeof Wrapper> & { children?: never }) {
   return (
     <Wrapper {...rest}>
       <Background>
@@ -146,6 +132,13 @@ export function CodeSnippets({ snippets, ...rest }) {
   );
 }
 
-CodeSnippets.propTypes = {
-  snippets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-};
+interface SnippetType {
+  Snippet: ComponentType;
+  PreSnippet?: ComponentType;
+  id: string;
+  renderTabLabel: (...a: any[]) => string;
+}
+
+interface Props {
+  snippets: SnippetType[];
+}

src/components/Highlight.tsx

@@ -7,14 +7,23 @@ import { color } from './shared/styles';
 if (typeof document !== 'undefined') {
   // @ts-ignore
   global.Prism = Prism;
+  // @ts-ignore
   require('prismjs/components/prism-bash');
+  // @ts-ignore
   require('prismjs/components/prism-javascript');
+  // @ts-ignore
   require('prismjs/components/prism-typescript');
+  // @ts-ignore
   require('prismjs/components/prism-json');
+  // @ts-ignore
   require('prismjs/components/prism-css');
+  // @ts-ignore
   require('prismjs/components/prism-yaml');
+  // @ts-ignore
   require('prismjs/components/prism-markdown');
+  // @ts-ignore
   require('prismjs/components/prism-jsx');
+  // @ts-ignore
   require('prismjs/components/prism-tsx');
 }
 

src/components/Icon.stories.js src/components/Icon.stories.tsxsrc/components/Icon.stories.js renamed to src/components/Icon.stories.tsx

@@ -9,7 +9,7 @@ const Meta = styled.div`
   font-size: 12px;
 `;
 
-const Item = styled.li`
+const Item = styled.li<{ minimal?: boolean }>`
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -62,7 +62,7 @@ export const Labels = () => (
     <List>
       {Object.keys(icons).map((key) => (
         <Item key={key}>
-          <Icon icon={key} aria-hidden />
+          <Icon icon={key as keyof typeof icons} aria-hidden />
           <Meta>{key}</Meta>
         </Item>
       ))}
@@ -74,7 +74,7 @@ export const NoLabels = () => (
   <List>
     {Object.keys(icons).map((key) => (
       <Item minimal key={key}>
-        <Icon icon={key} aria-label={key} />
+        <Icon icon={key as keyof typeof icons} aria-label={key} />
       </Item>
     ))}
   </List>

src/components/Input.stories.js src/components/Input.stories.tsxsrc/components/Input.stories.js renamed to src/components/Input.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 
@@ -148,17 +147,9 @@ const All = ({ appearance }) => (
   </>
 );
 
-All.propTypes = {
-  appearance: PropTypes.string,
-};
-
-All.defaultProps = {
-  appearance: undefined,
-};
-
 export const Default = () => (
   <DarkForm>
-    <All />
+    <All appearance="default" />
   </DarkForm>
 );