feat(slice-machine): add GitHub settings page

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,

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[];
 

packages/manager/src/managers/git/types.ts

@@ -1,4 +1,4 @@
-export type Owner = {
+export type GitOwner = {
 	provider: "gitHub";
 	id: string;
 	name: string;

packages/slice-machine/.depcheckrc

@@ -6,6 +6,9 @@ ignores:
     "@vitest/coverage-v8",
     "monocle-ts",
     "newtype-ts",
+    "postcss",
+    "postcss-flexbugs-fixes",
+    "postcss-preset-env",
     "semver",
     "start-slicemachine",
     "stylelint-config-css-modules",

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={

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

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";

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,
+    },
+  },
+};

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>
   );
 }

packages/slice-machine/src/components/RelativeTime/RelativeTime.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RelativeTime } from "./RelativeTime";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: RelativeTime,
+  argTypes: {
+    date: { control: "date" },
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    date: new Date("1 Jan 2024"),
+  },
+  render: ({ date, ...otherArgs }) => (
+    // The `date` control converts the `date` arg into a UNIX timestamp. That's
+    // why we need to convert it back into a `Date` object.
+    <RelativeTime {...otherArgs} date={new Date(date)} />
+  ),
+} satisfies Story;

packages/slice-machine/src/components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,40 @@
+import { Text } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+type RelativeTimeProps = {
+  date: Date;
+};
+
+export const RelativeTime: FC<RelativeTimeProps> = ({
+  date,
+  ...otherProps
+}) => (
+  <Text {...otherProps} color="inherit" variant="inherit">
+    {formatRelativeTime(date)}
+  </Text>
+);
+
+const rtf = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto",
+  style: "narrow",
+});
+
+function formatRelativeTime(date: Date, now = new Date()): string {
+  return rtf.format(differenceInCalendarDays(date, now), "day");
+}
+
+const millisecondsInDay = 1_000 * 60 * 60 * 24;
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/differenceInCalendarDays/index.ts.
+function differenceInCalendarDays(dateLeft: Date, dateRight: Date): number {
+  const startOfDayLeft = startOfDay(dateLeft);
+  const startOfDayRight = startOfDay(dateRight);
+  return Math.round((+startOfDayLeft - +startOfDayRight) / millisecondsInDay);
+}
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/startOfDay/index.ts.
+function startOfDay(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}

packages/slice-machine/src/components/RelativeTime/index.ts

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