From e90a7cbd5dec116b7bf476380ede13611ae6444b Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 00:13:24 +0530 Subject: [PATCH 1/7] Add an example block for counter component Signed-off-by: Souptik Datta --- example/src/blocks/counter-example/block.json | 14 +++++ example/src/blocks/counter-example/edit.js | 59 +++++++++++++++++++ example/src/blocks/counter-example/index.js | 8 +++ 3 files changed, 81 insertions(+) create mode 100644 example/src/blocks/counter-example/block.json create mode 100644 example/src/blocks/counter-example/edit.js create mode 100644 example/src/blocks/counter-example/index.js diff --git a/example/src/blocks/counter-example/block.json b/example/src/blocks/counter-example/block.json new file mode 100644 index 00000000..174bcd3b --- /dev/null +++ b/example/src/blocks/counter-example/block.json @@ -0,0 +1,14 @@ +{ + "apiVersion": 2, + "name": "example/counter", + "title": "Counter Example", + "description": "Example Block to show the Counter in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "variations": [], + "editorScript": "file:./index.js" +} \ No newline at end of file diff --git a/example/src/blocks/counter-example/edit.js b/example/src/blocks/counter-example/edit.js new file mode 100644 index 00000000..098e9b98 --- /dev/null +++ b/example/src/blocks/counter-example/edit.js @@ -0,0 +1,59 @@ +import { __ } from '@wordpress/i18n'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { PanelBody, Placeholder, TextControl } from '@wordpress/components'; + +import { Counter } from '@10up/block-components'; +import { useState } from '@wordpress/element'; + +export const BlockEdit = () => { + const blockProps = useBlockProps(); + + const [ text, setText ] = useState( '' ); + + return ( + <> + + + { + if ( value.length > 20 ) { + return; + } + setText( value ); + } + } + /> + + + +
+ + { + if ( value.length > 20 ) { + return; + } + setText( value ); + } + } + /> + + +
+ + ) +} \ No newline at end of file diff --git a/example/src/blocks/counter-example/index.js b/example/src/blocks/counter-example/index.js new file mode 100644 index 00000000..b633be8a --- /dev/null +++ b/example/src/blocks/counter-example/index.js @@ -0,0 +1,8 @@ +import { registerBlockType } from '@wordpress/blocks'; +import metadata from './block.json'; +import { BlockEdit } from './edit'; + +registerBlockType( metadata, { + edit: BlockEdit, + save: () => null +} ); From ea2c256b5ba4a4640203d88d2181fe977bbfb965 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 00:14:03 +0530 Subject: [PATCH 2/7] Refactor `styled-components-context` in TS Signed-off-by: Souptik Datta --- .../{index.js => index.tsx} | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) rename components/styled-components-context/{index.js => index.tsx} (70%) diff --git a/components/styled-components-context/index.js b/components/styled-components-context/index.tsx similarity index 70% rename from components/styled-components-context/index.js rename to components/styled-components-context/index.tsx index 0b70b109..f8ae299c 100644 --- a/components/styled-components-context/index.js +++ b/components/styled-components-context/index.tsx @@ -2,11 +2,24 @@ import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; import { useRefEffect, useInstanceId } from '@wordpress/compose'; import { useState } from '@wordpress/element'; -import propTypes from 'prop-types'; -export const StyledComponentContext = (props) => { - const { children, cacheKey } = props; - const fallbackKey = useInstanceId(StyledComponentContext); +interface StyledComponentContextProps { + /** + * Children. + */ + children: React.ReactNode; + + /** + * Cache key. + */ + cacheKey: string; +} + +export const StyledComponentContext: React.FC = ({ + children, + cacheKey, +}) => { + const fallbackKey = `${useInstanceId(StyledComponentContext)}`; const defaultCache = createCache({ key: cacheKey || fallbackKey, @@ -37,8 +50,3 @@ export const StyledComponentContext = (props) => { ); }; - -StyledComponentContext.propTypes = { - children: propTypes.node.isRequired, - cacheKey: propTypes.string.isRequired, -}; From 6cb8786e4e10217987444725ca52282513b30d86 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 15:40:01 +0530 Subject: [PATCH 3/7] Refactor counter component in TS Signed-off-by: Souptik Datta --- components/counter/{index.js => index.tsx} | 84 ++++++++++++---------- 1 file changed, 48 insertions(+), 36 deletions(-) rename components/counter/{index.js => index.tsx} (73%) diff --git a/components/counter/index.js b/components/counter/index.tsx similarity index 73% rename from components/counter/index.js rename to components/counter/index.tsx index e500eddf..d6db370e 100644 --- a/components/counter/index.js +++ b/components/counter/index.tsx @@ -1,8 +1,8 @@ import { forwardRef } from '@wordpress/element'; -import PropTypes from 'prop-types'; import cx from 'classnames'; import styled from '@emotion/styled'; import { StyledComponentContext } from '../styled-components-context'; +import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, FC } from 'react'; const StyledSvg = styled('svg')` transform: rotate(-90deg); @@ -56,8 +56,16 @@ const StyledCounter = styled('div')` font-variant-numeric: tabular-nums; `; -const CircularProgressBar = (props) => { - const { percentage } = props; +interface CircularProgressBarProps { + /** + * Percentage elapsed. + */ + percentage: number; +} + +const CircularProgressBar: FC = ({ + percentage +}) => { const radius = 90; const circumference = 2 * Math.PI * radius; @@ -139,38 +147,42 @@ const CircularProgressBar = (props) => { ); }; -/** - * Counter - * - * @description display character count and limit. - * - * @returns - */ -const Counter = forwardRef((props, ref) => { - const { count, limit } = props; - const percentage = (count / limit) * 100; - return ( - - limit, - })} - {...props} - ref={ref} - > -
- {count}{' '} - /{' '} - {limit} -
- - - - ); -}); - -CircularProgressBar.propTypes = { - percentage: PropTypes.number.isRequired, -}; +interface CounterProps { + /** + * Current count. + */ + count: number; + + /** + * Max limit. + */ + limit: number; +} + +const Counter: ForwardRefExoticComponent & RefAttributes> = forwardRef( + ({ + count, + limit, + }, ref ) => { + const percentage = (count / limit) * 100; + return ( + + limit, + })} + ref={ref} + > +
+ {count}{' '} + /{' '} + {limit} +
+ + + + ); + } +); export { CircularProgressBar, Counter }; From 579046573075fdb712c93d2108cfeb1ca67b7d61 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 15:45:48 +0530 Subject: [PATCH 4/7] Fix indentation issue Signed-off-by: Souptik Datta --- example/src/blocks/counter-example/block.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/example/src/blocks/counter-example/block.json b/example/src/blocks/counter-example/block.json index 174bcd3b..9f9cbf0a 100644 --- a/example/src/blocks/counter-example/block.json +++ b/example/src/blocks/counter-example/block.json @@ -2,13 +2,13 @@ "apiVersion": 2, "name": "example/counter", "title": "Counter Example", - "description": "Example Block to show the Counter in usage", - "icon": "smiley", - "category": "common", - "example": {}, - "supports": { - "html": false - }, - "variations": [], + "description": "Example Block to show the Counter in usage", + "icon": "smiley", + "category": "common", + "example": {}, + "supports": { + "html": false + }, + "variations": [], "editorScript": "file:./index.js" } \ No newline at end of file From b3a4cade42f721a152fa74687d4c70345f290022 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 18:01:35 +0530 Subject: [PATCH 5/7] Pass Counter rest props down to StyledCounter component Signed-off-by: Souptik Datta --- components/counter/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/components/counter/index.tsx b/components/counter/index.tsx index d6db370e..19841251 100644 --- a/components/counter/index.tsx +++ b/components/counter/index.tsx @@ -157,12 +157,18 @@ interface CounterProps { * Max limit. */ limit: number; + + /** + * Rest of the props. + */ + [key: string]: unknown; } const Counter: ForwardRefExoticComponent & RefAttributes> = forwardRef( ({ count, limit, + ...rest }, ref ) => { const percentage = (count / limit) * 100; return ( @@ -172,6 +178,7 @@ const Counter: ForwardRefExoticComponent & RefAttr 'is-over-limit': count > limit, })} ref={ref} + {...rest} >
{count}{' '} From 9ed890a8411f464bf08d9a00a469620685532e32 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 18:37:27 +0530 Subject: [PATCH 6/7] Add readme for Counter component Signed-off-by: Souptik Datta --- components/counter/readme.md | 40 ++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 components/counter/readme.md diff --git a/components/counter/readme.md b/components/counter/readme.md new file mode 100644 index 00000000..e466980d --- /dev/null +++ b/components/counter/readme.md @@ -0,0 +1,40 @@ +# Counter + +The `Counter` component let's you use circular progress bar with two props - `count` and `limit`. + +This also exposes another component named `CircularProgressBar`, which can be used when we don't want the text annotation and just the SVG illustration. + +## Usage + +```js +import { Counter, CircularProgressBar } from '@10up/block-components'; + +function MyComponent( props ) { + + return ( + + + + ) +} +``` + +## Props + +#### Counter + +| Name | Type | Default | isRequired | Description | +| ---------------- | ---------- | ---------- | --------------------- | ---------------------------------------------------------------------- | +| `count` | `number` | - | `Yes` | Current count of the counter. | +| `limit` | `number` | - | `Yes` | Max limit of the counter. | + +#### CircularProgressBar + +| Name | Type | Default | isRequired | Description | +| ---------------- | ---------- | ---------- | --------------------- | ---------------------------------------------------------------------- | +| `percentage` | `number` | - | `Yes` | Elapsed percentage of the timer. | From 90075ae1c2be274673dab6f367717a364b019ce0 Mon Sep 17 00:00:00 2001 From: Souptik Datta Date: Tue, 14 May 2024 22:45:03 +0530 Subject: [PATCH 7/7] Wrap example components with Fragment Signed-off-by: Souptik Datta --- components/counter/readme.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/components/counter/readme.md b/components/counter/readme.md index e466980d..0f2fb0c8 100644 --- a/components/counter/readme.md +++ b/components/counter/readme.md @@ -12,15 +12,17 @@ import { Counter, CircularProgressBar } from '@10up/block-components'; function MyComponent( props ) { return ( - - - - ) + <> + + + + + ); } ```