Merge branch 'next' into tech/improve-docs

# Conflicts: # docs/src/pages/configurations/theming/index.md
storybookjs · Mar 8, 2019 · 132daaf · 132daaf
2 parents 7ea689c + 2339ce7
commit 132daaf
Show file tree

Hide file tree

Showing 92 changed files with 667 additions and 607 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,33 @@
+## 4.1.14 (March 8, 2019)
+
+### Dependency Upgrades
+
+* React-native: Fix RN 0.58.5 / support 0.59 via react-native-modal-datetime-picker 6.0.0 ([#4425](https://github.com/storybooks/storybook/pull/4425))
+
+## 5.1.0-alpha.2 (March 8, 2019)
+
+### Bug Fixes
+
+* Core: support unicode chars in story IDs ([#5964](https://github.com/storybooks/storybook/pull/5964))
+* Core: Add core-js dependencies where it was missing ([#5961](https://github.com/storybooks/storybook/pull/5961))
+
+### Maintenance
+
+* Addon-a11y: Migrate to typescript ([#5738](https://github.com/storybooks/storybook/pull/5738))
+
+## 5.1.0-alpha.1 (March 7, 2019)
+
+### Bug Fixes
+
+* CLI: Fix missing iframe.html in absolute path output directory ([#5947](https://github.com/storybooks/storybook/pull/5947))
+* Addon-knobs: Added debouncing between keystrokes to speed up component rendering ([#5811](https://github.com/storybooks/storybook/pull/5811))
+* UI: Fix search in production mode ([#5909](https://github.com/storybooks/storybook/pull/5909))
+
+### Maintenance
+
+* ADD delay to rendering the acceptance stories ([#5943](https://github.com/storybooks/storybook/pull/5943))
+* Split versions.json into two files ([#5896](https://github.com/storybooks/storybook/pull/5896))
+
 ## 5.1.0-alpha.0 (March 6, 2019)
 
 ### Features

diff --git a/README.md b/README.md
@@ -153,9 +153,9 @@ We welcome contributions to Storybook!
 
 - 📥 Pull requests and 🌟 Stars are always welcome.
 - Read our [contributing guide](CONTRIBUTING.md) to get started.
-  or find us on [Discord](https://discord.gg/sMFvFsG), we're will take the time to guide you 
+  or find us on [Discord](https://discord.gg/sMFvFsG), we're will take the time to guide you
 
-Looking for a first issue to tackle? 
+Looking for a first issue to tackle?
 
 - We tag issues with [![Good First Issue](https://img.shields.io/github/issues/storybooks/storybook/good%20first%20issue.svg)](https://github.com/storybooks/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
 - [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.1.0-alpha.0",
+  "version": "5.1.0-alpha.2",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -21,25 +21,27 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.0",
-    "@storybook/client-logger": "5.1.0-alpha.0",
-    "@storybook/components": "5.1.0-alpha.0",
-    "@storybook/core-events": "5.1.0-alpha.0",
-    "@storybook/theming": "5.1.0-alpha.0",
+    "@storybook/addons": "5.1.0-alpha.2",
+    "@storybook/client-logger": "5.1.0-alpha.2",
+    "@storybook/components": "5.1.0-alpha.2",
+    "@storybook/core-events": "5.1.0-alpha.2",
+    "@storybook/theming": "5.1.0-alpha.2",
     "axe-core": "^3.1.2",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
-    "prop-types": "^15.7.2",
     "react": "^16.8.3",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.0"
+  },
   "publishConfig": {
     "access": "public"
   }

diff --git a/addons/a11y/src/components/Panel.js → addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/Panel.js → addons/a11y/src/components/A11YPanel.tsx
@@ -1,24 +1,22 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 
 import { STORY_RENDERED } from '@storybook/core-events';
-import { ActionBar, Icons } from '@storybook/components';
+import { ActionBar, Icons, ScrollArea } from '@storybook/components';
 
-import { ScrollArea } from '@storybook/components/dist/ScrollArea/ScrollArea';
-import EVENTS from '../constants';
-
-import Tabs from './Tabs';
-import Report from './Report';
+import { AxeResults, Result } from 'axe-core';
+import { Report } from './Report';
+import { Tabs } from './Tabs';
+import { EVENTS } from '../constants';
 
 const Icon = styled(Icons)(
   {
     height: '12px',
     width: '12px',
     marginRight: '4px',
   },
-  ({ status, theme }) =>
+  ({ status, theme }: any) =>
     status === 'running'
       ? {
           animation: `${theme.animation.rotate360} 1s linear infinite;`,
@@ -34,17 +32,23 @@ const Violations = styled.span(({ theme }) => ({
   color: theme.color.negative,
 }));
 
-class A11YPanel extends Component {
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    api: PropTypes.shape({
-      on: PropTypes.func,
-      emit: PropTypes.func,
-      off: PropTypes.func,
-    }).isRequired,
+interface A11YPanelState {
+  status: string;
+  passes: Result[];
+  violations: Result[];
+}
+
+interface A11YPanelProps {
+  active: boolean;
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    emit(event: string): void;
   };
+}
 
-  state = {
+export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
+  state: A11YPanelState = {
     status: 'ready',
     passes: [],
     violations: [],
@@ -57,7 +61,7 @@ class A11YPanel extends Component {
     api.on(EVENTS.RESULT, this.onUpdate);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: A11YPanelProps) {
     // TODO: might be able to remove this
     const { active } = this.props;
 
@@ -73,7 +77,7 @@ class A11YPanel extends Component {
     api.off(EVENTS.RESULT, this.onUpdate);
   }
 
-  onUpdate = ({ passes, violations }) => {
+  onUpdate = ({ passes, violations }: AxeResults) => {
     this.setState(
       {
         status: 'ran',
@@ -153,5 +157,3 @@ class A11YPanel extends Component {
     ) : null;
   }
 }
-
-export default A11YPanel;
diff --git a/addons/a11y/src/components/ColorBlindness.js → ...ns/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.js → ...ns/a11y/src/components/ColorBlindness.tsx
@@ -16,21 +16,29 @@ const ColorIcon = styled.span(
     height: '1rem',
     width: '1rem',
   },
-  ({ filter }) => ({
+  ({ filter }: { filter: string | null }) => ({
     filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
   })
 );
 
-class ColorBlindness extends Component {
-  state = {
+// tslint:disable-next-line:no-empty-interface
+interface ColorBlindnessProps {}
+
+interface ColorBlindnessState {
+  expanded: boolean;
+  filter: string | null;
+}
+
+export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
+  state: ColorBlindnessState = {
     expanded: false,
     filter: null,
   };
 
-  setFilter = filter => {
+  setFilter = (filter: string | null) => {
     const iframe = getIframe();
 
     if (iframe) {
@@ -44,6 +52,8 @@ class ColorBlindness extends Component {
     }
   };
 
+  onVisibilityChange = (s: boolean) => this.setState({ expanded: s });
+
   render() {
     const { filter, expanded } = this.state;
 
@@ -69,10 +79,12 @@ class ColorBlindness extends Component {
     if (filter !== null) {
       colorList = [
         {
+          id: 'reset',
           title: 'Reset color filter',
           onClick: () => {
             this.setFilter(null);
           },
+          right: undefined,
         },
         ...colorList,
       ];
@@ -83,7 +95,7 @@ class ColorBlindness extends Component {
         placement="top"
         trigger="click"
         tooltipShown={expanded}
-        onVisibilityChange={s => this.setState({ expanded: s })}
+        onVisibilityChange={this.onVisibilityChange}
         tooltip={<TooltipLinkList links={colorList} />}
         closeOnClick
       >
@@ -94,5 +106,3 @@ class ColorBlindness extends Component {
     );
   }
 }
-
-export default ColorBlindness;
diff --git a/addons/a11y/src/components/Report/Elements.js b/addons/a11y/src/components/Report/Elements.js
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
@@ -0,0 +1,48 @@
+import React, { FunctionComponent } from 'react';
+
+import { styled } from '@storybook/theming';
+
+import { NodeResult } from 'axe-core';
+import { Rules } from './Rules';
+
+const Item = styled.li({
+  fontWeight: 600,
+});
+const ItemTitle = styled.span({
+  borderBottom: '1px solid rgb(130, 130, 130)',
+  width: '100%',
+  display: 'inline-block',
+  paddingBottom: '4px',
+  marginBottom: '4px',
+});
+
+interface ElementProps {
+  element: NodeResult;
+  passes: boolean;
+}
+
+const Element: FunctionComponent<ElementProps> = ({ element, passes }) => {
+  const { any, all, none } = element;
+
+  const rules = [...any, ...all, ...none];
+
+  return (
+    <Item>
+      <ItemTitle>{element.target[0]}</ItemTitle>
+      <Rules rules={rules} passes={passes} />
+    </Item>
+  );
+};
+
+interface ElementsProps {
+  elements: NodeResult[];
+  passes: boolean;
+}
+
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes }) => (
+  <ol>
+    {elements.map((element, index) => (
+      <Element passes={passes} element={element} key={index} />
+    ))}
+  </ol>
+);
diff --git a/addons/a11y/src/components/Report/Info.js → addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.js → addons/a11y/src/components/Report/Info.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
+import { Result } from 'axe-core';
 
 const Wrapper = styled.div(({ theme }) => ({
   backgroundColor: theme.background.bar,
@@ -18,7 +18,11 @@ const Link = styled.a({
   display: 'block',
 });
 
-function Info({ item }) {
+interface InfoProps {
+  item: Result;
+}
+
+export const Info: FunctionComponent<InfoProps> = ({ item }) => {
   return (
     <Wrapper>
       <Help>{item.help}</Help>
@@ -27,13 +31,4 @@ function Info({ item }) {
       </Link>
     </Wrapper>
   );
-}
-
-Info.propTypes = {
-  item: PropTypes.shape({
-    help: PropTypes.node,
-    helpUrl: PropTypes.string,
-  }).isRequired,
 };
-
-export default Info;