components#GeistProvider TypeScript Examples

The following examples show how to use components#GeistProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: baseline.test.tsx    From geist-ui with MIT License 6 votes vote down vote up 
describe('CSSBaseline', () => {
  it('should render correctly', () => {
    const wrapper = render(
      <GeistProvider>
        <CssBaseline />
      </GeistProvider>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should render dark mode correctly', () => {
    const wrapper = render(
      <GeistProvider themeType="dark">
        <CssBaseline />
      </GeistProvider>,
    )
    expect(wrapper).toMatchSnapshot()
  })
})
Example #2
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Page', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Page>test-value</Page>)
    expect(wrapper.text()).toContain('test-value')
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('the first page should not contain content', () => {
    const html = ReactDom.renderToString(<Page render="effect">test-value</Page>)
    expect(html).not.toContain('test-value')

    const wrapper = mount(<Page render="effect">test-value</Page>)
    expect(wrapper.html()).toContain('test-value')
  })

  it('the first page should contain seo string', () => {
    const html = ReactDom.renderToString(<Page render="effect-seo">test-value</Page>)
    expect(html).toContain('test-value')
    expect(html).toContain('hidden')

    const wrapper = mount(<Page render="effect">test-value</Page>)
    expect(wrapper.html()).toContain('test-value')
  })

  it('the global styles should be added to body element', () => {
    const wrapper = mount(<Page dotBackdrop />)
    expect(wrapper.html()).toContain('global(body)')
  })

  it('should disable dot style when in dark mode', () => {
    const wrapper = mount(
      <GeistProvider themeType="dark">
        <Page dotBackdrop />
      </GeistProvider>,
    )
    expect(wrapper.html()).not.toContain('global(body)')
  })

  it('should work correctly with dot configs', () => {
    const wrapper = mount(<Page dotBackdrop dotSize="20px" dotSpace={0.5} />)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})
Example #3
Source File: index.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('Tooltip', () => {
  it('should render correctly', async () => {
    const wrapper = mount(
      <GeistProvider themeType="dark">
        <Tooltip text={<p id="test">custom-content</p>}>some tips</Tooltip>
      </GeistProvider>,
    )

    expectTooltipIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)
    await updateWrapper(wrapper, 150)
    wrapper.find('#test').simulate('click', nativeEvent)
    expectTooltipIsShow(wrapper)

    await updateWrapper(wrapper, 150)
    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsHidden(wrapper)
  })

  it('should render text when hover it', async () => {
    const wrapper = mount(
      <div>
        <Tooltip text="some text">some tips</Tooltip>
      </div>,
    )
    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsShow(wrapper)

    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsHidden(wrapper)
  })

  it('should render react-node when click it', async () => {
    const wrapper = mount(
      <Tooltip text={<p id="test">custom-content</p>} trigger="click">
        <span>click me</span>
      </Tooltip>,
    )
    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 150)
    expectTooltipIsShow(wrapper)

    const testNode = wrapper.find('#test')
    expect(testNode.length).not.toBe(0)
    expect(testNode.text()).toContain('custom-content')
    act(() => {
      document.body.dispatchEvent(
        new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true,
        }),
      )
    })

    await updateWrapper(wrapper, 150)
    expectTooltipIsHidden(wrapper)
  })

  it('should render inner components', async () => {
    const wrapper = mount(
      <Tooltip text="some text" type="dark">
        <Button auto id="test">
          button
        </Button>
      </Tooltip>,
    )
    expect(wrapper.find('#test').length).not.toBe(0)
  })

  it('should render correctly by visible', async () => {
    const wrapper = mount(
      <div>
        <Tooltip
          text={<p id="visible">custom-content</p>}
          visible={true}
          placement="rightEnd">
          some tips
        </Tooltip>
      </div>,
    )

    await updateWrapper(wrapper, 150)
    expect(wrapper.find('#visible').length).toBe(1)
  })

  it('should render correctly by using wrong placement', async () => {
    const wrapper = mount(
      <div>
        <Tooltip
          text={<p id="initial-visible">custom-content</p>}
          initialVisible={true}
          placement={'test' as any}>
          some tips
        </Tooltip>
      </div>,
    )
    expect(wrapper.find('#initial-visible').length).toBe(1)
  })
})
Example #4
Source File: index.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('UseToast', () => {
  it('should render correctly', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { text: 'test-value' })
    await updateWrapper(wrapper)
    expectToastIsShow(wrapper)
  })

  it('should work with different types', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { type: 'success', text: 'hello' })
    await updateWrapper(wrapper, 100)
    expectToastIsShow(wrapper)
    expect(wrapper.find('.toasts').html()).toMatchSnapshot()
  })

  it('should close toast', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    await updateWrapper(wrapper, 0)
    expectToastIsShow(wrapper)
    // Element already hidden, but Dom was removed after delay
    await updateWrapper(wrapper, 350)
    const toast = wrapper.find('.toasts').find('.toast')
    expect(toast.length).not.toBe(0)
  })

  it('the removeal should be delayed when hover is triggerd', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    await updateWrapper(wrapper, 0)
    expectToastIsShow(wrapper)

    wrapper.find('.toasts').simulate('mouseEnter', nativeEvent)
    await updateWrapper(wrapper, 350)

    // Hover event will postpone hidden event
    let toast = wrapper.find('.toasts').find('.toast')
    expect(toast.length).not.toBe(0)

    // Restart hidden event after mouse leave
    wrapper.find('.toasts').simulate('mouseLeave', nativeEvent)
    await updateWrapper(wrapper, 350 + 200)
    toast = wrapper.find('.toasts').find('.toast')
    expect(toast.length).toBe(0)
  })

  it('should render different actions', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )
    const actions = [
      {
        name: 'remove',
        handler: () => {},
      },
      {
        name: 'remove',
        handler: () => {},
        passive: true,
      },
    ]

    triggerToast(wrapper, { actions, text: 'hello' })
    await updateWrapper(wrapper)
    expectToastIsShow(wrapper)
    expect(wrapper.find('.toasts').html()).toMatchSnapshot()
  })

  it('should close toast when action triggered', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )
    const actions = [
      {
        name: 'remove',
        handler: (_event: any, cancel: () => void) => cancel(),
      },
    ]

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { actions, text: 'hello' })
    await updateWrapper(wrapper)
    expectToastIsShow(wrapper)
    wrapper.find('.action').find('.btn').at(0).simulate('click', nativeEvent)

    // Element already hidden, but Dom was removed after delay
    await updateWrapper(wrapper, 250)
    const toast = wrapper.find('.toasts').find('.toast')
    expect(toast.length).not.toBe(0)
  })

  it('should work with multiple toasts', async () => {
    const wrapper = mount(
      <GeistProvider>
        <MockToast />
      </GeistProvider>,
    )

    expectToastIsHidden(wrapper)
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    triggerToast(wrapper, { delay: 100, text: 'hello' })
    triggerToast(wrapper, { delay: 200, text: 'hello' })

    /**
     * If there are multiple Toasts at different deplay in the stack,
     * the destory Dom event will wait for the maximum delay time.
     */
    await updateWrapper(wrapper, 350)
    expectToastIsShow(wrapper)

    await updateWrapper(wrapper, 200)
    const toast = wrapper.find('.toasts').find('.toast')
    expect(toast.length).not.toBe(0)
  })
})
Example #5
Source File: _app.tsx    From geist-ui with MIT License 4 votes vote down vote up 
Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
  const theme = useTheme()
  const [themeType, setThemeType] = useState<string>()
  const [customTheme, setCustomTheme] = useState<GeistUIThemes>(theme)
  const themeChangeHandle = (theme: GeistUIThemes) => {
    setCustomTheme(theme)
    setThemeType(theme.type)
  }

  useEffect(() => {
    const theme = window.localStorage.getItem('theme')
    if (theme !== 'dark') return
    setThemeType('dark')
  }, [])
  useDomClean()

  return (
    <>
      <Head>
        <title>Geist UI - Modern and minimalist React UI library</title>
        <meta name="google" content="notranslate" />
        <meta name="twitter:creator" content="@echo_witt" />
        <meta name="referrer" content="strict-origin" />
        <meta property="og:title" content="Geist UI" />
        <meta property="og:site_name" content="Geist UI" />
        <meta property="og:url" content="https://geist-ui.dev" />
        <link rel="dns-prefetch" href="//geist-ui.dev" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="generator" content="Geist UI" />
        <meta
          name="description"
          content="An open-source design system for building modern websites and applications."
        />
        <meta
          property="og:description"
          content="An open-source design system for building modern websites and applications."
        />
        <meta
          itemProp="image"
          property="og:image"
          content="https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png"
        />
        <meta
          property="og:image"
          content="https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png"
        />
        <meta
          property="twitter:image"
          content="https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png"
        />
        <meta
          name="viewport"
          content="initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover"
        />
      </Head>
      <GeistProvider themeType={themeType} themes={[customTheme]}>
        <CssBaseline />
        <ConfigContext
          onThemeChange={themeChangeHandle}
          onThemeTypeChange={type => setThemeType(type)}>
          <Menu />
          <Search />
          <MDXProvider
            components={{
              a: HybridLink,
              img: Image,
              pre: HybridCode,
            }}>
            <Component {...pageProps} />
          </MDXProvider>
        </ConfigContext>
        <style global jsx>{`
          .tag {
            color: ${theme.palette.accents_5};
          }
          .punctuation {
            color: ${theme.palette.accents_5};
          }
          .attr-name {
            color: ${theme.palette.accents_6};
          }
          .attr-value {
            color: ${theme.palette.accents_4};
          }
          .language-javascript {
            color: ${theme.palette.accents_4};
          }
          span.class-name {
            color: ${theme.palette.warning};
          }
          span.maybe-class-name {
            color: ${theme.palette.purple};
          }
          span.token.string {
            color: ${theme.palette.accents_5};
          }
          span.token.comment {
            color: ${theme.palette.accents_3};
          }
          span.keyword {
            color: ${theme.palette.success};
          }
          span.plain-text {
            color: ${theme.palette.accents_3};
          }
          body::-webkit-scrollbar {
            width: var(--geist-page-scrollbar-width);
            background-color: ${theme.palette.accents_1};
          }
          body::-webkit-scrollbar-thumb {
            background-color: ${theme.palette.accents_2};
            border-radius: ${theme.layout.radius};
          }
          :root {
            --geist-page-nav-height: 64px;
            --geist-page-scrollbar-width: 4px;
          }
        `}</style>
      </GeistProvider>
    </>
  )
}