feat: add server message in editor

packages/design-system/atoms/text-input/TextInput.tsx

@@ -1,8 +1,9 @@
 import { palette } from '@roleypoly/design-system/atoms/colors';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const StyledTextInput = styled.input`
+const common = css`
   appearance: none;
   border: 1px solid ${palette.taupe200};
   border-radius: 3px;
@@ -39,11 +40,14 @@ const StyledTextInput = styled.input`
   }
 `;
 
-type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  _override?: React.Component;
-};
+const StyledTextInput = styled.input`
+  ${common};
+`;
 
-export const TextInput = (props: TextInputProps) => {
+type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
+  React.InputHTMLAttributes<T>;
+
+export const TextInput = (props: TextInputProps<HTMLInputElement>) => {
   const { ...rest } = props;
   return <StyledTextInput {...rest} />;
 };
@@ -68,7 +72,7 @@ const IconInputContainer = styled.div`
   width: 100%;
 `;
 
-type TextInputWithIconProps = TextInputProps & {
+type TextInputWithIconProps = TextInputProps<HTMLInputElement> & {
   icon: React.ReactNode;
 };
 
@@ -81,3 +85,27 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
     </IconInputContainer>
   );
 };
+
+const StyledTextarea = styled.textarea`
+  ${common};
+  ${fontCSS};
+`;
+
+export const MultilineTextInput = (
+  props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
+) => {
+  const { ...rest } = props;
+  const [value, setValue] = React.useState(String(props.value));
+  const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
+  return (
+    <StyledTextarea
+      {...rest}
+      rows={rows}
+      value={value}
+      onChange={(eventData) => {
+        setValue(eventData.target.value);
+        props.onChange?.(eventData);
+      }}
+    />
+  );
+};

packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx

@@ -0,0 +1,16 @@
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
+import * as React from 'react';
+
+export const EditorDetailsTab = (props: EditorShellProps) => {
+  const [serverMessage, updateServerMessage] = React.useState(props.guild.data.message);
+  return (
+    <div>
+      Server Message
+      <MultilineTextInput
+        value={serverMessage}
+        onChange={(eventData) => updateServerMessage(eventData.target.value)}
+      />
+    </div>
+  );
+};

packages/design-system/organisms/editor-details-tab/index.ts

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

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

@@ -1,5 +1,6 @@
 import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
 import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
+import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
 import { PresentableGuild } from '@roleypoly/types';
 
 export type EditorShellProps = {
@@ -8,7 +9,7 @@ export type EditorShellProps = {
 
 export const EditorShell = (props: EditorShellProps) => (
   <TabView initialTab={0}>
-    <Tab title="Guild Details">{() => <div>hi2!</div>}</Tab>
+    <Tab title="Guild Details">{() => <EditorDetailsTab {...props} />}</Tab>
     <Tab title="Categories & Roles">{() => <EditorCategoriesTab {...props} />}</Tab>
     <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
   </TabView>