e5b1ee338e
* We display the number of selected items, e.g., '5 selected' * We display a number of all existing items next to the button, e.g., "Select all (25)". * When only some items are selected on the page, we show an additional button that says "Select page (X)" where X stands for the number of rows on the page. Clicking it selects all rows on the page. * Clicking "Select all" selects all existing items * Add changelog file * Add tracking events * Saving progress on variations table * Manage tracking events and error handling * Hide edition features when at least one variation is selected * Fix linter errors * Resolve rebase conflicts * Remove use selection hook since is not needed anymore * Fix filter items vertical alignment * Add changelog files * Fix inconsistent loading and variations state * Do not show EmptyTableState when the product has variations but the filter get empty list * Invalidate cache state before generating variations * Fix select all after filtering variations * Remove delete variations from the selection list * Retreive the product after generating variations * Fix linter * Invalidate variations cache after generating variations |
||
---|---|---|
.. | ||
changelog | ||
src | ||
typings | ||
.eslintrc.js | ||
.gitignore | ||
.npmrc | ||
CHANGELOG.md | ||
PREVIOUS_CHANGELOG.md | ||
README.md | ||
babel.config.js | ||
composer.json | ||
composer.lock | ||
jest.config.json | ||
package.json | ||
tsconfig-cjs.json | ||
tsconfig.json | ||
webpack.config.js |
README.md
Components
This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.
Installation
Install the module
pnpm install @woocommerce/components --save
Usage
/**
* Woocommerce dependencies
*/
import { Card } from '@woocommerce/components';
export default function MyCard() {
return (
<Card title="Store Performance" description="Key performance metrics">
<p>Your stuff in a Card.</p>
</Card>
);
}
Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components
stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.
In non-WordPress projects, link to the build-style/card/style.css
file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css
.
Usage with tests
If you are using these components in a project that uses Jest for testing, you may get an error that looks like this:
Cannot find module '@woocommerce/settings' from 'node_modules/@woocommerce/experimental/node_modules/@woocommerce/navigation/build/index.js'
To fix this, you will need to mock the @woocommerce/settings
because it's an alias that points to the window.wcSettings
, which in turn comes from and is maintained by the WC Blocks package, the front-end code for this is located here.
This can be done by adding the following to your Jest config:
module.exports = {
moduleNameMapper: {
'@woocommerce/settings': path.resolve(
__dirname,
'./mock/woocommerce-settings'
),
}
setupFiles: [
path.resolve( __dirname, 'build/setup-globals.js' ),
],
// ...other config
}
Then, you will need to create the following files: