f306cc2ba5
* Copied .tsconfig into ./client to enable ts checking - Made sub-repos composite typescript packages where necessary * Prevent tsc from transpiling ./client - we use webpack for transpiling so no need for this * Added tsc resolution path for @automattic/explat-client - Seems like there's a type export issue (?) with @automattic/explat-client and @automattic/explat-client-react-helpers - adding the node_modules/@automattic/explat-client path in tsconfig seems to help TS resolve this using the source .ts files - found answer here: https://github.com/microsoft/TypeScript/issues/42873 - should figure out what's actually wrong with the type exports and fix that there instead * Removed mandatory checking from webpack - removed this for now as it will block all development until all type inconsistencies are fixed - for now, run the optional ts:check task either in console or vscode for highlighting type errors * Added vscode tasks for typescript checking * Patch @automattic/explat-client-react-helpers - this changes the installed code in node_modules (post-installation) for @automattic/explat-client-react-helpers so that it exports the necessary type interfaces required by us - attempted unsuccessfully to override type exports using declare module - not too sure how to fix this internally by other means - have to investigate what fixes to propose to @automattic/explat-client-react-helpers team * changed tests in ./client to use ts-jest instead of babel-jest - rewrote jest config to use ts-jest instead of babel-jest - set ts errors to warnings instead so that tests don't fail on type errors - created new tsconfig for ./packages/js-tests so that build and ts-check are separate, as js-tests need to be built for commonjs |
||
|---|---|---|
| .. | ||
| src | ||
| .npmrc | ||
| CHANGELOG.md | ||
| README.md | ||
| 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
npm install @woocommerce/components --save
View the full Component documentation for usage information.
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.