From 3b92565af8ff2ecc11bbc5575945a315c2d11785 Mon Sep 17 00:00:00 2001 From: Marco Madera Date: Sat, 15 Jul 2023 16:20:49 -0700 Subject: [PATCH] change components to folder structure (#203) --- .storybook/main.ts | 5 +- components/{ => ArtistList}/ArtistList.tsx | 0 .../__tests__/ArtistList.spec.tsx | 0 components/ArtistList/index.ts | 2 + .../BigPill}/BigPill.stories.tsx | 2 +- components/{ => BigPill}/BigPill.tsx | 0 .../{ => BigPill}/__tests__/BigPill.spec.tsx | 0 components/BigPill/index.ts | 2 + .../BrowseCategories.tsx | 0 .../__tests__/BrowseCategories.spec.tsx | 0 components/BrowseCategories/index.ts | 2 + components/{ => Button}/Button.tsx | 0 .../{ => Button}/__tests__/Button.spec.tsx | 0 components/Button/index.ts | 2 + .../{ => CardContainer}/CardContainer.tsx | 0 .../__tests__/CardContainer.spec.tsx | 0 components/CardContainer/index.ts | 2 + .../CardContent}/CardContent.stories.tsx | 0 components/{ => CardContent}/CardContent.tsx | 0 .../__tests__/CardContent.spec.tsx | 0 components/CardContent/index.ts | 2 + .../CardContentContextMenu.tsx | 2 +- .../__tests__/CardContentContextMenu.spec.tsx | 4 +- components/CardContentContextMenu/index.ts | 2 + .../{ => CardSubTitle}/CardSubTitle.tsx | 9 ++- components/CardSubTitle/index.ts | 2 + components/CardTrack/CardTrack.tsx | 4 +- components/CardTrack/index.ts | 3 +- .../CardTrackContextMenu.tsx | 2 +- components/CardTrackContextMenu/index.ts | 2 + .../Carousel}/Carousel.stories.tsx | 4 +- components/{ => Carousel}/Carousel.tsx | 0 .../__tests__/Carousel.spec.tsx | 0 components/Carousel/index.ts | 2 + .../{ => CarouselCards}/CarouselCards.tsx | 8 +-- .../__tests__/CarouselCards.spec.tsx | 2 +- components/CarouselCards/index.ts | 2 + .../{ => CheckBoxControl}/CheckBoxControl.tsx | 0 .../__tests__/CheckBoxControl.spec.tsx | 2 +- components/CheckBoxControl/index.ts | 2 + .../ContentContainer.tsx | 0 .../__tests__/ContentContainer.spec.tsx | 2 +- components/ContentContainer/index.ts | 2 + .../ContextMenu}/ContextMenu.stories.tsx | 2 +- components/{ => ContextMenu}/ContextMenu.tsx | 6 +- components/ContextMenu/index.ts | 2 + .../DeviceConnectControl.stories.tsx | 0 .../DeviceConnectControl.tsx | 0 components/DeviceConnectControl/index.ts | 2 + .../EditPlaylistDetails.stories.tsx | 0 .../EditPlaylistDetails.tsx | 0 components/EditPlaylistDetails/index.ts | 2 + .../EmbedModal}/EmbedModal.stories.tsx | 0 components/{ => EmbedModal}/EmbedModal.tsx | 8 ++- components/EmbedModal/index.ts | 2 + .../EpisodeCard}/EpisodeCard.stories.tsx | 0 components/{ => EpisodeCard}/EpisodeCard.tsx | 0 components/EpisodeCard/index.ts | 2 + .../ExplicitSign}/ExplicitSign.stories.tsx | 0 .../{ => ExplicitSign}/ExplicitSign.tsx | 0 components/ExplicitSign/index.ts | 2 + components/Eyebrow.tsx | 36 ------------ components/Eyebrow/Eyebrow.tsx | 58 +++++++++++++++++++ components/Eyebrow/index.ts | 2 + components/{ => FeatureCard}/FeatureCard.tsx | 0 components/FeatureCard/index.ts | 2 + .../FirstTrackContainer.stories.tsx | 2 +- .../FirstTrackContainer.tsx | 0 components/FirstTrackContainer/index.ts | 2 + .../{ => FollowButton}/FollowButton.tsx | 0 components/FollowButton/index.ts | 2 + .../Footer}/Footer.stories.tsx | 0 components/{ => Footer}/Footer.tsx | 0 components/Footer/index.ts | 2 + components/{ => FormToggle}/FormToggle.tsx | 0 components/FormToggle/index.ts | 2 + .../FullScreenControl.tsx | 0 components/FullScreenControl/index.ts | 2 + .../FullScreenLyrics.tsx | 14 ++--- components/FullScreenLyrics/index.ts | 2 + .../{ => FullScreenQueue}/FullScreenQueue.tsx | 2 +- components/FullScreenQueue/index.ts | 2 + components/{ => Grid}/Grid.tsx | 0 components/Grid/index.ts | 2 + components/{ => Heading}/Heading.tsx | 0 components/Heading/index.ts | 2 + components/{ => Hero}/Hero.tsx | 0 components/Hero/index.ts | 2 + .../Introduction.stories.mdx | 2 +- .../LikedSongsCard.stories.tsx | 2 +- .../{ => LikedSongsCard}/LikedSongsCard.tsx | 0 .../__tests__/LikedSongsCard.spec.tsx | 0 components/LikedSongsCard/index.ts | 2 + .../LoadingSpinner.stories.tsx | 0 .../{ => LoadingSpinner}/LoadingSpinner.tsx | 0 components/LoadingSpinner/index.ts | 2 + .../LoginButton}/LoginButton.stories.tsx | 0 components/{ => LoginButton}/LoginButton.tsx | 0 components/LoginButton/index.ts | 2 + {stories => components/Logo}/Logo.stories.tsx | 0 components/{ => Logo}/Logo.tsx | 0 components/Logo/index.ts | 2 + components/{ => MainTracks}/MainTracks.tsx | 0 components/MainTracks/index.ts | 2 + .../{ => ModalContainer}/ModalContainer.tsx | 10 ++-- components/ModalContainer/index.ts | 2 + .../NavigationTopBarExtraField.tsx | 0 .../NavigationTopBarExtraField/index.ts | 2 + .../NowPlaying}/NowPlaying.stories.tsx | 2 +- components/{ => NowPlaying}/NowPlaying.tsx | 0 components/NowPlaying/index.ts | 2 + .../PageDetails}/PageDetails.stories.tsx | 2 +- components/{ => PageDetails}/PageDetails.tsx | 0 components/PageDetails/index.ts | 2 + .../PageHeader}/PageHeader.stories.tsx | 0 components/{ => PageHeader}/PageHeader.tsx | 0 components/PageHeader/index.ts | 2 + .../PictureInPictureButton.tsx | 0 components/PictureInPictureButton/index.ts | 2 + .../PlayButton}/PlayButton.stories.tsx | 0 components/{ => PlayButton}/PlayButton.tsx | 0 components/PlayButton/index.ts | 2 + .../PlaybackExtraControls.stories.tsx | 0 .../PlaybackExtraControls.tsx | 0 components/PlaybackExtraControls/index.ts | 2 + components/{ => Player}/Player.tsx | 0 components/Player/index.ts | 2 + .../PlayerControls.stories.tsx | 0 .../{ => PlayerControls}/PlayerControls.tsx | 0 components/PlayerControls/index.ts | 2 + .../{ => PlaylistText}/PlaylistText.tsx | 0 components/PlaylistText/index.ts | 2 + .../PlaylistTopBarExtraField.stories.tsx | 0 .../PlaylistTopBarExtraField.tsx | 0 components/PlaylistTopBarExtraField/index.ts | 2 + .../PresentationCard.tsx | 0 components/PresentationCard/index.ts | 2 + .../ProgressBar}/ProgressBar.stories.tsx | 0 components/{ => ProgressBar}/ProgressBar.tsx | 0 components/ProgressBar/index.ts | 2 + .../RemoveTracksModal.stories.tsx | 0 .../RemoveTracksModal.tsx | 0 components/RemoveTracksModal/index.ts | 2 + .../{ => ResizablePanel}/ResizablePanel.tsx | 16 +++-- components/ResizablePanel/index.ts | 2 + .../RouterButtons}/RouterButtons.stories.tsx | 0 .../{ => RouterButtons}/RouterButtons.tsx | 2 +- components/RouterButtons/index.ts | 2 + .../{ => ScrollableText}/ScrollableText.tsx | 0 components/ScrollableText/index.ts | 2 + .../SearchInputElement.stories.tsx | 0 .../SearchInputElement.tsx | 0 components/SearchInputElement/index.ts | 2 + .../{ => SelectControl}/SelectControl.tsx | 0 components/SelectControl/index.ts | 2 + components/{ => Seo}/Seo.tsx | 0 components/Seo/index.ts | 2 + components/{ => SetList}/SetList.tsx | 2 +- components/SetList/index.ts | 2 + .../ShortCuts}/ShortCuts.stories.tsx | 0 components/{ => ShortCuts}/ShortCuts.tsx | 2 +- components/ShortCuts/index.ts | 2 + .../SideBar}/SideBar.stories.tsx | 0 components/{ => SideBar}/SideBar.tsx | 0 components/SideBar/index.ts | 2 + .../SingleTrackCard.stories.tsx | 2 +- .../{ => SingleTrackCard}/SingleTrackCard.tsx | 0 components/SingleTrackCard/index.ts | 2 + .../Slider}/Slider.stories.tsx | 2 +- components/{ => Slider}/Slider.tsx | 0 components/Slider/index.ts | 2 + .../SpotifyPlayer}/SpotifyPlayer.stories.tsx | 0 .../{ => SpotifyPlayer}/SpotifyPlayer.tsx | 0 components/SpotifyPlayer/index.ts | 2 + .../StorybookConfigurationModal.tsx | 5 +- .../StorybookConfigurationModal/index.ts | 2 + components/{ => SubTitle}/SubTitle.tsx | 0 components/SubTitle/index.ts | 2 + components/{ => TextControl}/TextControl.tsx | 0 components/TextControl/index.ts | 2 + .../TextToggleButton.tsx | 0 components/TextToggleButton/index.ts | 2 + components/{ => Toast}/Toast.tsx | 0 components/Toast/index.ts | 2 + components/{ => ToastCard}/ToastCard.tsx | 0 components/ToastCard/index.ts | 2 + .../TopBar}/TopBar.stories.tsx | 0 components/{ => TopBar}/TopBar.tsx | 0 components/TopBar/index.ts | 2 + components/{ => TopTracks}/TopTracks.tsx | 0 components/TopTracks/index.ts | 2 + .../TrackListHeader.stories.tsx | 2 +- .../{ => TrackListHeader}/TrackListHeader.tsx | 2 +- components/TrackListHeader/index.ts | 2 + .../UserWidget}/UserWidget.stories.tsx | 0 components/{ => UserWidget}/UserWidget.tsx | 0 components/UserWidget/index.ts | 2 + .../{ => VirtualizedList}/VirtualizedList.tsx | 0 components/VirtualizedList/index.ts | 2 + .../VolumeControl}/VolumeControl.stories.tsx | 0 .../{ => VolumeControl}/VolumeControl.tsx | 0 components/VolumeControl/index.ts | 2 + .../icons}/Icons.stories.tsx | 0 components/index.ts | 9 ++- {stories => components}/mocks.ts | 0 layouts/AppContainer.tsx | 18 +++--- utils/getHeadingStyles.tsx | 4 +- 207 files changed, 293 insertions(+), 118 deletions(-) rename components/{ => ArtistList}/ArtistList.tsx (100%) rename components/{ => ArtistList}/__tests__/ArtistList.spec.tsx (100%) create mode 100644 components/ArtistList/index.ts rename {stories => components/BigPill}/BigPill.stories.tsx (94%) rename components/{ => BigPill}/BigPill.tsx (100%) rename components/{ => BigPill}/__tests__/BigPill.spec.tsx (100%) create mode 100644 components/BigPill/index.ts rename components/{ => BrowseCategories}/BrowseCategories.tsx (100%) rename components/{ => BrowseCategories}/__tests__/BrowseCategories.spec.tsx (100%) create mode 100644 components/BrowseCategories/index.ts rename components/{ => Button}/Button.tsx (100%) rename components/{ => Button}/__tests__/Button.spec.tsx (100%) create mode 100644 components/Button/index.ts rename components/{ => CardContainer}/CardContainer.tsx (100%) rename components/{ => CardContainer}/__tests__/CardContainer.spec.tsx (100%) create mode 100644 components/CardContainer/index.ts rename {stories => components/CardContent}/CardContent.stories.tsx (100%) rename components/{ => CardContent}/CardContent.tsx (100%) rename components/{ => CardContent}/__tests__/CardContent.spec.tsx (100%) create mode 100644 components/CardContent/index.ts rename components/{ => CardContentContextMenu}/CardContentContextMenu.tsx (98%) rename components/{ => CardContentContextMenu}/__tests__/CardContentContextMenu.spec.tsx (97%) create mode 100644 components/CardContentContextMenu/index.ts rename components/{ => CardSubTitle}/CardSubTitle.tsx (77%) create mode 100644 components/CardSubTitle/index.ts rename components/{ => CardTrackContextMenu}/CardTrackContextMenu.tsx (99%) create mode 100644 components/CardTrackContextMenu/index.ts rename {stories => components/Carousel}/Carousel.stories.tsx (94%) rename components/{ => Carousel}/Carousel.tsx (100%) rename components/{ => Carousel}/__tests__/Carousel.spec.tsx (100%) create mode 100644 components/Carousel/index.ts rename components/{ => CarouselCards}/CarouselCards.tsx (77%) rename components/{ => CarouselCards}/__tests__/CarouselCards.spec.tsx (98%) create mode 100644 components/CarouselCards/index.ts rename components/{ => CheckBoxControl}/CheckBoxControl.tsx (100%) rename components/{ => CheckBoxControl}/__tests__/CheckBoxControl.spec.tsx (96%) create mode 100644 components/CheckBoxControl/index.ts rename components/{ => ContentContainer}/ContentContainer.tsx (100%) rename components/{ => ContentContainer}/__tests__/ContentContainer.spec.tsx (92%) create mode 100644 components/ContentContainer/index.ts rename {stories => components/ContextMenu}/ContextMenu.stories.tsx (97%) rename components/{ => ContextMenu}/ContextMenu.tsx (94%) create mode 100644 components/ContextMenu/index.ts rename {stories => components/DeviceConnectControl}/DeviceConnectControl.stories.tsx (100%) rename components/{ => DeviceConnectControl}/DeviceConnectControl.tsx (100%) create mode 100644 components/DeviceConnectControl/index.ts rename {stories => components/EditPlaylistDetails}/EditPlaylistDetails.stories.tsx (100%) rename components/{ => EditPlaylistDetails}/EditPlaylistDetails.tsx (100%) create mode 100644 components/EditPlaylistDetails/index.ts rename {stories => components/EmbedModal}/EmbedModal.stories.tsx (100%) rename components/{ => EmbedModal}/EmbedModal.tsx (98%) create mode 100644 components/EmbedModal/index.ts rename {stories => components/EpisodeCard}/EpisodeCard.stories.tsx (100%) rename components/{ => EpisodeCard}/EpisodeCard.tsx (100%) create mode 100644 components/EpisodeCard/index.ts rename {stories => components/ExplicitSign}/ExplicitSign.stories.tsx (100%) rename components/{ => ExplicitSign}/ExplicitSign.tsx (100%) create mode 100644 components/ExplicitSign/index.ts delete mode 100644 components/Eyebrow.tsx create mode 100644 components/Eyebrow/Eyebrow.tsx create mode 100644 components/Eyebrow/index.ts rename components/{ => FeatureCard}/FeatureCard.tsx (100%) create mode 100644 components/FeatureCard/index.ts rename {stories => components/FirstTrackContainer}/FirstTrackContainer.stories.tsx (94%) rename components/{ => FirstTrackContainer}/FirstTrackContainer.tsx (100%) create mode 100644 components/FirstTrackContainer/index.ts rename components/{ => FollowButton}/FollowButton.tsx (100%) create mode 100644 components/FollowButton/index.ts rename {stories => components/Footer}/Footer.stories.tsx (100%) rename components/{ => Footer}/Footer.tsx (100%) create mode 100644 components/Footer/index.ts rename components/{ => FormToggle}/FormToggle.tsx (100%) create mode 100644 components/FormToggle/index.ts rename components/{ => FullScreenControl}/FullScreenControl.tsx (100%) create mode 100644 components/FullScreenControl/index.ts rename components/{ => FullScreenLyrics}/FullScreenLyrics.tsx (98%) create mode 100644 components/FullScreenLyrics/index.ts rename components/{ => FullScreenQueue}/FullScreenQueue.tsx (98%) create mode 100644 components/FullScreenQueue/index.ts rename components/{ => Grid}/Grid.tsx (100%) create mode 100644 components/Grid/index.ts rename components/{ => Heading}/Heading.tsx (100%) create mode 100644 components/Heading/index.ts rename components/{ => Hero}/Hero.tsx (100%) create mode 100644 components/Hero/index.ts rename {stories => components}/Introduction.stories.mdx (97%) rename {stories => components/LikedSongsCard}/LikedSongsCard.stories.tsx (87%) rename components/{ => LikedSongsCard}/LikedSongsCard.tsx (100%) rename components/{ => LikedSongsCard}/__tests__/LikedSongsCard.spec.tsx (100%) create mode 100644 components/LikedSongsCard/index.ts rename {stories => components/LoadingSpinner}/LoadingSpinner.stories.tsx (100%) rename components/{ => LoadingSpinner}/LoadingSpinner.tsx (100%) create mode 100644 components/LoadingSpinner/index.ts rename {stories => components/LoginButton}/LoginButton.stories.tsx (100%) rename components/{ => LoginButton}/LoginButton.tsx (100%) create mode 100644 components/LoginButton/index.ts rename {stories => components/Logo}/Logo.stories.tsx (100%) rename components/{ => Logo}/Logo.tsx (100%) create mode 100644 components/Logo/index.ts rename components/{ => MainTracks}/MainTracks.tsx (100%) create mode 100644 components/MainTracks/index.ts rename components/{ => ModalContainer}/ModalContainer.tsx (95%) create mode 100644 components/ModalContainer/index.ts rename components/{ => NavigationTopBarExtraField}/NavigationTopBarExtraField.tsx (100%) create mode 100644 components/NavigationTopBarExtraField/index.ts rename {stories => components/NowPlaying}/NowPlaying.stories.tsx (94%) rename components/{ => NowPlaying}/NowPlaying.tsx (100%) create mode 100644 components/NowPlaying/index.ts rename {stories => components/PageDetails}/PageDetails.stories.tsx (94%) rename components/{ => PageDetails}/PageDetails.tsx (100%) create mode 100644 components/PageDetails/index.ts rename {stories => components/PageHeader}/PageHeader.stories.tsx (100%) rename components/{ => PageHeader}/PageHeader.tsx (100%) create mode 100644 components/PageHeader/index.ts rename components/{ => PictureInPictureButton}/PictureInPictureButton.tsx (100%) create mode 100644 components/PictureInPictureButton/index.ts rename {stories => components/PlayButton}/PlayButton.stories.tsx (100%) rename components/{ => PlayButton}/PlayButton.tsx (100%) create mode 100644 components/PlayButton/index.ts rename {stories => components/PlaybackExtraControls}/PlaybackExtraControls.stories.tsx (100%) rename components/{ => PlaybackExtraControls}/PlaybackExtraControls.tsx (100%) create mode 100644 components/PlaybackExtraControls/index.ts rename components/{ => Player}/Player.tsx (100%) create mode 100644 components/Player/index.ts rename {stories => components/PlayerControls}/PlayerControls.stories.tsx (100%) rename components/{ => PlayerControls}/PlayerControls.tsx (100%) create mode 100644 components/PlayerControls/index.ts rename components/{ => PlaylistText}/PlaylistText.tsx (100%) create mode 100644 components/PlaylistText/index.ts rename {stories => components/PlaylistTopBarExtraField}/PlaylistTopBarExtraField.stories.tsx (100%) rename components/{ => PlaylistTopBarExtraField}/PlaylistTopBarExtraField.tsx (100%) create mode 100644 components/PlaylistTopBarExtraField/index.ts rename components/{ => PresentationCard}/PresentationCard.tsx (100%) create mode 100644 components/PresentationCard/index.ts rename {stories => components/ProgressBar}/ProgressBar.stories.tsx (100%) rename components/{ => ProgressBar}/ProgressBar.tsx (100%) create mode 100644 components/ProgressBar/index.ts rename {stories => components/RemoveTracksModal}/RemoveTracksModal.stories.tsx (100%) rename components/{ => RemoveTracksModal}/RemoveTracksModal.tsx (100%) create mode 100644 components/RemoveTracksModal/index.ts rename components/{ => ResizablePanel}/ResizablePanel.tsx (93%) create mode 100644 components/ResizablePanel/index.ts rename {stories => components/RouterButtons}/RouterButtons.stories.tsx (100%) rename components/{ => RouterButtons}/RouterButtons.tsx (98%) create mode 100644 components/RouterButtons/index.ts rename components/{ => ScrollableText}/ScrollableText.tsx (100%) create mode 100644 components/ScrollableText/index.ts rename {stories => components/SearchInputElement}/SearchInputElement.stories.tsx (100%) rename components/{ => SearchInputElement}/SearchInputElement.tsx (100%) create mode 100644 components/SearchInputElement/index.ts rename components/{ => SelectControl}/SelectControl.tsx (100%) create mode 100644 components/SelectControl/index.ts rename components/{ => Seo}/Seo.tsx (100%) create mode 100644 components/Seo/index.ts rename components/{ => SetList}/SetList.tsx (98%) create mode 100644 components/SetList/index.ts rename {stories => components/ShortCuts}/ShortCuts.stories.tsx (100%) rename components/{ => ShortCuts}/ShortCuts.tsx (99%) create mode 100644 components/ShortCuts/index.ts rename {stories => components/SideBar}/SideBar.stories.tsx (100%) rename components/{ => SideBar}/SideBar.tsx (100%) create mode 100644 components/SideBar/index.ts rename {stories => components/SingleTrackCard}/SingleTrackCard.stories.tsx (94%) rename components/{ => SingleTrackCard}/SingleTrackCard.tsx (100%) create mode 100644 components/SingleTrackCard/index.ts rename {stories => components/Slider}/Slider.stories.tsx (96%) rename components/{ => Slider}/Slider.tsx (100%) create mode 100644 components/Slider/index.ts rename {stories => components/SpotifyPlayer}/SpotifyPlayer.stories.tsx (100%) rename components/{ => SpotifyPlayer}/SpotifyPlayer.tsx (100%) create mode 100644 components/SpotifyPlayer/index.ts rename components/{ => StorybookConfigurationModal}/StorybookConfigurationModal.tsx (97%) create mode 100644 components/StorybookConfigurationModal/index.ts rename components/{ => SubTitle}/SubTitle.tsx (100%) create mode 100644 components/SubTitle/index.ts rename components/{ => TextControl}/TextControl.tsx (100%) create mode 100644 components/TextControl/index.ts rename components/{ => TextToggleButton}/TextToggleButton.tsx (100%) create mode 100644 components/TextToggleButton/index.ts rename components/{ => Toast}/Toast.tsx (100%) create mode 100644 components/Toast/index.ts rename components/{ => ToastCard}/ToastCard.tsx (100%) create mode 100644 components/ToastCard/index.ts rename {stories => components/TopBar}/TopBar.stories.tsx (100%) rename components/{ => TopBar}/TopBar.tsx (100%) create mode 100644 components/TopBar/index.ts rename components/{ => TopTracks}/TopTracks.tsx (100%) create mode 100644 components/TopTracks/index.ts rename {stories => components/TrackListHeader}/TrackListHeader.stories.tsx (94%) rename components/{ => TrackListHeader}/TrackListHeader.tsx (98%) create mode 100644 components/TrackListHeader/index.ts rename {stories => components/UserWidget}/UserWidget.stories.tsx (100%) rename components/{ => UserWidget}/UserWidget.tsx (100%) create mode 100644 components/UserWidget/index.ts rename components/{ => VirtualizedList}/VirtualizedList.tsx (100%) create mode 100644 components/VirtualizedList/index.ts rename {stories => components/VolumeControl}/VolumeControl.stories.tsx (100%) rename components/{ => VolumeControl}/VolumeControl.tsx (100%) create mode 100644 components/VolumeControl/index.ts rename {stories => components/icons}/Icons.stories.tsx (100%) rename {stories => components}/mocks.ts (100%) diff --git a/.storybook/main.ts b/.storybook/main.ts index 71558341..81104ff8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,10 +1,7 @@ import type { StorybookConfig } from "@storybook/nextjs"; const config: StorybookConfig = { - stories: [ - "../stories/**/*.mdx", - "../(stories|components)/**/*.stories.@(js|jsx|ts|tsx)", - ], + stories: ["../(stories|components)/**/*.stories.@(js|jsx|ts|tsx|mdx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", diff --git a/components/ArtistList.tsx b/components/ArtistList/ArtistList.tsx similarity index 100% rename from components/ArtistList.tsx rename to components/ArtistList/ArtistList.tsx diff --git a/components/__tests__/ArtistList.spec.tsx b/components/ArtistList/__tests__/ArtistList.spec.tsx similarity index 100% rename from components/__tests__/ArtistList.spec.tsx rename to components/ArtistList/__tests__/ArtistList.spec.tsx diff --git a/components/ArtistList/index.ts b/components/ArtistList/index.ts new file mode 100644 index 00000000..3b47dfa0 --- /dev/null +++ b/components/ArtistList/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ArtistList"; +export * from "./ArtistList"; diff --git a/stories/BigPill.stories.tsx b/components/BigPill/BigPill.stories.tsx similarity index 94% rename from stories/BigPill.stories.tsx rename to components/BigPill/BigPill.stories.tsx index 9c0e1c8b..1cd518fc 100644 --- a/stories/BigPill.stories.tsx +++ b/components/BigPill/BigPill.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { BigPill } from "../components"; +import { BigPill } from "components"; export default { title: "Components/BigPill", diff --git a/components/BigPill.tsx b/components/BigPill/BigPill.tsx similarity index 100% rename from components/BigPill.tsx rename to components/BigPill/BigPill.tsx diff --git a/components/__tests__/BigPill.spec.tsx b/components/BigPill/__tests__/BigPill.spec.tsx similarity index 100% rename from components/__tests__/BigPill.spec.tsx rename to components/BigPill/__tests__/BigPill.spec.tsx diff --git a/components/BigPill/index.ts b/components/BigPill/index.ts new file mode 100644 index 00000000..f07bbae7 --- /dev/null +++ b/components/BigPill/index.ts @@ -0,0 +1,2 @@ +export { default } from "./BigPill"; +export * from "./BigPill"; diff --git a/components/BrowseCategories.tsx b/components/BrowseCategories/BrowseCategories.tsx similarity index 100% rename from components/BrowseCategories.tsx rename to components/BrowseCategories/BrowseCategories.tsx diff --git a/components/__tests__/BrowseCategories.spec.tsx b/components/BrowseCategories/__tests__/BrowseCategories.spec.tsx similarity index 100% rename from components/__tests__/BrowseCategories.spec.tsx rename to components/BrowseCategories/__tests__/BrowseCategories.spec.tsx diff --git a/components/BrowseCategories/index.ts b/components/BrowseCategories/index.ts new file mode 100644 index 00000000..f2a9fb47 --- /dev/null +++ b/components/BrowseCategories/index.ts @@ -0,0 +1,2 @@ +export { default } from "./BrowseCategories"; +export * from "./BrowseCategories"; diff --git a/components/Button.tsx b/components/Button/Button.tsx similarity index 100% rename from components/Button.tsx rename to components/Button/Button.tsx diff --git a/components/__tests__/Button.spec.tsx b/components/Button/__tests__/Button.spec.tsx similarity index 100% rename from components/__tests__/Button.spec.tsx rename to components/Button/__tests__/Button.spec.tsx diff --git a/components/Button/index.ts b/components/Button/index.ts new file mode 100644 index 00000000..7023e5af --- /dev/null +++ b/components/Button/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Button"; +export * from "./Button"; diff --git a/components/CardContainer.tsx b/components/CardContainer/CardContainer.tsx similarity index 100% rename from components/CardContainer.tsx rename to components/CardContainer/CardContainer.tsx diff --git a/components/__tests__/CardContainer.spec.tsx b/components/CardContainer/__tests__/CardContainer.spec.tsx similarity index 100% rename from components/__tests__/CardContainer.spec.tsx rename to components/CardContainer/__tests__/CardContainer.spec.tsx diff --git a/components/CardContainer/index.ts b/components/CardContainer/index.ts new file mode 100644 index 00000000..a63041cd --- /dev/null +++ b/components/CardContainer/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CardContainer"; +export * from "./CardContainer"; diff --git a/stories/CardContent.stories.tsx b/components/CardContent/CardContent.stories.tsx similarity index 100% rename from stories/CardContent.stories.tsx rename to components/CardContent/CardContent.stories.tsx diff --git a/components/CardContent.tsx b/components/CardContent/CardContent.tsx similarity index 100% rename from components/CardContent.tsx rename to components/CardContent/CardContent.tsx diff --git a/components/__tests__/CardContent.spec.tsx b/components/CardContent/__tests__/CardContent.spec.tsx similarity index 100% rename from components/__tests__/CardContent.spec.tsx rename to components/CardContent/__tests__/CardContent.spec.tsx diff --git a/components/CardContent/index.ts b/components/CardContent/index.ts new file mode 100644 index 00000000..4bd30aa2 --- /dev/null +++ b/components/CardContent/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CardContent"; +export * from "./CardContent"; diff --git a/components/CardContentContextMenu.tsx b/components/CardContentContextMenu/CardContentContextMenu.tsx similarity index 98% rename from components/CardContentContextMenu.tsx rename to components/CardContentContextMenu/CardContentContextMenu.tsx index 0a591e50..d22e802f 100644 --- a/components/CardContentContextMenu.tsx +++ b/components/CardContentContextMenu/CardContentContextMenu.tsx @@ -2,7 +2,7 @@ import { ReactElement, useCallback } from "react"; import { useRouter } from "next/router"; -import EmbedModal from "./EmbedModal"; +import { EmbedModal } from "components"; import { CardType } from "components/CardContent"; import { useContextMenu, useToast, useTranslations } from "hooks"; import { menuContextStyles } from "styles/menuContextStyles"; diff --git a/components/__tests__/CardContentContextMenu.spec.tsx b/components/CardContentContextMenu/__tests__/CardContentContextMenu.spec.tsx similarity index 97% rename from components/__tests__/CardContentContextMenu.spec.tsx rename to components/CardContentContextMenu/__tests__/CardContentContextMenu.spec.tsx index 38de2dfa..961e1281 100644 --- a/components/__tests__/CardContentContextMenu.spec.tsx +++ b/components/CardContentContextMenu/__tests__/CardContentContextMenu.spec.tsx @@ -3,7 +3,7 @@ import React from "react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { useRouter } from "next/router"; -import CardContentContextMenu from "../CardContentContextMenu"; +import { CardContentContextMenu } from "components"; import { CardType } from "components/CardContent"; import { AppContextProvider } from "context/AppContextProvider"; import { ICardContentContextMenuData } from "types/contextMenu"; @@ -44,7 +44,7 @@ describe("cardContentContextMenu", () => { const push = jest.fn(); (useRouter as jest.Mock).mockImplementation(() => ({ asPath: "/", - push: mocks?.push || push, + push: mocks?.push ?? push, query: { country: "US", }, diff --git a/components/CardContentContextMenu/index.ts b/components/CardContentContextMenu/index.ts new file mode 100644 index 00000000..e63aa73a --- /dev/null +++ b/components/CardContentContextMenu/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CardContentContextMenu"; +export * from "./CardContentContextMenu"; diff --git a/components/CardSubTitle.tsx b/components/CardSubTitle/CardSubTitle.tsx similarity index 77% rename from components/CardSubTitle.tsx rename to components/CardSubTitle/CardSubTitle.tsx index 0a69a67b..79ee1109 100644 --- a/components/CardSubTitle.tsx +++ b/components/CardSubTitle/CardSubTitle.tsx @@ -1,7 +1,7 @@ import { ReactElement } from "react"; -import { CardType } from "./CardContent"; -import SubTitle from "./SubTitle"; +import { SubTitle } from "components"; +import { CardType } from "components/CardContent"; import { useTranslations } from "hooks"; import { IMappedAlbumItems } from "pages/artist/[artistId]"; @@ -10,7 +10,10 @@ interface ICardSubTitle { item: IMappedAlbumItems | SpotifyApi.ArtistObjectFull; } -export function CardSubTitle({ type, item }: ICardSubTitle): ReactElement { +export default function CardSubTitle({ + type, + item, +}: ICardSubTitle): ReactElement { const { translations } = useTranslations(); if (type === CardType.ALBUM && "album_type" in item) { diff --git a/components/CardSubTitle/index.ts b/components/CardSubTitle/index.ts new file mode 100644 index 00000000..b13e06cd --- /dev/null +++ b/components/CardSubTitle/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CardSubTitle"; +export * from "./CardSubTitle"; diff --git a/components/CardTrack/CardTrack.tsx b/components/CardTrack/CardTrack.tsx index 353b640c..fdcfef4e 100644 --- a/components/CardTrack/CardTrack.tsx +++ b/components/CardTrack/CardTrack.tsx @@ -34,7 +34,7 @@ export enum CardType { Playlist = "playlist", Album = "album", } -interface CardTrackProps { +interface ICardTrackProps { track: ITrack | undefined; accessToken: string | undefined; playlistUri: string; @@ -79,7 +79,7 @@ function CardTrack({ uri, visualPosition, uris, -}: CardTrackProps): ReactElement | null { +}: ICardTrackProps): ReactElement | null { const { allTracks, deviceId, diff --git a/components/CardTrack/index.ts b/components/CardTrack/index.ts index 9736e9e7..bde982c6 100644 --- a/components/CardTrack/index.ts +++ b/components/CardTrack/index.ts @@ -1 +1,2 @@ -export { default as CardTrack } from "./CardTrack"; +export { default } from "./CardTrack"; +export * from "./CardTrack"; diff --git a/components/CardTrackContextMenu.tsx b/components/CardTrackContextMenu/CardTrackContextMenu.tsx similarity index 99% rename from components/CardTrackContextMenu.tsx rename to components/CardTrackContextMenu/CardTrackContextMenu.tsx index c5f49a3e..abf32995 100644 --- a/components/CardTrackContextMenu.tsx +++ b/components/CardTrackContextMenu/CardTrackContextMenu.tsx @@ -2,7 +2,7 @@ import { ReactElement, useLayoutEffect, useRef, useState } from "react"; import Link from "next/link"; -import EmbedModal from "./EmbedModal"; +import { EmbedModal } from "components"; import { useAuth, useContextMenu, diff --git a/components/CardTrackContextMenu/index.ts b/components/CardTrackContextMenu/index.ts new file mode 100644 index 00000000..c5ae8a88 --- /dev/null +++ b/components/CardTrackContextMenu/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CardTrackContextMenu"; +export * from "./CardTrackContextMenu"; diff --git a/stories/Carousel.stories.tsx b/components/Carousel/Carousel.stories.tsx similarity index 94% rename from stories/Carousel.stories.tsx rename to components/Carousel/Carousel.stories.tsx index 77214e7e..17e60bb0 100644 --- a/stories/Carousel.stories.tsx +++ b/components/Carousel/Carousel.stories.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps, PropsWithChildren } from "react"; +import React, { ComponentProps, PropsWithChildren, ReactElement } from "react"; import { Meta, StoryFn } from "@storybook/react"; @@ -51,7 +51,7 @@ const Template: StoryFn< ...args }: { boxWidth: number; totalBoxes: number } & ComponentProps< typeof Carousel - >) => JSX.Element + >) => ReactElement > = (args) => { const { boxWidth, totalBoxes, ...carouselProps } = args; diff --git a/components/Carousel.tsx b/components/Carousel/Carousel.tsx similarity index 100% rename from components/Carousel.tsx rename to components/Carousel/Carousel.tsx diff --git a/components/__tests__/Carousel.spec.tsx b/components/Carousel/__tests__/Carousel.spec.tsx similarity index 100% rename from components/__tests__/Carousel.spec.tsx rename to components/Carousel/__tests__/Carousel.spec.tsx diff --git a/components/Carousel/index.ts b/components/Carousel/index.ts new file mode 100644 index 00000000..0bcb2d80 --- /dev/null +++ b/components/Carousel/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Carousel"; +export * from "./Carousel"; diff --git a/components/CarouselCards.tsx b/components/CarouselCards/CarouselCards.tsx similarity index 77% rename from components/CarouselCards.tsx rename to components/CarouselCards/CarouselCards.tsx index 9a7c76e0..6cf09409 100644 --- a/components/CarouselCards.tsx +++ b/components/CarouselCards/CarouselCards.tsx @@ -1,9 +1,7 @@ import { ReactElement } from "react"; -import { CardType } from "./CardContent"; -import Carousel from "./Carousel"; -import PresentationCard from "./PresentationCard"; -import { CardSubTitle } from "components"; +import { CardSubTitle, Carousel, PresentationCard } from "components"; +import { CardType } from "components/CardContent"; import { IMappedAlbums } from "pages/artist/[artistId]"; interface ICarouselCards { @@ -12,7 +10,7 @@ interface ICarouselCards { type: CardType; } -export function CarouselCards({ +export default function CarouselCards({ items, title, type, diff --git a/components/__tests__/CarouselCards.spec.tsx b/components/CarouselCards/__tests__/CarouselCards.spec.tsx similarity index 98% rename from components/__tests__/CarouselCards.spec.tsx rename to components/CarouselCards/__tests__/CarouselCards.spec.tsx index cfaf8adf..3ca303a2 100644 --- a/components/__tests__/CarouselCards.spec.tsx +++ b/components/CarouselCards/__tests__/CarouselCards.spec.tsx @@ -1,8 +1,8 @@ import { render, screen } from "@testing-library/react"; import { NextRouter, useRouter } from "next/router"; +import { CarouselCards } from "components"; import { CardType } from "components/CardContent"; -import { CarouselCards } from "components/CarouselCards"; import { AppContextProvider } from "context/AppContextProvider"; import { useAuth, useOnScreen } from "hooks"; import { IMappedAlbumItems } from "pages/artist/[artistId]"; diff --git a/components/CarouselCards/index.ts b/components/CarouselCards/index.ts new file mode 100644 index 00000000..569c70f3 --- /dev/null +++ b/components/CarouselCards/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CarouselCards"; +export * from "./CarouselCards"; diff --git a/components/CheckBoxControl.tsx b/components/CheckBoxControl/CheckBoxControl.tsx similarity index 100% rename from components/CheckBoxControl.tsx rename to components/CheckBoxControl/CheckBoxControl.tsx diff --git a/components/__tests__/CheckBoxControl.spec.tsx b/components/CheckBoxControl/__tests__/CheckBoxControl.spec.tsx similarity index 96% rename from components/__tests__/CheckBoxControl.spec.tsx rename to components/CheckBoxControl/__tests__/CheckBoxControl.spec.tsx index 17c254a7..0633ac0d 100644 --- a/components/__tests__/CheckBoxControl.spec.tsx +++ b/components/CheckBoxControl/__tests__/CheckBoxControl.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from "@testing-library/react"; -import CheckBoxControl from "components/CheckBoxControl"; +import { CheckBoxControl } from "components"; describe("checkboxControl", () => { it("default render", () => { diff --git a/components/CheckBoxControl/index.ts b/components/CheckBoxControl/index.ts new file mode 100644 index 00000000..f37a142a --- /dev/null +++ b/components/CheckBoxControl/index.ts @@ -0,0 +1,2 @@ +export { default } from "./CheckBoxControl"; +export * from "./CheckBoxControl"; diff --git a/components/ContentContainer.tsx b/components/ContentContainer/ContentContainer.tsx similarity index 100% rename from components/ContentContainer.tsx rename to components/ContentContainer/ContentContainer.tsx diff --git a/components/__tests__/ContentContainer.spec.tsx b/components/ContentContainer/__tests__/ContentContainer.spec.tsx similarity index 92% rename from components/__tests__/ContentContainer.spec.tsx rename to components/ContentContainer/__tests__/ContentContainer.spec.tsx index d2d3aa7c..a5b6ed4a 100644 --- a/components/__tests__/ContentContainer.spec.tsx +++ b/components/ContentContainer/__tests__/ContentContainer.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from "@testing-library/react"; -import ContentContainer from "components/ContentContainer"; +import { ContentContainer } from "components"; describe("contentContainer", () => { it("renders main container with children", () => { diff --git a/components/ContentContainer/index.ts b/components/ContentContainer/index.ts new file mode 100644 index 00000000..7f23882a --- /dev/null +++ b/components/ContentContainer/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ContentContainer"; +export * from "./ContentContainer"; diff --git a/stories/ContextMenu.stories.tsx b/components/ContextMenu/ContextMenu.stories.tsx similarity index 97% rename from stories/ContextMenu.stories.tsx rename to components/ContextMenu/ContextMenu.stories.tsx index bc5c2f1a..485b7dae 100644 --- a/stories/ContextMenu.stories.tsx +++ b/components/ContextMenu/ContextMenu.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { playlists } from "./mocks"; +import { playlists } from "../mocks"; import { ContextMenu } from "components"; export default { diff --git a/components/ContextMenu.tsx b/components/ContextMenu/ContextMenu.tsx similarity index 94% rename from components/ContextMenu.tsx rename to components/ContextMenu/ContextMenu.tsx index 31d6b50c..22910657 100644 --- a/components/ContextMenu.tsx +++ b/components/ContextMenu/ContextMenu.tsx @@ -8,10 +8,8 @@ import { import { createPortal } from "react-dom"; -import CardContentContextMenu, { - ICardContentContextMenu, -} from "./CardContentContextMenu"; -import CardTrackContextMenu from "./CardTrackContextMenu"; +import { CardContentContextMenu, CardTrackContextMenu } from "components"; +import { ICardContentContextMenu } from "components/CardContentContextMenu"; import { useContextMenu, useEventListener } from "hooks"; import { ITrack } from "types/spotify"; import { diff --git a/components/ContextMenu/index.ts b/components/ContextMenu/index.ts new file mode 100644 index 00000000..0dfac0d4 --- /dev/null +++ b/components/ContextMenu/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ContextMenu"; +export * from "./ContextMenu"; diff --git a/stories/DeviceConnectControl.stories.tsx b/components/DeviceConnectControl/DeviceConnectControl.stories.tsx similarity index 100% rename from stories/DeviceConnectControl.stories.tsx rename to components/DeviceConnectControl/DeviceConnectControl.stories.tsx diff --git a/components/DeviceConnectControl.tsx b/components/DeviceConnectControl/DeviceConnectControl.tsx similarity index 100% rename from components/DeviceConnectControl.tsx rename to components/DeviceConnectControl/DeviceConnectControl.tsx diff --git a/components/DeviceConnectControl/index.ts b/components/DeviceConnectControl/index.ts new file mode 100644 index 00000000..a8685491 --- /dev/null +++ b/components/DeviceConnectControl/index.ts @@ -0,0 +1,2 @@ +export { default } from "./DeviceConnectControl"; +export * from "./DeviceConnectControl"; diff --git a/stories/EditPlaylistDetails.stories.tsx b/components/EditPlaylistDetails/EditPlaylistDetails.stories.tsx similarity index 100% rename from stories/EditPlaylistDetails.stories.tsx rename to components/EditPlaylistDetails/EditPlaylistDetails.stories.tsx diff --git a/components/EditPlaylistDetails.tsx b/components/EditPlaylistDetails/EditPlaylistDetails.tsx similarity index 100% rename from components/EditPlaylistDetails.tsx rename to components/EditPlaylistDetails/EditPlaylistDetails.tsx diff --git a/components/EditPlaylistDetails/index.ts b/components/EditPlaylistDetails/index.ts new file mode 100644 index 00000000..c137154f --- /dev/null +++ b/components/EditPlaylistDetails/index.ts @@ -0,0 +1,2 @@ +export { default } from "./EditPlaylistDetails"; +export * from "./EditPlaylistDetails"; diff --git a/stories/EmbedModal.stories.tsx b/components/EmbedModal/EmbedModal.stories.tsx similarity index 100% rename from stories/EmbedModal.stories.tsx rename to components/EmbedModal/EmbedModal.stories.tsx diff --git a/components/EmbedModal.tsx b/components/EmbedModal/EmbedModal.tsx similarity index 98% rename from components/EmbedModal.tsx rename to components/EmbedModal/EmbedModal.tsx index 47c4c444..8055d077 100644 --- a/components/EmbedModal.tsx +++ b/components/EmbedModal/EmbedModal.tsx @@ -1,7 +1,11 @@ import { ReactElement, useEffect, useState } from "react"; -import SelectControl from "./SelectControl"; -import { Button, CheckBoxControl, TextControl } from "components"; +import { + Button, + CheckBoxControl, + SelectControl, + TextControl, +} from "components"; import { useToast, useToggle, useTranslations } from "hooks"; import { ToastMessage } from "utils"; diff --git a/components/EmbedModal/index.ts b/components/EmbedModal/index.ts new file mode 100644 index 00000000..9c139795 --- /dev/null +++ b/components/EmbedModal/index.ts @@ -0,0 +1,2 @@ +export { default } from "./EmbedModal"; +export * from "./EmbedModal"; diff --git a/stories/EpisodeCard.stories.tsx b/components/EpisodeCard/EpisodeCard.stories.tsx similarity index 100% rename from stories/EpisodeCard.stories.tsx rename to components/EpisodeCard/EpisodeCard.stories.tsx diff --git a/components/EpisodeCard.tsx b/components/EpisodeCard/EpisodeCard.tsx similarity index 100% rename from components/EpisodeCard.tsx rename to components/EpisodeCard/EpisodeCard.tsx diff --git a/components/EpisodeCard/index.ts b/components/EpisodeCard/index.ts new file mode 100644 index 00000000..f47783ad --- /dev/null +++ b/components/EpisodeCard/index.ts @@ -0,0 +1,2 @@ +export { default } from "./EpisodeCard"; +export * from "./EpisodeCard"; diff --git a/stories/ExplicitSign.stories.tsx b/components/ExplicitSign/ExplicitSign.stories.tsx similarity index 100% rename from stories/ExplicitSign.stories.tsx rename to components/ExplicitSign/ExplicitSign.stories.tsx diff --git a/components/ExplicitSign.tsx b/components/ExplicitSign/ExplicitSign.tsx similarity index 100% rename from components/ExplicitSign.tsx rename to components/ExplicitSign/ExplicitSign.tsx diff --git a/components/ExplicitSign/index.ts b/components/ExplicitSign/index.ts new file mode 100644 index 00000000..a96954d9 --- /dev/null +++ b/components/ExplicitSign/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ExplicitSign"; +export * from "./ExplicitSign"; diff --git a/components/Eyebrow.tsx b/components/Eyebrow.tsx deleted file mode 100644 index 6b9d7db0..00000000 --- a/components/Eyebrow.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { PropsWithChildren, ReactElement } from "react"; - -interface EyebrowProps { - size?: "small" | "medium" | "large"; -} - -export default function Eyebrow({ - children, - size = "small", -}: PropsWithChildren): ReactElement { - return ( -

- {children} - -

- ); -} diff --git a/components/Eyebrow/Eyebrow.tsx b/components/Eyebrow/Eyebrow.tsx new file mode 100644 index 00000000..83afc3f3 --- /dev/null +++ b/components/Eyebrow/Eyebrow.tsx @@ -0,0 +1,58 @@ +import React, { PropsWithChildren, ReactElement } from "react"; + +interface EyebrowProps { + size?: "small" | "medium" | "large"; +} + +const eyebrowStyles: Record< + Required["size"], + React.CSSProperties +> = { + small: { + fontSize: "12px", + marginBottom: "0px", + fontWeight: "400", + color: "#e5e5e5", + }, + medium: { + fontSize: "0.95rem", + marginBottom: "5px", + fontWeight: "400", + color: "#fff", + }, + large: { + fontSize: "1.5rem", + marginBottom: "12px", + fontWeight: "700", + color: "#fff", + }, +}; + +export default function Eyebrow({ + children, + size = "small", +}: PropsWithChildren): ReactElement { + const eyebrowStyle = eyebrowStyles[size] || eyebrowStyles.large; + + return ( +

+ {children} + +

+ ); +} diff --git a/components/Eyebrow/index.ts b/components/Eyebrow/index.ts new file mode 100644 index 00000000..73e7255a --- /dev/null +++ b/components/Eyebrow/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Eyebrow"; +export * from "./Eyebrow"; diff --git a/components/FeatureCard.tsx b/components/FeatureCard/FeatureCard.tsx similarity index 100% rename from components/FeatureCard.tsx rename to components/FeatureCard/FeatureCard.tsx diff --git a/components/FeatureCard/index.ts b/components/FeatureCard/index.ts new file mode 100644 index 00000000..edb74304 --- /dev/null +++ b/components/FeatureCard/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FeatureCard"; +export * from "./FeatureCard"; diff --git a/stories/FirstTrackContainer.stories.tsx b/components/FirstTrackContainer/FirstTrackContainer.stories.tsx similarity index 94% rename from stories/FirstTrackContainer.stories.tsx rename to components/FirstTrackContainer/FirstTrackContainer.stories.tsx index 1edebec3..ac9b8a12 100644 --- a/stories/FirstTrackContainer.stories.tsx +++ b/components/FirstTrackContainer/FirstTrackContainer.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { track } from "./mocks"; +import { track } from "../mocks"; import { FirstTrackContainer } from "components"; export default { diff --git a/components/FirstTrackContainer.tsx b/components/FirstTrackContainer/FirstTrackContainer.tsx similarity index 100% rename from components/FirstTrackContainer.tsx rename to components/FirstTrackContainer/FirstTrackContainer.tsx diff --git a/components/FirstTrackContainer/index.ts b/components/FirstTrackContainer/index.ts new file mode 100644 index 00000000..50051d47 --- /dev/null +++ b/components/FirstTrackContainer/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FirstTrackContainer"; +export * from "./FirstTrackContainer"; diff --git a/components/FollowButton.tsx b/components/FollowButton/FollowButton.tsx similarity index 100% rename from components/FollowButton.tsx rename to components/FollowButton/FollowButton.tsx diff --git a/components/FollowButton/index.ts b/components/FollowButton/index.ts new file mode 100644 index 00000000..04808ad3 --- /dev/null +++ b/components/FollowButton/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FollowButton"; +export * from "./FollowButton"; diff --git a/stories/Footer.stories.tsx b/components/Footer/Footer.stories.tsx similarity index 100% rename from stories/Footer.stories.tsx rename to components/Footer/Footer.stories.tsx diff --git a/components/Footer.tsx b/components/Footer/Footer.tsx similarity index 100% rename from components/Footer.tsx rename to components/Footer/Footer.tsx diff --git a/components/Footer/index.ts b/components/Footer/index.ts new file mode 100644 index 00000000..adf69024 --- /dev/null +++ b/components/Footer/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Footer"; +export * from "./Footer"; diff --git a/components/FormToggle.tsx b/components/FormToggle/FormToggle.tsx similarity index 100% rename from components/FormToggle.tsx rename to components/FormToggle/FormToggle.tsx diff --git a/components/FormToggle/index.ts b/components/FormToggle/index.ts new file mode 100644 index 00000000..b7f8df70 --- /dev/null +++ b/components/FormToggle/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FormToggle"; +export * from "./FormToggle"; diff --git a/components/FullScreenControl.tsx b/components/FullScreenControl/FullScreenControl.tsx similarity index 100% rename from components/FullScreenControl.tsx rename to components/FullScreenControl/FullScreenControl.tsx diff --git a/components/FullScreenControl/index.ts b/components/FullScreenControl/index.ts new file mode 100644 index 00000000..b0b7bc5d --- /dev/null +++ b/components/FullScreenControl/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FullScreenControl"; +export * from "./FullScreenControl"; diff --git a/components/FullScreenLyrics.tsx b/components/FullScreenLyrics/FullScreenLyrics.tsx similarity index 98% rename from components/FullScreenLyrics.tsx rename to components/FullScreenLyrics/FullScreenLyrics.tsx index 6737f1cf..461acbc3 100644 --- a/components/FullScreenLyrics.tsx +++ b/components/FullScreenLyrics/FullScreenLyrics.tsx @@ -154,15 +154,11 @@ export default function FullScreenLyrics({ }, [setLyricsProgressMs, isPlaying, currentlyPlayingDuration]); useEffect(() => { - if (!isPictureInPictureLyircsCanvas) return; - if (!pictureInPictureCanvas.current) { + if (!isPictureInPictureLyircsCanvas || !pictureInPictureCanvas.current) return; - } const lines = document.querySelectorAll(".line"); const ctx = pictureInPictureCanvas.current.getContext("2d"); - if (!ctx) { - return; - } + if (!ctx) return; const canvasHeight = pictureInPictureCanvas.current.height - 100; ctx.clearRect(0, 100, pictureInPictureCanvas.current.width, canvasHeight); @@ -192,8 +188,8 @@ export default function FullScreenLyrics({ const linesText = getLinesFittingCanvas( ctx, - line.textContent || "", - (pictureInPictureCanvas.current?.width || 10) - 20 + line.textContent ?? "", + (pictureInPictureCanvas.current?.width ?? 10) - 20 ); linesText.forEach((lineText) => { allLines.push({ @@ -219,7 +215,7 @@ export default function FullScreenLyrics({ }); ctx.globalCompositeOperation = "destination-over"; - ctx.fillStyle = lyricsBackgroundColor || "#000"; + ctx.fillStyle = lyricsBackgroundColor ?? "#000"; ctx.fillRect( 0, diff --git a/components/FullScreenLyrics/index.ts b/components/FullScreenLyrics/index.ts new file mode 100644 index 00000000..24b514c4 --- /dev/null +++ b/components/FullScreenLyrics/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FullScreenLyrics"; +export * from "./FullScreenLyrics"; diff --git a/components/FullScreenQueue.tsx b/components/FullScreenQueue/FullScreenQueue.tsx similarity index 98% rename from components/FullScreenQueue.tsx rename to components/FullScreenQueue/FullScreenQueue.tsx index 4aa2887f..506563a7 100644 --- a/components/FullScreenQueue.tsx +++ b/components/FullScreenQueue/FullScreenQueue.tsx @@ -1,7 +1,7 @@ import { ReactElement } from "react"; import { CardTrack, ContentContainer, Heading } from "components"; -import { CardType } from "components/CardTrack/CardTrack"; +import { CardType } from "components/CardTrack"; import { useAuth, useSpotify, useTranslations } from "hooks"; export default function FullScreenQueue(): ReactElement { diff --git a/components/FullScreenQueue/index.ts b/components/FullScreenQueue/index.ts new file mode 100644 index 00000000..56babeb1 --- /dev/null +++ b/components/FullScreenQueue/index.ts @@ -0,0 +1,2 @@ +export { default } from "./FullScreenQueue"; +export * from "./FullScreenQueue"; diff --git a/components/Grid.tsx b/components/Grid/Grid.tsx similarity index 100% rename from components/Grid.tsx rename to components/Grid/Grid.tsx diff --git a/components/Grid/index.ts b/components/Grid/index.ts new file mode 100644 index 00000000..e8a8dd68 --- /dev/null +++ b/components/Grid/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Grid"; +export * from "./Grid"; diff --git a/components/Heading.tsx b/components/Heading/Heading.tsx similarity index 100% rename from components/Heading.tsx rename to components/Heading/Heading.tsx diff --git a/components/Heading/index.ts b/components/Heading/index.ts new file mode 100644 index 00000000..87171029 --- /dev/null +++ b/components/Heading/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Heading"; +export * from "./Heading"; diff --git a/components/Hero.tsx b/components/Hero/Hero.tsx similarity index 100% rename from components/Hero.tsx rename to components/Hero/Hero.tsx diff --git a/components/Hero/index.ts b/components/Hero/index.ts new file mode 100644 index 00000000..45b86275 --- /dev/null +++ b/components/Hero/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Hero"; +export * from "./Hero"; diff --git a/stories/Introduction.stories.mdx b/components/Introduction.stories.mdx similarity index 97% rename from stories/Introduction.stories.mdx rename to components/Introduction.stories.mdx index 3fefa129..4096e8b1 100644 --- a/stories/Introduction.stories.mdx +++ b/components/Introduction.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story } from "@storybook/addon-docs"; import { WithConfiguration } from "../.storybook/decorators/WithConfiguration"; - + # Welcome to Rindu Component Library diff --git a/stories/LikedSongsCard.stories.tsx b/components/LikedSongsCard/LikedSongsCard.stories.tsx similarity index 87% rename from stories/LikedSongsCard.stories.tsx rename to components/LikedSongsCard/LikedSongsCard.stories.tsx index 3040bf7f..ab5c63fa 100644 --- a/stories/LikedSongsCard.stories.tsx +++ b/components/LikedSongsCard/LikedSongsCard.stories.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { mockPlaylistTrackResponse } from "../utils/__tests__/__mocks__/mocks"; import { LikedSongsCard } from "components"; +import { mockPlaylistTrackResponse } from "utils/__tests__/__mocks__/mocks"; export default { title: "Components/LikedSongsCard", component: LikedSongsCard, diff --git a/components/LikedSongsCard.tsx b/components/LikedSongsCard/LikedSongsCard.tsx similarity index 100% rename from components/LikedSongsCard.tsx rename to components/LikedSongsCard/LikedSongsCard.tsx diff --git a/components/__tests__/LikedSongsCard.spec.tsx b/components/LikedSongsCard/__tests__/LikedSongsCard.spec.tsx similarity index 100% rename from components/__tests__/LikedSongsCard.spec.tsx rename to components/LikedSongsCard/__tests__/LikedSongsCard.spec.tsx diff --git a/components/LikedSongsCard/index.ts b/components/LikedSongsCard/index.ts new file mode 100644 index 00000000..ed577866 --- /dev/null +++ b/components/LikedSongsCard/index.ts @@ -0,0 +1,2 @@ +export { default } from "./LikedSongsCard"; +export * from "./LikedSongsCard"; diff --git a/stories/LoadingSpinner.stories.tsx b/components/LoadingSpinner/LoadingSpinner.stories.tsx similarity index 100% rename from stories/LoadingSpinner.stories.tsx rename to components/LoadingSpinner/LoadingSpinner.stories.tsx diff --git a/components/LoadingSpinner.tsx b/components/LoadingSpinner/LoadingSpinner.tsx similarity index 100% rename from components/LoadingSpinner.tsx rename to components/LoadingSpinner/LoadingSpinner.tsx diff --git a/components/LoadingSpinner/index.ts b/components/LoadingSpinner/index.ts new file mode 100644 index 00000000..d75820e3 --- /dev/null +++ b/components/LoadingSpinner/index.ts @@ -0,0 +1,2 @@ +export { default } from "./LoadingSpinner"; +export * from "./LoadingSpinner"; diff --git a/stories/LoginButton.stories.tsx b/components/LoginButton/LoginButton.stories.tsx similarity index 100% rename from stories/LoginButton.stories.tsx rename to components/LoginButton/LoginButton.stories.tsx diff --git a/components/LoginButton.tsx b/components/LoginButton/LoginButton.tsx similarity index 100% rename from components/LoginButton.tsx rename to components/LoginButton/LoginButton.tsx diff --git a/components/LoginButton/index.ts b/components/LoginButton/index.ts new file mode 100644 index 00000000..107daec0 --- /dev/null +++ b/components/LoginButton/index.ts @@ -0,0 +1,2 @@ +export { default } from "./LoginButton"; +export * from "./LoginButton"; diff --git a/stories/Logo.stories.tsx b/components/Logo/Logo.stories.tsx similarity index 100% rename from stories/Logo.stories.tsx rename to components/Logo/Logo.stories.tsx diff --git a/components/Logo.tsx b/components/Logo/Logo.tsx similarity index 100% rename from components/Logo.tsx rename to components/Logo/Logo.tsx diff --git a/components/Logo/index.ts b/components/Logo/index.ts new file mode 100644 index 00000000..3e50dd1d --- /dev/null +++ b/components/Logo/index.ts @@ -0,0 +1,2 @@ +export { default } from "./Logo"; +export * from "./Logo"; diff --git a/components/MainTracks.tsx b/components/MainTracks/MainTracks.tsx similarity index 100% rename from components/MainTracks.tsx rename to components/MainTracks/MainTracks.tsx diff --git a/components/MainTracks/index.ts b/components/MainTracks/index.ts new file mode 100644 index 00000000..d6c602d9 --- /dev/null +++ b/components/MainTracks/index.ts @@ -0,0 +1,2 @@ +export { default } from "./MainTracks"; +export * from "./MainTracks"; diff --git a/components/ModalContainer.tsx b/components/ModalContainer/ModalContainer.tsx similarity index 95% rename from components/ModalContainer.tsx rename to components/ModalContainer/ModalContainer.tsx index 0609cd02..db66ba45 100644 --- a/components/ModalContainer.tsx +++ b/components/ModalContainer/ModalContainer.tsx @@ -10,7 +10,7 @@ import { import { createPortal } from "react-dom"; -import Heading from "./Heading"; +import { Heading } from "components"; import { IModalContext } from "context/ModalContext"; import { useFocusTrap, useTranslations } from "hooks"; import { AsType } from "types/heading"; @@ -82,10 +82,10 @@ function Modal({