add some stories (#204)

components/ArtistList/ArtistList.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ArtistList } from "components";
+import { artist } from "utils/__tests__/__mocks__/mocks";
+
+export default {
+  title: "Components/ArtistList",
+  component: ArtistList,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "dark",
+    },
+    argTypes: {
+      maxArtistsToShow: { control: "number" },
+    },
+  },
+} as Meta<typeof ArtistList>;
+
+const Template: StoryFn<typeof ArtistList> = (args) => <ArtistList {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  artists: [artist, artist, artist, artist, artist, artist],
+  maxArtistsToShow: 3,
+};

components/BrowseCategories/BrowseCategories.stories.tsx

@@ -0,0 +1,50 @@
+import React, { ComponentProps, ReactElement } from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { BrowseCategories } from "components";
+import { paginObject } from "utils/__tests__/__mocks__/mocks";
+
+export default {
+  title: "Components/BrowseCategories",
+  component: BrowseCategories,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "dark",
+    },
+    argTypes: {
+      totalCategories: { control: "number" },
+    },
+  },
+} as Meta<typeof BrowseCategories>;
+
+const getCategories = (number: number) => ({
+  ...paginObject,
+  items: Array.from({ length: number }).map((_, i) => ({
+    name: `category${i}`,
+    id: `${i}`,
+    href: `test-${i}`,
+    icons: [
+      {
+        url: `https://picsum.photos/400/400?random=${i}`,
+      },
+    ],
+  })),
+});
+
+const Template: StoryFn<
+  ({
+    totalCategories,
+    ...args
+  }: { totalCategories: number } & ComponentProps<
+    typeof BrowseCategories
+  >) => ReactElement
+> = (args) => (
+  <BrowseCategories categories={getCategories(args.totalCategories)} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  totalCategories: 30,
+};

components/BrowseCategories/BrowseCategories.tsx

@@ -5,13 +5,13 @@ import Link from "next/link";
 import { Grid, Heading } from "components";
 import { colors } from "utils";
 
-interface BrowseCategoriesProps {
+interface IBrowseCategoriesProps {
   categories: SpotifyApi.PagingObject<SpotifyApi.CategoryObject> | null;
 }
 
 export default function BrowseCategories({
   categories,
-}: BrowseCategoriesProps): ReactElement {
+}: IBrowseCategoriesProps): ReactElement {
   return (
     <Grid>
       {categories?.items.map(({ name, id, icons }, i) => {

components/Button/Button.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Button } from "components";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "dark",
+    },
+  },
+} as Meta<typeof Button>;
+
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "click me",
+};

components/CardContainer/CardContainer.stories.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+import Image from "next/image";
+
+import { BigPill, CardContainer, Heading } from "components";
+
+export default {
+  title: "Components/CardContainer",
+  component: CardContainer,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "light",
+    },
+  },
+} as Meta<typeof CardContainer>;
+
+const MultipleCardsTemplate: StoryFn<typeof CardContainer> = () => (
+  <>
+    <CardContainer></CardContainer>
+    <CardContainer></CardContainer>
+    <CardContainer></CardContainer>
+    <CardContainer></CardContainer>
+    <CardContainer></CardContainer>
+  </>
+);
+const MultipleWithContentCardsTemplate: StoryFn<typeof CardContainer> = () => (
+  <>
+    <CardContainer>
+      <div>
+        <Image
+          src={`https://picsum.photos/400/400?random=${2}`}
+          alt={"23"}
+          width={400}
+          height={400}
+        />
+      </div>
+      <div>
+        <span>heard</span>
+        <h2>weight</h2>
+        <p>
+          mark worry fairly terrible captured sentence diameter crack split
+          these herd before stuck origin income plenty higher yet stage explore
+          height excellent cream soft
+        </p>
+        <a href={"http://he.sh/ceztefic"}>available</a>
+      </div>
+    </CardContainer>
+    <CardContainer>
+      <div>
+        <h2>sound</h2>
+      </div>
+      <div>
+        <p>
+          been sent amount drawn aside kids function neighbor catch example
+          indicate shine smell careful spin solar business create hung physical
+          quietly feel ranch road
+        </p>
+        <a href="http://fucogu.li/ifebfo">graph</a>
+      </div>
+    </CardContainer>
+    <CardContainer>
+      <div>
+        <Heading number={1}>village</Heading>
+        <span>
+          vessels lying massage hay dirt type proud however tip government
+          strike cake addition store sport stood kids foreign even tide heart
+          bad west certain
+        </span>
+      </div>
+      <div>
+        <video
+          title="title"
+          controls
+          style={{ display: "flex", maxWidth: "100%" }}
+        >
+          <source
+            src="https://user-images.githubusercontent.com/17222523/206883606-1c9ef3e7-21f7-421c-b9cc-b2e43c0d53f5.mp4"
+            type="video/mp4"
+          />
+          Your browser does not support the video tag.
+          <track kind="captions" srcLang="en" label="English captions" />
+        </video>
+      </div>
+    </CardContainer>
+    <CardContainer>
+      <div>
+        <Heading number={3}>native managed command</Heading>
+        <p>
+          attack wise principle leaf rule jump you making hung fence close tree
+          planning explanation cut little wheat quick root stood atom oil stuck
+          eat
+        </p>
+      </div>
+      <div>
+        <BigPill
+          href="http://al.mr/no"
+          subTitle="forgotten unhappy"
+          title="phrase"
+          img="https://picsum.photos/400/400?random=${3}"
+        />
+      </div>
+    </CardContainer>
+    <CardContainer>
+      <div>
+        <table>
+          <caption>Sample Table</caption>
+          <thead>
+            <tr>
+              <th scope="col">Header 1</th>
+              <th scope="col">Header 2</th>
+              <th scope="col">Header 3</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Row 1, Column 1</td>
+              <td>Row 1, Column 2</td>
+              <td>Row 1, Column 3</td>
+            </tr>
+            <tr>
+              <td>Row 2, Column 1</td>
+              <td>Row 2, Column 2</td>
+              <td>Row 2, Column 3</td>
+            </tr>
+            <tr>
+              <td>Row 3, Column 1</td>
+              <td>Row 3, Column 2</td>
+              <td>Row 3, Column 3</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <ul>
+          <li>power frighten</li>
+          <li>http://zuhcondu.bh/pecho</li>
+        </ul>
+        <ol>
+          <li>whom thirty three powerful</li>
+          <li>connected enemy current chief</li>
+        </ol>
+      </div>
+    </CardContainer>
+  </>
+);
+
+const Template: StoryFn<typeof CardContainer> = () => (
+  <CardContainer></CardContainer>
+);
+
+export const Default = Template.bind({});
+export const MultipleContainers = MultipleCardsTemplate.bind({});
+export const MultipleContainersWithContent =
+  MultipleWithContentCardsTemplate.bind({});
+Default.args = {};

