feat(slice-machine): add GitHub settings page

prismicio · Jan 29, 2024 · df4937e · df4937e
1 parent c4705c8
commit df4937e
Show file tree

Hide file tree

Showing 8 changed files with 871 additions and 47 deletions.
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/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>
+  </>
+);
diff --git a/packages/slice-machine/src/features/settings/git/ConnectGitRepository.tsx b/packages/slice-machine/src/features/settings/git/ConnectGitRepository.tsx
@@ -0,0 +1,23 @@
+import { IconButton } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+import {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetLegend,
+} from "@src/components/FieldSet";
+
+export const ConnectGitRepository: FC = () => (
+  <FieldSet>
+    <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+    <ConnectGitRepositoryContent />
+    <FieldSetFooter action={<IconButton icon="openInNew" />}>
+      Learn more about Prismic for Git
+    </FieldSetFooter>
+  </FieldSet>
+);
+
+const ConnectGitRepositoryContent: FC = () => (
+  <FieldSetContent>TODO</FieldSetContent>
+);
diff --git a/packages/slice-machine/src/icons/SettingsIcon.tsx b/packages/slice-machine/src/icons/SettingsIcon.tsx
@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const SettingsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12ZM14 9C15.4865 9 16.7205 10.0811 16.9585 11.5H23.5C23.7761 11.5 24 11.7239 24 12C24 12.2761 23.7761 12.5 23.5 12.5H16.9585C16.7205 13.9189 15.4865 15 14 15C12.5135 15 11.2795 13.9189 11.0415 12.5H8.5C8.22386 12.5 8 12.2761 8 12C8 11.7239 8.22386 11.5 8.5 11.5H11.0415C11.2795 10.0811 12.5135 9 14 9ZM21 20C21 21.1046 20.1046 22 19 22C17.8954 22 17 21.1046 17 20C17 18.8954 17.8954 18 19 18C20.1046 18 21 18.8954 21 20ZM16.0415 20.5C16.2795 21.9189 17.5135 23 19 23C20.4865 23 21.7205 21.9189 21.9585 20.5H23.5C23.7761 20.5 24 20.2761 24 20C24 19.7239 23.7761 19.5 23.5 19.5H21.9585C21.7205 18.0811 20.4865 17 19 17C17.5135 17 16.2795 18.0811 16.0415 19.5H8.5C8.22386 19.5 8 19.7239 8 20C8 20.2761 8.22386 20.5 8.5 20.5H16.0415Z"
+      fill="currentColor"
+    />
+  </svg>
+);