add editor wiring and styling updates

packages/design-system/atoms/halfsies/Halfsies.tsx

@@ -1,13 +1,6 @@
 import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
 import styled, { css } from 'styled-components';
 
-export const HalfsiesContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-`;
-
 export const HalfsiesItem = styled.div`
   box-sizing: border-box;
   flex: 1 1 100%;
@@ -15,3 +8,16 @@ export const HalfsiesItem = styled.div`
     flex: 1 2 50%;
   `)}
 `;
+
+export const HalfsiesContainer = styled.div<{ center?: boolean }>`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  ${({ center }) =>
+    center &&
+    css`
+      align-content: center;
+    `}
+`;

packages/design-system/atoms/tab-view/TabView.styled.ts

@@ -22,8 +22,9 @@ export const TabTitleRow = styled.div`
   position: fixed;
   ${onSmallScreen(
     css`
+      width: fit-content;
       position: unset;
-      max-width: 100vw;
+      max-width: 98vw;
     `
   )}
 `;

packages/design-system/atoms/tab-view/TabView.tsx

@@ -10,6 +10,7 @@ import {
 export type TabViewProps = {
   children: React.ReactNode[];
   initialTab?: number;
+  masthead?: React.ReactNode;
 };
 
 type TabProps = {
@@ -39,6 +40,7 @@ export const TabView = (props: TabViewProps) => {
   return (
     <TabViewStyled>
       <TabTitleRow>
+        {props.masthead && props.masthead}
         <QuickNav
           currentNavItem={tabNames[currentTab]}
           navItems={tabNames}

packages/design-system/molecules/editor-masthead/EditorMasthead.tsx

@@ -0,0 +1,43 @@
+import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
+import { Text } from '@roleypoly/design-system/atoms/typography';
+import { PresentableGuild } from '@roleypoly/types';
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from '../../atoms/breakpoints';
+
+type EditorMastheadProps = {
+  guild: PresentableGuild;
+  onSubmit: () => void;
+  onReset: () => void;
+  showSaveReset: boolean;
+};
+
+const MastheadContainer = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: start;
+  padding-bottom: 0.5em;
+  ${Text} {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 0.5em;
+  }
+
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const EditorMasthead = (props: EditorMastheadProps) => (
+  <MastheadContainer>
+    <Avatar
+      size={34}
+      hash={props.guild.guild.icon}
+      src={avatarUtils.avatarHash(props.guild.id, props.guild.guild.icon, 'icons')}
+    >
+      {avatarUtils.initialsFromName(props.guild.guild.name)}
+    </Avatar>
+    <Text>Server Editor</Text>
+  </MastheadContainer>
+);

packages/design-system/molecules/editor-masthead/index.ts

@@ -0,0 +1 @@
+export * from './EditorMasthead';

packages/design-system/molecules/reset-submit/ResetSubmit.stories.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ResetSubmit } from './ResetSubmit';
+import { InlineResetSubmit, ResetSubmit } from './ResetSubmit';
 
 export default {
-  title: 'Molecules',
+  title: 'Molecules/Reset and Submit',
   component: ResetSubmit,
 };
 
-export const ResetAndSubmit = (args) => <ResetSubmit {...args} />;
+export const normal = (args) => <ResetSubmit {...args} />;
+export const inline = (args) => <InlineResetSubmit {...args} />;

packages/design-system/molecules/reset-submit/ResetSubmit.styled.ts

@@ -1,19 +0,0 @@
-import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
-import styled from 'styled-components';
-
-export const Buttons = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-export const Left = styled.div`
-  flex: 0;
-  ${onSmallScreen`
-    flex: 1 1 100%; 
-    order: 2;
-  `}
-`;
-
-export const Right = styled.div`
-  flex: 1;
-`;

packages/design-system/molecules/reset-submit/ResetSubmit.tsx

@@ -2,7 +2,7 @@ import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
 import { Button } from '@roleypoly/design-system/atoms/button';
 import * as React from 'react';
 import { MdRestore } from 'react-icons/md';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 type Props = {
   onSubmit: () => void;
@@ -22,8 +22,14 @@ const Left = styled.div`
   `}
 `;
 
-const Right = styled.div`
+const Right = styled.div<{ inline?: boolean }>`
   flex: 1;
