[Product Block Editor]: add story for Label component (#42953)

* [Product Block Editor]: add story for Label component

* changelog

* add simple Label story

* add Product Editor pkg to Storybook app:

packages/js/product-editor/changelog/update-product-editor-add-story-for-label-component

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+[Product Block Editor]: add story for Label component

packages/js/product-editor/src/components/label/label.tsx

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, help as helpIcon } from '@wordpress/icons';
 import { Tooltip } from '@wordpress/components';
 
-interface LabelProps {
+export interface LabelProps {
 	label: string;
 	required?: boolean;
 	tooltip?: string;

packages/js/product-editor/src/components/label/stories/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React, { createElement } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Label, LabelProps } from '../label';
+
+export default {
+	title: 'Product Editor/components/Label',
+	component: Label,
+	args: {
+		label: 'Woo',
+		required: false,
+		tooltip: __( 'Visit woo.com', 'woocommerce' ),
+	},
+};
+
+export const Default = ( args: LabelProps ) => <Label { ...args } />;

tools/storybook/.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
 		'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
 		// WooCommerce Admin / @woocommerce/onboarding components
 		'../../../packages/js/onboarding/src/**/stories/*.@(js|tsx)',
+		'../../../packages/js/product-editor/src/**/stories/*.@(js|tsx)',
 		'../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)',
 	],
 	addons: [
@@ -47,12 +48,14 @@ module.exports = {
 			<link href="experimental-css/style-rtl.css" rel="stylesheet" />
 			<link href="component-css/style-rtl.css" rel="stylesheet" />
 			<link href="onboarding-css/style-rtl.css" rel="stylesheet" />
+			<link href="product-editor-css/style-rtl.css" rel="stylesheet" />
 			<link href="app-css/style-rtl.css" rel="stylesheet" />
 			`
 				: `
 			<link href="component-css/style.css" rel="stylesheet" />
 			<link href="experimental-css/style.css" rel="stylesheet" />
 			<link href="onboarding-css/style.css" rel="stylesheet" />
+			<link href="product-editor-css/style.css" rel="stylesheet" />
 			<link href="app-css/style.css" rel="stylesheet" />
 			`
 		}

tools/storybook/webpack.config.js

@@ -41,6 +41,7 @@ module.exports = ( storybookConfig ) => {
 
 	storybookConfig.resolve.modules = [
 		path.join( __dirname, '../../plugins/woocommerce-admin/client' ),
+		path.join( __dirname, '../../packages/js/product-editor/src' ),
 		'node_modules',
 	];
 
@@ -72,6 +73,13 @@ module.exports = ( storybookConfig ) => {
 					),
 					to: `./onboarding-css/[name][ext]`,
 				},
+				{
+					from: path.resolve(
+						__dirname,
+						`../../packages/js/product-editor/build-style/*.css`
+					),
+					to: `./product-editor-css/[name][ext]`,
+				},
 				{
 					from: path.resolve(
 						__dirname,