Browse Source

updated to latest chakra

master
remorses 8 months ago
parent
commit
d64848c012
63 changed files with 3026 additions and 2429 deletions
  1. +8
    -0
      .changeset/README.md
  2. +10
    -0
      .changeset/config.json
  3. +0
    -10
      .github/workflows/landing-blocks.yml
  4. +0
    -1
      landing-blocks/VERSION
  5. +1
    -1
      landing-blocks/src/Banner.tsx
  6. +1
    -1
      landing-blocks/src/Bullet.tsx
  7. +7
    -7
      landing-blocks/src/Button.tsx
  8. +1
    -1
      landing-blocks/src/CodeSnippet.tsx
  9. +1
    -1
      landing-blocks/src/Countdown.tsx
  10. +2
    -2
      landing-blocks/src/Divider.tsx
  11. +2
    -2
      landing-blocks/src/EmailForm.tsx
  12. +5
    -5
      landing-blocks/src/Faqs.tsx
  13. +1
    -1
      landing-blocks/src/Feature.tsx
  14. +2
    -2
      landing-blocks/src/FeaturesGrid.tsx
  15. +1
    -1
      landing-blocks/src/FeaturesList.tsx
  16. +1
    -1
      landing-blocks/src/Footer.tsx
  17. +1
    -1
      landing-blocks/src/GumroadButton.tsx
  18. +1
    -1
      landing-blocks/src/Heading.tsx
  19. +2
    -2
      landing-blocks/src/Hero.tsx
  20. +1
    -1
      landing-blocks/src/HowItWorks.tsx
  21. +31
    -33
      landing-blocks/src/LandingProvider.tsx
  22. +1
    -1
      landing-blocks/src/Link.tsx
  23. +2
    -2
      landing-blocks/src/NavBar.tsx
  24. +1
    -1
      landing-blocks/src/PatternBackground.tsx
  25. +2
    -2
      landing-blocks/src/Pricing.tsx
  26. +1
    -1
      landing-blocks/src/Section.tsx
  27. +1
    -1
      landing-blocks/src/SectionTitle.tsx
  28. +1
    -1
      landing-blocks/src/Shape.tsx
  29. +1
    -1
      landing-blocks/src/Subheading.tsx
  30. +1
    -1
      landing-blocks/src/TestimonialsLogos.tsx
  31. +1
    -1
      landing-blocks/src/TestimonialsTweets.tsx
  32. +1
    -1
      landing-blocks/src/TopBanner.tsx
  33. +1
    -1
      landing-blocks/src/animations/bouncein.ts
  34. +1
    -1
      landing-blocks/src/animations/headshake.ts
  35. +1
    -1
      landing-blocks/src/animations/jello.ts
  36. +1
    -1
      landing-blocks/src/animations/shake.ts
  37. +1
    -1
      landing-blocks/src/animations/wobble.ts
  38. +1
    -1
      landing-blocks/src/decorations/CurlyWire.tsx
  39. +1
    -1
      landing-blocks/src/decorations/GradientCurtains.tsx
  40. +1
    -1
      landing-blocks/src/decorations/GradientRect.tsx
  41. +12
    -13
      landing-blocks/src/hooks.tsx
  42. +19
    -13
      landing-blocks/src/layout.tsx
  43. +1
    -1
      landing-blocks/src/support.ts
  44. +6
    -1
      package.json
  45. +1
    -1
      website/constants.tsx
  46. +1
    -1
      website/next.config.js
  47. +7
    -6
      website/package.json
  48. +41
    -35
      website/pages/_app.tsx
  49. +1
    -1
      website/pages/demo_roll/[name].tsx
  50. +1
    -1
      website/pages/demos/airtable.tsx
  51. +1
    -1
      website/pages/demos/dovetail.tsx
  52. +1
    -1
      website/pages/demos/gumroad.tsx
  53. +2
    -2
      website/pages/demos/kintohub.tsx
  54. +15
    -7
      website/pages/demos/prisma.tsx
  55. +1
    -1
      website/pages/demos/prismic.tsx
  56. +2
    -2
      website/pages/demos/qovery.tsx
  57. +1
    -1
      website/pages/demos/rocketchat.tsx
  58. +2
    -2
      website/pages/demos/segment.tsx
  59. +1
    -1
      website/pages/demos/spendesk.tsx
  60. +1
    -1
      website/pages/docs/components/feature.mdx
  61. +3
    -4
      website/pages/docs/index.mdx
  62. +2
    -2
      website/pages/index.tsx
  63. +2804
    -2236
      yarn.lock