components/CardContentContextMenu/CardContentContextMenu.stories.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { CardContentContextMenu } from "components";
+import { CardType } from "components/CardContent/CardContent";
+
+export default {
+  title: "Components/CardContentContextMenu",
+  component: CardContentContextMenu,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "dark",
+    },
+  },
+} as Meta<typeof CardContentContextMenu>;
+
+const Template: StoryFn<typeof CardContentContextMenu> = (args) => (
+  <CardContentContextMenu {...args} />
+);
+
+export const Playlist = Template.bind({});
+Playlist.args = {
+  data: { type: CardType.PLAYLIST, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Album = Template.bind({});
+Album.args = {
+  data: { type: CardType.ALBUM, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Artist = Template.bind({});
+Artist.args = {
+  data: { type: CardType.ARTIST, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Episode = Template.bind({});
+Episode.args = {
+  data: { type: CardType.EPISODE, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Genre = Template.bind({});
+Genre.args = {
+  data: { type: CardType.GENRE, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Show = Template.bind({});
+Show.args = {
+  data: { type: CardType.SHOW, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Track = Template.bind({});
+Track.args = {
+  data: { type: CardType.TRACK, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const User = Template.bind({});
+User.args = {
+  data: { type: CardType.USER, id: "123", uri: "Cn6bmU93JpPx" },
+};
+export const Ad = Template.bind({});
+Ad.args = {
+  data: { type: CardType.AD, id: "123", uri: "Cn6bmU93JpPx" },
+};

components/CardSubTitle/CardSubTitle.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { CardSubTitle } from "components";
+import { CardType } from "components/CardContent";
+import { albumFull } from "utils/__tests__/__mocks__/mocks";
+
+export default {
+  title: "Components/CardSubTitle",
+  component: CardSubTitle,
+  parameters: {
+    layout: "fullscreen",
+    container: {
+      backgroundTheme: "dark",
+    },
+  },
+} as Meta<typeof CardSubTitle>;
+
+const Template: StoryFn<typeof CardSubTitle> = (args) => (
+  <CardSubTitle {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  item: albumFull,
+  type: CardType.ALBUM,
+};

components/FullScreenLyrics/FullScreenLyrics.tsx

@@ -63,10 +63,10 @@ export default function FullScreenLyrics({
   const { translations } = useTranslations();
   const isPremium = user?.product === "premium";
   const { addToast } = useToast();
-  const title = currentlyPlaying?.name || "";
-  const artist = currentlyPlaying?.artists?.[0]?.name || "";
-  const album = currentlyPlaying?.album?.name || "";
-  const cover = currentlyPlaying?.album?.images?.[0]?.url || "";
+  const title = currentlyPlaying?.name ?? "";
+  const artist = currentlyPlaying?.artists?.[0]?.name ?? "";
+  const album = currentlyPlaying?.album?.name ?? "";
+  const cover = currentlyPlaying?.album?.images?.[0]?.url ?? "";
 
   useHeader({
     disableOpacityChange: true,
@@ -106,7 +106,7 @@ export default function FullScreenLyrics({
     const newLyricsBackgroundColor = lyrics?.colors?.background
       ? rgbToHex(colorCodedToRGB(lyrics.colors.background))
       : lyricsBackgroundColor ?? getRandomColor();
-    const [h, s, l] = hexToHsl(newLyricsBackgroundColor, true) || [];
+    const [h, s, l] = hexToHsl(newLyricsBackgroundColor, true) ?? [];
     setLyricLineColor(
       lyrics?.colors?.highlightText
         ? colorCodedToHex(lyrics.colors.highlightText)