refa: compound components tutorial (#66)

* simplify layout * container to manage content * improve all the things * start page * done! * small adjustments * wrapping! * tutorial section * finish welcome page * refa: compound components tutorial * update * add more content * fix breakout * small fixes * ! * first part done? * improve benefit example * update * remove breadcrumbs * add footer whitespace * add basic tabs example * update * update * fix tabs example * refa for the tabs compound component * update * update * update * finished explaining code? * update * update * done! * fix * use dvh * css fix * landing adjustments * improve text * done! * remove unsued import
marigold-ui · Jun 17, 2024 · 0b05889 · 0b05889
1 parent cc8e30f
commit 0b05889
Show file tree

Hide file tree

Showing 52 changed files with 1,259 additions and 417 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
  </head>
  <body class="font-sans bg-gray-50">
  <div id="app"></div>
+ <!-- Portal Container used for Core examples that are using overlays -->
+ <div data-theme="core" id="portalContainer"></div>
  <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
diff --git a/public/circuit-board.svg b/public/circuit-board.svg
diff --git a/public/hideout.svg b/public/hideout.svg
diff --git a/public/patterns.md b/public/patterns.md
@@ -0,0 +1 @@
+You can find patterns here: https://heropatterns.com/
diff --git a/public/patterns.png b/public/patterns.png
diff --git a/public/texture.svg b/public/texture.svg
diff --git a/public/topography.svg b/public/topography.svg
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -1,22 +1,22 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import { cn } from '@marigold/system';
 
-export interface ContentCommonProps extends HTMLAttributes<HTMLDivElement> {
+export interface CommonProps extends HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: ReactNode;
 }
 
 // Container
 // ---------------
-export const Container = ({
- className,
- children,
- ...props
-}: ContentCommonProps) => (
+/**
+ * Component used as a contaner for blocks, content and breakouts.
+ */
+export const Container = ({ className, children, ...props }: CommonProps) => (
  <div
  data-container=""
  className={cn(
- 'grid grid-cols-content md:grid-cols-content-md xl:grid-cols-content-xl',
+ 'grid place-items-center',
+ 'grid-cols-content md:grid-cols-content-md xl:grid-cols-content-xl',
  className
  )}
  {...props}
@@ -25,28 +25,41 @@ export const Container = ({
  </div>
 );
 
-// Content
+// Block
 // ---------------
-export const Content = ({
- className,
- children,
- ...props
-}: ContentCommonProps) => (
+/**
+ * Component to wrap arbitrary elements in a block.
+ */
+export const Block = ({ className, children, ...props }: CommonProps) => (
  <div className={cn('[grid-column:2]', className)} {...props}>
  {children}
  </div>
 );
 
+// Content
+// ---------------
+/**
+ * Component to wrap text content into (optimized for readability).
+ */
+export const Content = ({ className, children, ...props }: CommonProps) => (
+ <div
+ className={cn('[grid-column:2] max-w-[70ch] text-pretty', className)}
+ {...props}
+ >
+ {children}
+ </div>
+);
+
 // Breakout
 // ---------------
-export const Breakout = ({
-  className,
-  children,
-  ...props
-}: ContentCommonProps) => (
+/**
+ * Component to break out of the regular container grid.
+ * Spans to the full viewport width.
+ */
+export const Breakout = ({ className, children, ...props }: CommonProps) => (
  <div
  className={cn(
- '[grid-column:1/4]',
+ '[grid-column:1/4] w-full',
  // Don't apply padding if <Breakout> has a <Container> child
  '[&:not(:has([data-container]))]:px-content',
  'md:[&:not(:has([data-container]))]:px-content-md',

diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
@@ -0,0 +1,19 @@
+import { CH } from '@code-hike/mdx/components';
+import type { ReactNode } from 'react';
+
+export interface PreviewProps {
+ children?: ReactNode;
+}
+
+const CodeHikePreview: any = CH['Preview'];
+
+export const Preview = ({ children }: PreviewProps) => (
+ // @ts-ignore
+ <CodeHikePreview>
+ <div data-theme="core" className="*:px-14 *:py-12">
+ {children}
+ </div>
+ </CodeHikePreview>
+);
+
+export default Preview;
diff --git a/src/components/TeaserCard.tsx b/src/components/TeaserCard.tsx
@@ -33,7 +33,7 @@ export interface TeaserListProps {
 export const TeaserList = ({ items }: TeaserListProps) => (
  <Tiles tilesWidth="400px" space={5}>
  {items.map(props => (
- <TeaserCard {...props} />
+ <TeaserCard key={props.href} {...props} />
  ))}
  </Tiles>
 );
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { Breakout } from './Container';
+
+export interface TitleProps {
+ title?: ReactNode;
+ caption?: ReactNode;
+ image?: {
+ url: string;
+ size?: string;
+ };
+}
+
+export const Title = ({ title, caption, image }: TitleProps) => (
+ <Breakout
+ className={[
+ 'relative grid place-items-center',
+ 'bg-[linear-gradient(to_bottom,_var(--tw-gradient-stops)),var(--bg-image)] bg-repeat [background-size:auto,var(--bg-size)]',
+ 'from-violet-700/15 via-secondary-50 via-70% to-secondary-50',
+ ].join(' ')}
+ style={
+ {
+ '--bg-image': image ? `url(${image.url})` : undefined,
+ '--bg-size': image ? `${image.size || 'auto'}` : undefined,
+ } as any
+ }
+ >
+ <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-neutral-700/50 via-neutral-700/10 via-20% to-transparent" />
+
+ <div className="px-20 pb-32 pt-52 text-center [background-image:radial-gradient(ellipse_at_bottom,rgba(248,250,252,1)_0%,rgba(248,250,252,1)_40%,transparent_70%)]">
+ <h1 className="p-0 text-secondary-950">{title}</h1>
+ <div className="-mt-8 text-lg text-secondary-950/60">{caption}</div>
+ </div>
+ </Breakout>
+);
+
+export default Title;
diff --git a/src/index.css b/src/index.css
@@ -22,6 +22,16 @@
  max-width: none;
 }
 
+.ch-codeblock,
+.ch-preview,
+.ch-scrollycoding {
+ margin: theme('spacing.8') 0;
+}
+
+.ch-code-wrapper {
+ padding: 0 theme('spacing.1');
+}
+
 .ch-scrollycoding-step-content {
  padding: theme('spacing.6');
 }
@@ -34,3 +44,25 @@
 .ch-frame-buttons {
  display: none;
 }
+
+.ch-mini-browser .ch-frame-buttons {
+ display: flex;
+}
+
+.ch-mini-browser .ch-frame-content {
+ flex-basis: auto;
+}
+
+.ch-codeblock .ch-code-button,
+.ch-codegroup .ch-editor-button {
+ display: none;
+}
+
+.ch-codeblock:hover .ch-code-button,
+.ch-codegroup:hover .ch-editor-button {
+ display: block;
+}
+
+.ch-code-multiline-mark > .ch-code-button {
+ display: none !important;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom/client';
 import { App } from './App';
 
 import '@code-hike/mdx/styles';
+import '@marigold/theme-core/styles.css';
 import './index.css';
 
 const root = document.getElementById('app')!;

diff --git a/src/routes/_components/About.tsx b/src/routes/_components/About.tsx
@@ -1,9 +1,9 @@
-import { Content } from '@/components/Container';
-import { Columns, Inset, Message } from '@marigold/components';
+import { Block } from '@/components/Container';
+import { Columns, Message } from '@marigold/components';
 import { Link } from '@tanstack/react-router';
 
 export const About = () => (
- <Content className="prose-lg text-pretty py-20">
+ <Block className="prose-lg text-pretty py-20">
  <Columns columns={[1, 1]} space={24} collapseAt="900px">
  <div>
  <h2>About</h2>
@@ -44,5 +44,5 @@ export const About = () => (
  </p>
  </Message>
  </div>
- </Content>
+ </Block>
 );
diff --git a/src/routes/_components/Footer.tsx b/src/routes/_components/Footer.tsx
@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router';
 
 export const Footer = () => (
- <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
+ <footer className="mt-48 flex w-full shrink-0 flex-col items-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
  <p className="text-xs text-secondary-500 dark:text-secondary-400">
  Build with 🧡 by the Design System Team
  </p>

diff --git a/src/routes/_components/Header.tsx b/src/routes/_components/Header.tsx
@@ -36,7 +36,7 @@ const Navigation = () => {
 };
 
 export const Header = () => (
- <header className="sticky top-0 z-10  flex h-[--page-header-height] w-full items-center justify-between gap-2 border-0 border-b border-solid border-secondary-200 bg-bg-body px-[--page-padding] md:justify-normal md:px-[--page-padding-md] xl:px-[--page-padding-xl]">
+ <header className="sticky top-0 z-10 flex h-[--page-header-height] w-full items-center justify-between gap-2 border-0 border-b border-solid border-secondary-200 bg-bg-body px-[--page-padding] md:justify-normal md:px-[--page-padding-md] xl:px-[--page-padding-xl]">
  <Link className="md:pr-8" to="/">
  <Logo className="size-6" />
  </Link>

diff --git a/src/routes/_components/Hero.tsx b/src/routes/_components/Hero.tsx
@@ -3,18 +3,18 @@ import { Breakout } from '@/components/Container';
 export const Hero = () => (
  <Breakout
  className={[
- 'relative min-h-[calc(100vh-var(--page-header-height))]',
- "bg-[linear-gradient(to_bottom,_var(--tw-gradient-stops)),url('/circuit-board.svg')] bg-repeat",
- 'from-secondary-400/50 via-secondary-50 via-70% to-secondary-50',
+ 'relative min-h-[calc(100dvh-var(--page-header-height))]',
+ "bg-[linear-gradient(to_bottom,_var(--tw-gradient-stops)),url('/topography.svg')] bg-repeat",
+ 'from-primary-800/25 via-secondary-50 via-70% to-secondary-50',
  ].join(' ')}
  >
  <div className="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-neutral-700/50 via-neutral-700/30 via-20% to-transparent" />
 
- <div className="mx-auto max-w-6xl pt-[8vh]">
- <h1 className="m-0 text-balance text-8xl tracking-tighter lg:text-9xl">
+ <div className="mx-auto max-w-6xl pt-[4dvh] md:pt-[8dvh]">
+ <h1 className="m-0 text-balance text-7xl tracking-tighter text-primary-950 md:text-8xl lg:text-9xl">
  Explore Design Patterns in React
  </h1>
- <p className="mt-4 max-w-[75%] text-pretty text-lg leading-normal text-secondary-400 lg:text-2xl">
+ <p className="mt-4 max-w-[75%] text-pretty text-lg leading-normal text-primary-950/60 lg:text-2xl">
  Discover a curated collection of tutorials with practical examples that
  showcase various design patterns and practices.
  </p>

diff --git a/src/routes/_components/Tutorials.tsx b/src/routes/_components/Tutorials.tsx
@@ -1,13 +1,13 @@
-import { Breakout, Container, Content } from '@/components/Container';
+import { Breakout, Container, Block } from '@/components/Container';
 import { TeaserList } from '@/components/TeaserCard';
 
 export const Tutorials = () => (
- <Breakout id="skip-content" className="bg-secondary-400/10 py-32">
+ <Breakout id="skip-content" className="bg-primary-800/5 py-32">
  <Container>
- <Content>
+ <Block>
  <div className="prose-lg pb-8">
- <h2 className="my-0">Tutorials</h2>
- <p className="text-text-primary-muted">
+ <h2 className="my-0 text-primary-950">Tutorials</h2>
+ <p className="text-primary-950/60">
  Dive into our fun and easy-to-follow tutorials! Here’s a list of
  available guides to help you learn React step-by-step and boost your
  coding skills!
@@ -19,7 +19,7 @@ export const Tutorials = () => (
  title: 'Compound Components',
  href: '/compound-component',
  caption:
- 'Learn how compound components can enhance parent-child communication beyond prop drilling.',
+ 'Learn how compound components can make your components more robust and customizable.',
  icon: (
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -65,7 +65,7 @@ export const Tutorials = () => (
  },
  ]}
  />
- </Content>
+ </Block>
  </Container>
  </Breakout>
 );
diff --git a/src/routes/compound-component/_components/Breadcrumbs.tsx b/src/routes/compound-component/_components/Breadcrumbs.tsx
diff --git a/src/routes/compound-component/_components/BreadcrumbsExample.tsx b/src/routes/compound-component/_components/BreadcrumbsExample.tsx