Pseudo code for thoughts on new design system usage

forge-layout.jsx

/**
 * Forge Layout
 * - - - - - - -
 * First, let's explore some names:
 * - Layout: This would be good for a top level, but not for lower level components
 * - Container: Feels heavy handed
 * - Box: Short and sweet.
 * - Grid: Sounds like CSS Grid
 * - Flex: Sounds like CSS Flex
 * - Flow: I do like this option, but is it confused with `flex`?
 */

/**
 * ForgeLayout Component
 * This component would be only for top-level, it has two main modes:
 * 1. autoScroll (default)
 * 2. fixed (E.g. calendar, inbox etc)
 */
type LayoutProps = {
  mode: 'autoScroll' | 'fixed',
  children: React.Node,
  padding: string, // Would use spacing system
  margin: string, // Would use spacing system
};
export function ForgeLayout(props: Props) {
  // Code here
}

/**
 * ForgeBox Component
 * Goals for this component
 * 1. Flexbox driven component that focuses on positioning
 * 2. Allows for common presets using more functional names
 */
type BoxProps = {
  preset: 'sidebar with content' | 'sidebar content sidebar' | '2 column' | '3 column' | 'inline-center',
  justifyContent: string,
  alignItems: string,
  display: 'flex' | 'inline-flex'
  padding: string, // Would use spacing system
  margin: string, // Would use spacing system
};
export function ForgeBox(props: BoxProps) {
  // Code here
}

/* * * Examples * * */

// Calendar
<ForgeLayout mode="fixed" padding="16px">
  <ForgeCard>
    <ForgeBox preset="sidebar with content">
      <div>Sidebar</div>
      <div>Content</div>
    </ForgeBox>
  </ForgeCard>
</ForgeLayout>

// Person
<ForgeLayout padding="16px">
  <ForgeBox preset="sidebar with content">
    <ForgeCard>Sidebar</ForgeCard>
    <ForgeCard>Content</ForgeCard>
    <ForgeCard>Sidebar</ForgeCard>
  </ForgeBox>
</ForgeLayout>

// Avatar + text example
<ForgeBox preset="inline-center">
  <ForgeAvatar user={user} />
  Ethel Schroeder
</ForgeBox>