ar(feat) DPCP-31: Audio Player

src/atoms/05_SystemIcon/SystemIcon.tsx

@@ -2,7 +2,7 @@
 // @atoms/SystemIcon.tsx
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { DreamPipColors } from '../../../tailwind.config.ts';
+import { DreamPipColors } from '../../../dist/tailwind.config.ts';
 import * as Icons from './assets';
 
 type Theme = 'light' | 'dark';

src/molecules/02_AudioPlayer/AudioPlayer.tsx

@@ -0,0 +1,106 @@
+/* eslint jsx-a11y/media-has-caption:0, no-nested-ternary:0, no-unused-vars:0, max-len:0, no-shadow:0, @typescript-eslint/no-explicit-any:0, object-curly-newline:0 */
+// @atoms/AudioPlayer.tsx
+import clsx from 'clsx';
+import { Fragment } from 'react';
+import Grid, {
+  EBleedVariant,
+  EGridVariant,
+} from '../../atoms/10_Grid/Grid.tsx';
+
+export const DEFAULT_TRACKS = [
+  {
+    id: 'dreampip__chan_0000',
+    className: '',
+    onPlay: () => {},
+    title: 'This is the track playing',
+    url: 'https://www.dreampip.com/api/nexus/audio',
+    isPlaying: false,
+  },
+  {
+    id: 'dreampip__chan_0001',
+    className: '',
+    onPlay: () => {},
+    title: 'This is the track playing',
+    url: 'https://www.dreampip.com/api/nexus/audio/1',
+    isPlaying: false,
+  },
+];
+
+export enum EAudioPlayerVariant {
+  DEFAULT = 'default',
+}
+
+export interface IBackgroundImage {
+  mobile?: string;
+  desktop?: string;
+}
+
+export interface IAudioTrack {
+  id?: string;
+  className?: string;
+  onPlay?: () => void;
+  title?: string;
+  url?: string;
+  isPlaying?: boolean;
+}
+
+export interface IAudioPlayer {
+  id?: string;
+  className?: string;
+  tracks?: IAudioTrack[];
+  onPlayTrack?: () => void;
+  theme?: 'light' | 'dark';
+}
+
+export const HAudioPlayer = function ({
+  id = 'atom__AudioPlayer',
+  className = '',
+  tracks = DEFAULT_TRACKS,
+  onPlayTrack = () => {},
+  theme = 'light',
+}: IAudioPlayer) {
+  const gridSx = [
+    {
+      [`class02
+        grid
+        sm:grid-cols-12
+        sm:!gap-a0
+        md:!gap-a4
+        `]: true,
+    },
+  ];
+
+  const gridStyles = `${clsx(gridSx)} ${className}`;
+
+  onPlayTrack();
+
+  return (
+    <Grid
+      theme={theme}
+      id={id}
+      className={gridStyles}
+      variant={EGridVariant.TWELVE_COLUMNS}
+      bleed={EBleedVariant.RESPONSIVE}
+    >
+      <audio
+        src={tracks[0].url}
+        className="col-span-full sm:col-span-6 lg:col-span-4 col-start-0"
+      >
+        {tracks.map((file) => (
+          <>
+            <source src={file.url} type="audio/mpeg" />
+            <track
+              kind="subtitles"
+              key={`molecules__AudioPlayer__card__element--${file.title}`}
+              srcLang="en"
+              label="English"
+              src={file.url}
+            />
+          </>
+        ))}
+      </audio>
+    </Grid>
+  );
+};
+
+export default HAudioPlayer;

src/molecules/02_AudioPlayer/__docs__/02-AudioPlayer.stories.tsx

@@ -0,0 +1,28 @@
+// @atoms/02_AudioPlayer/__test__/02-AudioPlayer.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import Example from './Example.tsx';
+import { EAudioPlayerVariant } from '../AudioPlayer';
+
+const meta: Meta<typeof Example> = {
+  title: 'Molecules/02-AudioPlayer',
+  component: Example,
+  argTypes: {
+    theme: {
+      options: ['light', 'dark'],
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: Object.values(EAudioPlayerVariant),
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Example>;
+
+export const Default: Story = {
+  args: {
+    variant: EAudioPlayerVariant.DEFAULT,
+  },
+};

src/molecules/02_AudioPlayer/__docs__/AudioPlayer.mdx

@@ -0,0 +1,153 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import Example from "./Example.tsx";
+import * as AudioPlayer from "./02-AudioPlayer.stories.tsx";
+
+<Meta of={AudioPlayer} title="AudioPlayer" />
+
+# AudioPlayer
+
+AudioPlayer component with different props.
+
+#### Example
+
+<Canvas of={AudioPlayer.Default} />
+
+## Usage
+
+```ts
+import { AudioPlayer } from "@dreampipcom/oneiros";
+
+export const DEFAULT_CARDS = [
+  {
+    id: 'molecule__AudioPlayer__card--02',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #02',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '3/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--02',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #02',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '4.5/5',
+    selected: true,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--03',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #03',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '3/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--04',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #04',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '2/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--05',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #05',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '3.5/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--06',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #06',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '3.6/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--07',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #07',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '5/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--08',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #08',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '4.8/5',
+    selected: false,
+  },
+  {
+    id: 'molecule__AudioPlayer__card--09',
+    className: '',
+    onLike: () => {},
+    title: 'This is a card example #08',
+    where: 'Barcelona (Catalonia)',
+    when: 'February',
+    price: '299€',
+    link: 'https://dreampip.com',
+    badgeLink: 'https://dreampip.com',
+    rating: '3/5',
+    selected: false,
+  },
+];
+
+const App = () => {
+  return (
+      <AudioPlayer 
+        cards={DEFAULT_CARDS}
+      />
+  );
+};
+
+export default Example;
+```
+
+#### Arguments
+
+- **cards** — An array of Cards props, where each index represents a Card in the grid.

src/molecules/02_AudioPlayer/__docs__/Example.tsx

@@ -0,0 +1,9 @@
+// @atoms/02_AudioPlayer/__test__/Example.tsx
+import React, { FC } from 'react';
+import AudioPlayer, { ICard } from '../AudioPlayer.tsx';
+
+const Example: FC<ICard> = function ({ theme = 'light', cards }) {
+  return <AudioPlayer cards={cards} theme={theme} />;
+};
+
+export default Example;

src/molecules/02_AudioPlayer/__test__/02-AudioPlayer.test.tsx

@@ -0,0 +1,13 @@
+// @atoms/02_Card/__test__/02-AudioPlayer.test.tsx
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import AudioPlayer from '../AudioPlayer';
+
+describe('AudioPlayer component', () => {
+  it('AudioPlayer should render correctly', () => {
+    const result = render(<AudioPlayer id="grid-atom--test" />);
+    const component = result.container.querySelector('#grid-atom--test');
+    expect(component).toBeInTheDocument();
+  });
+});

src/molecules/02_AudioPlayer/index.ts

@@ -0,0 +1,3 @@
+// @atoms/AudioPlayer/index.ts
+export { default as AudioPlayer, EAudioPlayerVariant } from './AudioPlayer';
+export const AudioPlayerName = 'AudioPlayer';