reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 22:19:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

stash

Browse Source
This commit is contained in:
Nathan Bierema 2020-08-31 17:48:12 -04:00
parent c7b0c7aa6e
commit 5091d2466e
19 changed files with 2758 additions and 1937 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/devui/.scripts/get_gh_pages_url.js
View File

@ -1,12 +0,0 @@
// IMPORTANT
// ---------
// This is an auto generated file with React CDK.
// Do not modify this file.
const parse = require('git-url-parse');
var ghUrl = process.argv[2];
const parsedUrl = parse(ghUrl);
const ghPagesUrl =
'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name;
console.log(ghPagesUrl);

16
packages/devui/.scripts/prepublish.sh
View File

@ -1,16 +0,0 @@
#!/bin/bash
# IMPORTANT
# ---------
# This is an auto generated file with React CDK.
# Do not modify this file.
# Use `.scripts/user/prepublish.sh instead`.
echo "=> Transpiling 'src' into ES5 ..."
echo ""
rm -rf ./dist
./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./lib
echo ""
echo "=> Transpiling completed."
. .scripts/user/prepublish.sh

47
packages/devui/.scripts/publish_storybook.sh
View File

@ -1,47 +0,0 @@
#!/bin/bash
# IMPORTANT
# ---------
# This is an auto generated file with React CDK.
# Do not modify this file.
set -e # exit with nonzero exit code if anything fails
# get GIT url
GIT_URL=`git config --get remote.origin.url`
if [[ $GIT_URL == "" ]]; then
echo "This project is not configured with a remote git repo".
exit 1
fi
# clear and re-create the out directory
rm -rf .out || exit 0;
mkdir .out;
# run our compile script, discussed above
build-storybook -o .out
# go to the out directory and create a *new* Git repo
cd .out
git init
# inside this git repo we'll pretend to be a new user
git config user.name "GH Pages Bot"
git config user.email "hello@ghbot.com"
# The first and only commit to this new Git repo contains all the
# files present with the commit message "Deploy to GitHub Pages".
git add .
git commit -m "Deploy Storybook to GitHub Pages"
# Force push from the current repo's master branch to the remote
# repo's gh-pages branch. (All previous history on the gh-pages branch
# will be lost, since we are overwriting it.) We redirect any output to
# /dev/null to hide any sensitive credential data that might otherwise be exposed.
git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1
cd ..
rm -rf .out
echo ""
echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`"

1
packages/devui/.scripts/user/prepublish.sh
View File

@ -1 +0,0 @@
# Use this file to your own code to run at NPM `prepublish` event.

1
packages/devui/.scripts/user/pretest.js
View File

@ -1 +0,0 @@
// Use this file to setup any test utilities.

4
packages/devui/.storybook/addons.js
View File

@ -1,4 +0,0 @@
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-options/register';
import './themeAddon/register';

30
packages/devui/.storybook/config.js
View File

@ -1,30 +0,0 @@
import { configure, setAddon, addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { withTheme } from './themeAddon/theme';
import '../src/presets.js';
addDecorator(
withOptions({
name: 'DevUI',
url: 'https://github.com/reduxjs/redux-devtools/tree/master/packages/devui',
goFullScreen: false,
showStoriesPanel: true,
showAddonPanel: true,
showSearchBox: false,
addonPanelInRight: true,
})
);
addDecorator(withTheme);
addDecorator(withKnobs);
addDecorator(withInfo);
const req = require.context('../src/', true, /stories\/index\.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);

12
packages/devui/.storybook/main.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
},
},
],
};

52
packages/devui/.storybook/preview-head.html
View File

@ -1,28 +1,28 @@
<style>
html {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
height: 100%;
width: 100%;
min-width: 350px;
min-height: 400px;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
font-size: 11px;
}
#root,
#root > div {
height: 100%;
}
#root > div > div {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: auto;
}
html {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
height: 100%;
width: 100%;
min-width: 350px;
min-height: 400px;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
font-size: 11px;
}
#root,
#root > div {
height: 100%;
}
#root > div > div {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: auto;
}
</style>

47
packages/devui/.storybook/preview.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { Container } from '../src';
import { listSchemes, listThemes } from '../src/utils/theme';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Global theme for components',
defaultValue: 'default',
toolbar: {
items: listThemes(),
},
},
scheme: {
name: 'Color Scheme',
description: 'Global color scheme for components',
defaultValue: 'default',
toolbar: {
items: listSchemes(),
},
},
color: {
name: 'Color',
description: 'Global color for components',
defaultValue: 'light',
toolbar: {
items: ['light', 'dark'],
},
},
};
const withThemeProvider = (Story, context) => (
<Container
themeData={{
theme: context.globals.theme,
scheme: context.globals.scheme,
light: context.globals.color === 'light',
}}
>
<Story {...context} />
</Container>
);
export const decorators = [withThemeProvider];

60
packages/devui/.storybook/themeAddon/Panel.js
View File

@ -1,60 +0,0 @@
import React from 'react';
import Form from '@storybook/addon-knobs/dist/components/PropForm';
import styled from 'styled-components';
import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
import { listSchemes, listThemes } from '../../src/utils/theme';
const FormWrapper = styled.div`
width: 100%;
padding: 5px;
label {
white-space: nowrap;
}
`;
const schemes = listSchemes();
const themes = listThemes();
export default class Panel extends React.Component {
state = DEFAULT_THEME_STATE;
onChange = (o) => {
const state = { [o.name.split(' ').slice(-1)[0]]: o.value };
this.props.channel.emit(EVENT_ID_DATA, state);
this.setState(state);
};
onClick = () => {};
render() {
const { theme, scheme, light } = this.state;
return (
<FormWrapper>
<Form
knobs={[
{
type: 'select',
name: 'theme',
value: theme,
options: themes,
},
{
type: 'select',
name: 'color scheme',
value: scheme,
options: schemes,
},
{
type: 'boolean',
name: 'light',
value: light,
},
]}
onFieldChange={this.onChange}
onFieldClick={this.onClick}
/>
</FormWrapper>
);
}
}

9
packages/devui/.storybook/themeAddon/constant.js
View File

@ -1,9 +0,0 @@
export const ADDON_ID = 'redux-devtools-themes-storybook';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const EVENT_ID_DATA = `${ADDON_ID}/event/data`;
export const CSS_CLASS = 'redux-devtools-storybook';
export const DEFAULT_THEME_STATE = {
theme: 'default',
scheme: 'default',
light: true,
};

13
packages/devui/.storybook/themeAddon/register.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import addons from '@storybook/addons';
import Panel from './Panel';
import { ADDON_ID, PANEL_ID } from './constant';
addons.register(ADDON_ID, (api) => {
const channel = addons.getChannel();
addons.addPanel(PANEL_ID, {
title: 'Theme',
render: ({ active }) =>
active ? <Panel channel={channel} api={api} /> : null,
});
});

28
packages/devui/.storybook/themeAddon/theme.js
View File

@ -1,28 +0,0 @@
import React from 'react';
import addons from '@storybook/addons';
import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
import { Container } from '../../src';
const channel = addons.getChannel();
class Theme extends React.Component {
state = DEFAULT_THEME_STATE;
componentDidMount() {
channel.on(EVENT_ID_DATA, this.onChannel);
}
componentWillUnmount() {
channel.removeListener(EVENT_ID_DATA, this.onChannel);
}
onChannel = (state) => {
this.setState(state);
};
render() {
return <Container themeData={this.state}>{this.props.children}</Container>;
}
}
export const withTheme = (story) => <Theme>{story()}</Theme>;

8
packages/devui/.storybook/webpack.config.js
View File

@ -1,8 +0,0 @@
const path = require('path');
module.exports = (baseConfig, env, defaultConfig) => {
// Add custom webpack config here like:
// defaultConfig.module.rules.push
return defaultConfig;
};

15
packages/devui/package.json
View File

@ -18,8 +18,8 @@
"lint:css": "stylelint \"./src/**/*.js\"",
"test:update": "npm run jest -- -u",
"test": "jest --no-cache",
"storybook": "start-storybook -p 9001 -c .storybook -s ./fonts",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"storybook": "start-storybook -p 6006 -s ./fonts",
"build-storybook": "build-storybook -s ./fonts",
"prepare": "npm run build",
"prepublishOnly": "npm run test && npm run build"
},
@ -36,20 +36,19 @@
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@storybook/addon-actions": "^4.1.18",
"@storybook/addon-info": "^4.1.18",
"@storybook/addon-knobs": "^4.1.18",
"@storybook/addon-options": "^4.1.18",
"@storybook/react": "4.1.18",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-essentials": "^6.0.21",
"@storybook/addon-links": "^6.0.21",
"@storybook/react": "^6.0.21",
"babel-loader": "^8.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"git-url-parse": "^11.1.2",
"jest": "^26.2.2",
"jsdom": "^16.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1",
"rimraf": "^3.0.2",
"stylelint": "^13.6.1",

54
packages/devui/src/Button/Button.stories.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import styled from 'styled-components';
import { MdFiberManualRecord } from 'react-icons/md';
import Button from './';
export default {
title: 'Components/Button',
component: Button,
};
const Container = styled.div`
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
`;
const Template = (args) => (
<Container>
<Button {...args} />
</Container>
);
export const Default = Template.bind({});
Default.args = {
title: 'Hello Tooltip! \\a And from new line hello!',
primary: true,
size: 'normal',
disabled: false,
children: 'Hello Button',
};
Default.argTypes = {
onClick: { table: { disable: true } },
type: { table: { disable: true } },
mark: { table: { disable: true } },
theme: { table: { disable: true } },
};
export const Mark = Template.bind({});
Mark.args = {
mark: 'base08',
title: 'Hello Tooltip',
size: 'normal',
disabled: false,
children: <MdFiberManualRecord />,
};
Mark.argTypes = {
children: { table: { disable: true } },
onClick: { table: { disable: true } },
type: { table: { disable: true } },
primary: { table: { disable: true } },
theme: { table: { disable: true } },
};

77
packages/devui/src/Button/stories/index.js
View File

@ -1,77 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
import { MdFiberManualRecord } from 'react-icons/md';
import Button from '../';
export const Container = styled.div`
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
`;
storiesOf('Button', module)
.addDecorator(withKnobs)
.add('default', () => (
<Container>
<Button
title={text('Title', 'Hello Tooltip! \\a And from new line hello!')}
tooltipPosition={select('tooltipPosition', [
'top',
'bottom',
'left',
'right',
'bottom-left',
'bottom-right',
'top-left',
'top-right',
])}
primary={boolean('primary', true)}
size={select('size', ['big', 'normal', 'small'], 'normal')}
disabled={boolean('Disabled', false)}
onClick={action('button clicked')}
>
{text('Label', 'Hello Button')}
</Button>
</Container>
))
.add('mark', () => (
<Container>
<Button
mark={select(
'mark',
[
'base08',
'base09',
'base0A',
'base0B',
'base0C',
'base0D',
'base0E',
'base0F',
],
'base08'
)}
title={text('Title', 'Hello Tooltip')}
tooltipPosition={select('tooltipPosition', [
'top',
'bottom',
'left',
'right',
'bottom-left',
'bottom-right',
'top-left',
'top-right',
])}
size={select('size', ['big', 'normal', 'small'], 'normal')}
disabled={boolean('Disabled', false)}
onClick={action('button clicked')}
>
<MdFiberManualRecord />
</Button>
</Container>
));

4209
yarn.lock
View File

File diff suppressed because it is too large Load Diff