woocommerce/plugins/woocommerce-admin/packages/components
Moon b2d32e9e72 Add required dependencies for pnpm nx build {package} command (https://github.com/woocommerce/woocommerce-admin/pull/8436)
* Add required dependencies for pnpm nx install {package} command

* Update pnpm lock file

* Add missing deps for packages/*

* Change to use relative imports for packages/components

* Move ts from deps to devDeps

* Add rimraf to packages/* devDependencies for clean command

* Add webpack cli to packages dependencies

* Add jest-cli to packages devDependencies

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
2022-03-14 20:04:46 -07:00
..
src Add required dependencies for pnpm nx build {package} command (https://github.com/woocommerce/woocommerce-admin/pull/8436) 2022-03-14 20:04:46 -07:00
.npmrc Build: Move components to packages dir (https://github.com/woocommerce/woocommerce-admin/pull/804) 2018-11-15 13:16:23 -05:00
CHANGELOG.md Add `moment-timezone` to `@woocommerce/components` package.json (https://github.com/woocommerce/woocommerce-admin/pull/8458) 2022-03-14 17:07:21 +08:00
README.md Switch to pnpm (https://github.com/woocommerce/woocommerce-admin/pull/8349) 2022-03-04 12:01:16 +08:00
jest.config.json Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
package.json Add required dependencies for pnpm nx build {package} command (https://github.com/woocommerce/woocommerce-admin/pull/8436) 2022-03-14 20:04:46 -07:00
tsconfig-cjs.json Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286) 2021-07-14 16:38:57 -04:00
tsconfig.json Enable Typescript checking on ./client folder (https://github.com/woocommerce/woocommerce-admin/pull/8372) 2022-03-01 12:19:07 +08:00
webpack.config.js Refactor package style builds (https://github.com/woocommerce/woocommerce-admin/pull/7531) 2021-08-19 10:15:59 -04:00

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

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.