+ 8
- 0
.changeset/README.md View File

@ -0,0 +1,8 @@
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

+ 10
- 0
.changeset/config.json View File

@ -0,0 +1,10 @@
{
"$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": true,
"linked": [],
"access": "public",
"baseBranch": "master",
"updateInternalDependencies": "patch",
"ignore": []
}

+ 0
- 10
.github/workflows/landing-blocks.yml View File

@ -20,13 +20,3 @@ jobs:
- run: cd landing-blocks && yarn
# - run: yarn test
- run: cd landing-blocks && yarn build
- name: Bump version
uses: remorses/bump-version@js
with:
version_file: landing-blocks/VERSION
prefix: landing-blocks
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: cd landing-blocks && yarn publish
env:
NODE_AUTH_TOKEN: ${{ secrets.npm_token }}

+ 0
- 1
landing-blocks/VERSION View File

@ -1 +0,0 @@
1.0.61

+ 1
- 1
landing-blocks/src/Banner.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 1
- 1
landing-blocks/src/Bullet.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps, useColorMode } from '@chakra-ui/core'
import { Box, BoxProps, useColorMode } from '@chakra-ui/react'
import Color from 'color-js'
import React, { Fragment } from 'react'

+ 7
- 7
landing-blocks/src/Button.tsx View File

