Refactor of files structure in components directories (saleor#159)

components/AccountLayout.tsx → components/AccountLayout/AccountLayout.tsx

@@ -6,7 +6,9 @@ import { Layout, Spinner } from "@/components";
 import { NavigationPanel } from "@/components/NavigationPanel";
 import { usePaths } from "@/lib/paths";
 
-export const AccountLayout = ({ children }: PropsWithChildren<{}>) => {
+export interface AccountLayoutProps extends PropsWithChildren<{}> {}
+
+export const AccountLayout = ({ children }: AccountLayoutProps) => {
   const router = useRouter();
   const paths = usePaths();
   const { authenticated, authenticating } = useAuthState();

components/AccountLayout/index.ts

@@ -0,0 +1,2 @@
+export type { AccountLayoutProps } from "./AccountLayout";
+export { AccountLayout } from "./AccountLayout";

components/AddressBookCard.tsx → components/AddressBookCard/AddressBookCard.tsx

@@ -8,9 +8,9 @@ import {
   useSetAddressDefaultMutation,
 } from "@/saleor/api";
 
-import { messages } from "./translations";
+import { messages } from "../translations";
 
-interface AddressBookCardProps {
+export interface AddressBookCardProps {
   address: AddressDetailsFragment;
   onRefreshBook: () => void;
 }

components/AddressBookCard/index.ts

@@ -0,0 +1,2 @@
+export type { AddressBookCardProps } from "./AddressBookCard";
+export { AddressBookCard } from "./AddressBookCard";

components/Button/Button.tsx

@@ -0,0 +1,11 @@
+import clsx from "clsx";
+import { HTMLAttributes, ReactNode } from "react";
+
+const styles = `bg-blue-100 border border-blue-300 rounded-md shadow-sm py-2 px-4 text-sm font-medium hover:bg-blue-200`;
+
+export interface ButtonProps
+  extends Pick<HTMLAttributes<{}>, "className" | "onClick" | "children"> {}
+
+export const Button = ({ className, ...rest }: ButtonProps) => (
+  <button className={clsx(styles, className)} {...rest} />
+);

components/Button/index.ts

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

components/CartSummary.tsx → components/CartSummary/CartSummary.tsx

@@ -7,8 +7,8 @@ import {
   useCheckoutAddPromoCodeMutation,
 } from "@/saleor/api";
 
-import { useRegions } from "./RegionsProvider";
-import { messages } from "./translations";
+import { useRegions } from "../RegionsProvider";
+import { messages } from "../translations";
 
 export interface PromoCodeFormData {
   promoCode: string;

components/CartSummary/index.tsx

@@ -0,0 +1,2 @@
+export type { CartSummaryProps } from "./CartSummary";
+export { CartSummary } from "./CartSummary";

components/CheckoutLineItem.tsx → components/CheckoutLineItem/CheckoutLineItem.tsx

@@ -13,9 +13,9 @@ import {
   useRemoveProductFromCheckoutMutation,
 } from "@/saleor/api";
 
-import { usePaths } from "../lib/paths";
-import { useRegions } from "./RegionsProvider";
-import { messages } from "./translations";
+import { usePaths } from "../../lib/paths";
+import { useRegions } from "../RegionsProvider";
+import { messages } from "../translations";
 
 interface CheckoutLineItemProps {
   line: CheckoutLineDetailsFragment;
@@ -160,4 +160,5 @@ export const CheckoutLineItem = ({ line }: CheckoutLineItemProps) => {
     </>
   );
 };
+
 export default CheckoutLineItem;

components/CheckoutLineItem/index.ts

@@ -0,0 +1 @@
+export { CheckoutLineItem } from "./CheckoutLineItem";

components/DemoBanner/index.ts

@@ -0,0 +1 @@
+export { default } from "./DemoBanner";

components/HamburgerButton.tsx → components/HamburgerButton/HamburgerButton.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-interface HamburgerButtonProps {
+export interface HamburgerButtonProps {
   onClick: (ev: any) => void;
   active?: boolean;
 }

components/HamburgerButton/index.ts

@@ -0,0 +1,2 @@
+export type { HamburgerButtonProps } from "./HamburgerButton";
+export { HamburgerButton } from "./HamburgerButton";

components/HomepageBlock.tsx → components/HomepageBlock/HomepageBlock.tsx

@@ -7,8 +7,9 @@ import { usePaths } from "@/lib/paths";
 import { translate } from "@/lib/translations";
 import { HomepageBlockFragment, ProductFilterInput } from "@/saleor/api";
 
-import { ProductCollection, RichText } from ".";
-import { messages } from "./translations";
+import { ProductCollection } from "../ProductCollection";
+import { RichText } from "../RichText";
+import { messages } from "../translations";
 
 export interface HomepageBlockProps {
   menuItem: HomepageBlockFragment;

components/HomepageBlock/index.ts

@@ -0,0 +1,2 @@
+export type { HomepageBlockProps } from "./HomepageBlock";
+export { HomepageBlock } from "./HomepageBlock";

components/Layout.tsx → components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import { Navbar } from ".";
+import { Navbar } from "../Navbar";
 
 export interface LayoutProps {
   children?: React.ReactNode;

components/Layout/index.ts

@@ -0,0 +1,2 @@
+export type { LayoutProps } from "./Layout";
+export { Layout } from "./Layout";

components/MainMenu.tsx → components/MainMenu/MainMenu.tsx

@@ -6,9 +6,9 @@ import { translate } from "@/lib/translations";
 import { notNullable } from "@/lib/util";
 import { MenuItemFragment, useMainMenuQuery } from "@/saleor/api";
 
-import { usePaths } from "../lib/paths";
-import { HamburgerButton } from "./HamburgerButton";
-import { useRegions } from "./RegionsProvider";
+import { usePaths } from "../../lib/paths";
+import { HamburgerButton } from "../HamburgerButton";
+import { useRegions } from "../RegionsProvider";
 
 export const MainMenu = () => {
   const paths = usePaths();

components/MainMenu/index.ts

@@ -0,0 +1 @@
+export { MainMenu } from "./MainMenu";

components/Navbar.tsx → components/Navbar/Navbar.tsx

@@ -16,9 +16,9 @@ import { usePaths } from "@/lib/paths";
 import { useCheckout } from "@/lib/providers/CheckoutProvider";
 import { CheckoutLine, CheckoutLineDetailsFragment } from "@/saleor/api";
 
-import { RegionDialog } from "./RegionDialog";
-import { useRegions } from "./RegionsProvider";
-import { messages } from "./translations";
+import { RegionDialog } from "../RegionDialog";
+import { useRegions } from "../RegionsProvider";
+import { messages } from "../translations";
 
 export const Navbar = () => {
   const paths = usePaths();

components/Navbar/index.ts

@@ -0,0 +1 @@
+export { Navbar } from "./Navbar";

components/NavigationPanel.tsx → components/NavigationPanel/NavigationPanel.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { usePaths } from "../lib/paths";
-import { messages } from "./translations";
+import { usePaths } from "../../lib/paths";
+import { messages } from "../translations";
 
 export const NavigationPanel = () => {
   const paths = usePaths();

components/NavigationPanel/index.ts

@@ -0,0 +1 @@
+export { NavigationPanel } from "./NavigationPanel";

components/OrdersTable.tsx → components/OrdersTable/OrdersTable.tsx

@@ -3,9 +3,9 @@ import { useRouter } from "next/router";
 import { usePaths } from "@/lib/paths";
 import { OrderDetailsFragment } from "@/saleor/api";
 
-import { useRegions } from "./RegionsProvider";
+import { useRegions } from "../RegionsProvider";
 
-interface OrdersTableProps {
+export interface OrdersTableProps {
   orders: OrderDetailsFragment[];
 }
 

components/OrdersTable/index.ts

@@ -0,0 +1,2 @@
+export type { OrdersTableProps } from "./OrdersTable";
+export { OrdersTable } from "./OrdersTable";

components/PageHero.tsx → components/PageHero/PageHero.tsx

@@ -6,7 +6,7 @@ import {
   CollectionDetailsFragment,
 } from "@/saleor/api";
 
-import { RichText } from "./RichText";
+import { RichText } from "../RichText";
 
 export interface PageHeroProps {
   entity: CollectionDetailsFragment | CategoryDetailsFragment;

components/PageHero/index.ts

@@ -0,0 +1,2 @@
+export type { PageHeroProps } from "./PageHero";
+export { PageHero } from "./PageHero";

components/Pagination.tsx → components/Pagination/Pagination.tsx

@@ -2,7 +2,7 @@ import { useIntl } from "react-intl";
 
 import { PageInfo } from "@/saleor/api";
 
-import { messages } from "./translations";
+import { messages } from "../translations";
 
 export interface PaginationProps {
   pageInfo?: PageInfo;

components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export type { PaginationProps } from "./Pagination";
+export { Pagination } from "./Pagination";

components/ProductCard.tsx → components/ProductCard/ProductCard.tsx

@@ -5,7 +5,7 @@ import { usePaths } from "@/lib/paths";
 import { translate } from "@/lib/translations";
 import { ProductCardFragment } from "@/saleor/api";
 
-import { useRegions } from "./RegionsProvider";
+import { useRegions } from "../RegionsProvider";
 
 const styles = {
   grid: `grid grid-cols-4 gap-4`,

components/ProductCard/index.ts

@@ -0,0 +1,2 @@
+export type { ProductCardProps } from "./ProductCard";
+export { ProductCard } from "./ProductCard";

components/ProductCollection.tsx → components/ProductCollection/ProductCollection.tsx

@@ -3,11 +3,11 @@ import { useIntl } from "react-intl";
 
 import { ProductFilterInput, useProductCollectionQuery } from "@/saleor/api";
 
-import { Pagination } from "./Pagination";
-import { ProductCard } from "./ProductCard";
-import { useRegions } from "./RegionsProvider";
-import { Spinner } from "./Spinner";
-import { messages } from "./translations";
+import { Pagination } from "../Pagination";
+import { ProductCard } from "../ProductCard";
+import { useRegions } from "../RegionsProvider";
+import { Spinner } from "../Spinner";
+import { messages } from "../translations";
 
 export interface ProductCollectionProps {
   filter?: ProductFilterInput;

components/ProductCollection/index.ts

@@ -0,0 +1,2 @@
+export type { ProductCollectionProps } from "./ProductCollection";
+export { ProductCollection } from "./ProductCollection";

components/RegionDialog/RegionDialog.tsx

@@ -10,7 +10,7 @@ import { Button } from "../Button";
 import { useRegions } from "../RegionsProvider";
 import { messages } from "../translations";
 
-interface RegionDialogProps {
+export interface RegionDialogProps {
   onClose: () => void;
   isOpen: boolean;
 }

components/RichText/index.ts

@@ -0,0 +1 @@
+export { RichText } from "./RichText";

components/Spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";