feat: introduce repeat component

.changeset/fuzzy-berries-taste.md

@@ -0,0 +1,12 @@
+---
+'classic-react-components': minor
+---
+
+## Features
+
+### Repeat component
+```tsx
+<Repeat times={3}>
+  <div>this is content</div>
+</Repeat>
+```

README.md

@@ -62,8 +62,10 @@ $ yarn add classic-react-components
 -  [Then](#then)
 -  [Else](#else)
 -  [For](#for)
+-  [Repeat](#repeat)
 -  [Switch](#switch)
 
+
 ## If
 
 | Prop      |   Type    | Required | Default Value | Description                                                                                  |
@@ -286,6 +288,59 @@ export default function YourComponent() {
 ```
 
 
+## Repeat
+
+| Prop     |   Type    | Required | Default Value | Description                                    |
+| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |
+| times     |   number   |    ❌    |   0   | Times to repeat the children                             |
+| children |     JSX.Element \| (()=> JSX.Element) |  ❌   |     undefined      | children needed to repeat |
+
+### Working
+
+- Used for rendering template or loaders in repeated manner without writing `new Array(length).map()` code.
+- Just pass `times` and `children` props, and children will be renderd `n times` automatically.
+
+
+
+### Examples
+
+#### 1. Passing children as default JSX
+```tsx
+import { Repeat } from 'classic-react-components'
+
+export default function YourComponent() {
+
+   return (
+      <div>
+        <Repeat times={1}>
+           <div>this is going to repeated</div>
+        </Repeat>
+      </div>
+   )
+}
+```
+
+#### 2. Passing children as function which renders jsx (used to dynamically injecting things in jsx).
+```tsx
+import { Repeat } from 'classic-react-components'
+
+export default function YourComponent() {
+   const someState = "this is text"
+   return (
+      <div>
+        <Repeat times={3}>
+          {(idx) => {
+            return (
+              <div>this is content-{idx}- {someState}</div>
+            )
+          }}
+        </Repeat>
+      </div>
+   )
+}
+```
+
+
 ## Switch
 
 | Prop     |   Type    | Required | Default Value | Description                                                      |

src/index.tsx

@@ -4,3 +4,4 @@ export { default as Else } from './lib/components/Else/Else'
 export { default as Then } from './lib/components/Then/Then'
 export { default as For } from './lib/components/For/For'
 export { default as Switch } from './lib/components/Switch/Switch'
+export { default as Repeat } from './lib/components/Repeat/Repeat'

src/lib/components/Repeat/Repeat.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import Repeat from './Repeat'
+
+describe('Repeat.tsx', () => {
+   it('should render without any errors or crash', () => {
+      render(
+         <Repeat times={1}>
+            <div>this is going to repeated</div>
+         </Repeat>
+      )
+   })
+
+   it('should render nothing without any errors if <times> prop is not provided', () => {
+      render(
+         <Repeat>
+            <div data-testid='children'>this is content</div>
+         </Repeat>
+      )
+      expect(screen.queryByTestId('children')).not.toBeInTheDocument()
+   })
+
+   it('should render children repeated n times', () => {
+      render(
+         <Repeat times={3}>
+            <div data-testid='children'>this is content</div>
+         </Repeat>
+      )
+      expect(screen.queryAllByTestId('children').length).toBe(3)
+   })
+
+   it('should render children of function type repeated n times', () => {
+      render(<Repeat times={3}>{(idx) => <div data-testid={`children-${idx}`}>this is content-{idx}</div>}</Repeat>)
+      expect(screen.queryAllByTestId(/^children-(.*)$/).length).toBe(3)
+      expect(screen.queryByTestId('children-0')).toBeInTheDocument()
+      expect(screen.queryByTestId('children-1')).toBeInTheDocument()
+      expect(screen.queryByTestId('children-2')).toBeInTheDocument()
+   })
+})

src/lib/components/Repeat/Repeat.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from 'react'
+
+export default function Repeat({
+   times = 0,
+   children,
+}: {
+   times?: number
+   children?: JSX.Element | ((idx: number) => JSX.Element)
+}): JSX.Element {
+   if (times == 0) {
+      return <></>
+   }
+
+   const childArr = new Array(times)
+
+   for (let i = 0; i < times; i++) {
+      if (typeof children == 'function') {
+         childArr.push(<Fragment key={i}>{children(i)}</Fragment>)
+      } else {
+         childArr.push(children)
+      }
+   }
+
+   return <>{childArr}</>
+}