Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React < 16.3 support (WIP) #1113

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5,833 changes: 2,942 additions & 2,891 deletions package-lock.json

Large diffs are not rendered by default.

19 changes: 9 additions & 10 deletions package.json
Expand Up @@ -79,7 +79,6 @@
"react-docgen-displayname-handler": "^2.1.0",
"react-group": "^1.0.6",
"react-icons": "^2.2.7",
"react-lifecycles-compat": "^3.0.4",
"recast": "^0.13.0",
"remark": "^9.0.0",
"style-loader": "^0.21.0",
Expand All @@ -91,8 +90,8 @@
"webpack-merge": "^4.1.3"
},
"peerDependencies": {
"react": ">=15",
"react-dom": ">=15"
"react": ">=16.3",
"react-dom": ">=16.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
Expand All @@ -109,15 +108,15 @@
"deabsdeep": "^1.0.6",
"deepfreeze": "^2.0.0",
"dog-names": "^1.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16.3": "^1.1.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.0.1",
"eslint-config-tamia": "^6.0.0",
"eslint-plugin-compat": "^2.4.0",
"eslint-plugin-es5": "^1.3.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^1.1.11",
"husky": "^0.14.3",
"jest": "^23.3.0",
Expand All @@ -126,9 +125,9 @@
"lint-staged": "^7.2.0",
"prettier": "1.13.7",
"raf": "^3.4.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-test-renderer": "^16.4.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-test-renderer": "^16.4.2",
"rimraf": "^2.6.2",
"strip-shebang": "^1.0.2",
"url-loader": "^1.0.1",
Expand Down Expand Up @@ -159,7 +158,7 @@
"test:browser:customised": "node test/browser.js examples/customised/styleguide/index.html",
"test:browser:sections": "node test/browser.js examples/sections/styleguide/index.html",
"precommit": "lint-staged",
"format": "prettier --write '**/*.{js,md}'",
"format": "prettier --write \"**/*.{js,md}\"",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this change necessary?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I had problems in Windows, it relates with this issue:
prettier/prettier#4086 (comment)

And here explains that
https://prettier.io/docs/en/cli.html

Don't forget the quotes around the globs! The quotes make sure that Prettier expands the globs rather than your shell, for cross-platform usage.

Maybe it should be other PR

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤦‍♂️

We should change it here, otherwise the script will overwrite the command eventually:
https://github.com/sapegin/mrm-tasks/blob/master/packages/mrm-task-prettier/index.js#L82

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing project @sapegin!

"postinstall": "node -e \"console.log('\\u001b[32mLove Styleguidist? Support us on the Open Collective:\\u001b[22m\\u001b[39m\\n > \\u001b[96m\\u001b[1mhttps://opencollective.com/styleguidist\\u001b[0m\\n')\" || exit 0",
"test:cypress:pre": "npm i --no-save cypress@3.0.2 wait-on",
"test:cypress:open": "cypress open",
Expand Down
39 changes: 39 additions & 0 deletions src/provider.js
@@ -0,0 +1,39 @@
import React, { Component } from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd move it to rsg-components like any other component, and rename to ConfigProvider.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok!

import PropTypes from 'prop-types';

export const Context = React.createContext();

export function Consumer(WrappedComponent) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd call it ConfigConsumer to make more clear what it does.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok!

const componentName = WrappedComponent.name.replace(/Renderer$/, '');
return class extends Component {
static displayName = `Consumer(${componentName})`;
state = {};
render() {
return (
<Context.Consumer>
{context => {
if (!context) {
throw new Error(`Consumer cannot be rendered outside the Provider component`);
}
return <WrappedComponent {...context} {...this.props} />;
}}
</Context.Consumer>
);
}
};
}

export function Provider(props) {
const { children, ...rest } = props;
const ui = typeof children === 'function' ? children(this.state) : children;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need both here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be removed!


return <Context.Provider value={{ ...rest }}>{ui}</Context.Provider>;
}

