95bc1189e5
This bumps the version to 0.14.3 so that we can take advantage of some upstream improvements. It also makes some changes to the way our builds and watches work to minimize the number of unnecessary Node processes involved in the execution. |
||
|---|---|---|
| .. | ||
| changelog | ||
| src | ||
| typings | ||
| .eslintrc.js | ||
| .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: