Skip to content

Commit

Permalink
Upgrade storybook (draft-js-plugins#1323)
Browse files Browse the repository at this point in the history 
Simplified webpack config. Dropped babel-plugin-css-modules because it
breaks linaria in storybook. Will migrate all plugins to linaria ASAP.
Dropped a bunch of unused packages.
  • Loading branch information
@TrySound
TrySound authored Aug 27, 2019
1 parent 157a3db commit 089dc80
Show file tree
Hide file tree
Showing 8 changed files with 3,871 additions and 2,774 deletions.
2 changes: 2 additions & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
},
"extends": "airbnb",
"rules": {
"no-multi-spaces": 0,
"padded-blocks": 0,
"camelcase": 0,
"react/sort-comp": 0,
"no-cond-assign": 0,
Expand Down
1 change: 1 addition & 0 deletions .flowconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
.*/node_modules/draft-js/lib/DraftEditorLeaf.react.js.flow
.*/node_modules/draft-js/lib/DraftEditor.react.js.flow
.*/node_modules/draft-js/lib/convertFromHTMLToContentBlocks.js.flow
.*/node_modules/polished/.*

[include]
flow-typed
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ bundle.js

# build
/lib/
.linaria-cache

# NPM debug
npm-debug.log
Expand Down
152 changes: 60 additions & 92 deletions .storybook/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,80 @@
// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // eslint-disable-line no-var

console.log('yooooo', path.join(__dirname, '..', 'draft-js-focus-plugin', 'src'));
const packages = [
'draft-js-plugins-editor',
'draft-js-hashtag-plugin',
'draft-js-linkify-plugin',
'draft-js-anchor-plugin',
'draft-js-mention-plugin',
'draft-js-sticker-plugin',
'draft-js-undo-plugin',
'draft-js-emoji-plugin',
'draft-js-plugins-utils',
'draft-js-counter-plugin',
'draft-js-drag-n-drop-plugin',
'draft-js-drag-n-drop-upload-plugin',
'draft-js-inline-toolbar-plugin',
'draft-js-static-toolbar-plugin',
'draft-js-side-toolbar-plugin',
'draft-js-focus-plugin',
'draft-js-alignment-plugin',
'draft-js-image-plugin',
'draft-js-resizeable-plugin',
'draft-js-buttons',
'draft-js-video-plugin',
'draft-js-divider-plugin',
];

const packagesAliases = {};
packages.forEach(name => {
packagesAliases[name] = path.join(__dirname, '..', name, 'src');
});

module.exports = {
plugins: [
],
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
include: [
path.join(__dirname, '..', 'stories'),
path.join(__dirname, '..', 'draft-js-plugins-editor', 'src'),
path.join(__dirname, '..', 'draft-js-hashtag-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-linkify-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-anchor-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-plugins-utils', 'src'),
path.join(__dirname, '..', 'draft-js-mention-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-sticker-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-undo-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-emoji-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-drag-n-drop-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-drag-n-drop-upload-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-inline-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-static-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-side-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-counter-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-focus-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-alignment-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-image-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-buttons', 'src'),
path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
exclude: [/linaria-cache/, /node_modules/],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
],
},

{
test: /\.css$/,
include: [/linaria-cache/, /node_modules/],
use: ['style-loader', 'css-loader'],
},

{
test: /\.js$/,
loader: 'linaria/loader',
options: {
sourceMap: true,
},
},

{
test: /plugin\.css$/,
loaders: [
'style-loader', 'css-loader',
],
include: [
path.join('..', 'stories'),
path.join(__dirname, '..', 'draft-js-plugins-editor', 'src'),
path.join(__dirname, '..', 'draft-js-hashtag-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-linkify-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-anchor-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-plugins-utils', 'src'),
path.join(__dirname, '..', 'draft-js-mention-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-sticker-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-undo-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-emoji-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-drag-n-drop-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-drag-n-drop-upload-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-inline-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-static-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-side-toolbar-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-counter-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-focus-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-alignment-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-image-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-buttons', 'src'),
path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
],
}, {
test: /\.(png|jpg|gif|ico)$/,
use: [
{ loader: 'file-loader', options: { name: '[name].[ext]' } },
],
use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
},
],
},