+
+  ${(props) =>
+    props.inline &&
+    css`
+      padding-left: 0.2em;
+    `}
 `;
 
 export const ResetSubmit = (props: Props) => {
@@ -40,3 +46,20 @@ export const ResetSubmit = (props: Props) => {
     </Buttons>
   );
 };
+
+export const InlineResetSubmit = (props: Props) => {
+  return (
+    <Buttons>
+      <Left>
+        <Button color="muted" size="small" icon={<MdRestore />} onClick={props.onReset}>
+          Reset
+        </Button>
+      </Left>
+      <Right inline>
+        <Button onClick={props.onSubmit} size="small">
+          Submit
+        </Button>
+      </Right>
+    </Buttons>
+  );
+};

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -1,7 +1,10 @@
+import { Space } from '@roleypoly/design-system/atoms/space';
 import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
+import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead';
 import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
 import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
 import { Category, PresentableGuild } from '@roleypoly/types';
+import deepEqual from 'deep-equal';
 import React from 'react';
 
 export type EditorShellProps = {
@@ -34,23 +37,35 @@ export const EditorShell = (props: EditorShellProps) => {
     });
   };
 
+  const hasChanges = React.useMemo(() => !deepEqual(guild.data, props.guild.data), [
+    guild.data,
+    props.guild.data,
+  ]);
+
   return (
-    <TabView initialTab={0}>
-      <Tab title="Guild Details">
-        {() => (
-          <EditorDetailsTab {...props} guild={guild} onMessageChange={onMessageChange} />
-        )}
-      </Tab>
-      <Tab title="Categories & Roles">
-        {() => (
-          <EditorCategoriesTab
-            {...props}
-            guild={guild}
-            onCategoryChange={onCategoryChange}
-          />
-        )}
-      </Tab>
-      <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
-    </TabView>
+    <div>
+      <Space />
+      <TabView initialTab={0} masthead={<EditorMasthead guild={guild} />}>
+        <Tab title="Guild Details">
+          {() => (
+            <EditorDetailsTab
+              {...props}
+              guild={guild}
+              onMessageChange={onMessageChange}
+            />
+          )}
+        </Tab>
+        <Tab title="Categories & Roles">
+          {() => (
+            <EditorCategoriesTab
+              {...props}
+              guild={guild}
+              onCategoryChange={onCategoryChange}
+            />
+          )}
+        </Tab>
+        <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
+      </TabView>
+    </div>
   );
 };

packages/design-system/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@roleypoly/types": "*",
     "chroma-js": "^2.1.2",
+    "deep-equal": "^2.0.5",
     "isomorphic-unfetch": "^3.1.0",
     "ksuid": "^2.0.0",
     "lodash": "^4.17.21",
@@ -30,6 +31,7 @@
     "@storybook/react": "^6.3.2",
     "@storybook/theming": "^6.3.2",
     "@types/chroma-js": "^2.1.3",
+    "@types/deep-equal": "^1.0.1",
     "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",
     "@types/react-custom-scrollbars": "^4.0.7",

packages/design-system/templates/editor/Editor.stories.tsx

@@ -0,0 +1,13 @@
+import { guildEnum, mastheadSlugs, user } from '../../fixtures/storyData';
+import { EditorTemplate } from './Editor';
+export default {
+  title: 'Templates/Server Editor',
+  component: EditorTemplate,
+  args: {
+    guilds: mastheadSlugs,
+    user: user,
+    guild: guildEnum.guilds[0],
+  },
+};
+
+export const serverEditor = (args) => <EditorTemplate {...args} />;

packages/design-system/templates/editor/Editor.tsx

@@ -0,0 +1,22 @@
+import { AppShell, AppShellProps } from '@roleypoly/design-system/organisms/app-shell';
+import {
+  EditorShell,
+  EditorShellProps,
+} from '@roleypoly/design-system/organisms/editor-shell';
+
+export const EditorTemplate = (
+  props: EditorShellProps & Omit<AppShellProps, 'children'>
+) => {
+  const {
+    guild,
+    onCategoryChange,
+    onMessageChange,
+    onGuildChange,
+    ...appShellProps
+  } = props;
+  return (
+    <AppShell {...appShellProps} activeGuildId={guild.id}>
+      <EditorShell guild={guild} onGuildChange={onGuildChange} />
+    </AppShell>
+  );
+};

packages/design-system/templates/editor/index.ts

@@ -0,0 +1 @@
+export * from './Editor';