Haus layout (#451)

* Publish new lib versions. (#412) * fix/fix-table-types (#354) * removed the any types from hub * renamed Table to DaoTable and DataTable to DaoTable to be more consistent with DaoCard * removed commented out DaoData type * one more comment -- thought i got both before * Fix/355 summon params mixup (#356) * more ignore * fixes bad init params order in summon tx * Feature/tag component (#349) * Created basic tag component * Added dynamic color selections for tags * Bumped versions fixed filer * Added icon support to tag component Co-authored-by: Jord <[email protected]> Co-authored-by: Jonathan Prozzi <[email protected]> * Feature/delegate play (#357) * more ignore * fixes bad init params order in summon tx * delegate testing and subgraph field updates * finishes mapping * update dao-data query and transformer * adds delegate tag to list view and hooks up delegate filtering * refactors filter into query helper * Spencer's Summon tooltip suggestions (#370) * Spencer's Summon tooltip suggestions - Summon portion of #365 * Delimiter references #368 For now, just referencing spaces. But if tabs, commas, or other delimiters are also supported, those should be references in the tooltips as well. * Address Jord's comments Co-authored-by: Sam Kuhlmann <[email protected]> * Fix/summon poll (#375) * more ignore * fixes bad init params order in summon tx * delegate testing and subgraph field updates * finishes mapping * update dao-data query and transformer * adds delegate tag to list view and hooks up delegate filtering * adds schema field to tx entity * updates poll for tx entity made before dao entity * Feature/alpha baal update (#376) * new abis * updates summoner tx logic and contract addresses * fixes transaction entity creation location; * fixes some test * Feature/unit utils (#380) * create custom d.ts for human-format * type and convert unit fn from V2 * readableNumber util accepts number strings, throws error if string but number string * fix 0 to 1 utils, extend MaxDecimals to shorten decimal places * refine spacer and unit symbol placement * update new card to handle new params * update table * corrections * alter d.ts file * potential solutions to ts bug * implement keating's d.ts fix * fix comment * Fix/network switcher (#381) * better error handling * fix bug * remove log * get react-table TS to stop yelling (#382) Co-authored-by: Sam Kuhlmann <[email protected]> * Feature/hub sort (#383) * wip * gets query working on dao entity after lots of subgraph updates * updates front end for sort * fixes type issue * fixes build issue * reviewing v3 monorepo and saw some networks missing (#399) * Feature/public profile (#384) * Add some stuff * Add public profile * Add ens * Get build to pass * Update apps/hub-app/src/pages/PublicProfilePage.tsx Co-authored-by: Rowdy <[email protected]> Co-authored-by: Sam Kuhlmann <[email protected]> Co-authored-by: Rowdy <[email protected]> * fixing doc display name from <[object Object]> to displayName (#402) Co-authored-by: Sam Kuhlmann <[email protected]> * adds search (#401) * adds search wip * correctly types the onChange for the input * cleans up unsed imports * naming * Feature/public profile (#384) * Add some stuff * Add public profile * Add ens * Get build to pass * Update apps/hub-app/src/pages/PublicProfilePage.tsx Co-authored-by: Rowdy <[email protected]> Co-authored-by: Sam Kuhlmann <[email protected]> Co-authored-by: Rowdy <[email protected]> * fixing doc display name from <[object Object]> to displayName (#402) Co-authored-by: Sam Kuhlmann <[email protected]> * conflicts * correctly types the onChange for the input * cleans up unsed imports * naming * fix build error Co-authored-by: Alexander Keating <[email protected]> Co-authored-by: Rowdy <[email protected]> Co-authored-by: Brian Rossetti <[email protected]> * Release/12072022 (#411) * adds search wip * correctly types the onChange for the input * cleans up unsed imports * naming * conflicts * correctly types the onChange for the input * cleans up unsed imports * naming * fix build error * feature bump Co-authored-by: Jonathan Prozzi <[email protected]> Co-authored-by: Rowdy <[email protected]> Co-authored-by: Jord <[email protected]> Co-authored-by: Spencer Graham <[email protected]> Co-authored-by: Brian Rossetti <[email protected]> Co-authored-by: Alexander Keating <[email protected]> * Revert "Publish new lib versions. (#412)" This reverts commit bab7077. * build formLayout Component * type correction * build formLayout story * rough in bicolumn layout * handle bicolumn mobile switch, finish bicolumn * fix mainlayout naming * build story for bi-column layout * build dh layout one shot? * yes, one shot * fix import * change prop name Co-authored-by: Jonathan Prozzi <[email protected]> Co-authored-by: Alexander Keating <[email protected]> Co-authored-by: Sam Kuhlmann <[email protected]> Co-authored-by: Rowdy <[email protected]> Co-authored-by: Spencer Graham <[email protected]> Co-authored-by: Brian Rossetti <[email protected]>
HausDAO · Jul 18, 2022 · 630a61d · 630a61d
1 parent a7b03e4
commit 630a61d
Show file tree

Hide file tree

Showing 17 changed files with 333 additions and 25 deletions.
diff --git a/apps/core-app/src/App.tsx b/apps/core-app/src/App.tsx
@@ -1,22 +1,62 @@
-import { DaoHausNav } from '@daohaus/daohaus-connect-feature';
-import { H1, SubNav } from '@daohaus/ui';
-import { OuterLayout } from '@daohaus/ui';
+import styled from 'styled-components';
+
+import { BiColumnLayout, Card, FormLayout, widthQuery } from '@daohaus/ui';
+import { HausLayout } from '@daohaus/daohaus-connect-feature';
+
+const LeftCard = styled(Card)`
+  width: 100%;
+  min-width: 54rem;
+  max-width: 64rem;
+  height: 47rem;
+  @media ${widthQuery.md} {
+    max-width: 100%;
+    min-width: 0;
+  }
+`;
+
+const RightCard = styled(Card)`
+  width: 100%;
+  min-width: 38rem;
+  max-width: 45rem;
+  height: 77rem;
+  @media ${widthQuery.md} {
+    max-width: 100%;
+    min-width: 0;
+  }
+`;
+
+const Spacer = styled.div`
+  width: 100%;
+  height: 50rem;
+`;
 
 export function App() {
   return (
-    <OuterLayout>
-      <DaoHausNav />
-      <SubNav
-        navLinks={[
-          { label: 'Home', href: '/home' },
-          { label: 'Proposals', href: '/proposals' },
-          { label: 'Vaults', href: '/vaults' },
-          { label: 'Members', href: '/members' },
-        ]}
-        moreLinks={[{ label: 'Settings', href: '/settings' }]}
-      />
-      <H1>Header!</H1>
-    </OuterLayout>
+    <HausLayout
+      navLinks={[
+        { label: 'Home', href: '/home' },
+        { label: 'Proposals', href: '/proposals' },
+        { label: 'Vaults', href: '/vaults' },
+        { label: 'Members', href: '/members' },
+      ]}
+      dropdownLinks={[{ label: 'Settings', href: '/settings' }]}
+    >
+      <FormLayout
+        title="Title"
+        description="this is a nice long description where I talk about things"
+        subtitle="Something nicer"
+      >
+        <Card>
+          <Spacer />
+        </Card>
+      </FormLayout>
+      {/* <BiColumnLayout
+        subtitle="Disperse Proposal"
+        title="Disperse Reimbursements for April ‘22 Event"
+        left={<LeftCard>Left</LeftCard>}
+        right={<RightCard>Right</RightCard>}
+      /> */}
+    </HausLayout>
   );
 }
 

diff --git a/libs/daohaus-connect-feature/src/components/HausLayout/HausLayout.tsx b/libs/daohaus-connect-feature/src/components/HausLayout/HausLayout.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import { DaoHausNav } from '../DaoHausNav/DaoHausNav';
+import { MainLayout, SubNav, SubNavProps } from '@daohaus/ui';
+import { OuterLayout } from '@daohaus/ui';
+
+export const HausLayout = ({
+  navLinks,
+  dropdownLinks,
+  children,
+}: SubNavProps & { children: ReactNode }) => {
+  return (
+    <OuterLayout>
+      <DaoHausNav />
+      <SubNav navLinks={navLinks} dropdownLinks={dropdownLinks} />
+      <MainLayout>{children}</MainLayout>
+    </OuterLayout>
+  );
+};
diff --git a/libs/daohaus-connect-feature/src/components/HausLayout/index.ts b/libs/daohaus-connect-feature/src/components/HausLayout/index.ts
@@ -0,0 +1 @@
+export * from './HausLayout';
diff --git a/libs/daohaus-connect-feature/src/components/index.ts b/libs/daohaus-connect-feature/src/components/index.ts
@@ -2,3 +2,4 @@ export * from './ConnectButton';
 export * from './NetworkButton';
 export * from './DaoHausNav';
 export * from './ExplorerLink';
+export * from './HausLayout';
diff --git a/libs/ui/src/components/atoms/Card/Card.styles.ts b/libs/ui/src/components/atoms/Card/Card.styles.ts
@@ -9,22 +9,28 @@ export const BaseCard = styled.div`
   border-radius: ${border.cardRadius};
   padding: 2rem;
 
+  /* Disabling the interaction styles here as per our meeting in the component sync */
+  /* Saving the styles here for when we want to make an interactive card */
+
+  /* 
   :hover {
     background-color: ${({ theme }: { theme: Theme }) => theme.card.hoverBg};
-    border: 1px solid ${({ theme }: { theme: Theme }) => theme.card.hoverBorder};
+    border: 1px solid ${({ theme }: { theme: Theme }) =>
+    theme.card.hoverBorder};
   }
 
   :focus {
     background-color: ${({ theme }: { theme: Theme }) => theme.card.focusBg};
-    border: 1px solid ${({ theme }: { theme: Theme }) => theme.card.focusBorder};
+    border: 1px solid ${({ theme }: { theme: Theme }) =>
+    theme.card.focusBorder};
     outline: none;
-  }
+  } */
 
   /* We might not need this */
-  :disabled {
+  /* :disabled {
     background-color: ${({ theme }: { theme: Theme }) => theme.card.disabledBg};
     border: 1px solid
       ${({ theme }: { theme: Theme }) => theme.card.disabledBorder};
     cursor: not-allowed;
-  }
+  } */
 `;
diff --git a/libs/ui/src/components/layouts/BiColumnLayout/BiColumn.styles.tsx b/libs/ui/src/components/layouts/BiColumnLayout/BiColumn.styles.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { widthQuery } from '../../../theme/global';
+
+export const BiColumnBox = styled.div`
+  margin-top: 5rem;
+  width: 100%;
+  max-width: 110rem;
+  .subtitle {
+    margin-bottom: 1.2rem;
+    opacity: 0.6;
+  }
+  .title {
+    margin-bottom: 3rem;
+  }
+  .description {
+    margin-bottom: 5rem;
+  }
+  .split {
+    display: flex;
+    flex-direction: row;
+    gap: 3rem;
+    @media ${widthQuery.md} {
+      flex-direction: column;
+    }
+  }
+`;
diff --git a/libs/ui/src/components/layouts/BiColumnLayout/BiColumnLayout.stories.tsx b/libs/ui/src/components/layouts/BiColumnLayout/BiColumnLayout.stories.tsx
@@ -0,0 +1,48 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { widthQuery } from '../../../theme/global/breakpoints';
+import styled from 'styled-components';
+import { Card } from '../../atoms';
+import { MainLayout } from '../MainLayout';
+import { BiColumnLayout } from './BiColumnLayout';
+
+export default {
+  title: 'Layouts/BiColumnLayout',
+  component: BiColumnLayout,
+} as ComponentMeta<typeof BiColumnLayout>;
+
+const Template: ComponentStory<typeof BiColumnLayout> = (args) => (
+  <MainLayout>
+    <BiColumnLayout {...args} />
+  </MainLayout>
+);
+
+const LeftCard = styled(Card)`
+  width: 100%;
+  min-width: 54rem;
+  max-width: 64rem;
+  height: 47rem;
+  @media ${widthQuery.md} {
+    max-width: 100%;
+    min-width: 0;
+  }
+`;
+
+const RightCard = styled(Card)`
+  width: 100%;
+  min-width: 38rem;
+  max-width: 45rem;
+  height: 77rem;
+  @media ${widthQuery.md} {
+    max-width: 100%;
+    min-width: 0;
+  }
+`;
+
+export const BaseBiColumnLayout = Template.bind({});
+
+BaseBiColumnLayout.args = {
+  title: 'Bi-Column Layout',
+  subtitle: 'Two column layout',
+  right: <RightCard>Right</RightCard>,
+  left: <LeftCard>Left</LeftCard>,
+};
diff --git a/libs/ui/src/components/layouts/BiColumnLayout/BiColumnLayout.tsx b/libs/ui/src/components/layouts/BiColumnLayout/BiColumnLayout.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+
+import { DataMd, H2 } from '../../atoms';
+import { BiColumnBox } from './BiColumn.styles';
+
+type BiColumnLayoutProps = {
+  title?: 'string' | React.ReactNode;
+  subtitle?: 'string' | React.ReactNode;
+  description?: 'string' | React.ReactNode;
+  left: React.ReactNode;
+  right: React.ReactNode;
+};
+
+export const BiColumnLayout = ({
+  left,
+  right,
+  title,
+  subtitle,
+  description,
+}: BiColumnLayoutProps) => {
+  const sectionSubtitle = useMemo(() => {
+    if (!subtitle) return null;
+    if (typeof subtitle === 'string')
+      return <DataMd className="subtitle">{subtitle}</DataMd>;
+    return <div className="subtitle">{subtitle}</div>;
+  }, [subtitle]);
+
+  const sectionTitle = useMemo(() => {
+    if (!title) return null;
+    if (typeof title === 'string') return <H2 className="title">{title}</H2>;
+    return <div className="title">{title}</div>;
+  }, [title]);
+
+  const sectionDescription = useMemo(() => {
+    if (!description) return null;
+    if (typeof description === 'string')
+      return <DataMd className="description">{description}</DataMd>;
+    return <div className="description">{description}</div>;
+  }, [description]);
+
+  return (
+    <BiColumnBox>
+      {sectionSubtitle}
+      {sectionTitle}
+      {sectionDescription}
+      <div className="split">
+        {left}
+        {right}
+      </div>
+    </BiColumnBox>
+  );
+};
diff --git a/libs/ui/src/components/layouts/BiColumnLayout/index.ts b/libs/ui/src/components/layouts/BiColumnLayout/index.ts
@@ -0,0 +1 @@
+export * from './BiColumnLayout';
diff --git a/libs/ui/src/components/layouts/FormLayout/FormLayout.stories.tsx b/libs/ui/src/components/layouts/FormLayout/FormLayout.stories.tsx
@@ -0,0 +1,34 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import styled from 'styled-components';
+import { Card } from '../../atoms';
+import { MainLayout } from '../MainLayout';
+import { FormLayout } from './FormLayout';
+
+export default {
+  title: 'Layouts/FormLayout',
+  component: FormLayout,
+} as ComponentMeta<typeof FormLayout>;
+
+const Template: ComponentStory<typeof FormLayout> = (args) => (
+  <MainLayout>
+    <FormLayout {...args} />
+  </MainLayout>
+);
+
+const Spacer = styled.div`
+  width: 100%;
+  height: 50rem;
+`;
+
+export const BaseFormLayout = Template.bind({});
+
+BaseFormLayout.args = {
+  title: 'Form Layout',
+  subtitle: 'Form Layout subtitle',
+  description: 'Form Layout description',
+  children: (
+    <Card>
+      <Spacer />
+    </Card>
+  ),
+};
diff --git a/libs/ui/src/components/layouts/FormLayout/FormLayout.styles.tsx b/libs/ui/src/components/layouts/FormLayout/FormLayout.styles.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const FormContainer = styled.div`
+  width: 58rem;
+  margin-top: 5rem;
+
+  .subtitle {
+    margin-bottom: 1.2rem;
+    opacity: 0.6;
+  }
+  .title {
+    margin-bottom: 3rem;
+  }
+  .description {
+    margin-bottom: 5rem;
+  }
+`;
diff --git a/libs/ui/src/components/layouts/FormLayout/FormLayout.tsx b/libs/ui/src/components/layouts/FormLayout/FormLayout.tsx
@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { DataMd, H2 } from '../../atoms';
+import { FormContainer } from './FormLayout.styles';
+
+type FormLayoutProps = {
+  title?: string | React.ReactNode;
+  subtitle?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  children: React.ReactNode;
+};
+
+export const FormLayout = ({
+  title,
+  subtitle,
+  description,
+  children,
+}: FormLayoutProps) => {
+  const formSubtitle = useMemo(() => {
+    if (!subtitle) return null;
+    if (typeof subtitle === 'string')
+      return <DataMd className="subtitle">{subtitle}</DataMd>;
+    return <div className="subtitle">{subtitle}</div>;
+  }, [subtitle]);
+
+  const formTitle = useMemo(() => {
+    if (!title) return null;
+    if (typeof title === 'string') return <H2 className="title">{title}</H2>;
+    return <div className="title">{title}</div>;
+  }, [title]);
+
+  const formDescription = useMemo(() => {
+    if (!description) return null;
+    if (typeof description === 'string')
+      return <DataMd className="description">{description}</DataMd>;
+    return <div className="description">{description}</div>;
+  }, [description]);
+
+  return (
+    <FormContainer>
+      {formSubtitle}
+      {formTitle}
+      {formDescription}
+      {children}
+    </FormContainer>
+  );
+};
diff --git a/libs/ui/src/components/layouts/FormLayout/index.ts b/libs/ui/src/components/layouts/FormLayout/index.ts
@@ -0,0 +1 @@
+export * from './FormLayout';
diff --git a/libs/ui/src/components/layouts/MainLayout/MainLayout.tsx b/libs/ui/src/components/layouts/MainLayout/MainLayout.tsx
@@ -0,0 +1,12 @@
+import { widthQuery } from '../../../theme/global';
+import styled from 'styled-components';
+
+export const MainLayout = styled.main`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding: 0 3.2rem 2.4rem 3.2rem;
+  @media ${widthQuery.sm} {
+    padding: 0 2.4rem 2.4rem 2.4rem;
+  }
+`;
diff --git a/libs/ui/src/components/layouts/MainLayout/index.ts b/libs/ui/src/components/layouts/MainLayout/index.ts
@@ -0,0 +1 @@
+export * from './MainLayout';