resolve: {
alias: {
'draft-js-plugins-editor': path.join(__dirname, '..', 'draft-js-plugins-editor', 'src'),
'draft-js-hashtag-plugin': path.join(__dirname, '..', 'draft-js-hashtag-plugin', 'src'),
'draft-js-linkify-plugin': path.join(__dirname, '..', 'draft-js-linkify-plugin', 'src'),
'draft-js-anchor-plugin': path.join(__dirname, '..', 'draft-js-anchor-plugin', 'src'),
'draft-js-mention-plugin': path.join(__dirname, '..', 'draft-js-mention-plugin', 'src'),
'draft-js-sticker-plugin': path.join(__dirname, '..', 'draft-js-sticker-plugin', 'src'),
'draft-js-undo-plugin': path.join(__dirname, '..', 'draft-js-undo-plugin', 'src'),
'draft-js-emoji-plugin': path.join(__dirname, '..', 'draft-js-emoji-plugin', 'src'),
'draft-js-plugins-utils': path.join(__dirname, '..', 'draft-js-plugins-utils', 'src'),
'draft-js-counter-plugin': path.join(__dirname, '..', 'draft-js-counter-plugin', 'src'),
'draft-js-drag-n-drop-plugin': path.join(__dirname, '..', 'draft-js-drag-n-drop-plugin', 'src'),
'draft-js-drag-n-drop-upload-plugin': path.join(__dirname, '..', 'draft-js-drag-n-drop-upload-plugin', 'src'),
'draft-js-inline-toolbar-plugin': path.join(__dirname, '..', 'draft-js-inline-toolbar-plugin', 'src'),
'draft-js-static-toolbar-plugin': path.join(__dirname, '..', 'draft-js-static-toolbar-plugin', 'src'),
'draft-js-side-toolbar-plugin': path.join(__dirname, '..', 'draft-js-side-toolbar-plugin', 'src'),
'draft-js-focus-plugin': path.join(__dirname, '..', 'draft-js-focus-plugin', 'src'),
'draft-js-alignment-plugin': path.join(__dirname, '..', 'draft-js-alignment-plugin', 'src'),
'draft-js-image-plugin': path.join(__dirname, '..', 'draft-js-image-plugin', 'src'),
'draft-js-resizeable-plugin': path.join(__dirname, '..', 'draft-js-resizeable-plugin', 'src'),
'draft-js-buttons': path.join(__dirname, '..', 'draft-js-buttons', 'src'),
'draft-js-video-plugin': path.join(__dirname, '..', 'draft-js-video-plugin', 'src'),
'draft-js-divider-plugin': path.join(__dirname, '..', 'draft-js-divider-plugin', 'src'),
...packagesAliases,
react: path.join(__dirname, '..', 'node_modules', 'react'),
'prop-types': path.join(__dirname, '..', 'node_modules', 'prop-types'),
lodash: path.join(__dirname, '..', 'node_modules', 'lodash'),
},
}
},
};
14 changes: 1 addition & 13 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,5 @@ const removeLinariaImport = () => ({

module.exports = {
presets: ['@babel/env', '@babel/react', '@babel/flow', 'linaria/babel'],
plugins: [
'@babel/proposal-class-properties',
removeLinariaImport,
[
'css-modules-transform',
{
generateScopedName: '[name]__[local]___[hash:base64:5]',
extractCss: {
dir: 'lib-css',
},
},
],
],
plugins: ['@babel/proposal-class-properties', removeLinariaImport],
};
21 changes: 5 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,22 +82,12 @@
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.5.5",
"@storybook/react": "^3.2.8",
"@storybook/react": "^5.1.11",
"alex": "^4.0.1",
"animateplus": "^1.4.0",
"autoprefixer": "^6.7.6",
"babel-core": "^6.23.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-plugin-css-modules-transform": "^1.6.2",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-webpack-loaders": "^0.9.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.22.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"chai": "^3.5.0",
"chai-enzyme": "^1.0.0-beta.1",
"cheerio": "^0.22.0",
Expand All @@ -108,7 +98,7 @@
"draft-js-buttons": "latest",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^3.17.0",
"eslint": "^6.2.2",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
Expand All @@ -118,9 +108,8 @@
"extract-text-webpack-plugin": "^2.0.0",
"flow-bin": "^0.69.0",
"husky": "^3.0.4",
"jest-cli": "^18.1.0",
"jsdom": "^11.3.0",
"linaria": "^1.3.1",
"linaria": "^1.4.0-alpha.1",
"lint-staged": "^9.2.3",
"matched": "^4.0.0",
"mocha": "^3.0.2",
Expand Down
69 changes: 52 additions & 17 deletions stories/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import 'style-loader!css-loader!draft-js/dist/Draft.css'; // eslint-disable-line import/no-unresolved
import 'draft-js/dist/Draft.css';

import { storiesOf } from '@storybook/react';
import SimpleAlignmentEditor from './alignment/src/App';
Expand Down Expand Up @@ -44,34 +44,69 @@ storiesOf('Draft.js Plugins', module)
.add('Editor with Alignment Plugin', () => <SimpleAlignmentEditor />)
.add('Editor with Anchor Plugin', () => <AnchorSimpleLinkPluginEditor />)
.add('Editor with Counter Plugin', () => <SimpleCounterEditor />)
.add('Editor with DragNDrop plugin and image plugin', () => <DragNDropImageEditor />)
.add('Editor with Emoji Plugin using emoji-one plugins', () => <SimpleEmojiEditor />)
.add('Editor with Emoji Plugin using native emojis', () => <CustomEmojiEditor />)
.add('Editor with DragNDrop plugin and image plugin', () => (
<DragNDropImageEditor />
))
.add('Editor with Emoji Plugin using emoji-one plugins', () => (
<SimpleEmojiEditor />
))
.add('Editor with Emoji Plugin using native emojis', () => (
<CustomEmojiEditor />
))
.add('Editor with Focus Plugin', () => <SimpleFocusEditor />)
.add('Editor with Hashtag Plugin', () => <SimpleHashtagEditor />)
.add('Editor with custom themed Hashtag Plugin', () => <CustomHashtagEditor />)
.add('Editor with custom themed Hashtag Plugin', () => (
<CustomHashtagEditor />
))
.add('Editor with Image Plugin', () => <SimpleImageEditor />)
.add('Editor with Image Plugin and a few others: drag and drop, alignment, resizable, focus', () => <CustomImageEditor />)
.add(
'Editor with Image Plugin and a few others: drag and drop, alignment, resizable, focus',
() => <CustomImageEditor />
)
.add('Editor with Image Plugin and Add mechanism', () => <AddImageEditor />)
.add('Editor with default inline toolbar plugin', () => <SimpleInlineToolbarEditor />)
.add('Editor with inline toolbar plugin containing all buttons', () => <CustomInlineToolbarEditor />)
.add('Editor with custom themed toolbar plugin', () => <ThemedInlineToolbarEditor />)
.add('Inline Toolbar with relatively positioned parent', () => <RelativeParentInlineToolbarEditor />)
.add('Editor with default inline toolbar plugin', () => (
<SimpleInlineToolbarEditor />
))
.add('Editor with inline toolbar plugin containing all buttons', () => (
<CustomInlineToolbarEditor />
))
.add('Editor with custom themed toolbar plugin', () => (
<ThemedInlineToolbarEditor />
))
.add('Inline Toolbar with relatively positioned parent', () => (
<RelativeParentInlineToolbarEditor />
))
.add('Editor with Linkify Plugin', () => <SimpleLinkifyEditor />)
.add('Editor with Linkify Plugin and configured to render links with - target: _blank', () => <CustomLinkifyEditor />)
.add(
'Editor with Linkify Plugin and configured to render links with - target: _blank',
() => <CustomLinkifyEditor />
)
.add('Editor with Mention Plugin', () => <SimpleMentionEditor />)
.add('Editor with Mention Plugin and asynchronously loaded Suggestions', () => <RemoteMentionEditor />)
.add('Editor with custom themed Mention Plugin', () => <CustomMentionEditor />)
.add('Mentions with styled suggestions', () => <CustomComponentMentionEditor />)
.add('Mentions with a custom trigger', () => <MentionEditorWithCustomTrigger />)
.add(
'Editor with Mention Plugin and asynchronously loaded Suggestions',
() => <RemoteMentionEditor />
)
.add('Editor with custom themed Mention Plugin', () => (
<CustomMentionEditor />
))
.add('Mentions with styled suggestions', () => (
<CustomComponentMentionEditor />
))
.add('Mentions with a custom trigger', () => (
<MentionEditorWithCustomTrigger />
))
.add('Mentions with whitespace', () => <MentionEditorWithWhitespaceSupport />)
.add('Sidebar', () => <SimpleSideToolbarEditor />)
.add('Styled Sidebar', () => <CustomSideToolbarEditor />)
.add('Sidebar with relatively positioned parent', () => <RelativeParentSideToolbarEditor />)
.add('Sidebar with relatively positioned parent', () => (
<RelativeParentSideToolbarEditor />
))
.add('Editor with Sticker Plugin', () => <SimpleStickerEditor />)
.add('Editor with Undo Plugin', () => <SimpleUndoEditor />)
.add('Editor with Video Plugin', () => <SimpleVideoEditor />)
.add('Editor with Video Plugin and Add Video Button', () => <CustomAddVideoEditor />)
.add('Editor with Video Plugin and Add Video Button', () => (
<CustomAddVideoEditor />
))
.add('Kitchen Sink', () => <KitchenSink />)
.add('Resizable Editor', () => <ResizableEditor />)
.add('CustomToolbarEditor', () => <CustomToolbarEditor />)
Expand Down
Loading

0 comments on commit 089dc80

Please sign in to comment.