components#Grid TypeScript Examples

Colors: React.FC<React.PropsWithChildren<unknown>> = () => {
  const theme = useTheme()

  return (
    <div className="colors">
      <Grid.Container gap={1} pl={0} mr="10px">
        {types.map((type, index) => {
          return (
            <Grid xs={12} key={`${type}-${index}`}>
              <Card w="100%" type={type as CardTypes}>
                {type}
              </Card>
            </Grid>
          )
        })}
      </Grid.Container>
      <style jsx>{`
        .colors {
          display: flex;
          flex-wrap: wrap;
        }

        .color-card {
          display: flex;
          width: 9rem;
          margin-right: ${theme.layout.gapHalf};
          margin-bottom: ${theme.layout.gapHalf};
        }
      `}</style>
    </div>
  )
}

CustomizationLayout: React.FC<React.PropsWithChildren<unknown>> = ({
  children,
}) => {
  const theme = useTheme()

  return (
    <div className="layout">
      <Grid.Container>
        <Grid xs={24}>
          <Demo />
          <div className="content">{children}</div>
        </Grid>
        <Grid xs={24}>
          <CustomizationCodes />
        </Grid>
      </Grid.Container>

      <style jsx>{`
        .layout {
          min-height: calc(100vh - 108px);
          max-width: ${theme.layout.pageWidthWithMargin};
          margin: 0 auto;
          padding: 0 ${theme.layout.gap};
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
        }

        .content {
          flex: 1;
          overflow: hidden;
        }
      `}</style>
    </div>
  )
}

getColorItem = (
  type: string,
  palette: GeistUIThemesPalette,
  copy: (text: string) => void,
) => {
  const data = getColorData(type)
  const getColor = (index: number) => getCurrentColor(palette, type, index)
  const keys = Object.keys(data)

  return (keys as Array<keyof GeistUIThemesPalette>).map((key, index) => (
    <div className="color" key={`color-item-${index}`}>
      <Grid.Container justify="space-between" style={{ height: '4.5rem' }}>
        <Grid.Container alignItems="center" sm={8} xs={16}>
          <h4>{data[key]}</h4>
        </Grid.Container>
        <Grid.Container alignItems="center" justify="center" sm={8} xs={0}>
          <span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
            theme.palette.{key}
          </span>
        </Grid.Container>
        <Grid.Container alignItems="center" justify="flex-end" sm={8} xs>
          <span className="value" onClick={() => copy(palette[key])}>
            {palette[key]}
          </span>
        </Grid.Container>
      </Grid.Container>
      <style jsx>{`
        .color {
          background-color: ${palette[key]};
          color: ${getColor(index)};
        }
      `}</style>
    </div>
  ))
}

Application: NextPage<{}> = () => {
  const theme = useTheme()

  return (
    <>
      <div className="layout">
        <div className="hero">
          <h1 className="title">Geist</h1>
          <h3 className="desc">
            An open source design system for building modern websites and applications.
          </h3>
        </div>

        <Grid.Container gap={2} justify="center">
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<PackageIcon />}
              url="/en-us/components"
              title="Components"
              desc="Ever-increasing list of concise and aesthetic components."
            />
          </Grid>
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<FeatherIcon />}
              url="/en-us/guide/themes"
              title="Customizable"
              desc="Configure sizes, colors, appearances, shapes, and more."
            />
          </Grid>
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<GitHubIcon />}
              url="https://github.com/geist-org/geist-ui"
              title="Open Sourced"
              desc="Geist is open sourced and available free under MIT licence."
            />
          </Grid>
        </Grid.Container>
      </div>
      <style jsx>{`
        .layout {
          min-height: calc(100vh - var(--geist-page-nav-height));
          max-width: ${theme.layout.pageWidthWithMargin};
          margin: 0 auto;
          padding: 0 ${theme.layout.gap} calc(${theme.layout.gap} * 2);
          box-sizing: border-box;
        }
        .hero {
          height: calc(100vh - var(--geist-page-nav-height) - 300px);
          min-height: 30vh;
          max-width: 500px;
          margin: 0 auto;
          text-align: center;
          align-items: center;
          justify-content: center;
          display: flex;
          flex-direction: column;
        }
        .title {
          font-size: 3.75rem;
          font-weight: 700;
          margin: 0;
        }
        .desc {
          color: ${theme.palette.accents_5};
          font-size: 1.5rem;
          font-weight: 500;
          margin: 0 0 ${theme.layout.gap};
        }
      `}</style>
    </>
  )
}

Home: NextPage<unknown> = () => {
  const theme = useTheme()

  return (
    <>
      <div className="layout">
        <div className="hero">
          <h1 className="title">Geist</h1>
          <h3 className="desc">一个用于构建现代 Web 应用的开源设计系统</h3>
        </div>
        <Grid.Container gap={2} justify="center">
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<PackageIcon />}
              url="/zh-cn/components"
              title="Components"
              desc="Ever-increasing list of concise and aesthetic components."
            />
          </Grid>
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<FeatherIcon />}
              url="/zh-cn/guide/themes"
              title="Customizable"
              desc="Configure sizes, colors, appearances, shapes, and more."
            />
          </Grid>
          <Grid xs={24} md={8}>
            <HomeCell
              icon={<GitHubIcon />}
              url="https://github.com/geist-org/geist-ui"
              title="Open Sourced"
              desc="Geist is open sourced and available free under MIT licence."
            />
          </Grid>
        </Grid.Container>
      </div>
      <style jsx>{`
        .layout {
          min-height: calc(100vh - var(--geist-page-nav-height));
          max-width: ${theme.layout.pageWidthWithMargin};
          margin: 0 auto;
          padding: 0 ${theme.layout.gap} calc(${theme.layout.gap} * 2);
          box-sizing: border-box;
        }
        .hero {
          height: calc(100vh - var(--geist-page-nav-height) - 300px);
          min-height: 30vh;
          max-width: 100%;
          margin: 0 auto;
          text-align: center;
          align-items: center;
          justify-content: center;
          display: flex;
          flex-direction: column;
        }
        .title {
          font-size: 3.75rem;
          font-weight: 700;
          margin: 0;
        }
        .desc {
          color: ${theme.palette.accents_5};
          font-size: 1.5rem;
          font-weight: 500;
          margin: 0 0 ${theme.layout.gap};
        }
      `}</style>
    </>
  )
}

