change components to folder structure (#203)

.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",

components/ArtistList/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ArtistList";
+export * from "./ArtistList";

stories/BigPill.stories.tsx → 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",

components/BigPill/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./BigPill";
+export * from "./BigPill";

components/BrowseCategories/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./BrowseCategories";
+export * from "./BrowseCategories";

components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export * from "./Button";

components/CardContainer/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardContainer";
+export * from "./CardContainer";

components/CardContent/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardContent";
+export * from "./CardContent";

components/CardContentContextMenu.tsx → 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";

components/__tests__/CardContentContextMenu.spec.tsx → 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",
       },

components/CardContentContextMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardContentContextMenu";
+export * from "./CardContentContextMenu";

components/CardSubTitle.tsx → 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) {

components/CardSubTitle/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardSubTitle";
+export * from "./CardSubTitle";

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,

components/CardTrack/index.ts

@@ -1 +1,2 @@
-export { default as CardTrack } from "./CardTrack";
+export { default } from "./CardTrack";
+export * from "./CardTrack";

components/CardTrackContextMenu.tsx → 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,

components/CardTrackContextMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CardTrackContextMenu";
+export * from "./CardTrackContextMenu";

stories/Carousel.stories.tsx → 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;
 

components/Carousel/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Carousel";
+export * from "./Carousel";

components/CarouselCards.tsx → 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,

components/__tests__/CarouselCards.spec.tsx → 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]";

components/CarouselCards/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CarouselCards";
+export * from "./CarouselCards";

components/__tests__/CheckBoxControl.spec.tsx → 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", () => {

components/CheckBoxControl/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./CheckBoxControl";
+export * from "./CheckBoxControl";

components/__tests__/ContentContainer.spec.tsx → 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", () => {

components/ContentContainer/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ContentContainer";
+export * from "./ContentContainer";

stories/ContextMenu.stories.tsx → 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 {

components/ContextMenu.tsx → 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 {

components/ContextMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ContextMenu";
+export * from "./ContextMenu";

components/DeviceConnectControl/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./DeviceConnectControl";
+export * from "./DeviceConnectControl";

components/EditPlaylistDetails/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./EditPlaylistDetails";
+export * from "./EditPlaylistDetails";

components/EmbedModal.tsx → 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";
 

components/EmbedModal/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./EmbedModal";
+export * from "./EmbedModal";

components/EpisodeCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./EpisodeCard";
+export * from "./EpisodeCard";

components/ExplicitSign/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ExplicitSign";
+export * from "./ExplicitSign";

components/Eyebrow/Eyebrow.tsx

@@ -0,0 +1,58 @@
+import React, { PropsWithChildren, ReactElement } from "react";
+
+interface EyebrowProps {
+  size?: "small" | "medium" | "large";
+}
+
+const eyebrowStyles: Record<
+  Required<EyebrowProps>["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<EyebrowProps>): ReactElement {
+  const eyebrowStyle = eyebrowStyles[size] || eyebrowStyles.large;
+
+  return (
+    <p
+      className="eyebrow"
+      style={{
+        fontSize: eyebrowStyle.fontSize,
+        marginBottom: eyebrowStyle.marginBottom,
+        fontWeight: eyebrowStyle.fontWeight,
+        color: eyebrowStyle.color,
+      }}
+    >
+      {children}
+      <style jsx>
+        {`
+          .eyebrow {
+            margin-top: 4px;
+            padding: 0.08em 0px;
+          }
+        `}
+      </style>
+    </p>
+  );
+}

components/Eyebrow/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Eyebrow";
+export * from "./Eyebrow";

components/FeatureCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FeatureCard";
+export * from "./FeatureCard";

stories/FirstTrackContainer.stories.tsx → 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 {

components/FirstTrackContainer/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FirstTrackContainer";
+export * from "./FirstTrackContainer";

components/FollowButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FollowButton";
+export * from "./FollowButton";

components/Footer/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Footer";
+export * from "./Footer";

components/FormToggle/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FormToggle";
+export * from "./FormToggle";

components/FullScreenControl/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./FullScreenControl";
+export * from "./FullScreenControl";