feat(slice-machine): add GitHub settings page

prismicio · Jan 31, 2024 · fe9d3e5 · fe9d3e5
1 parent c4705c8
commit fe9d3e5
Show file tree

Hide file tree

Showing 17 changed files with 1,286 additions and 70 deletions.
diff --git a/packages/manager/src/index.ts b/packages/manager/src/index.ts
@@ -13,6 +13,8 @@ export { createSliceMachineManager } from "./managers/createSliceMachineManager"
 export { createSliceMachineManagerMiddleware } from "./managers/createSliceMachineManagerMiddleware";
 export type { CreateSliceMachineManagerMiddlewareArgs } from "./managers/createSliceMachineManagerMiddleware";
 
+export type { GitOwner, GitRepo, GitRepoSpecifier } from "./managers/git/types";
+
 export type {
 	Environment,
 	PushChangesLimit,

diff --git a/packages/manager/src/managers/git/GitManager.ts b/packages/manager/src/managers/git/GitManager.ts
@@ -14,15 +14,15 @@ import {
 
 import { BaseManager } from "../BaseManager";
 
-import { GitRepo, GitRepoSpecifier, Owner } from "./types";
+import { GitOwner, GitRepo, GitRepoSpecifier } from "./types";
 import { buildGitRepoSpecifier } from "./buildGitRepoSpecifier";
 
 type GitManagerCreateGitHubAuthStateReturnType = {
 	key: string;
 	expiresAt: Date;
 };
 
-type GitManagerFetchOwnersReturnType = Owner[];
+type GitManagerFetchOwnersReturnType = GitOwner[];
 
 type GitManagerFetchReposReturnType = GitRepo[];
 

diff --git a/packages/manager/src/managers/git/types.ts b/packages/manager/src/managers/git/types.ts
@@ -1,4 +1,4 @@
-export type Owner = {
+export type GitOwner = {
 	provider: "gitHub";
 	id: string;
 	name: string;

diff --git a/packages/slice-machine/components/Navigation/index.tsx b/packages/slice-machine/components/Navigation/index.tsx
@@ -8,6 +8,7 @@ import { telemetry } from "@src/apiClient";
 import VideoItem from "@components/Navigation/VideoItem";
 import { LightningIcon } from "@src/icons/Lightning";
 import { MathPlusIcon } from "@src/icons/MathPlusIcon";
+import { SettingsIcon } from "@src/icons/SettingsIcon";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import {
   SideNavSeparator,
@@ -141,21 +142,11 @@ const Navigation: FC = () => {
       )}
 
       <SideNavList position="bottom">
-        <SideNavListItem>
-          <SideNavLink
-            title="Settings"
-            href="/settings"
-            Icon={(props) => <MathPlusIcon {...props} />}
-            active={router.asPath.startsWith("/settings")}
-            component={Link}
-          />
-        </SideNavListItem>
-
         <SideNavListItem>
           <SideNavLink
             title="Invite team"
             href={`${repositoryUrl}/settings/users`}
-            Icon={(props) => <MathPlusIcon {...props} />}
+            Icon={MathPlusIcon}
             onClick={() => {
               void telemetry.track({
                 event: "users-invite-button-clicked",
@@ -174,11 +165,21 @@ const Navigation: FC = () => {
           </Suspense>
         </ErrorBoundary>
 
+        <SideNavListItem>
+          <SideNavLink
+            title="Settings"
+            href="/settings"
+            Icon={SettingsIcon}
+            active={router.asPath.startsWith("/settings")}
+            component={Link}
+          />
+        </SideNavListItem>
+
         <SideNavListItem>
           <SideNavLink
             title="Changelog"
             href="/changelog"
-            Icon={(props) => <LightningIcon {...props} />}
+            Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             component={Link}
             RightElement={

diff --git a/packages/slice-machine/package.json b/packages/slice-machine/package.json
@@ -104,6 +104,9 @@
     "next-router-mock": "0.8.0",
     "node-fetch": "3.3.1",
     "parse-multipart-data": "1.5.0",
+    "postcss": "8.4.21",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-preset-env": "9.3.0",
     "rc-drawer": "4.4.3",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",

diff --git a/packages/slice-machine/pages/settings.tsx b/packages/slice-machine/pages/settings.tsx
@@ -1,32 +1 @@
-import React from "react";
-import Head from "next/head";
-import { BaseStyles } from "theme-ui";
-import {
-  AppLayout,
-  AppLayoutBreadcrumb,
-  AppLayoutContent,
-  AppLayoutHeader,
-} from "@components/AppLayout";
-import { ConnectGitRepository } from "@src/features/git/ConnectGitRepository/ConnectGitRepository";
-
-const Settings: React.FC = () => {
-  return (
-    <>
-      <Head>
-        <title>Settings - Slice Machine</title>
-      </Head>
-      <AppLayout>
-        <AppLayoutHeader>
-          <AppLayoutBreadcrumb folder="Settings" />
-        </AppLayoutHeader>
-        <AppLayoutContent>
-          <BaseStyles sx={{ display: "flex", flexDirection: "column" }}>
-            <ConnectGitRepository />
-          </BaseStyles>
-        </AppLayoutContent>
-      </AppLayout>
-    </>
-  );
-};
-
-export default Settings;
+export { SettingsPage as default } from "@src/features/settings/SettingsPage";
diff --git a/packages/slice-machine/postcss.config.js b/packages/slice-machine/postcss.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    "postcss-flexbugs-fixes": true,
+    "postcss-preset-env": {
+      autoprefixer: { flexbox: "no-2009" },
+      features: { "custom-properties": false, "nesting-rules": true },
+      stage: 3,
+    },
+  },
+};
diff --git a/packages/slice-machine/src/components/FieldSet/FieldSet.stories.tsx b/packages/slice-machine/src/components/FieldSet/FieldSet.stories.tsx
@@ -193,11 +193,14 @@ export const WithHeaderAndBoxContent = {
           <OwnerSelect />
         </FieldSetHeader>
         <FieldSetContent>
-          {/*
-           * TODO: these `padding` values actually don't match Figma, but they
-           * are the closest allowed by the `Box` component.
-           */}
-          <Box flexDirection="column" padding={{ block: 72, inline: 100 }}>
+          <Box
+            flexDirection="column"
+            /*
+             * TODO: these `padding` values actually don't match Figma, but they
+             * are the closest allowed by the `Box` component.
+             */
+            padding={{ block: 72, inline: 100 }}
+          >
             <Text align="center" variant="emphasized">
               No Results Found
             </Text>
@@ -230,12 +233,18 @@ function OwnerSelect(props: OwnerSelectProps) {
       size="large"
       sx={{ width: "calc(50% - 8px)" }}
     >
-      <SelectItem size="large" value="owner-1">
-        Owner
-      </SelectItem>
-      <SelectItem size="large" value="owner-2">
-        Owner
-      </SelectItem>
+      {[...Array(2).keys()].map((index) => (
+        <SelectItem
+          key={index}
+          renderStartIcon={() => (
+            <GitHubIcon color={tokens.color.greyLight11} />
+          )}
+          size="large"
+          value={`owner-${index}`}
+        >
+          Owner
+        </SelectItem>
+      ))}
     </Select>
   );
 }
diff --git a/packages/slice-machine/src/features/settings/SettingsPage.tsx b/packages/slice-machine/src/features/settings/SettingsPage.tsx
@@ -0,0 +1,29 @@
+import { Box } from "@prismicio/editor-ui";
+import Head from "next/head";
+import type { FC } from "react";
+
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@components/AppLayout";
+import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
+
+export const SettingsPage: FC = () => (
+  <>
+    <Head>
+      <title>Settings - Slice Machine</title>
+    </Head>
+    <AppLayout>
+      <AppLayoutHeader>
+        <AppLayoutBreadcrumb folder="Settings" />
+      </AppLayoutHeader>
+      <AppLayoutContent>
+        <Box flexDirection="column" maxWidth={600}>
+          <ConnectGitRepository />
+        </Box>
+      </AppLayoutContent>
+    </AppLayout>
+  </>
+);