Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 04f3f4f

Browse files
nielslangegithub-actions[bot]
nielslange
and
github-actions[bot]
authored
Convert product-elements/stock-indicator to TypeScript (#7567)
* Convert product-elements/stock-indicator to TypeScript * bot: update checkstyle.xml * Add interface for blockAttributes * bot: update checkstyle.xml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent c6c31b3 commit 04f3f4f

File tree

9 files changed

+59
-60
lines changed

9 files changed

+59
-60
lines changed

‎assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎assets/js/atomic/blocks/product-elements/stock-indicator/attributes.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
interface BlockAttributes {
2+
productId: {
3+
type: string;
4+
default: number;
5+
};
6+
}
7+
8+
export const blockAttributes: BlockAttributes = {
9+
productId: {
10+
type: 'number',
11+
default: 0,
12+
},
13+
};
14+
15+
export default blockAttributes;

assets/js/atomic/blocks/product-elements/stock-indicator/block.js renamed to assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,42 @@
22
* External dependencies
33
*/
44
import { __, sprintf } from '@wordpress/i18n';
5-
import PropTypes from 'prop-types';
65
import classnames from 'classnames';
76
import {
87
useInnerBlockLayoutContext,
98
useProductDataContext,
109
} from '@woocommerce/shared-context';
1110
import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
1211
import { withProductDataContext } from '@woocommerce/shared-hocs';
12+
import type { HTMLAttributes } from 'react';
1313

1414
/**
1515
* Internal dependencies
1616
*/
1717
import './style.scss';
18+
import type { BlockAttributes } from './types';
1819

19-
/**
20-
* Product Stock Indicator Block Component.
21-
*
22-
* @param {Object} props Incoming props.
23-
* @param {string} [props.className] CSS Class name for the component.
24-
* @return {*} The component.
25-
*/
26-
const Block = ( props ) => {
20+
const lowStockText = ( lowStock: string ): string => {
21+
return sprintf(
22+
/* translators: %d stock amount (number of items in stock for product) */
23+
__( '%d left in stock', 'woo-gutenberg-products-block' ),
24+
lowStock
25+
);
26+
};
27+
28+
const stockText = ( inStock: boolean, isBackordered: boolean ): string => {
29+
if ( isBackordered ) {
30+
return __( 'Available on backorder', 'woo-gutenberg-products-block' );
31+
}
32+
33+
return inStock
34+
? __( 'In Stock', 'woo-gutenberg-products-block' )
35+
: __( 'Out of Stock', 'woo-gutenberg-products-block' );
36+
};
37+
38+
type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
39+
40+
export const Block = ( props: Props ): JSX.Element | null => {
2741
const { className } = props;
2842
const { parentClassName } = useInnerBlockLayoutContext();
2943
const { product } = useProductDataContext();
@@ -66,26 +80,4 @@ const Block = ( props ) => {
6680
);
6781
};
6882

69-
const lowStockText = ( lowStock ) => {
70-
return sprintf(
71-
/* translators: %d stock amount (number of items in stock for product) */
72-
__( '%d left in stock', 'woo-gutenberg-products-block' ),
73-
lowStock
74-
);
75-
};
76-
77-
const stockText = ( inStock, isBackordered ) => {
78-
if ( isBackordered ) {
79-
return __( 'Available on backorder', 'woo-gutenberg-products-block' );
80-
}
81-
82-
return inStock
83-
? __( 'In Stock', 'woo-gutenberg-products-block' )
84-
: __( 'Out of Stock', 'woo-gutenberg-products-block' );
85-
};
86-
87-
Block.propTypes = {
88-
className: PropTypes.string,
89-
};
90-
9183
export default withProductDataContext( Block );

assets/js/atomic/blocks/product-elements/stock-indicator/constants.js renamed to assets/js/atomic/blocks/product-elements/stock-indicator/constants.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
import { __ } from '@wordpress/i18n';
55
import { box, Icon } from '@wordpress/icons';
66

7-
export const BLOCK_TITLE = __(
7+
export const BLOCK_TITLE: string = __(
88
'Product Stock Indicator',
99
'woo-gutenberg-products-block'
1010
);
11-
export const BLOCK_ICON = (
11+
export const BLOCK_ICON: JSX.Element = (
1212
<Icon icon={ box } className="wc-block-editor-components-block-icon" />
1313
);
14-
export const BLOCK_DESCRIPTION = __(
14+
export const BLOCK_DESCRIPTION: string = __(
1515
'Display product stock status.',
1616
'woo-gutenberg-products-block'
1717
);

assets/js/atomic/blocks/product-elements/stock-indicator/edit.js renamed to assets/js/atomic/blocks/product-elements/stock-indicator/edit.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import { __ } from '@wordpress/i18n';
54
import EditProductLink from '@woocommerce/editor-components/edit-product-link';
65
import { useBlockProps } from '@wordpress/block-editor';
76

@@ -10,9 +9,18 @@ import { useBlockProps } from '@wordpress/block-editor';
109
*/
1110
import Block from './block';
1211
import withProductSelector from '../shared/with-product-selector';
13-
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
12+
import {
13+
BLOCK_TITLE as label,
14+
BLOCK_ICON as icon,
15+
BLOCK_DESCRIPTION as description,
16+
} from './constants';
17+
import type { BlockAttributes } from './types';
1418

15-
const Edit = ( { attributes } ) => {
19+
interface Props {
20+
attributes: BlockAttributes;
21+
}
22+
23+
const Edit = ( { attributes }: Props ): JSX.Element => {
1624
const blockProps = useBlockProps();
1725
return (
1826
<div { ...blockProps }>
@@ -22,11 +30,4 @@ const Edit = ( { attributes } ) => {
2230
);
2331
};
2432

25-
export default withProductSelector( {
26-
icon: BLOCK_ICON,
27-
label: BLOCK_TITLE,
28-
description: __(
29-
'Choose a product to display its stock.',
30-
'woo-gutenberg-products-block'
31-
),
32-
} )( Edit );
33+
export default withProductSelector( { icon, label, description } )( Edit );

assets/js/atomic/blocks/product-elements/stock-indicator/index.js renamed to assets/js/atomic/blocks/product-elements/stock-indicator/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import { registerExperimentalBlockType } from '@woocommerce/block-settings';
5+
import type { BlockConfiguration } from '@wordpress/blocks';
56

67
/**
78
* Internal dependencies
@@ -18,7 +19,8 @@ import {
1819
BLOCK_DESCRIPTION as description,
1920
} from './constants';
2021

21-
const blockConfig = {
22+
const blockConfig: BlockConfiguration = {
23+
...sharedConfig,
2224
apiVersion: 2,
2325
title,
2426
description,
@@ -30,6 +32,5 @@ const blockConfig = {
3032
};
3133

3234
registerExperimentalBlockType( 'woocommerce/product-stock-indicator', {
33-
...sharedConfig,
3435
...blockConfig,
3536
} );

assets/js/atomic/blocks/product-elements/stock-indicator/supports.js renamed to assets/js/atomic/blocks/product-elements/stock-indicator/supports.ts

File renamed without changes.

‎assets/js/atomic/blocks/product-elements/stock-indicator/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface BlockAttributes {
2+
productId: number;
3+
}

‎checkstyle.xml‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1172,11 +1172,6 @@
11721172
<error line="4" column="23" severity="error" message="Could not find a declaration file for module &apos;@wordpress/wordcount&apos;. &apos;/home/runner/work/woocommerce-blocks/woocommerce-blocks/node_modules/@wordpress/wordcount/build/index.js&apos; implicitly has an &apos;any&apos; type.
11731173
Try `npm i --save-dev @types/wordpress__wordcount` if it exists or add a new declaration (.d.ts) file containing `declare module &apos;@wordpress/wordcount&apos;;`" source="TS7016" />
11741174
</file>
1175-
<file name="assets/js/atomic/blocks/product-elements/stock-indicator/block.js">
1176-
<error line="69" column="24" severity="error" message="Parameter &apos;lowStock&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
1177-
<error line="77" column="21" severity="error" message="Parameter &apos;inStock&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
1178-
<error line="77" column="30" severity="error" message="Parameter &apos;isBackordered&apos; implicitly has an &apos;any&apos; type." source="TS7006" />
1179-
</file>
11801175
<file name="assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js">
11811176
<error line="120" column="4" severity="error" message="Type &apos;{ children: string; className: string; href: string; onClick: () =&gt; any; rel: string; }&apos; is not assignable to type &apos;IntrinsicAttributes &amp; ButtonProps&apos;.
11821177
Property &apos;href&apos; does not exist on type &apos;IntrinsicAttributes &amp; ButtonProps&apos;." source="TS2322" />

0 commit comments

Comments
 (0)