From 30289cd240c09cab79abf4cda5a8b40dd20985bd Mon Sep 17 00:00:00 2001 From: Paul Sealock Date: Tue, 11 Dec 2018 11:27:32 +1300 Subject: [PATCH] Update docs and remove reference to internal components --- .../bin/generate-docs/index.js | 2 - .../bin/generate-docs/lib/file-system.js | 4 +- .../docs/components/d3chart.md | 210 ------------------ .../docs/components/filters.md | 7 + .../docs/components/search.md | 11 +- .../docs/components/summary.md | 1 - .../components/src/calendar/example.md | 5 +- 7 files changed, 20 insertions(+), 220 deletions(-) delete mode 100644 plugins/woocommerce-admin/docs/components/d3chart.md diff --git a/plugins/woocommerce-admin/bin/generate-docs/index.js b/plugins/woocommerce-admin/bin/generate-docs/index.js index 217d00483b1..6715e271cd8 100755 --- a/plugins/woocommerce-admin/bin/generate-docs/index.js +++ b/plugins/woocommerce-admin/bin/generate-docs/index.js @@ -12,7 +12,6 @@ const { parse, resolver } = require( 'react-docgen' ); */ const { getDescription, getProps, getTitle } = require( './lib/formatting' ); const { - COMPONENTS_FOLDER, PACKAGES_FOLDER, deleteExistingDocs, 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. const files = [ - ...getRealFilePaths( getExportedFileList( path.resolve( COMPONENTS_FOLDER, 'index.js' ) ) ), ...getRealFilePaths( getExportedFileList( path.resolve( PACKAGES_FOLDER, 'index.js' ) ), PACKAGES_FOLDER ), ]; diff --git a/plugins/woocommerce-admin/bin/generate-docs/lib/file-system.js b/plugins/woocommerce-admin/bin/generate-docs/lib/file-system.js index 9071a971d61..a4ff6ac961a 100644 --- a/plugins/woocommerce-admin/bin/generate-docs/lib/file-system.js +++ b/plugins/woocommerce-admin/bin/generate-docs/lib/file-system.js @@ -14,7 +14,6 @@ const { namedTypes } = types; */ const { camelCaseDash } = require( './formatting' ); -const COMPONENTS_FOLDER = path.resolve( __dirname, '../../../client/components/' ); const PACKAGES_FOLDER = path.resolve( __dirname, '../../../packages/components/src/' ); 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. * @return { array } Updated array with absolute paths to all files. */ -function getRealFilePaths( files, basePath = COMPONENTS_FOLDER ) { +function getRealFilePaths( files, basePath = PACKAGES_FOLDER ) { files.sort(); return files.map( file => { const fullPath = path.resolve( basePath, file ); @@ -160,7 +159,6 @@ function writeTableOfContents( files ) { } module.exports = { - COMPONENTS_FOLDER, DOCS_FOLDER, PACKAGES_FOLDER, deleteExistingDocs, diff --git a/plugins/woocommerce-admin/docs/components/d3chart.md b/plugins/woocommerce-admin/docs/components/d3chart.md deleted file mode 100644 index 20bfc1b6d7e..00000000000 --- a/plugins/woocommerce-admin/docs/components/d3chart.md +++ /dev/null @@ -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? - diff --git a/plugins/woocommerce-admin/docs/components/filters.md b/plugins/woocommerce-admin/docs/components/filters.md index 3dab3a77cc1..eb92acc7e01 100644 --- a/plugins/woocommerce-admin/docs/components/filters.md +++ b/plugins/woocommerce-admin/docs/components/filters.md @@ -38,6 +38,13 @@ The `path` parameter supplied by React-Router The query string represented in object form +### `showDatePicker` + +- Type: Boolean +- Default: `true` + +Whether the date picker must be shown.. + `AdvancedFilters` (component) ============================= diff --git a/plugins/woocommerce-admin/docs/components/search.md b/plugins/woocommerce-admin/docs/components/search.md index 77d2a402b61..f194d9744e2 100644 --- a/plugins/woocommerce-admin/docs/components/search.md +++ b/plugins/woocommerce-admin/docs/components/search.md @@ -24,7 +24,7 @@ Function called when selected results change, passed result list. ### `type` - **Required** -- Type: One of: 'products', 'product_cats', 'orders', 'customers', 'coupons', 'variations' +- Type: One of: 'products', 'product_cats', 'orders', 'customers', 'coupons', 'taxes', 'variations' - Default: null The object type to be used in searching. @@ -50,5 +50,12 @@ An array of objects describing selected values. - Type: Boolean - 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. diff --git a/plugins/woocommerce-admin/docs/components/summary.md b/plugins/woocommerce-admin/docs/components/summary.md index f5148c9e1d5..f8e217e4020 100644 --- a/plugins/woocommerce-admin/docs/components/summary.md +++ b/plugins/woocommerce-admin/docs/components/summary.md @@ -104,7 +104,6 @@ A boolean used to show a highlight style on this number. ### `value` -- **Required** - Type: One of type: number, string - Default: null diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/example.md b/plugins/woocommerce-admin/packages/components/src/calendar/example.md index ceb0404d010..29ab3c2f6df 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/example.md +++ b/plugins/woocommerce-admin/packages/components/src/calendar/example.md @@ -1,12 +1,13 @@ ```jsx import { DateRange } from '@woocommerce/components'; +import moment from 'moment'; const dateFormat = 'MM/DD/YYYY'; const MyDateRange = withState( { - after: wp.date.moment( '2018-09-10' ), + after: moment( '2018-09-10' ), afterText: '09/10/2018', - before: wp.date.moment( '2018-09-20' ), + before: moment( '2018-09-20' ), beforeText: '09/20/2018', } )( ( { after, afterText, before, beforeText, setState } ) => { function onUpdate( { after, afterText, before, beforeText } ) {