Add Picture component

src/lib/Figure/Figure.mdx

@@ -0,0 +1,24 @@
+import { Meta, ArgsTable, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
+import {Figure} from './Figure.tsx';
+import * as FigureStories from "./Figure.stories.tsx";
+
+<Meta title="Components/Figure" of={FigureStories} />
+
+# Figure
+
+## Description
+
+Figure is a React component.
+
+## Imports
+
+<Markdown>{`
+\`\`\`ts
+import {Figure} from 'react-forge-ui';
+\`\`\`
+`}</Markdown>
+
+<Primary />
+
+<ArgsTable of={Figure}/>
+

src/lib/Figure/Figure.module.css

@@ -0,0 +1,30 @@
+.vars {
+    --position: center;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: var(--position);
+    margin-bottom: calc(var(--sizeUnit) * 3);
+}
+
+.figure {
+    background: var(--background000);
+    border: 3px solid var(--colorMi);
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--sizeUnit) * 2) calc(var(--sizeUnit) * 2) var(--sizeUnit);
+
+    &:hover {
+        border-color: var(--colorRe);
+    }
+
+    & figcaption {
+        color: var(--colorFa);
+        font-size: var(--fontSizeSmall);
+        font-style: italic;
+        margin-top: calc(var(--sizeUnit) * 1);
+        text-align: center;
+    }
+}

src/lib/Figure/Figure.stories.tsx

@@ -0,0 +1,123 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {Picture} from '@/lib/Picture';
+import {Text, Table} from '@/lib/Text';
+
+import {Figure} from './Figure.tsx';
+
+const TableElement = (
+    <Table>
+        <thead>
+            <tr>
+                <th>Header content 1</th>
+                <th>Header content 2</th>
+                <th>Header content 3</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+            <tr>
+                <td>Body content 1</td>
+                <td>Body content 2</td>
+                <td>Body content 3</td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <td>Footer content 1</td>
+                <td>Footer content 2</td>
+                <td>Footer content 3</td>
+            </tr>
+        </tfoot>
+    </Table>
+);
+
+const PictureComponent = <Picture width={666} height={332} src="https://picsum.photos/666/333" />;
+
+const meta = {
+    title: 'Components/Figure',
+    component: Figure,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {
+        caption: 'This is caption!',
+        position: 'center',
+        children: PictureComponent,
+    },
+    argTypes: {
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+        children: {
+            options: ['picture', 'table'], // An array of serializable values
+            mapping: {
+                picture: PictureComponent,
+                table: TableElement,
+            }, // Maps serializable option values to complex arg values
+            control: {
+                type: 'radio', // Type 'select' is automatically inferred when 'options' is defined
+                labels: {
+                    // 'labels' maps option values to string labels
+                    picture: 'With Picture component',
+                    table: 'With Table component',
+                },
+            },
+        },
+    },
+} as Meta<typeof Figure>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: ({children, ...args}) => {
+        return <Figure {...args}>{children}</Figure>;
+    },
+    args: {},
+};
+
+export const WrappedWithText: Story = {
+    render: ({children, ...args}) => {
+        return (
+            <Text>
+                <p>
+                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+                    PageMaker including versions of Lorem Ipsum.
+                </p>
+                <Figure {...args}>{children}</Figure>
+                <p>
+                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
+                    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+                    PageMaker including versions of Lorem Ipsum.
+                </p>
+            </Text>
+        );
+    },
+    args: {},
+};

src/lib/Figure/Figure.tsx

@@ -0,0 +1,43 @@
+import type {ReactElement} from 'react';
+import {forwardRef, useMemo} from 'react';
+import classNames from 'classnames';
+import {useLocalTheme} from 'css-vars-hook';
+
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+
+import classes from './Figure.module.css';
+
+enum Positions {
+    center = 'center',
+    left = 'left',
+    right = 'right',
+}
+
+export type Props = DataAttributes &
+    LibraryProps & {
+        children: ReactElement;
+        caption?: string;
+        position?: keyof typeof Positions;
+    };
+
+export const Figure = forwardRef<HTMLDivElement, Props>(
+    ({children, className, caption, position = Positions.center, ...nativeProps}, ref) => {
+        const theme = useMemo(
+            () => ({
+                position,
+            }),
+            [position]
+        );
+        const {LocalRoot} = useLocalTheme();
+        return (
+            <LocalRoot theme={theme} className={classes.wrapper}>
+                <figure {...nativeProps} className={classNames(classes.figure, className)} ref={ref}>
+                    {children}
+                    {caption && <figcaption>{caption}</figcaption>}
+                </figure>
+            </LocalRoot>
+        );
+    }
+);
+
+Figure.displayName = 'Figure';

src/lib/Figure/index.ts

@@ -0,0 +1 @@
+export {Figure} from './Figure.tsx';

src/lib/Picture/Picture.mdx

@@ -0,0 +1,24 @@
+import { Meta, ArgsTable, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
+import {Picture} from './Picture.tsx';
+import * as PictureStories from "./Picture.stories.tsx";
+
+<Meta title="Components/Picture" of={PictureStories} />
+
+# Picture
+
+## Description
+
+Picture is a React component.
+
+## Imports
+
+<Markdown>{`
+\`\`\`ts
+import {Picture} from 'react-forge-ui';
+\`\`\`
+`}</Markdown>
+
+<Primary />
+
+<ArgsTable of={Picture}/>
+

src/lib/Picture/Picture.module.css

@@ -0,0 +1,5 @@
+.picture {
+    & img {
+        display: block;
+    }
+}

src/lib/Picture/Picture.stories.tsx

@@ -0,0 +1,74 @@
+import type {Meta, StoryObj} from '@storybook/react';
+// import {fn} from '@storybook/test';
+
+import {Picture} from './Picture.tsx';
+
+const meta = {
+    title: 'Components/Picture',
+    component: Picture,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {},
+    argTypes: {
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+} as Meta<typeof Picture>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: function Render(args) {
+        return <Picture {...args} />;
+    },
+    args: {
+        src: 'https://picsum.photos/300/333',
+        width: 300,
+        height: 333,
+        alt: 'Image description',
+        sources: [
+            {
+                src: 'https://picsum.photos/600/666',
+                mediaCondition: '(orientation: portrait)',
+            },
+        ],
+    },
+};
+
+export const WithCode: Story = {
+    render: args => {
+        // here comes the code
+        return <Picture {...args} />;
+    },
+};
+
+WithCode.args = {
+    id: 'foo',
+};
+
+WithCode.argTypes = {};
+
+WithCode.parameters = {
+    docs: {
+        source: {
+            language: 'tsx',
+            type: 'code',
+        },
+    },
+};