Update docs and remove reference to internal components
This commit is contained in:
parent
d79b490dda
commit
30289cd240
|
@ -12,7 +12,6 @@ const { parse, resolver } = require( 'react-docgen' );
|
||||||
*/
|
*/
|
||||||
const { getDescription, getProps, getTitle } = require( './lib/formatting' );
|
const { getDescription, getProps, getTitle } = require( './lib/formatting' );
|
||||||
const {
|
const {
|
||||||
COMPONENTS_FOLDER,
|
|
||||||
PACKAGES_FOLDER,
|
PACKAGES_FOLDER,
|
||||||
deleteExistingDocs,
|
deleteExistingDocs,
|
||||||
getExportedFileList,
|
getExportedFileList,
|
||||||
|
@ -26,7 +25,6 @@ deleteExistingDocs();
|
||||||
|
|
||||||
// Read components file to get a list of exported files, convert that to a list of absolute paths to public components.
|
// Read components file to get a list of exported files, convert that to a list of absolute paths to public components.
|
||||||
const files = [
|
const files = [
|
||||||
...getRealFilePaths( getExportedFileList( path.resolve( COMPONENTS_FOLDER, 'index.js' ) ) ),
|
|
||||||
...getRealFilePaths( getExportedFileList( path.resolve( PACKAGES_FOLDER, 'index.js' ) ), PACKAGES_FOLDER ),
|
...getRealFilePaths( getExportedFileList( path.resolve( PACKAGES_FOLDER, 'index.js' ) ), PACKAGES_FOLDER ),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,6 @@ const { namedTypes } = types;
|
||||||
*/
|
*/
|
||||||
const { camelCaseDash } = require( './formatting' );
|
const { camelCaseDash } = require( './formatting' );
|
||||||
|
|
||||||
const COMPONENTS_FOLDER = path.resolve( __dirname, '../../../client/components/' );
|
|
||||||
const PACKAGES_FOLDER = path.resolve( __dirname, '../../../packages/components/src/' );
|
const PACKAGES_FOLDER = path.resolve( __dirname, '../../../packages/components/src/' );
|
||||||
const DOCS_FOLDER = path.resolve( __dirname, '../../../docs/components/' );
|
const DOCS_FOLDER = path.resolve( __dirname, '../../../docs/components/' );
|
||||||
|
|
||||||
|
@ -93,7 +92,7 @@ function getMdFileName( filepath, absolute = true ) {
|
||||||
* @param { string } basePath The absolute path to the components directory.
|
* @param { string } basePath The absolute path to the components directory.
|
||||||
* @return { array } Updated array with absolute paths to all files.
|
* @return { array } Updated array with absolute paths to all files.
|
||||||
*/
|
*/
|
||||||
function getRealFilePaths( files, basePath = COMPONENTS_FOLDER ) {
|
function getRealFilePaths( files, basePath = PACKAGES_FOLDER ) {
|
||||||
files.sort();
|
files.sort();
|
||||||
return files.map( file => {
|
return files.map( file => {
|
||||||
const fullPath = path.resolve( basePath, file );
|
const fullPath = path.resolve( basePath, file );
|
||||||
|
@ -160,7 +159,6 @@ function writeTableOfContents( files ) {
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
COMPONENTS_FOLDER,
|
|
||||||
DOCS_FOLDER,
|
DOCS_FOLDER,
|
||||||
PACKAGES_FOLDER,
|
PACKAGES_FOLDER,
|
||||||
deleteExistingDocs,
|
deleteExistingDocs,
|
||||||
|
|
|
@ -1,210 +0,0 @@
|
||||||
`D3Chart` (component)
|
|
||||||
=====================
|
|
||||||
|
|
||||||
A simple D3 line and bar chart component for timeseries data in React.
|
|
||||||
|
|
||||||
Props
|
|
||||||
-----
|
|
||||||
|
|
||||||
### `className`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Additional CSS classes.
|
|
||||||
|
|
||||||
### `colorScheme`
|
|
||||||
|
|
||||||
- Type: Function
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
A chromatic color function to be passed down to d3.
|
|
||||||
|
|
||||||
### `data`
|
|
||||||
|
|
||||||
- Type: Array
|
|
||||||
- Default: `[]`
|
|
||||||
|
|
||||||
An array of data.
|
|
||||||
|
|
||||||
### `dateParser`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: `'%Y-%m-%dT%H:%M:%S'`
|
|
||||||
|
|
||||||
Format to parse dates into d3 time format
|
|
||||||
|
|
||||||
### `height`
|
|
||||||
|
|
||||||
- Type: Number
|
|
||||||
- Default: `200`
|
|
||||||
|
|
||||||
Height of the `svg`.
|
|
||||||
|
|
||||||
### `interval`
|
|
||||||
|
|
||||||
- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Interval specification (hourly, daily, weekly etc.)
|
|
||||||
|
|
||||||
### `margin`
|
|
||||||
|
|
||||||
- Type: Object
|
|
||||||
- bottom: Number
|
|
||||||
- left: Number
|
|
||||||
- right: Number
|
|
||||||
- top: Number
|
|
||||||
- Default: `{
|
|
||||||
bottom: 30,
|
|
||||||
left: 40,
|
|
||||||
right: 0,
|
|
||||||
top: 20,
|
|
||||||
}`
|
|
||||||
|
|
||||||
Margins for axis and chart padding.
|
|
||||||
|
|
||||||
### `mode`
|
|
||||||
|
|
||||||
- Type: One of: 'item-comparison', 'time-comparison'
|
|
||||||
- Default: `'time-comparison'`
|
|
||||||
|
|
||||||
`items-comparison` (default) or `time-comparison`, this is used to generate correct
|
|
||||||
ARIA properties.
|
|
||||||
|
|
||||||
### `orderedKeys`
|
|
||||||
|
|
||||||
- Type: Array
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
The list of labels for this chart.
|
|
||||||
|
|
||||||
### `tooltipLabelFormat`
|
|
||||||
|
|
||||||
- Type: One of type: string, func
|
|
||||||
- Default: `'%B %d, %Y'`
|
|
||||||
|
|
||||||
A datetime formatting string or overriding function to format the tooltip label.
|
|
||||||
|
|
||||||
### `tooltipValueFormat`
|
|
||||||
|
|
||||||
- Type: One of type: string, func
|
|
||||||
- Default: `','`
|
|
||||||
|
|
||||||
A number formatting string or function to format the value displayed in the tooltips.
|
|
||||||
|
|
||||||
### `tooltipPosition`
|
|
||||||
|
|
||||||
- Type: One of: 'below', 'over'
|
|
||||||
- Default: `'over'`
|
|
||||||
|
|
||||||
The position where to render the tooltip can be `over` the chart or `below` the chart.
|
|
||||||
|
|
||||||
### `tooltipTitle`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
A string to use as a title for the tooltip. Takes preference over `tooltipFormat`.
|
|
||||||
|
|
||||||
### `type`
|
|
||||||
|
|
||||||
- Type: One of: 'bar', 'line'
|
|
||||||
- Default: `'line'`
|
|
||||||
|
|
||||||
Chart type of either `line` or `bar`.
|
|
||||||
|
|
||||||
### `width`
|
|
||||||
|
|
||||||
- Type: Number
|
|
||||||
- Default: `600`
|
|
||||||
|
|
||||||
Width of the `svg`.
|
|
||||||
|
|
||||||
### `xFormat`
|
|
||||||
|
|
||||||
- Type: One of type: string, func
|
|
||||||
- Default: `'%Y-%m-%d'`
|
|
||||||
|
|
||||||
A datetime formatting string or function, passed to d3TimeFormat.
|
|
||||||
|
|
||||||
### `x2Format`
|
|
||||||
|
|
||||||
- Type: One of type: string, func
|
|
||||||
- Default: `''`
|
|
||||||
|
|
||||||
A datetime formatting string or function, passed to d3TimeFormat.
|
|
||||||
|
|
||||||
### `yFormat`
|
|
||||||
|
|
||||||
- Type: One of type: string, func
|
|
||||||
- Default: `'.3s'`
|
|
||||||
|
|
||||||
A number formatting string or function, passed to d3Format.
|
|
||||||
|
|
||||||
`Legend` (component)
|
|
||||||
====================
|
|
||||||
|
|
||||||
A legend specifically designed for the WooCommerce admin charts.
|
|
||||||
|
|
||||||
Props
|
|
||||||
-----
|
|
||||||
|
|
||||||
### `className`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Additional CSS classes.
|
|
||||||
|
|
||||||
### `colorScheme`
|
|
||||||
|
|
||||||
- Type: Function
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
A chromatic color function to be passed down to d3.
|
|
||||||
|
|
||||||
### `data`
|
|
||||||
|
|
||||||
- **Required**
|
|
||||||
- Type: Array
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
An array of `orderedKeys`.
|
|
||||||
|
|
||||||
### `handleLegendToggle`
|
|
||||||
|
|
||||||
- Type: Function
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Handles `onClick` event.
|
|
||||||
|
|
||||||
### `handleLegendHover`
|
|
||||||
|
|
||||||
- Type: Function
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Handles `onMouseEnter`/`onMouseLeave` events.
|
|
||||||
|
|
||||||
### `legendDirection`
|
|
||||||
|
|
||||||
- Type: One of: 'row', 'column'
|
|
||||||
- Default: `'row'`
|
|
||||||
|
|
||||||
Display legend items as a `row` or `column` inside a flex-box.
|
|
||||||
|
|
||||||
### `itemsLabel`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
Label to describe the legend items. It will be displayed in the legend of
|
|
||||||
comparison charts when there are many.
|
|
||||||
|
|
||||||
### `valueType`
|
|
||||||
|
|
||||||
- Type: String
|
|
||||||
- Default: null
|
|
||||||
|
|
||||||
What type of data is to be displayed? Number, Average, String?
|
|
||||||
|
|
|
@ -38,6 +38,13 @@ The `path` parameter supplied by React-Router
|
||||||
|
|
||||||
The query string represented in object form
|
The query string represented in object form
|
||||||
|
|
||||||
|
### `showDatePicker`
|
||||||
|
|
||||||
|
- Type: Boolean
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Whether the date picker must be shown..
|
||||||
|
|
||||||
`AdvancedFilters` (component)
|
`AdvancedFilters` (component)
|
||||||
=============================
|
=============================
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ Function called when selected results change, passed result list.
|
||||||
### `type`
|
### `type`
|
||||||
|
|
||||||
- **Required**
|
- **Required**
|
||||||
- Type: One of: 'products', 'product_cats', 'orders', 'customers', 'coupons', 'variations'
|
- Type: One of: 'products', 'product_cats', 'orders', 'customers', 'coupons', 'taxes', 'variations'
|
||||||
- Default: null
|
- Default: null
|
||||||
|
|
||||||
The object type to be used in searching.
|
The object type to be used in searching.
|
||||||
|
@ -50,5 +50,12 @@ An array of objects describing selected values.
|
||||||
- Type: Boolean
|
- Type: Boolean
|
||||||
- Default: `false`
|
- Default: `false`
|
||||||
|
|
||||||
Render tags inside input, otherwise render below input
|
Render tags inside input, otherwise render below input.
|
||||||
|
|
||||||
|
### `staticResults`
|
||||||
|
|
||||||
|
- Type: Boolean
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
Render results list positioned statically instead of absolutely.
|
||||||
|
|
||||||
|
|
|
@ -104,7 +104,6 @@ A boolean used to show a highlight style on this number.
|
||||||
|
|
||||||
### `value`
|
### `value`
|
||||||
|
|
||||||
- **Required**
|
|
||||||
- Type: One of type: number, string
|
- Type: One of type: number, string
|
||||||
- Default: null
|
- Default: null
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
```jsx
|
```jsx
|
||||||
import { DateRange } from '@woocommerce/components';
|
import { DateRange } from '@woocommerce/components';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
const dateFormat = 'MM/DD/YYYY';
|
const dateFormat = 'MM/DD/YYYY';
|
||||||
|
|
||||||
const MyDateRange = withState( {
|
const MyDateRange = withState( {
|
||||||
after: wp.date.moment( '2018-09-10' ),
|
after: moment( '2018-09-10' ),
|
||||||
afterText: '09/10/2018',
|
afterText: '09/10/2018',
|
||||||
before: wp.date.moment( '2018-09-20' ),
|
before: moment( '2018-09-20' ),
|
||||||
beforeText: '09/20/2018',
|
beforeText: '09/20/2018',
|
||||||
} )( ( { after, afterText, before, beforeText, setState } ) => {
|
} )( ( { after, afterText, before, beforeText, setState } ) => {
|
||||||
function onUpdate( { after, afterText, before, beforeText } ) {
|
function onUpdate( { after, afterText, before, beforeText } ) {
|
||||||
|
|
Loading…
Reference in New Issue