@ -1,6 +1,6 @@
/** @jsx jsx */
import { Button as B, ButtonProps as ButtonProps_ } from '@chakra-ui/core'
import { css, jsx } from '@emotion/core'
import { Button as B, ButtonProps as ButtonProps_ } from '@chakra-ui/react'
import { css, jsx } from '@emotion/react'
import Color from 'color-js'
import { FC, forwardRef, Fragment, useMemo } from 'react'
import bounceIn from './animations/bouncein'
@ -11,10 +11,10 @@ import { useColor } from './support'
export type ButtonProps = ButtonProps_ & {
href?: string
animate?: boolean | keyof typeof animations
animate?: boolean | keyof typeof myAnimations
}
const animations = {
const myAnimations: any = {
wobble,
bounceIn,
headShake,
@ -37,8 +37,8 @@ export const Button: FC = forwardRef(
if (animate === true) {
return makeAnimationCss(bounceIn)
}
if (animate && animate in animations) {
return makeAnimationCss(animations[animate as string])
if (animate && animate in myAnimations) {
return makeAnimationCss(myAnimations[animate as string])
}
return css``
}, [animate])
@ -46,7 +46,7 @@ export const Button: FC = forwardRef(
return (
<B
css={animationCss}
ref={ref}
ref={ref as any}
as={props.href ? 'a' : 'button'}
transition='all 0.1s ease-in-out'
px='20px'

+ 1
- 1
landing-blocks/src/CodeSnippet.tsx View File

@ -1,4 +1,4 @@
import { Box, StackProps } from 'layout-kit-react'
import { Box, StackProps } from '@chakra-ui/react'
import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer'
import darkPrismTheme from 'prism-react-renderer/themes/duotoneDark'
// import lightTheme from 'prism-react-renderer/themes/nightOwlLight'

+ 1
- 1
landing-blocks/src/Countdown.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode, useEffect, useState } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 2
- 2
landing-blocks/src/Divider.tsx View File

@ -1,6 +1,6 @@
import { useColorMode } from '@chakra-ui/core'
import { useColorMode } from '@chakra-ui/react'
import Color from 'color-js'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { PageContainer, PageContainerProps } from './layout'

+ 2
- 2
landing-blocks/src/EmailForm.tsx View File

@ -1,5 +1,5 @@
import { Input, useColorMode } from '@chakra-ui/core'
import { Box, Stack, StackProps } from 'layout-kit-react'
import { Input, useColorMode } from '@chakra-ui/react'
import { Box, Stack, StackProps } from '@chakra-ui/react'
import React, { ReactNode, useState } from 'react'
import MailchimpSubscribe from 'react-mailchimp-subscribe'
import { Button } from './Button'

+ 5
- 5
landing-blocks/src/Faqs.tsx View File

@ -1,5 +1,5 @@
import { Accordion, AccordionHeader, AccordionIcon, AccordionItem, AccordionPanel, Heading } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Heading } from '@chakra-ui/react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { useFaded } from './hooks'
import { PageContainer, PageContainerProps } from './layout'
@ -44,7 +44,7 @@ export function Faqs({
key={x.question.toString()}
minWidth='100%'
>
<AccordionHeader minH='60px'>
<AccordionButton minH='60px'>
<Box
fontSize='24px'
fontWeight='medium'
@ -53,8 +53,8 @@ export function Faqs({
>
{x.question}
</Box>
<AccordionIcon size='40px' />
</AccordionHeader>
<AccordionIcon boxSize='40px' />
</AccordionButton>
<AccordionPanel
py='20px'
minH='100px'

+ 1
- 1
landing-blocks/src/Feature.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 2
- 2
landing-blocks/src/FeaturesGrid.tsx View File

@ -1,5 +1,5 @@
import { SimpleGrid } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import { SimpleGrid } from '@chakra-ui/react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'

+ 1
- 1
landing-blocks/src/FeaturesList.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack, StackProps } from 'layout-kit-react'
import { Box, Stack, StackProps } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'

+ 1
- 1
landing-blocks/src/Footer.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { PageContainer, PageContainerProps } from './layout'

+ 1
- 1
landing-blocks/src/GumroadButton.tsx View File

@ -1,4 +1,4 @@
import { Link, useColorMode } from '@chakra-ui/core'
import { Link, useColorMode } from '@chakra-ui/react'
import React, { FC, forwardRef, ReactNode } from 'react'
import useScript from 'react-script-hook'

+ 1
- 1
landing-blocks/src/Heading.tsx View File

@ -1,4 +1,4 @@
import { Heading as H, HeadingProps } from '@chakra-ui/core'
import { Heading as H, HeadingProps } from '@chakra-ui/react'
import React, { Fragment } from 'react'

+ 2
- 2
landing-blocks/src/Hero.tsx View File

@ -1,6 +1,6 @@
// @jsx jsx
import { jsx } from '@emotion/core'
import { Box, Stack } from 'layout-kit-react'
import { jsx } from '@emotion/react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 1
- 1
landing-blocks/src/HowItWorks.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { Subheading } from './Subheading'

+ 31
- 33
landing-blocks/src/LandingProvider.tsx View File

@ -1,12 +1,12 @@
import {
CSSReset,
DarkMode,
ITheme,
Theme as ITheme,
theme as chakraTheme,
useColorMode,
} from '@chakra-ui/core'
import { css, Global } from '@emotion/core'
import { FlexProps, Stack } from 'layout-kit-react'
} from '@chakra-ui/react'
import { css, Global } from '@emotion/react'
import { StackProps, Stack } from '@chakra-ui/react'
import merge from 'lodash/fp/merge'
import React, { Fragment, useMemo } from 'react'
import { PropagatedThemeProvider } from './layout'
@ -47,7 +47,7 @@ export type LandingProviderProps = {
spacing?: any
theme?: DeepPartial<ThemeExtension>
children?: any
} & FlexProps
} & StackProps
/*
should customize
@ -81,35 +81,33 @@ export function LandingProvider({
const theme = useMemo(
() =>
merge(
chakraTheme,
merge(
{
colors: {
primary,
secondary,
black,
white,
},
sizes: {
pageContainer: pageWidth,
},
space: {
pagePadding,
},
fonts: {
body: fontFamily,
heading: fontFamily,
},
fontSizes: {
text: '18px',
heading: '42px',
subheading: '24px',
subtext: '15px',
},
{
colors: {
primary,
secondary,
black,
white,
},
themeProp,
),
sizes: {
pageContainer: pageWidth,
},
space: {
pagePadding,
},
fonts: {
body: fontFamily,
heading: fontFamily,
},
fontSizes: {
text: '18px',
heading: '42px',
subheading: '24px',
subtext: '15px',
},
},
themeProp || {},
),
[pageWidth, primary, secondary, black, white, fontFamily, themeProp],
)
return (
@ -117,7 +115,7 @@ export function LandingProvider({
<Global styles={globalStyles} />
<Mode>
{/* TODO propagate the color mode context from above, setting it to dark if dark=true */}
<CSSReset />
{/* <CSSReset /> */}
<Stack
// overflowX='hidden'
width='100%'

+ 1
- 1
landing-blocks/src/Link.tsx View File

@ -1,4 +1,4 @@
import { Link as Link_, LinkProps as LinkProps_, useColorMode } from '@chakra-ui/core'
import { Link as Link_, LinkProps as LinkProps_, useColorMode } from '@chakra-ui/react'
import React from 'react'
export type LinkProps = LinkProps_

+ 2
- 2
landing-blocks/src/NavBar.tsx View File

@ -6,8 +6,8 @@ import {
DrawerContent,
DrawerOverlay,
useDisclosure,
} from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
} from '@chakra-ui/react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { useMyColorMode } from './hooks'

+ 1
- 1
landing-blocks/src/PatternBackground.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps } from '@chakra-ui/core'
import { Box, BoxProps } from '@chakra-ui/react'
import React from 'react'
export type PatternBackgroundProps = BoxProps & {

+ 2
- 2
landing-blocks/src/Pricing.tsx View File

@ -1,6 +1,6 @@
import { DarkMode, Divider } from '@chakra-ui/core'
import { DarkMode, Divider } from '@chakra-ui/react'
import Color from 'color-js'
import { Box, Stack, StackProps } from 'layout-kit-react'
import { Box, Stack, StackProps } from '@chakra-ui/react'
import React, { Fragment, ReactNode } from 'react'
import { Heading } from './Heading'
import { useMyColorMode } from './hooks'

+ 1
- 1
landing-blocks/src/Section.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps, Stack, StackProps } from 'layout-kit-react'
import { Box, BoxProps, Stack, StackProps } from '@chakra-ui/react'
import React from 'react'
import { getPageContainerProps } from './support'

