Add storybooks for number-format and time-format (#93)

* add number format storybook * Add explanation * add time-format storybook
zhaoyongjie · Nov 17, 2021 · 18537af · 18537af
1 parent 473a690
commit 18537af
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 0 deletions.
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/package.json
@@ -34,8 +34,12 @@
     "@storybook/addon-options": "^4.0.3",
     "@storybook/react": "^4.0.2",
     "@superset-ui/color": "^0.9.3",
+    "@superset-ui/number-format": "^0.9.3",
+    "@superset-ui/time-format": "^0.9.3",
     "babel-loader": "^8.0.4",
+    "bootstrap": "^4.2.1",
     "git-directory-deploy": "^1.5.1",
+    "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "storybook-addon-jsx": "^5.4.0"

diff --git a/...nd/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/index.js b/...nd/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/index.js
@@ -1,6 +1,7 @@
 import { setAddon, storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import JSXAddon from 'storybook-addon-jsx';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 setAddon(JSXAddon);
 

diff --git a/...rset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/Stories.jsx b/...rset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/Stories.jsx
@@ -0,0 +1,124 @@
+/* eslint-disable no-magic-numbers, jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control */
+
+import React from 'react';
+import { formatNumber } from '@superset-ui/number-format';
+
+const propTypes = {};
+const defaultProps = {};
+
+class NumberFormatValidator extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formatString: '.3~s',
+      testValues: [
+        987654321,
+        12345.6789,
+        3000,
+        400.14,
+        70.00002,
+        1,
+        0,
+        -1,
+        -70.00002,
+        -400.14,
+        -3000,
+        -12345.6789,
+        -987654321,
+        Number.POSITIVE_INFINITY,
+        Number.NEGATIVE_INFINITY,
+        NaN,
+        null,
+        undefined,
+      ],
+    };
+
+    this.handleFormatChange = this.handleFormatChange.bind(this);
+  }
+
+  handleFormatChange(event) {
+    this.setState({
+      formatString: event.target.value,
+    });
+  }
+
+  render() {
+    const { formatString, testValues } = this.state;
+
+    return (
+      <div className="container">
+        <div className="row" style={{ margin: '40px 20px 0 20px' }}>
+          <div className="col-sm">
+            <p>
+              This <code>@superset-ui/number-format</code> package enriches <code>d3-format</code>{' '}
+              to handle invalid formats as well as edge case values. Use the validator below to
+              preview outputs from the specified format string. See{' '}
+              <a
+                href="https://github.com/d3/d3-format#locale_format"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                D3 Format Reference
+              </a>{' '}
+              for how to write a D3 format string.
+            </p>
+          </div>
+        </div>
+        <div className="row" style={{ margin: '10px 0 30px 0' }}>
+          <div className="col-sm" />
+          <div className="col-sm-8">
+            <div className="form">
+              <div className="form-group">
+                <label>Enter D3 format string:&nbsp;&nbsp;</label>
+                <input
+                  id="formatString"
+                  className="form-control form-control-lg"
+                  type="text"
+                  value={formatString}
+                  onChange={this.handleFormatChange}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-sm" />
+        </div>
+        <div className="row">
+          <div className="col-sm">
+            <table className="table table-striped table-sm">
+              <thead>
+                <tr>
+                  <th>Input (number)</th>
+                  <th>Formatted output (string)</th>
+                </tr>
+              </thead>
+              <tbody>
+                {testValues.map(v => (
+                  <tr key={v}>
+                    <td>
+                      <code>{`${v}`}</code>
+                    </td>
+                    <td>
+                      <code>&quot;{formatNumber(formatString, v)}&quot;</code>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+NumberFormatValidator.propTypes = propTypes;
+NumberFormatValidator.defaultProps = defaultProps;
+
+export default [
+  {
+    renderStory: () => <NumberFormatValidator />,
+    storyName: 'Validator',
+    storyPath: '@superset-ui/number-format',
+  },
+];
diff --git a/...uperset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/index.js b/...uperset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/index.js
@@ -0,0 +1,5 @@
+import Stories from './Stories';
+
+export default {
+  examples: [...Stories],
+};
diff --git a/...perset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/Stories.jsx b/...perset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/Stories.jsx
@@ -0,0 +1,113 @@
+/* eslint-disable no-magic-numbers, jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control */
+
+import React from 'react';
+import { formatTime } from '@superset-ui/time-format';
+
+const propTypes = {};
+const defaultProps = {};
+
+class TimeFormatValidator extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      formatString: '%Y-%m-%d %H:%M:%S',
+      testValues: [
+        new Date(Date.UTC(1986, 5, 14, 8, 30, 53)),
+        new Date(Date.UTC(2001, 9, 27, 13, 45, 2, 678)),
+        new Date(Date.UTC(2009, 1, 1, 0, 0, 0)),
+        new Date(Date.UTC(2018, 1, 1, 10, 20, 33)),
+        0,
+        null,
+        undefined,
+      ],
+    };
+
+    this.handleFormatChange = this.handleFormatChange.bind(this);
+  }
+
+  handleFormatChange(event) {
+    this.setState({
+      formatString: event.target.value,
+    });
+  }
+
+  render() {
+    const { formatString, testValues } = this.state;
+
+    return (
+      <div className="container">
+        <div className="row" style={{ margin: '40px 20px 0 20px' }}>
+          <div className="col-sm">
+            <p>
+              This <code>@superset-ui/time-format</code> package enriches{' '}
+              <code>d3-time-format</code> to handle invalid formats as well as edge case values. Use
+              the validator below to preview outputs from the specified format string. See{' '}
+              <a
+                href="https://github.com/d3/d3-time-format#locale_format"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                D3 Time Format Reference
+              </a>{' '}
+              for how to write a D3 time format string.
+            </p>
+          </div>
+        </div>
+        <div className="row" style={{ margin: '10px 0 30px 0' }}>
+          <div className="col-sm" />
+          <div className="col-sm-8">
+            <div className="form">
+              <div className="form-group">
+                <label>Enter D3 time format string:&nbsp;&nbsp;</label>
+                <input
+                  id="formatString"
+                  className="form-control form-control-lg"
+                  type="text"
+                  value={formatString}
+                  onChange={this.handleFormatChange}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="col-sm" />
+        </div>
+        <div className="row">
+          <div className="col-sm">
+            <table className="table table-striped table-sm">
+              <thead>
+                <tr>
+                  <th>Input (time)</th>
+                  <th>Formatted output (string)</th>
+                </tr>
+              </thead>
+              <tbody>
+                {testValues.map(v => (
+                  <tr key={v}>
+                    <td>
+                      <code>{v instanceof Date ? v.toUTCString() : `${v}`}</code>
+                    </td>
+                    <td>
+                      <code>&quot;{formatTime(formatString, v)}&quot;</code>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+TimeFormatValidator.propTypes = propTypes;
+TimeFormatValidator.defaultProps = defaultProps;
+
+export default [
+  {
+    renderStory: () => <TimeFormatValidator />,
+    storyName: 'Validator',
+    storyPath: '@superset-ui/time-format',
+  },
+];
diff --git a/.../superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/index.js b/.../superset-ui/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/index.js
@@ -0,0 +1,5 @@
+import Stories from './Stories';
+
+export default {
+  examples: [...Stories],
+};