Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[DataView]: Add Products View and Product Edit stories (#50999) 

* Product Editor: add storybook

* fix storybook

* Add products data views list

* Add navigation on the left

* Update edit site package

* Fix styling

* Add changelog

* Add wp/icons package to syncpack exception list

* Delete some unused stuff and address types

* Add changelog

* Remove un needed css

* Remove dependency on edit-site package

* WIP

* WIP

* WIP

* Fix storybook build

* Ignore storybook from version pinning

* add slug stories

* Add products data views list

* Add navigation on the left

* Update edit site package

* Fix styling

* Add changelog

* Add wp/icons package to syncpack exception list

* Delete some unused stuff and address types

* Add changelog

* Remove un needed css

* Remove dependency on edit-site package

* Fix custom status filters

* Make sure page size works with view config

* improve storybook

* rename file

* Add changefile(s) from automation for the following project(s): @woocommerce/product-editor

* Remove use of canvasMode and navigation context as it is not needed

* Remove wordpress/dom from syncpack

* Add changefile(s) from automation for the following project(s): @woocommerce/product-editor, woocommerce

* add edit-site style

* Add changefile(s) from automation for the following project(s): @woocommerce/product-editor

* remove not necessary file

* address feedback

* fix webpack configuration

* fix lint errors

---------

Co-authored-by: Lourens Schep <lourensschep@gmail.com>
Co-authored-by: Sam Seay <samueljseay@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-09-03 16:09:54 +02:00 committed by GitHub
parent 82a00a56e5
commit af9ca20af5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 1753 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/50999-add-slug-control Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: [DataView]: Add Products View and Product Edit stories.

67
packages/js/product-editor/src/products-app/product-form.stories.tsx Normal file
View File

@ -0,0 +1,67 @@
/**
* External dependencies
*/
import { createElement, useState } from '@wordpress/element';
import { DataForm, FieldType, Form } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
import {
PRODUCT_FIELDS,
PRODUCT_FIELDS_KEYS,
PRODUCTS_DATA,
} from './utilites/product-data-view-data';
type ProductFormProps = {
productData: ( typeof PRODUCTS_DATA )[ 0 ];
fields: {
label: string;
id: string;
type: FieldType;
options?: string[];
Edit?: () => JSX.Element;
}[];
form: Form;
};
// ProductForm component is just a wrapper around DataViews component. Currently, it is needed to experiment with the DataViews component in isolation.
// We expect that this component will be removed in the future, instead it will be used the component used in Products App.
const ProductForm = ( { fields, form, productData }: ProductFormProps ) => {
const [ product, setProduct ] = useState( productData );
return (
<DataForm
data={ product }
fields={ fields }
form={ form }
onChange={ ( newProduct ) =>
setProduct( ( prev ) => ( {
...prev,
...newProduct,
} ) )
}
/>
);
};
export default {
title: 'Product App/Product Form',
component: ProductForm,
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - improve typing.
const Template = ( args: unknown ) => <ProductForm { ...args } />;
export const Default = Template.bind( {} );
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - Improve typing.
Default.args = {
productData: PRODUCTS_DATA[ 0 ],
fields: PRODUCT_FIELDS,
form: {
type: 'regular',
fields: PRODUCT_FIELDS_KEYS,
},
};

95
packages/js/product-editor/src/products-app/products-view.stories.tsx Normal file
View File

@ -0,0 +1,95 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import {
DataViews,
FieldType,
SupportedLayouts,
View,
} from '@wordpress/dataviews';
/**
* Internal dependencies
*/
import {
PRODUCT_FIELDS,
PRODUCT_FIELDS_KEYS,
PRODUCTS_DATA,
} from './utilites/product-data-view-data';
type ProductsViewProps = {
productsData: typeof PRODUCTS_DATA;
fields: {
label: string;
id: string;
type: FieldType;
options?: string[];
}[];
view: View;
onChangeView: ( newView: View ) => void;
paginationInfo: {
totalPages: number;
totalItems: number;
};
defaultLayouts: SupportedLayouts;
};
// ProductView component is just a wrapper around DataViews component. Currently, it is needed to experiment with the DataViews component in isolation.
// We expect that this component will be removed in the future, instead it will be used the component used in Products App.
const ProductsView = ( {
fields,
view,
productsData,
paginationInfo,
defaultLayouts,
onChangeView,
}: ProductsViewProps ) => {
return (
<DataViews
data={ productsData }
fields={ fields }
view={ view }
onChangeView={ onChangeView }
paginationInfo={ paginationInfo }
defaultLayouts={ defaultLayouts }
getItemId={ ( item: ( typeof PRODUCTS_DATA )[ 0 ] ) => item.name }
/>
);
};
export default {
title: 'Product App/Products View',
component: ProductsView,
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - Improve typing.
const Template = ( args: unknown ) => <ProductsView { ...args } />;
export const Default = Template.bind( {} );
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - Improve typing.
Default.args = {
productsData: PRODUCTS_DATA,
fields: PRODUCT_FIELDS,
view: {
type: 'list',
fields: PRODUCT_FIELDS_KEYS.filter(
( field ) =>
field !== 'downloads' &&
field !== 'categories' &&
field !== 'images'
),
},
defaultLayouts: {
list: {
type: 'list',
},
},
paginationInfo: {
totalPages: 1,
totalItems: 10,
},
onChangeView: () => {},
};

1578
packages/js/product-editor/src/products-app/utilites/product-data-view-data.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

4
pnpm-lock.yaml
View File

@ -57964,7 +57964,7 @@ snapshots:
react-inspector@5.1.1(react@18.3.1):
dependencies:
'@babel/runtime': 7.24.7
'@babel/runtime': 7.25.0
is-dom: 1.1.0
prop-types: 15.8.1
react: 18.3.1
@ -58360,7 +58360,7 @@ snapshots:
react-select@3.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.24.7
'@babel/runtime': 7.25.0
'@emotion/cache': 10.0.29
'@emotion/core': 10.3.1(react@18.3.1)
'@emotion/css': 10.0.27

2
tools/storybook/.storybook/main.js
View File

@ -11,7 +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)',
'../../../packages/js/product-editor/src/**/*.stories.@(js|tsx)',
'../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)',
],
addons: [

6
tools/storybook/.storybook/preview-head.html
View File

@ -1,7 +1,4 @@
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&ver=1601945340"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined&ver=1601945340" rel="stylesheet" />
<link href="wordpress/css/common.min.css" rel="stylesheet" />
<link href="wordpress/css/forms.min.css" rel="stylesheet" />
<link href="wordpress/css/admin-menu.min.css" rel="stylesheet" />
@ -18,3 +15,4 @@
<link href="wordpress/css/l10n.min.css" rel="stylesheet" />
<link href="wordpress/css/site-health.min.css" rel="stylesheet" />
<link href="wordpress/css/components.css" rel="stylesheet" />
<link href="wordpress/css/edit-site.css" rel="stylesheet" />

5
tools/storybook/import-wp-css-storybook.sh
View File

@ -5,16 +5,19 @@ STORY_BOOK_CSS_PATH="$DIR/../storybook/wordpress/css";
TMP_DIR="$DIR/../storybook/wordpress/tmp";
ARCHIVE_CSS_PATH="wordpress/wp-admin/css";
ARCHIVE_IMG_PATH="wordpress/wp-admin/images";
ARCHIVE_EDIT_SITE_PATH="wordpress/wp-includes/css/dist/edit-site/style.css";
mkdir -p "$STORY_BOOK_CSS_PATH";
mkdir -p "$TMP_DIR";
function download_and_extract_css {
curl -o "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" https://wordpress.org/nightly-builds/wordpress-latest.zip;
unzip -qq "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" "$ARCHIVE_CSS_PATH/*" "$ARCHIVE_IMG_PATH/*" -d "$TMP_DIR";
unzip -qq "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip" "$ARCHIVE_CSS_PATH/*" "$ARCHIVE_IMG_PATH/*" "$ARCHIVE_EDIT_SITE_PATH" -d "$TMP_DIR";
rsync -a "$TMP_DIR/$ARCHIVE_CSS_PATH" "$STORYBOOK_WORDPRESS_DIR";
rsync -a "$TMP_DIR/$ARCHIVE_IMG_PATH" "$STORYBOOK_WORDPRESS_DIR";
rsync -a "$TMP_DIR/$ARCHIVE_EDIT_SITE_PATH" "$STORYBOOK_WORDPRESS_DIR/css/edit-site.css";
rm -r "$TMP_DIR";
rm -r "$STORYBOOK_WORDPRESS_DIR/wordpress-latest.zip";
}
if [ -z "$(find "$STORY_BOOK_CSS_PATH" -iname '*.css')" ] || [ "$1" == "-f" ]

3
tools/storybook/webpack.config.js
View File

@ -40,9 +40,6 @@ module.exports = ( storybookConfig ) => {
'./setting.mock.js'
);
storybookConfig.resolve.alias[ 'react/jsx-runtime' ] =
require.resolve( 'react/jsx-runtime' );
// We need to use react 18 for the storybook since some dependencies are not compatible with react 17
// Once we upgrade react to 18 in repo, we can remove this alias
storybookConfig.resolve.alias.react = path.resolve(

0
tools/storybook/wordpress/.gitkeep
View File