describe('Grid', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <Grid.Container>
        <Grid>test</Grid>
        <Grid>test</Grid>
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('all breakpoint values should be supported', () => {
    const wrapper = mount(
      <Grid.Container xs={1} sm={2} md={3} lg={4} xl={5}>
        <Grid xs={1} sm={2} md={3} lg={4} xl={5}>
          test
        </Grid>
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('css value should be passed through', () => {
    const wrapper = mount(
      <Grid.Container
        justify="center"
        alignItems="center"
        alignContent="center"
        direction="column"
        wrap="wrap">
        <Grid
          justify="center"
          alignItems="center"
          alignContent="center"
          direction="column">
          test
        </Grid>
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('decimal spacing should be supported', () => {
    const wrapper = mount(
      <Grid.Container gap={0.11123}>
        <Grid>test</Grid>
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('nested components should be supported', () => {
    const wrapper = mount(
      <Grid.Container>
        <Grid>test</Grid>
        <Grid.Container>
          <Grid>test</Grid>
          <Grid.Container>
            <Grid>test</Grid>
            <Grid.Container>
              <Grid>test</Grid>
            </Grid.Container>
            ,
          </Grid.Container>
          ,
        </Grid.Container>
        ,
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('there should be no alignment class when not set', () => {
    let wrapper = mount(<Grid.Container justify="flex-end" />)
    expect(wrapper.find('.item').hasClass('justify')).toBeTruthy()
    wrapper = mount(<Grid.Container />)
    expect(wrapper.find('.item').hasClass('justify')).not.toBeTruthy()
  })

  it('there should be no responsive class when not set', () => {
    let wrapper = mount(<Grid.Container sm={2} />)
    expect(wrapper.find('.item').hasClass('sm')).toBeTruthy()
    expect(wrapper.find('.item').hasClass('xs')).not.toBeTruthy()
    wrapper = mount(<Grid.Container />)
    expect(wrapper.find('.item').hasClass('sm')).not.toBeTruthy()
  })

  it('should work correctly when use alone', () => {
    const wrapper = mount(<Grid />)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work correctly when size exceeds', () => {
    const wrapper = mount(
      <Grid.Container>
        <Grid xs={25}>test</Grid>
        <Grid xs={-1}>test</Grid>
      </Grid.Container>,
    )

    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('Grid should be hidden when value is 0', () => {
    let wrapper = mount(<Grid.Container xs={0} />)
    expect(wrapper.find('.item').hasClass('xs')).toBeTruthy()
    expect(wrapper.find('.item').html()).toContain('display: none')
  })
})

Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
  const theme = useTheme()
  const { isChinese } = useConfigs()

  return (
    <div className="demo">
      <div className="content">
        {isChinese ? (
          <>
            <Text h2 mb={0} font="13px" type="secondary">
              预览
            </Text>
            <Text>
              这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
            </Text>
          </>
        ) : (
          <>
            <Text h2 mb={0} font="13px">
              PREVIEWS
            </Text>
            <Text>
              Here&#39;s a preview of your changes to the Theme. When you set the changes,
              the entire document site will change with the theme.
            </Text>
          </>
        )}

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '色彩' : 'COLORS'}
        </Text>
        <Colors />

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '排版' : 'Typography'}
        </Text>
        <Text>
          <Link rel="nofollow" href="https://en.wikipedia.org/wiki/HTTP/2" color>
            HTTP/2
          </Link>{' '}
          allows the server to <Code>push</Code> content, that is, to respond with data
          for more queries than the client requested. This allows the server to supply
          data it knows a web browser will need to render a web page, without waiting for
          the browser to examine the first response, and without the overhead of an
          additional request cycle.
        </Text>
        <Text h6>Heading</Text>
        <Text h5>Heading</Text>
        <Text h4>Heading</Text>
        <Text h3>Heading</Text>

        <Spacer h={1.7} />
        <Text h3 font="13px" type="secondary">
          {isChinese ? '基础组件' : 'Basic Components'}
        </Text>
        <Select width="90%" placeholder="Choose one" initialValue="1">
          <Select.Option value="1">Option 1</Select.Option>
          <Select.Option value="2">Option 2</Select.Option>
        </Select>
        <Spacer h={1} />
        <Grid.Container width="100%">
          <Grid xs={8}>
            <Button disabled auto>
              Action
            </Button>
          </Grid>
          <Grid xs={8}>
            <Button auto>Action</Button>
          </Grid>
          <Grid xs={8}>
            <Button auto type="secondary">
              Action
            </Button>
          </Grid>
        </Grid.Container>
      </div>
      <style jsx>{`
        .demo {
          width: 34%;
          margin-top: calc(${theme.layout.gap} * 2);
          margin-right: ${theme.layout.gap};
          padding-right: ${theme.layout.gapQuarter};
          position: relative;
          border-right: 1px solid ${theme.palette.border};
          height: auto;
          transition: width 200ms ease;
        }

        .content {
          width: 100%;
        }

        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .demo {
            display: none;
          }
        }
      `}</style>
    </div>
  )
}