stash

packages/devui/.scripts/get_gh_pages_url.js

@@ -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);

packages/devui/.scripts/prepublish.sh

@@ -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

packages/devui/.scripts/publish_storybook.sh

@@ -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`"

packages/devui/.scripts/user/prepublish.sh

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

packages/devui/.scripts/user/pretest.js

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

packages/devui/.storybook/addons.js

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

packages/devui/.storybook/config.js

@@ -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);

packages/devui/.storybook/main.js

@@ -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,
+      },
+    },
+  ],
+};

packages/devui/.storybook/preview-head.html

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

packages/devui/.storybook/preview.js

@@ -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];

packages/devui/.storybook/themeAddon/Panel.js

@@ -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>
-    );
-  }
-}

packages/devui/.storybook/themeAddon/constant.js

@@ -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,
-};

packages/devui/.storybook/themeAddon/register.js

@@ -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,
-  });
-});

packages/devui/.storybook/themeAddon/theme.js

@@ -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>;

packages/devui/.storybook/webpack.config.js

@@ -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;
-};

packages/devui/package.json

@@ -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",
+    "storybook": "start-storybook -p 6006 -s ./fonts",
-    "publish-storybook": "bash .scripts/publish_storybook.sh",
+    "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-actions": "^6.0.21",
-    "@storybook/addon-info": "^4.1.18",
+    "@storybook/addon-essentials": "^6.0.21",
-    "@storybook/addon-knobs": "^4.1.18",
+    "@storybook/addon-links": "^6.0.21",
-    "@storybook/addon-options": "^4.1.18",
+    "@storybook/react": "^6.0.21",
-    "@storybook/react": "4.1.18",
     "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",

packages/devui/src/Button/Button.stories.js

@@ -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 } },
+};

packages/devui/src/Button/stories/index.js

@@ -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>
-  ));