feat: ✨ add basic layout

apps/taxes/src/modules/ui/app-columns.tsx

@@ -0,0 +1,22 @@
+import { Box } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const AppColumns = ({
+  top,
+  bottomLeft,
+  bottomRight,
+}: {
+  top: React.ReactNode;
+  bottomLeft: React.ReactNode;
+  bottomRight: React.ReactNode;
+}) => {
+  return (
+    <Box display={"grid"} __gap={"60px"}>
+      <Box>{top}</Box>
+      <Box display={"grid"} gridTemplateColumns={2} gap={10}>
+        <Box>{bottomLeft}</Box>
+        <Box>{bottomRight}</Box>
+      </Box>
+    </Box>
+  );
+};

apps/taxes/src/modules/ui/app-layout.tsx

@@ -0,0 +1,6 @@
+import { Box } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const AppLayout = ({ children }: { children: React.ReactNode }) => {
+  return <Box padding={4}>{children}</Box>;
+};

apps/taxes/src/modules/ui/providers.tsx

@@ -0,0 +1,102 @@
+import { Box, BoxProps, Button, Text } from "@saleor/macaw-ui/next";
+import { useRouter } from "next/router";
+import { trpcClient } from "../trpc/trpc-client";
+import { ProvidersConfig } from "../providers-configuration/providers-config";
+
+const AddProvider = () => {
+  const router = useRouter();
+
+  return (
+    <Box
+      display={"flex"}
+      flexDirection={"column"}
+      gap={6}
+      alignItems={"center"}
+      justifyContent={"center"}
+    >
+      <Text variant="body" __fontWeight={"400"}>
+        No providers configured yet
+      </Text>
+      <Button onClick={() => router.push("/providers/new")}>Add first provider</Button>
+    </Box>
+  );
+};
+
+const ProvidersSkeleton = () => {
+  return (
+    <Box display={"flex"} alignItems={"center"} justifyContent={"center"}>
+      Skeleton...
+    </Box>
+  );
+};
+
+const MOCKED_PROVIDERS: ProvidersConfig = [
+  {
+    provider: "taxjar",
+    config: {
+      name: "taxjar-1",
+      apiKey: "1234",
+      isSandbox: true,
+    },
+    id: "1",
+  },
+];
+
+const Table = {
+  Container: (props: BoxProps) => <Box __textAlign={"left"} width="100%" {...props} as="table" />,
+  THead: (props: BoxProps) => <Box {...props} as="thead" />,
+  TR: (props: BoxProps) => <Box {...props} as="tr" />,
+  TH: (props: BoxProps) => (
+    <Box fontWeight={"captionSmall"} fontSize={"captionSmall"} {...props} as="th" />
+  ),
+  TBody: (props: BoxProps) => <Box {...props} as="tbody" />,
+  TD: (props: BoxProps) => <Box fontSize="bodyMedium" {...props} as="td" />,
+};
+
+const ProvidersList = () => {
+  const providers = MOCKED_PROVIDERS;
+
+  return (
+    <Table.Container>
+      <Table.THead color={"textNeutralSubdued"}>
+        <Table.TR>
+          <Table.TH>Name</Table.TH>
+          <Table.TH>Provider</Table.TH>
+          <Table.TH>Status</Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        {providers.map((provider) => (
+          <Table.TR>
+            <Table.TD>{provider.config.name}</Table.TD>
+            <Table.TD>{provider.provider}</Table.TD>
+            <Table.TD>Active</Table.TD>
+          </Table.TR>
+        ))}
+      </Table.TBody>
+    </Table.Container>
+  );
+};
+
+export const Providers = () => {
+  const { data, isFetching } = trpcClient.providersConfiguration.getAll.useQuery();
+  const isProvider = (data?.length ?? 0) > 0;
+
+  return (
+    <Box
+      borderRadius={4}
+      borderWidth={1}
+      borderColor={"neutralPlain"}
+      borderStyle={"solid"}
+      padding={8}
+      __minHeight={"320px"}
+    >
+      {isFetching ? (
+        <ProvidersSkeleton />
+      ) : (
+        // <>{!isProvider ? <AddProvider /> : <ProvidersList />}</>
+        <ProvidersList />
+      )}
+    </Box>
+  );
+};

apps/taxes/src/pages/_app.tsx

@@ -10,6 +10,7 @@ import { useEffect } from "react";
 import { ThemeSynchronizer } from "../lib/theme-synchronizer";
 import { trpcClient } from "../modules/trpc/trpc-client";
 import { GraphQLProvider } from "../providers/GraphQLProvider";
+import { AppLayout } from "../modules/ui/app-layout";
 import { NoSSRWrapper } from "@saleor/apps-shared";
 
 /**
@@ -37,7 +38,9 @@ function NextApp({ Component, pageProps }: AppProps) {
           <ThemeProvider>
             <ThemeSynchronizer />
             <RoutePropagator />
-            <Component {...pageProps} />
+            <AppLayout>
+              <Component {...pageProps} />
+            </AppLayout>
           </ThemeProvider>
         </GraphQLProvider>
       </AppBridgeProvider>

apps/taxes/src/pages/configuration.tsx

@@ -1,5 +1,39 @@
+import { Box, Text } from "@saleor/macaw-ui/next";
+import { AppColumns } from "../modules/ui/app-columns";
+import { Providers } from "../modules/ui/providers";
+
+const Header = () => {
+  return (
+    <Box as="header" display="flex" flexDirection={"column"} gap={6}>
+      <Text as="h1" variant="hero">
+        Configuration
+      </Text>
+      <Text as="p" variant="body" __fontWeight={"400"}>
+        Please configure the app by connecting one of the supported tax providers.
+      </Text>
+    </Box>
+  );
+};
+
+const Intro = () => {
+  return (
+    <Box display="flex" flexDirection={"column"} gap={10}>
+      <Text as="h2" variant="heading">
+        Tax providers
+      </Text>
+      <Text as="p" variant="body" __fontWeight={"400"}>
+        Manage providers configuration to connect Saleor with providers.
+      </Text>
+    </Box>
+  );
+};
+
 const ConfigurationPage = () => {
-  return <main>Configuration</main>;
+  return (
+    <main>
+      <AppColumns top={<Header />} bottomLeft={<Intro />} bottomRight={<Providers />} />
+    </main>
+  );
 };
 
 export default ConfigurationPage;

apps/taxes/src/pages/providers/new.tsx

@@ -0,0 +1,5 @@
+const NewProviderPage = () => {
+  return <div>new</div>;
+};
+
+export default NewProviderPage;