Create infinite autofill component

src/components/AutoFill/AutoFill.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-literals */
 import { type Meta, type StoryObj } from '@storybook/react';
 import { AutoFill } from './AutoFill.js';
 

src/components/InfiniteAutoFill/InfiniteAutoFill.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as stories from './InfiniteAutoFill.stories';
+
+<Meta title="Components / InfiniteAutoFill" />
+
+# InfiniteAutoFill
+
+Uses the AutoFill to repeat children to fill the parent element in given axis. In addition to that
+it adds the children one more time to the end of the list. This can be useful for example marquee's.
+
+## Reference
+
+```ts
+interface InfiniteAutoFillProps {
+  children: ReadonlyArray<ReactNode>;
+  axis?: 'x' | 'y'; // Default: 'x'
+}
+
+function InfiniteAutoFill(props: InfiniteAutoFillProps): ReactElement;
+```
+
+## InfiniteAutoFill for X axis
+
+Fills components horizontally + one extra.
+
+```tsx
+function DemoComponent() {
+  return (
+    <div style={{ width: 1000, display: 'grid', outline: '1px solid black' }}>
+      <InfiniteAutoFill>
+        <div style={{ padding: 15 }}>
+          <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
+        </div>
+      </InfiniteAutoFill>
+    </div>
+  );
+}
+```
+
+### Demo
+
+<Canvas of={stories.Horizontal} />
+
+## InfiniteAutoFill for Y axis
+
+Fills components vertically + one extra.
+
+```tsx
+function DemoComponent() {
+  return (
+    <div style={{ height: 1000, outline: '1px solid black' }}>
+      <InfiniteAutoFill>
+        <div style={{ padding: 15 }}>
+          <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
+        </div>
+      </InfiniteAutoFill>
+    </div>
+  );
+}
+```
+
+### Demo
+
+<Canvas of={stories.Vertical} />

src/components/InfiniteAutoFill/InfiniteAutoFill.stories.tsx

@@ -0,0 +1,96 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { InfiniteAutoFill } from './InfiniteAutoFill.js';
+
+const meta = {
+  title: 'Components / InfiniteAutoFill',
+  component: InfiniteAutoFill,
+} satisfies Meta;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const Horizontal: Story = {
+  render() {
+    return (
+      <div
+        style={{
+          width: 520,
+          display: 'flex',
+          outline: '1px solid blue',
+        }}
+      >
+        <InfiniteAutoFill axis="x">
+          <div
+            style={{
+              padding: 15,
+              flex: '0 1 auto',
+            }}
+          >
+            <div
+              style={{
+                width: 50,
+                height: 50,
+                outline: '1px solid red',
+              }}
+            />
+          </div>
+
+          <div
+            style={{
+              padding: 15,
+              flex: '0 1 auto',
+            }}
+          >
+            <div
+              style={{
+                width: 75,
+                height: 50,
+                outline: '1px solid yellow',
+              }}
+            />
+          </div>
+        </InfiniteAutoFill>
+      </div>
+    );
+  },
+  args: {
+    children: <div />,
+  },
+};
+
+export const Vertical: Story = {
+  render() {
+    return (
+      <div
+        style={{
+          height: 520,
+          width: 80,
+          display: 'flex',
+          flexDirection: 'column',
+          outline: '1px solid blue',
+        }}
+      >
+        <InfiniteAutoFill axis="y">
+          <div
+            style={{
+              padding: 15,
+              flex: '0 1 auto',
+            }}
+          >
+            <div
+              style={{
+                width: 50,
+                height: 50,
+                outline: '1px solid red',
+              }}
+            />
+          </div>
+        </InfiniteAutoFill>
+      </div>
+    );
+  },
+  args: {
+    children: <div />,
+  },
+};

src/components/InfiniteAutoFill/InfiniteAutoFill.test.tsx

@@ -0,0 +1,66 @@
+import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { InfiniteAutoFill } from './InfiniteAutoFill.js';
+
+describe('InfiniteAutoFill', () => {
+  it('should not crash', async () => {
+    const result = render(
+      <InfiniteAutoFill>
+        <div />
+      </InfiniteAutoFill>,
+    );
+
+    expect(result.baseElement.firstElementChild).toBeDefined();
+  });
+
+  it('should fill parent element', async () => {
+    const result = render(
+      <div style={{ width: 500 }}>
+        <InfiniteAutoFill>
+          <div data-testid="child" style={{ width: 100 }} />
+        </InfiniteAutoFill>
+      </div>,
+      {},
+    );
+
+    waitFor(async () => {
+      const children = await result.findAllByTestId('child');
+
+      expect(children.length).toBe(6);
+    });
+  });
+
+  it('should overflow parent element', async () => {
+    const result = render(
+      <div style={{ width: 500 }}>
+        <InfiniteAutoFill>
+          <div data-testid="child" style={{ width: 90 }} />
+        </InfiniteAutoFill>
+      </div>,
+      {},
+    );
+
+    waitFor(async () => {
+      const children = await result.findAllByTestId('child');
+
+      expect(children.length).toBe(7);
+    });
+  });
+
+  it('should fill parent element', async () => {
+    const result = render(
+      <div style={{ height: 500 }}>
+        <InfiniteAutoFill axis="y">
+          <div data-testid="child" style={{ height: 100 }} />
+        </InfiniteAutoFill>
+      </div>,
+      {},
+    );
+
+    waitFor(async () => {
+      const children = await result.findAllByTestId('child');
+
+      expect(children.length).toBe(6);
+    });
+  });
+});

src/components/InfiniteAutoFill/InfiniteAutoFill.tsx

@@ -0,0 +1,25 @@
+import { type ReactElement, type RefCallback } from 'react';
+import { AutoFill } from '../../index.js';
+
+type InfiniteAutoFillChildrenProps = {
+  ref: RefCallback<unknown>;
+};
+
+type InfiniteAutoFillProps = {
+  children:
+    | ReactElement<InfiniteAutoFillChildrenProps>
+    | ReadonlyArray<ReactElement<InfiniteAutoFillChildrenProps>>;
+  axis?: 'x' | 'y';
+};
+
+/**
+ * Repeats children to fill the parent element in given axis.
+ */
+export function InfiniteAutoFill({ children, axis = 'x' }: InfiniteAutoFillProps): ReactElement {
+  return (
+    <>
+      <AutoFill axis={axis}>{children}</AutoFill>
+      {children}
+    </>
+  );
+}