+ 1
- 1
landing-blocks/src/SectionTitle.tsx View File

@ -1,4 +1,4 @@
import { Stack } from 'layout-kit-react'
import { Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 1
- 1
landing-blocks/src/Shape.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps, useColorMode } from '@chakra-ui/core'
import { Box, BoxProps, useColorMode } from '@chakra-ui/react'
import React, { Fragment } from 'react'
import { useColor } from './support'

+ 1
- 1
landing-blocks/src/Subheading.tsx View File

@ -1,4 +1,4 @@
import { Heading as H, HeadingProps } from '@chakra-ui/core'
import { Heading as H, HeadingProps } from '@chakra-ui/react'
import React, { Fragment } from 'react'
export function Subheading(props: HeadingProps) {

+ 1
- 1
landing-blocks/src/TestimonialsLogos.tsx View File

@ -1,4 +1,4 @@
import { Stack } from 'layout-kit-react'
import { Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'

+ 1
- 1
landing-blocks/src/TestimonialsTweets.tsx View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { TwitterTweetEmbed } from 'react-twitter-embed'
import { Heading } from './Heading'

+ 1
- 1
landing-blocks/src/TopBanner.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { PageContainer, PageContainerProps } from './layout'

+ 1
- 1
landing-blocks/src/animations/bouncein.ts View File

@ -1,4 +1,4 @@
import { keyframes } from '@emotion/core'
import { keyframes } from '@emotion/react'
import { Animation, Keyframe } from './types'
import { cubicBezier, getNextPercentage, scale3d } from './utils'

+ 1
- 1
landing-blocks/src/animations/headshake.ts View File

@ -1,4 +1,4 @@
import { keyframes } from '@emotion/core'
import { keyframes } from '@emotion/react'
import { Animation, Keyframe } from './types'
import { compose, getNextPercentage, rotateY, translateX } from './utils'

+ 1
- 1
landing-blocks/src/animations/jello.ts View File

@ -1,5 +1,5 @@
import { keyframes } from '@emotion/core';
import { keyframes } from '@emotion/react';
import { Animation, Keyframe } from './types';
import { skewXY } from './utils';

+ 1
- 1
landing-blocks/src/animations/shake.ts View File

@ -1,5 +1,5 @@
import { keyframes } from '@emotion/core';
import { keyframes } from '@emotion/react';
import { Animation, Keyframe } from './types';
import { translate3d } from './utils';

+ 1
- 1
landing-blocks/src/animations/wobble.ts View File

@ -1,5 +1,5 @@
import { keyframes } from '@emotion/core';
import { keyframes } from '@emotion/react';
import { Animation, Keyframe } from './types';
import { compose, rotate3d, translate3d } from './utils';

+ 1
- 1
landing-blocks/src/decorations/CurlyWire.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps } from '@chakra-ui/core'
import { Box, BoxProps } from '@chakra-ui/react'
import Color from 'color-js'
import React, { FC } from 'react'
import { useColor } from '../support'

+ 1
- 1
landing-blocks/src/decorations/GradientCurtains.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps } from '@chakra-ui/core'
import { Box, BoxProps } from '@chakra-ui/react'
import Color from 'color-js'
import React, { FC } from 'react'
import { useColor } from '../support'

