feat(component): add Video player component

README.md

@@ -8,7 +8,7 @@
 
 # Koval components library
 
-[![NPM library Create React App template logo](./design/logo-repo.png)](#)
+[![NPM library Create React App template logo](./design/logo-repo-social.png)](#)
 
 Koval UI is a React component library built for modern browsers. Each component tries to utilize built-in browser APIs to full extent.
 

package.json

@@ -143,7 +143,7 @@
     "lint-staged": "15.2.10",
     "npm-run-all2": "6.2.3",
     "postcss": "8.4.47",
-    "postcss-preset-env": "10.0.6",
+    "postcss-preset-env": "9.6.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/internal/Icons/IconDownloadVideo.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/box-arrow-down-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconDownloadVideo: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconFullscreen.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/frame-corners-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconFullscreen: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconPause.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/pause-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPause: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconPictureInPicture.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/picture-in-picture-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPictureInPicture: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconPlay.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/play-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPlay: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconSpeed.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/gauge-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconSpeed: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconVideo.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/film-slate-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVideo: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconVolume.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/speaker-high-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVolume: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/IconVolumeOff.tsx

@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/speaker-slash-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVolumeOff: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};

src/internal/Icons/index.ts

@@ -45,3 +45,12 @@ export {IconErrorOutline} from './IconErrorOutline.tsx';
 export {IconSortOff} from './IconSortOff.tsx';
 export {IconColumns} from './IconColumns.tsx';
 export {IconNumeric} from './IconNumeric.tsx';
+export {IconPlay} from './IconPlay.tsx';
+export {IconPause} from './IconPause.tsx';
+export {IconVolume} from './IconVolume.tsx';
+export {IconVolumeOff} from './IconVolumeOff.tsx';
+export {IconFullscreen} from './IconFullscreen.tsx';
+export {IconPictureInPicture} from './IconPictureInPicture.tsx';
+export {IconDownloadVideo} from './IconDownloadVideo.tsx';
+export {IconVideo} from './IconVideo.tsx';
+export {IconSpeed} from './IconSpeed.tsx';

src/lib/Audio/Audio.mdx

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

src/lib/Audio/Audio.module.css

@@ -0,0 +1,3 @@
+.audio {
+    --foo: "bar";
+}

src/lib/Audio/Audio.stories.tsx

@@ -0,0 +1,63 @@
+import type {Meta, StoryObj} from '@storybook/react';
+// import {fn} from '@storybook/test';
+
+import {Audio} from './Audio.tsx';
+
+const meta = {
+    title: 'Components/Audio',
+    component: Audio,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'centered',
+    },
+    args: {},
+    argTypes: {
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+} as Meta<typeof Audio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: args => {
+        return <Audio {...args} />;
+    },
+    args: {},
+};
+
+export const WithCode: Story = {
+    render: args => {
+        // here comes the code
+        return <Audio {...args} />;
+    },
+};
+
+WithCode.args = {
+    id: 'foo',
+};
+
+WithCode.argTypes = {};
+
+WithCode.parameters = {
+    docs: {
+        source: {
+            language: 'tsx',
+            type: 'code',
+        },
+    },
+};

src/lib/Audio/Audio.tsx

@@ -0,0 +1,25 @@
+import type {ReactNode} from 'react';
+import {forwardRef} from 'react';
+import classNames from 'classnames';
+
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+
+import classes from './Audio.module.css';
+
+export type Props = DataAttributes &
+    LibraryProps & {
+        children?: ReactNode;
+    };
+
+export const Audio = forwardRef<HTMLDivElement, Props>(
+    ({children, className, ...nativeProps}, ref) => {
+        return (
+            <div {...nativeProps} className={classNames(classes.audio, className)} ref={ref}>
+                <audio src=""></audio>
+                {children}
+            </div>
+        );
+    }
+);
+
+Audio.displayName = 'Audio';

src/lib/Audio/index.ts

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

src/lib/InputRange/InputRange.module.css

@@ -55,7 +55,9 @@
         background-color: var(--thumb-color);
         border: none;
         cursor: grab;
+        height: var(--slider-height);
         transition: background-color var(--kg-time-sm) ease-in-out;
+        width: var(--slider-width);
     }
 
     &:--hoverSelector {

src/lib/InputRange/InputRange.stories.tsx

@@ -27,6 +27,7 @@ const meta = {
         step: 1,
         scaleUnit: 'F',
         disabled: false,
+        displayScale: true,
     },
     argTypes: {
         value: {control: 'text'},

src/lib/InputRange/InputRange.tsx

@@ -23,6 +23,10 @@ export type Props = DataAttributes &
         prefix?: FC<{className?: string} & SVGProps<SVGSVGElement> & unknown>;
         bars?: number;
         scaleUnit?: string;
+        /**
+         * Enable to display scale below input
+         */
+        displayScale?: boolean;
     };
 
 const createOptions = ({
@@ -72,6 +76,7 @@ export const InputRange = forwardRef<HTMLInputElement, Props>(
             revalidateOnFormChange,
             validation,
             errorMessage,
+            displayScale,
             ...nativeProps
         },
         ref
@@ -143,9 +148,11 @@ export const InputRange = forwardRef<HTMLInputElement, Props>(
                         min={min}
                         max={max}
                     />
-                    <datalist id={scaleId} className={classes.scale}>
-                        {createOptions({min: Number(min), max: Number(max), bars, scaleUnit})}
-                    </datalist>
+                    {displayScale && (
+                        <datalist id={scaleId} className={classes.scale}>
+                            {createOptions({min: Number(min), max: Number(max), bars, scaleUnit})}
+                        </datalist>
+                    )}
                 </div>
                 {/* TODO: add htmlFor when CSS vars hook supports it */}
                 <LocalRoot as="output" theme={theme} className={classes.output}>

src/lib/Video/Video.mdx

@@ -0,0 +1,24 @@
+import { Meta, ArgTypes, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
+import {Video} from './Video.tsx';
+import * as VideoStories from "./Video.stories.tsx";
+
+<Meta title="Components/Video" of={VideoStories} />
+
+# Video
+
+## Description
+
+`Video` component plays provided video file using Video Embed element.
+
+## Imports
+
+<Markdown>{`
+\`\`\`ts
+import {Video} from 'koval-ui';
+\`\`\`
+`}</Markdown>
+
+<Primary />
+
+<ArgTypes of={Video}/>
+