From 916f4b2975a1557c80203008216fc833b03a6b3f Mon Sep 17 00:00:00 2001 From: lonyele Date: Sun, 11 Aug 2019 02:08:18 +0900 Subject: [PATCH 1/3] chore: migrate src of addon-ondevice-notes to Typescript --- addons/ondevice-notes/package.json | 2 +- addons/ondevice-notes/src/{index.js => index.ts} | 0 .../src/{register.js => register.tsx} | 5 ++--- addons/ondevice-notes/src/typings.d.ts | 4 ++++ addons/ondevice-notes/tsconfig.json | 13 +++++++++++++ 5 files changed, 20 insertions(+), 4 deletions(-) rename addons/ondevice-notes/src/{index.js => index.ts} (100%) rename addons/ondevice-notes/src/{register.js => register.tsx} (92%) create mode 100644 addons/ondevice-notes/src/typings.d.ts create mode 100644 addons/ondevice-notes/tsconfig.json diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 055da66f3e00..d1a534f010c9 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -15,7 +15,7 @@ }, "license": "MIT", "main": "dist/index.js", - "jsnext:main": "src/index.js", + "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, diff --git a/addons/ondevice-notes/src/index.js b/addons/ondevice-notes/src/index.ts similarity index 100% rename from addons/ondevice-notes/src/index.js rename to addons/ondevice-notes/src/index.ts diff --git a/addons/ondevice-notes/src/register.js b/addons/ondevice-notes/src/register.tsx similarity index 92% rename from addons/ondevice-notes/src/register.js rename to addons/ondevice-notes/src/register.tsx index c3850db2047a..edd517831bef 100644 --- a/addons/ondevice-notes/src/register.js +++ b/addons/ondevice-notes/src/register.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ /* eslint-disable react/destructuring-assignment */ /* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; @@ -9,7 +8,7 @@ import Events from '@storybook/core-events'; export const PARAM_KEY = `notes`; -class Notes extends React.Component { +class Notes extends React.Component { componentDidMount() { this.props.channel.on(Events.SELECT_STORY, this.onStorySelected); } @@ -18,7 +17,7 @@ class Notes extends React.Component { this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected); } - onStorySelected = selection => { + onStorySelected = (selection: any) => { this.setState({ selection }); }; diff --git a/addons/ondevice-notes/src/typings.d.ts b/addons/ondevice-notes/src/typings.d.ts new file mode 100644 index 000000000000..eead99469329 --- /dev/null +++ b/addons/ondevice-notes/src/typings.d.ts @@ -0,0 +1,4 @@ +declare module 'react-native-simple-markdown' { + const Markdown: any; + export default Markdown; +} diff --git a/addons/ondevice-notes/tsconfig.json b/addons/ondevice-notes/tsconfig.json new file mode 100644 index 000000000000..24ef9bc68916 --- /dev/null +++ b/addons/ondevice-notes/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/__tests__/**/*" + ] +} From 9382c3dd422ba23575bed70ad062b17bf0739ee0 Mon Sep 17 00:00:00 2001 From: lonyele Date: Sun, 11 Aug 2019 02:13:34 +0900 Subject: [PATCH 2/3] refactor: improve types of register.tsx --- addons/ondevice-notes/src/register.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/addons/ondevice-notes/src/register.tsx b/addons/ondevice-notes/src/register.tsx index edd517831bef..38b07bbb231b 100644 --- a/addons/ondevice-notes/src/register.tsx +++ b/addons/ondevice-notes/src/register.tsx @@ -3,12 +3,24 @@ import React from 'react'; import { View } from 'react-native'; import Markdown from 'react-native-simple-markdown'; -import addons from '@storybook/addons'; +import addons, { AddonStore } from '@storybook/addons'; import Events from '@storybook/core-events'; +import { API } from '@storybook/api'; +import { StoryStore } from '@storybook/client-api'; export const PARAM_KEY = `notes`; -class Notes extends React.Component { +type Selection = ReturnType; +interface NotesProps { + channel: ReturnType; + api: API; + active: boolean; +} + +interface NotesState { + selection: Selection; +} +class Notes extends React.Component { componentDidMount() { this.props.channel.on(Events.SELECT_STORY, this.onStorySelected); } @@ -17,7 +29,7 @@ class Notes extends React.Component { this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected); } - onStorySelected = (selection: any) => { + onStorySelected = (selection: Selection) => { this.setState({ selection }); }; @@ -31,7 +43,7 @@ class Notes extends React.Component { const story = api .store() .getStoryAndParameters(this.state.selection.kind, this.state.selection.story); - const text = story.parameters[PARAM_KEY]; + const text: string = story.parameters[PARAM_KEY]; const textAfterFormatted = text ? text.trim() : ''; From ca3d0e362bb0861b3de1ee459fde48e11e05fa7c Mon Sep 17 00:00:00 2001 From: lonyele Date: Sun, 11 Aug 2019 02:20:24 +0900 Subject: [PATCH 3/3] refactor: extract Notes component and add dependencies --- addons/ondevice-notes/package.json | 3 + .../ondevice-notes/src/components/Notes.tsx | 55 +++++++++++++++++++ addons/ondevice-notes/src/register.tsx | 55 +------------------ 3 files changed, 60 insertions(+), 53 deletions(-) create mode 100644 addons/ondevice-notes/src/components/Notes.tsx diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index d1a534f010c9..35d047035321 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -22,6 +22,9 @@ "dependencies": { "@storybook/addons": "5.2.0-beta.28", "@storybook/client-logger": "5.2.0-beta.28", + "@storybook/core-events": "5.2.0-beta.28", + "@storybook/api": "5.2.0-beta.28", + "@storybook/client-api": "5.2.0-beta.28", "core-js": "^3.0.1", "prop-types": "^15.7.2", "react-native-simple-markdown": "^1.1.0" diff --git a/addons/ondevice-notes/src/components/Notes.tsx b/addons/ondevice-notes/src/components/Notes.tsx new file mode 100644 index 000000000000..c04a44f6e46b --- /dev/null +++ b/addons/ondevice-notes/src/components/Notes.tsx @@ -0,0 +1,55 @@ +/* eslint-disable react/destructuring-assignment */ +import React from 'react'; +import { View } from 'react-native'; +import Markdown from 'react-native-simple-markdown'; +import { AddonStore } from '@storybook/addons'; +import Events from '@storybook/core-events'; +import { API } from '@storybook/api'; +import { StoryStore } from '@storybook/client-api'; + +export const PARAM_KEY = `notes`; + +type Selection = ReturnType; +interface NotesProps { + channel: ReturnType; + api: API; + active: boolean; +} +interface NotesState { + selection: Selection; +} + +export class Notes extends React.Component { + componentDidMount() { + this.props.channel.on(Events.SELECT_STORY, this.onStorySelected); + } + + componentWillUnmount() { + this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected); + } + + onStorySelected = (selection: Selection) => { + this.setState({ selection }); + }; + + render() { + const { active, api } = this.props; + + if (!active) { + return null; + } + + const story = api + .store() + .getStoryAndParameters(this.state.selection.kind, this.state.selection.story); + const text = story.parameters[PARAM_KEY]; + + const textAfterFormatted: string = text ? text.trim() : ''; + + return ( + + {textAfterFormatted} + + ); + } +} diff --git a/addons/ondevice-notes/src/register.tsx b/addons/ondevice-notes/src/register.tsx index 38b07bbb231b..e90460aba88f 100644 --- a/addons/ondevice-notes/src/register.tsx +++ b/addons/ondevice-notes/src/register.tsx @@ -1,60 +1,9 @@ -/* eslint-disable react/destructuring-assignment */ -/* eslint-disable import/no-extraneous-dependencies */ import React from 'react'; -import { View } from 'react-native'; -import Markdown from 'react-native-simple-markdown'; -import addons, { AddonStore } from '@storybook/addons'; -import Events from '@storybook/core-events'; -import { API } from '@storybook/api'; -import { StoryStore } from '@storybook/client-api'; +import addons from '@storybook/addons'; +import { Notes } from './components/Notes'; export const PARAM_KEY = `notes`; -type Selection = ReturnType; -interface NotesProps { - channel: ReturnType; - api: API; - active: boolean; -} - -interface NotesState { - selection: Selection; -} -class Notes extends React.Component { - componentDidMount() { - this.props.channel.on(Events.SELECT_STORY, this.onStorySelected); - } - - componentWillUnmount() { - this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected); - } - - onStorySelected = (selection: Selection) => { - this.setState({ selection }); - }; - - render() { - const { active, api } = this.props; - - if (!active) { - return null; - } - - const story = api - .store() - .getStoryAndParameters(this.state.selection.kind, this.state.selection.story); - const text: string = story.parameters[PARAM_KEY]; - - const textAfterFormatted = text ? text.trim() : ''; - - return ( - - {textAfterFormatted} - - ); - } -} - addons.register('storybook/notes', api => { const channel = addons.getChannel(); addons.addPanel('storybook/notes/panel', {