+ 1
- 1
landing-blocks/src/decorations/GradientRect.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps } from '@chakra-ui/core'
import { Box, BoxProps } from '@chakra-ui/react'
import Color from 'color-js'
import React, { FC } from 'react'
import { useColor } from '../support'

+ 12
- 13
landing-blocks/src/hooks.tsx View File

@ -1,27 +1,26 @@
import { useColorMode } from '@chakra-ui/core'
import { Faded, FadedProps } from 'baby-i-am-faded'
import React, { ElementType, useMemo } from 'react'
// TODO intersection-observer polyfill
// require('intersection-observer')
import { useColorMode } from '@chakra-ui/react'
// import { Faded } from 'baby-i-am-faded'
// import { Faded, FadedProps } from 'baby-i-am-faded'
import React, { ComponentType, ElementType, useMemo } from 'react'
import 'intersection-observer'
export function useFaded({
animate = undefined,
triggerOnce = true,
...rest
}): { Faded: ElementType } {
const component = useMemo(() => {
const defaultProps: FadedProps = {
const component: ComponentType = useMemo(() => {
const defaultProps = {
cascade: true,
threshold: 0.1,
duration: 400,
triggerOnce,
children: []
}
return (props) => {
return <Faded {...defaultProps} {...props} />
children: [],
}
return 'div' as any
// return (props) => {
// return <Faded {...defaultProps} {...props} />
// }
}, [animate, triggerOnce])
return { Faded: animate ? component : 'div' }

+ 19
- 13
landing-blocks/src/layout.tsx View File

@ -1,18 +1,20 @@
import { DarkMode, useTheme } from '@chakra-ui/core'
import { ThemeProvider } from 'emotion-theming'
import { Box, Flex, FlexProps, Stack, StackProps } from 'layout-kit-react'
import { DarkMode } from '@chakra-ui/react'
import { ThemeProvider, useTheme } from '@emotion/react'
import { Box, Flex, StackProps, Stack } from '@chakra-ui/react'
import merge from 'lodash/fp/merge'
import React, { FC, forwardRef, Fragment, useMemo } from 'react'
export const Col: FC<FlexProps> = forwardRef((props, ref) => {
return <Flex align='stretch' ref={ref} direction='column' {...props} />
export const Col: any = forwardRef((props, ref) => {
return (
<Flex align='stretch' ref={ref as any} direction='column' {...props} />
)
})
export { Stack, Box } from 'layout-kit-react'
export { Image } from '@chakra-ui/core'
export { Stack, Box } from '@chakra-ui/react'
export { Image } from '@chakra-ui/react'
export const Row: FC<FlexProps> = forwardRef((props, ref) => {
return <Flex align='stretch' ref={ref} direction='row' {...props} />
export const Row: any = forwardRef((props, ref) => {
return <Flex align='stretch' ref={ref as any} direction='row' {...props} />
})
export const Spacer = ({ x = '0px', y = '0px' }) => {
@ -39,7 +41,11 @@ export const darkStyles = {
// }
export function PropagatedThemeProvider({ theme, children }) {
const existingTheme = useTheme()
let existingTheme = {}
try {
existingTheme = useTheme()
} catch {}
// console.log({ existingTheme: existingTheme.sizes })
const merged = useMemo(() => {
return merge(existingTheme || {}, theme)
@ -84,7 +90,7 @@ export const PageContainer: FC = forwardRef(
return (
<Col
position='relative'
ref={ref}
ref={ref as any}
width='100%'
px='pagePadding'
align='center'
@ -124,10 +130,10 @@ export const PageContainer: FC = forwardRef(
},
)
export const FloatingElement: FC<{ floatingElement } & FlexProps> = forwardRef(
export const FloatingElement: FC<{ floatingElement } & StackProps> = forwardRef(
({ children, floatingElement, ...rest }, ref) => {
return (
<Col position='relative' {...rest} ref={ref}>
<Col position='relative' {...rest} ref={ref as any}>
<Col
position='absolute'
width='100%'

+ 1
- 1
landing-blocks/src/support.ts View File

@ -1,4 +1,4 @@
import { useTheme } from '@chakra-ui/core'
import { useTheme } from '@chakra-ui/react'
import get from 'lodash.get'
import { cloneElement } from 'react'

+ 6
- 1
package.json View File

@ -5,6 +5,11 @@
"website"
],
"scripts": {
"dev": "yarn --cwd website dev"
"dev": "yarn --cwd website dev",
"watch": "yarn --cwd website tsc -w"
},
"devDependencies": {
"@changesets/cli": "^2.12.0",
"framer-motion": "^3.1.1"
}
}

+ 1
- 1
website/constants.tsx View File

@ -1,7 +1,7 @@
import * as landingCards from './svgs/landingCards'
import React from 'react'
import { MyLink } from './pages/_app'
import { GithubLink } from 'dokz'
import { GithubLink } from 'dokz/src'
export const GUMROAD_PRODUCT_ID = 'XJbw'

+ 1
- 1
website/next.config.js View File

@ -1,5 +1,5 @@
const compose = require('compose-function')
const withTM = require('next-transpile-modules')(['landing-blocks'])
const withTM = require('next-transpile-modules')(['landing-blocks', 'dokz'])
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: !!process.env.ANAL,
})

+ 7
- 6
website/package.json View File

@ -17,14 +17,15 @@
"timeout": 9999999999
},
"dependencies": {
"@chakra-ui/core": "0.x",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@chakra-ui/react": "*",
"@emotion/react": "11",
"@emotion/styled": "11",
"@next/bundle-analyzer": "^9.4.4",
"baby-i-am-faded": "^0.0.13",
"baby-i-am-faded": "^2.0.1",
"dokz": "^1.0.34",
"landing-blocks": "*",
"next": "^9.4.1",
"next": "^10.0.4",
"next-transpile-modules": "^6.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-highlight": "^0.12.0",
@ -36,7 +37,7 @@
"async-sema": "^3.1.0",
"capture-website": "^0.8.1",
"compose-function": "^3.0.3",
"next-transpile-modules": "^3.3.0",
"parse-github-url": "^1.0.2",
"react-docgen-typescript": "^1.16.3",
"sucrase": "^3.15.0",
"typescript": "^3.8.3"

+ 41
- 35
website/pages/_app.tsx View File

@ -1,8 +1,8 @@
import { useColorMode } from '@chakra-ui/core'
import { DokzProvider, GithubLink, ColorModeSwitch } from 'dokz'
import { ChakraProvider, useColorMode } from '@chakra-ui/react'
import { DokzProvider, GithubLink, ColorModeSwitch } from 'dokz/src'
import { Footer } from 'landing-blocks/src/Footer'
import { useMyColorMode } from 'landing-blocks/src/hooks'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import NextLink from 'next/link'
import { Link } from 'landing-blocks/src'
import React from 'react'
@ -15,41 +15,47 @@ export default function App(props) {
const { pathname } = useRouter()
if (pathname.startsWith('/docs')) {
return (
<DokzProvider
docsRootPath='pages/docs'
headerItems={[
...headingNavLinks,
// <ColorModeSwitch />,
// <ColorModeSwitch key='1' />,
]}
headerLogo={<HeadingLogoIcon width='36px' opacity={0.8} />}
mdxComponents={{
img: (p) => <img {...p} />,
a: (p) => <p {...p} />,
}}
sidebarOrdering={{
// sidebar ordering
demos: false,
docs: {
index: true,
components: {
hero: true,
feature: true,
featuresList: true,
howItWorks: true,
footer: true,
banner: true,
testimonialsLogos: true,
testimonialsTweets: true,
<ChakraProvider resetCSS>
<DokzProvider
docsRootPath='pages/docs'
headerItems={[
...headingNavLinks,
// <ColorModeSwitch />,
// <ColorModeSwitch key='1' />,
]}
headerLogo={<HeadingLogoIcon width='36px' opacity={0.8} />}
mdxComponents={{
img: (p) => <img {...p} />,
a: (p) => <p {...p} />,
}}
sidebarOrdering={{
// sidebar ordering
demos: false,
docs: {
index: true,
components: {
hero: true,
feature: true,
featuresList: true,
howItWorks: true,
footer: true,
banner: true,
testimonialsLogos: true,
testimonialsTweets: true,
},
},
},
}}
>
<Component {...pageProps} />
</DokzProvider>
}}
>
<Component {...pageProps} />
</DokzProvider>
</ChakraProvider>
)
}
return <Component {...pageProps} />
return (
<ChakraProvider resetCSS>
<Component {...pageProps} />
</ChakraProvider>
)
}
export function MyLink({ href, ...rest }) {

+ 1
- 1
website/pages/demo_roll/[name].tsx View File

@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import Iframe from 'react-iframe'
import { BuyDemosButton } from '..'
import { DEMOS_WEBSITE, headingNavLinks } from '../../constants'
import { Spinner } from '@chakra-ui/core'
import { Spinner } from '@chakra-ui/react'
import { useState } from 'react'
export default function Page({}) {

+ 1
- 1
website/pages/demos/airtable.tsx View File

@ -1,4 +1,4 @@
import { Box, Link } from '@chakra-ui/core'
import { Box, Link } from '@chakra-ui/react'
import { EmailForm, Feature, Footer, Hero, LandingProvider, NavBar, Pricing, TestimonialsTweets } from 'landing-blocks/src'
import React from 'react'
import { FiCheck } from 'react-icons/fi'

+ 1
- 1
website/pages/demos/dovetail.tsx View File

@ -1,4 +1,4 @@
import { Box, Link } from '@chakra-ui/core'
import { Box, Link } from '@chakra-ui/react'
import { Button, Divider, Feature, FeaturesGrid, FeaturesList, Footer, Hero, LandingProvider, NavBar, TopBanner } from 'landing-blocks/src'
import { CurlyWire } from 'landing-blocks/src/decorations'
import React from 'react'

+ 1
- 1
website/pages/demos/gumroad.tsx View File

@ -1,4 +1,4 @@
import { Box, Link } from '@chakra-ui/core'
import { Box, Link } from '@chakra-ui/react'
import { Feature, Footer, GumroadButton, Hero, LandingProvider, NavBar, Pricing, TestimonialsTweets } from 'landing-blocks/src'
import React from 'react'
import { FiCheck } from 'react-icons/fi'

+ 2
- 2
website/pages/demos/kintohub.tsx View File

@ -1,6 +1,6 @@
import { Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/react'
import { Button, Feature, Footer, Hero, HowItWorks, LandingProvider, NavBar } from 'landing-blocks/src'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React from 'react'
const Page = () => (

+ 15
- 7
website/pages/demos/prisma.tsx View File

@ -1,10 +1,18 @@
import { AspectRatioBox, Image } from '@chakra-ui/core'
import { Banner, Button, CodeSnippet, Feature, Footer, Heading, Hero, LandingProvider, NavBar } from 'landing-blocks/src'
import { Box, Stack } from 'layout-kit-react'
import { AspectRatio, Image } from '@chakra-ui/react'
import {
Banner,
Button,
CodeSnippet,
Feature,
Footer,
Heading,
Hero,
LandingProvider,
NavBar,
} from 'landing-blocks/src'
import { Box, Stack } from '@chakra-ui/react'
import React, { Fragment } from 'react'
const heroCode = `
// Creating a new record
await prisma.users.create({
@ -85,7 +93,7 @@ const Page = () => (
heading='Take a Quick Tour'
subheading='Prisma is the perfect companion for building web APIs. It saves repetitive CRUD boilerplate and provides a flexible API for common use cases such as pagination and filtering.'
image={
<AspectRatioBox minW='400px' w='600px' ratio={5 / 3}>
<AspectRatio minW='400px' w='600px' ratio={5 / 3}>
<Box
borderRadius='10px'
shadow='lg'
@ -95,7 +103,7 @@ const Page = () => (
src='https://www.youtube.com/embed/0RhtQgIs-TE'
allowFullScreen
/>
</AspectRatioBox>
</AspectRatio>
}
/>
<Banner

+ 1
- 1
website/pages/demos/prismic.tsx View File

@ -1,4 +1,4 @@
import { Box, Link } from '@chakra-ui/core'
import { Box, Link } from '@chakra-ui/react'
import { Banner, Button, EmailForm, Feature, FeaturesList, Footer, Hero, HowItWorks, LandingProvider, NavBar, PatternBackground, Pricing } from 'landing-blocks/src'
import React from 'react'
import { FiCheck } from 'react-icons/fi'

+ 2
- 2
website/pages/demos/qovery.tsx View File

@ -1,7 +1,7 @@
import { Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/react'
import { Button, Countdown, Divider, EmailForm, Feature, FeaturesList, Footer, Hero, LandingProvider, NavBar, TestimonialsLogos } from 'landing-blocks/src'
import { MailchimpForm } from 'landing-blocks/src/EmailForm'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React from 'react'
const Page = () => (

+ 1
- 1
website/pages/demos/rocketchat.tsx View File

@ -1,4 +1,4 @@
import { Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/react'
import { Button, Divider, Feature, Footer, Hero, LandingProvider, NavBar, TestimonialsLogos } from 'landing-blocks/src'
import { MailchimpForm } from 'landing-blocks/src/EmailForm'
import React from 'react'

+ 2
- 2
website/pages/demos/segment.tsx View File

@ -1,7 +1,7 @@
import { Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/react'
import { Banner, Button, Divider, Feature, Footer, Heading, Hero, LandingProvider, Link, MailchimpForm, NavBar, Section, SectionTitle, TestimonialsLogos } from 'landing-blocks/src'
import { PatternBackground } from 'landing-blocks/src/PatternBackground'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import React, { Fragment } from 'react'
import { FaArrowRight } from 'react-icons/fa'

+ 1
- 1
website/pages/demos/spendesk.tsx View File

@ -1,4 +1,4 @@
import { Box } from '@chakra-ui/core'
import { Box } from '@chakra-ui/react'
import { Button, Faqs, FeaturesList, Footer, Hero, LandingProvider, NavBar } from 'landing-blocks/src'
import { GradientCurtains } from 'landing-blocks/src/decorations'
import React from 'react'

+ 1
- 1
website/pages/docs/components/feature.mdx View File

@ -1,5 +1,5 @@
import { Playground } from 'dokz'
import { AspectRatioBox } from '@chakra-ui/core'
import { AspectRatioBox } from '@chakra-ui/react'
import {
Hero,
Link,

+ 3
- 4
website/pages/docs/index.mdx View File

@ -7,9 +7,8 @@ import {
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
} from '@chakra-ui/react'
import { HeadingLogoIcon } from '../_app'
<Stack align='center' my='40px'>
@ -35,9 +34,9 @@ The available components follow the landing pages most common elements, you can
First install it with its peer dependencies
```bash
npm install landing-blocks @emotion/core @emotion/styled emotion-theming @chakra-ui/core
npm install landing-blocks @emotion/react @emotion/styled @chakra-ui/react
# or
yarn add landing-blocks @emotion/core @emotion/styled emotion-theming @chakra-ui/core
yarn add landing-blocks @emotion/react @emotion/styled @chakra-ui/react
```
You have to use the components under a `LandingProvider`, this component passes the customization and base theme to other landing blocks components

+ 2
- 2
website/pages/index.tsx View File

@ -1,4 +1,4 @@
import { Button, Image, Link, Text } from '@chakra-ui/core'
import { Button, Image, Link, Text } from '@chakra-ui/react'
import {
Banner,
Button as LandingButton,
@ -14,7 +14,7 @@ import {
GumroadButton,
Footer,
} from 'landing-blocks/src'
import { Box, Stack } from 'layout-kit-react'
import { Box, Stack } from '@chakra-ui/react'
import NextLink from 'next/link'
import React from 'react'
import { FiGlobe, FiGrid, FiImage, FiLayers } from 'react-icons/fi'

+ 2804
- 2236
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save