Provider.propTypes = {
children: PropTypes.any,
codeRevision: PropTypes.number.isRequired,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're not using some of these props.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have copied from this childContextTypes
https://github.com/styleguidist/react-styleguidist/blob/master/src/rsg-components/StyleGuide/StyleGuide.js#L45-L50

because they are used in several components

config: PropTypes.object.isRequired,
slots: PropTypes.object.isRequired,
displayMode: PropTypes.string,
};
36 changes: 18 additions & 18 deletions src/rsg-components/Argument/__snapshots__/Argument.spec.js.snap
Expand Up @@ -5,14 +5,14 @@ exports[`should render argument 1`] = `
separator=" "
>
<span>
<Styled(Name)>
<Consumer(Name)>
Foo
</Styled(Name)>
</Consumer(Name)>
:
</span>
<Styled(Type)>
<Consumer(Type)>
Array
</Styled(Type)>
</Consumer(Type)>
<Markdown
inline={true}
Expand All @@ -26,14 +26,14 @@ exports[`should render argument without description 1`] = `
separator=" "
>
<span>
<Styled(Name)>
<Consumer(Name)>
Foo
</Styled(Name)>
</Consumer(Name)>
:
</span>
<Styled(Type)>
<Consumer(Type)>
Array
</Styled(Type)>
</Consumer(Type)>
</Group>
`;

Expand All @@ -42,9 +42,9 @@ exports[`should render argument without type 1`] = `
separator=" "
>
<span>
<Styled(Name)>
<Consumer(Name)>
Foo
</Styled(Name)>
</Consumer(Name)>
</span>
<Markdown
inline={true}
Expand All @@ -58,10 +58,10 @@ exports[`should render default value of argument 1`] = `
default="bar"
separator=" "
>
<Styled(Type)>
<Consumer(Type)>
String
=bar
</Styled(Type)>
</Consumer(Type)>
<Markdown
inline={true}
Expand All @@ -75,11 +75,11 @@ exports[`should render default value of optional argument 1`] = `
default="true"
separator=" "
>
<Styled(Type)>
<Consumer(Type)>
Boolean
?
=true
</Styled(Type)>
</Consumer(Type)>
<Markdown
inline={true}
Expand All @@ -92,10 +92,10 @@ exports[`should render optional argument 1`] = `
<Group
separator=" "
>
<Styled(Type)>
<Consumer(Type)>
Array
?
</Styled(Type)>
</Consumer(Type)>
<Markdown
inline={true}
Expand All @@ -109,9 +109,9 @@ exports[`should render return value 1`] = `
separator=" "
>
Returns
<Styled(Type)>
<Consumer(Type)>
Array
</Styled(Type)>
</Consumer(Type)>
<Markdown
inline={true}
Expand Down
Expand Up @@ -4,7 +4,7 @@ exports[`renderer should render arguments 1`] = `
<div
className="root"
>
<Styled(Argument)
<Consumer(Argument)
description="Converts foo to bar"
key="Foo"
name="Foo"
Expand All @@ -14,7 +14,7 @@ exports[`renderer should render arguments 1`] = `
}
}
/>
<Styled(Argument)
<Consumer(Argument)
key="Foo"
name="Foo"
/>
Expand All @@ -28,13 +28,13 @@ exports[`renderer should render heading 1`] = `
<div
className="headingWrapper"
>
<Styled(Heading)
<Consumer(Heading)
level={5}
>
Arguments
</Styled(Heading)>
</Consumer(Heading)>
</div>
<Styled(Argument)
<Consumer(Argument)
key="Foo"
name="Foo"
/>
Expand Down
Expand Up @@ -2,7 +2,7 @@

exports[`renderer should render components list layout 1`] = `
<div>
<ReactComponent
<Consumer(ReactComponent)
component={
Object {
"filepath": "components/foo.js",
Expand All @@ -18,7 +18,7 @@ exports[`renderer should render components list layout 1`] = `
key="0"
usageMode="collapse"
/>
<ReactComponent
<Consumer(ReactComponent)
component={
Object {
"filepath": "components/bar.js",
Expand All @@ -39,7 +39,7 @@ exports[`renderer should render components list layout 1`] = `

exports[`should render components list 1`] = `
<ComponentsRenderer>
<ReactComponent
<Consumer(ReactComponent)
component={
Object {
"filepath": "components/foo.js",
Expand All @@ -55,7 +55,7 @@ exports[`should render components list 1`] = `
key="components/foo.js"
usageMode="collapse"
/>
<ReactComponent
<Consumer(ReactComponent)
component={
Object {
"filepath": "components/bar.js",
Expand Down
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`if a custom href is provided, should use it instead of generating internal link 1`] = `
<Styled(ComponentsList)
<Consumer(ComponentsList)
classes={Object {}}
items={
Array [
Expand All @@ -27,12 +27,12 @@ exports[`should ignore items without visibleName 1`] = `
className=""
key="#button"
>
<Styled(Link)
<Consumer(Link)
className=""
href="#button"
>
Button
</Styled(Link)>
</Consumer(Link)>
</li>
</ul>
`;
Expand All @@ -43,29 +43,29 @@ exports[`should render sections with nested components 1`] = `
className=""
key="#button"
>
<Styled(Link)
<Consumer(Link)
className=""
href="#button"
>
Button
</Styled(Link)>
</Consumer(Link)>
</li>
<li
className=""
key="#input"
>
<Styled(Link)
<Consumer(Link)
className=""
href="#input"
>
Input
</Styled(Link)>
</Consumer(Link)>
</li>
</ul>
`;

exports[`should set a parameter on link when useHashId is activated 1`] = `
<Styled(ComponentsList)
<Consumer(ComponentsList)
classes={Object {}}
items={
Array [
Expand All @@ -87,7 +87,7 @@ exports[`should set a parameter on link when useHashId is activated 1`] = `
`;

exports[`should set a sub route on link when useHashId is deactivated 1`] = `
<Styled(ComponentsList)
<Consumer(ComponentsList)
classes={Object {}}
items={
Array [
Expand All @@ -107,7 +107,7 @@ exports[`should set a sub route on link when useHashId is deactivated 1`] = `
`;

exports[`should set the correct href for items 1`] = `
<Styled(ComponentsList)
<Consumer(ComponentsList)
classes={Object {}}
items={
Array [
Expand Down
7 changes: 3 additions & 4 deletions src/rsg-components/Editor/Editor.js
Expand Up @@ -4,6 +4,7 @@ import Styled from 'rsg-components/Styled';
import debounce from 'lodash/debounce';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/jsx/jsx';
import { Consumer } from '../../provider';

// We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
// That way we could avoid clashes between our loaders and user loaders.
Expand Down Expand Up @@ -46,8 +47,6 @@ export class Editor extends Component {
onChange: PropTypes.func,
editorConfig: PropTypes.object,
classes: PropTypes.object.isRequired,
};
static contextTypes = {
config: PropTypes.object.isRequired,
};

Expand All @@ -62,7 +61,7 @@ export class Editor extends Component {

getEditorConfig(props) {
return {
...this.context.config.editorConfig,
...props.config.editorConfig,
...props.editorConfig,
};
}
Expand All @@ -87,4 +86,4 @@ export class Editor extends Component {
}
}

export default Styled(styles)(Editor);
export default Consumer(Styled(styles)(Editor));