4e89debd0c
When using a preset we need to keep in mind that the transformation paths are relative to the preset, not the consuming package. We get around this by using `<rootDir>` in the transform paths. However, doing this means fixing the root directory for all of the jest tests. This keeps the tests working in the same way but lets us fix the preset too. |
||
|---|---|---|
| .. | ||
| 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: