feat(page): add component

feat(page): add header and footer

feat(page): add dot-backdrop decoration

components/index.ts

@@ -51,3 +51,4 @@ export { default as Popover } from './popover'
 export { default as Slider } from './slider'
 export { default as Divider } from './divider'
 export { default as User } from './user'
+export { default as Page } from './page'

components/page/index.ts

@@ -0,0 +1,10 @@
+import Page from './page'
+import PageHeader from './page-header'
+import PageContent from './page-content'
+import PageFooter from './page-footer'
+
+Page.Header = PageHeader
+Page.Content = PageContent
+Page.Footer = PageFooter
+
+export default Page

components/page/page-content.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
+
+interface Props {
+  className?: string
+}
+
+const defaultProps = {
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type PageContentProps = Props & typeof defaultProps & NativeAttrs
+
+const PageContent: React.FC<React.PropsWithChildren<PageContentProps>> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const theme = useTheme()
+
+  return (
+    <main className={className} {...props}>
+      {children}
+      <style jsx>{`
+        main {
+          width: 100%;
+          padding: calc(${theme.layout.gap} * 2.5) 0;
+        }
+      `}</style>
+    </main>
+  )
+}
+
+export default withDefaults(PageContent, defaultProps)

components/page/page-footer.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import withDefaults from '../utils/with-defaults'
+
+interface Props {
+  className?: string
+}
+
+const defaultProps = {
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs
+
+const PageFooter: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({ children, ...props }) => {
+  return (
+    <footer {...props}>
+      {children}
+      <style jsx>{`
+        footer {
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+        }
+      `}</style>
+    </footer>
+  )
+}
+
+export default withDefaults(PageFooter, defaultProps)

components/page/page-header.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import withDefaults from '../utils/with-defaults'
+
+interface Props {
+  center?: boolean
+  className?: string
+}
+
+const defaultProps = {
+  center: false,
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs
+
+const PageHeader: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+  children,
+  center,
+  className,
+  ...props
+}) => {
+  return (
+    <header className={`${center ? 'center' : ''} ${className}`} {...props}>
+      {children}
+      <style jsx>{`
+        header {
+          width: 100%;
+        }
+
+        .center {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      `}</style>
+    </header>
+  )
+}
+
+export default withDefaults(PageHeader, defaultProps)

components/page/page.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { NormalSizes, tuple } from '../utils/prop-types'
+import { getPageSize } from './styles'
+import useTheme from '../styles/use-theme'
+import PageHeader from './page-header'
+import PageContent from './page-content'
+import { hasChild } from '../utils/collections'
+import PageFooter from './page-footer'
+
+const renderMode = tuple('default', 'effect', 'effect-seo')
+
+export type PageSize = NormalSizes | string
+export type PageRenderMode = typeof renderMode[number]
+
+interface Props {
+  size?: PageSize
+  render?: PageRenderMode
+  dotBackdrop: boolean
+}
+
+const defaultProps = {
+  size: 'medium' as PageSize,
+  render: 'default' as PageRenderMode,
+  dotBackdrop: false,
+}
+
+const DotStyles: React.FC<{}> = () => (
+  <span>
+    <style jsx>{`
+      :global(body) {
+        background-image: radial-gradient(#e3e3e3 1px, transparent 0),
+          radial-gradient(#e3e3e3 1px, transparent 0);
+        background-position: 0 0, 25px 25px;
+        background-attachment: fixed;
+        background-size: 50px 50px;
+      }
+    `}</style>
+  </span>
+)
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type NoteProps = Props & typeof defaultProps & NativeAttrs
+
+const Page: React.FC<React.PropsWithChildren<NoteProps>> = ({
+  children,
+  size,
+  render,
+  dotBackdrop,
+  className,
+  ...props
+}) => {
+  const theme = useTheme()
+  const width = useMemo(() => getPageSize(size, theme.layout), [size, theme.layout])
+  const showDot = useMemo<boolean>(() => {
+    if (theme.type === 'dark') return false
+    return dotBackdrop
+  }, [dotBackdrop, theme.type])
+  const [preventRender, setPreventRender] = useState<boolean>(render !== 'default')
+
+  useEffect(() => {
+    setPreventRender(false)
+  }, [])
+
+  if (preventRender) {
+    const renderSEO = render === 'effect-seo'
+    if (!renderSEO) return null
+    return (
+      <div className="hidden" aria-hidden="true">
+        {children}
+        <style jsx>{`
+          .hidden {
+            opacity: 0;
+            display: none;
+          }
+        `}</style>
+      </div>
+    )
+  }
+
+  const hasContent = hasChild(children, PageContent)
+
+  return (
+    <section className={className} {...props}>
+      {hasContent ? children : <PageContent>{children}</PageContent>}
+      {showDot && <DotStyles />}
+      <style jsx>{`
+        section {
+          width: ${width};
+          max-width: 100vw;
+          min-height: 100vh;
+          margin: 0 auto;
+          box-sizing: border-box;
+          position: relative;
+        }
+
+        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+          section {
+            max-width: 90vw;
+            min-height: -webkit-fill-available;
+          }
+        }
+      `}</style>
+    </section>
+  )
+}
+
+type MemoPageComponent<P = {}> = React.NamedExoticComponent<P> & {
+  Header: typeof PageHeader
+  Content: typeof PageContent
+  Footer: typeof PageFooter
+}
+type ComponentProps = Partial<typeof defaultProps> &
+  Omit<Props, keyof typeof defaultProps> &
+  NativeAttrs
+
+Page.defaultProps = defaultProps
+
+export default React.memo(Page) as MemoPageComponent<ComponentProps>

components/page/styles.ts

@@ -0,0 +1,15 @@
+import { PageSize } from './page'
+import { NormalSizes } from '../utils/prop-types'
+import { ZeitUIThemesLayout } from '../styles/themes'
+
+export const getPageSize = (size: PageSize, layout: ZeitUIThemesLayout): string => {
+  const presets: { [key in NormalSizes]: string } = {
+    medium: layout.pageWidth,
+    small: `calc(${layout.pageWidth} - 100pt)`,
+    mini: `calc(${layout.pageWidth} - 180pt)`,
+    large: `calc(${layout.pageWidth} + 100pt)`,
+  }
+  const presetValue = presets[size as NormalSizes]
+  if (!presetValue) return size as string
+  return presetValue
+}

lib/components/displays/mock-page.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+import { useTheme } from 'components'
+
+interface Props {
+  visible: boolean
+  onClose?: () => void
+}
+
+const MockPage: React.FC<React.PropsWithChildren<Props>> = ({
+  visible: customVisible,
+  onClose,
+  children,
+}) => {
+  const theme = useTheme()
+  const [visible, setVisible] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (customVisible !== undefined) {
+      setVisible(customVisible)
+    }
+  }, [customVisible])
+
+  const clickHandler = () => {
+    setVisible(false)
+    onClose && onClose()
+  }
+  return (
+    <section onClick={clickHandler} className={visible ? 'active' : ''}>
+      {children}
+      <style jsx>{`
+        section {
+          position: fixed;
+          width: 100vw;
+          height: 100vw;
+          background-color: ${theme.palette.background};
+          z-index: 5000;
+          top: -5000px;
+          left: -5000px;
+          display: none;
+        }
+
+        .active {
+          top: 0;
+          left: 0;
+          display: block;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default MockPage

lib/data/metadata-en-us.json

@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]

pages/en-us/components/page.mdx

@@ -0,0 +1,90 @@
+import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
+import { Page, Button } from 'components'
+import MockPage from 'lib/components/displays/mock-page'
+
+export const meta = {
+  title: 'page',
+  group: 'layout',
+}
+
+## Page
+
+Container of general for display page content.
+
+<Playground
+  desc="The content will be displayed in the center."
+  scope={{ Page, MockPage, Button }}
+  code={`
+() => {
+  const Child = () => (
+    <>
+      <h2>Hello, Everyone.</h2>
+      <p>This is a simulated page, you can click anywhere to close it.</p>
+    </>
+  )
+  const [visible, setVisible] = React.useState(false)
+  return (
+    <>
+      <Button onClick={() => setVisible(true)} auto>Show Page</Button>
+      <MockPage visible={visible} onClose={() => setVisible(false)}>
+        <Page><Child /></Page>
+      </MockPage>
+    </>
+  )
+}
+`} />
+
+<Playground
+  title="Content"
+  desc="Add `Header` and `Footer` for better layout."
+  scope={{ Page, MockPage, Button }}
+  code={`
+() => {
+  const [visible, setVisible] = React.useState(false)
+  return (
+    <>
+      <Button onClick={() => setVisible(true)} auto>Header & Footer</Button>
+      <MockPage visible={visible} onClose={() => setVisible(false)}>
+        <Page size="small">
+          <Page.Header>
+            <h2>Header</h2>
+          </Page.Header>
+          <Page.Content>
+            <h2>Hello, Everyone.</h2>
+            <p>This is a simulated page, you can click anywhere to close it.</p>
+          </Page.Content>
+          <Page.Footer>
+            <h2>Footer</h2>
+          </Page.Footer>
+        </Page>
+      </MockPage>
+    </>
+  )
+}
+`} />
+
+<Attributes edit="/pages/en-us/components/page.mdx">
+<Attributes.Title>Page.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **size** | size of page | [PageSize](#pagesize) | - | `medium` |
+| **render** | render mode | [PageRenderMode](#pagerendermode) | - | `default` |
+
+<Attributes.Title>PageSize</Attributes.Title>
+
+```ts
+type PageSize = string | 'mini' | 'small' | 'medium' | 'large'
+```
+
+<Attributes.Title>PageRenderMode</Attributes.Title>
+
+```ts
+type PageRenderMode = 'default'   // Normal rendering
+  | 'effect'                      // Render after the first effect trigger
+  | 'effect-seo'                  // like "effect", but prerender strings for SEO
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>