woocommerce/packages/js/components
Christopher Allford 758df4854d
Use `ci-jobs` Utility For `ci.yml` Matrix (#43532)
This adds support for using the `pnpm utils ci-jobs` command in our `ci.yml` file. One of the bigger benefits to this change too is that we're now distributing a bundled version of the utils tool. This lets us run it without actually having to install the repo and will let us speed up any workflows that currently do.
2024-01-12 20:32:14 -08:00
..
changelog Use `ci-jobs` Utility For `ci.yml` Matrix (#43532) 2024-01-12 20:32:14 -08:00
src Replace Tooltip on Label and checkbox controls (#43513) 2024-01-11 21:49:50 -03:00
typings Add PhoneNumberInput component – cooldown (#40335) 2023-10-16 10:19:36 +02:00
.eslintrc.js Update the @woocommerce/eslint-plugin and fix bugs (#36988) 2023-03-02 11:36:38 +13:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Manually prepare packages for release (#40826) 2023-10-17 16:32:20 +02:00
PREVIOUS_CHANGELOG.md @woocommerce/components: Prep changelog for release (#33359) 2022-06-14 14:21:02 +12:00
README.md Update / tweak a few more links in docs and comments (#41598) 2023-11-21 12:38:09 +01:00
babel.config.js Update/unify jest@27 across all packages (#34322) 2022-09-06 09:29:45 -05:00
composer.json bump php version in packages/js/*/composer.json (#42020) 2024-01-04 10:18:34 -04:00
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Fix Jest Preset (#42707) 2023-12-12 09:58:13 -08:00
package.json Use `ci-jobs` Utility For `ci.yml` Matrix (#43532) 2024-01-12 20:32:14 -08:00
tsconfig-cjs.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
tsconfig.json Fix TypeScript Incremental Build Regression (#37432) 2023-03-24 12:07:49 -07:00
webpack.config.js Emit error on webpack build when invalid export name used in import for JS (#37195) 2023-03-26 21:42:33 -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

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:

  1. Create a new file called woocommerce-settings.js in the ./mock directory. You can find the content for this file here.
  2. Next, create a file named setup-globals.js. You can find the content for this file here. The purpose of this file is to mock the wcSettings global variable.