Skip to content

Commit

Permalink
Update Chakra UI examples to latest versions. (vercel#23585)
Browse files Browse the repository at this point in the history
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [x] Make sure the linting passes
  • Loading branch information
Abdullah Mzaien authored Apr 17, 2021
1 parent 9fcfce3 commit 2e7d405
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 17 deletions.
6 changes: 6 additions & 0 deletions examples/with-chakra-ui-typescript/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,9 @@ yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescri
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

## Notes

Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).

If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.
16 changes: 8 additions & 8 deletions examples/with-chakra-ui-typescript/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
},
"dependencies": {
"@chakra-ui/icons": "^1.0.5",
"@chakra-ui/react": "^1.3.3",
"@chakra-ui/theme-tools": "1.0.4",
"@chakra-ui/react": "^1.4.2",
"@chakra-ui/theme-tools": "1.1.2",
"@emotion/react": "11.1.5",
"@emotion/styled": "11.1.5",
"framer-motion": "^3.5.2",
"framer-motion": "^4.0.3",
"next": "latest",
"react": "^17.0.1",
"react-dom": "^17.0.1"
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/node": "^14.6.0",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"typescript": "4.0.5"
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"typescript": "4.2.3"
},
"license": "MIT"
}
2 changes: 1 addition & 1 deletion examples/with-chakra-ui-typescript/src/components/CTA.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const CTA = () => (
bottom="0"
width="100%"
maxWidth="48rem"
py={2}
py={3}
>
<ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
<Button width="100%" variant="outline" colorScheme="green">
Expand Down
8 changes: 7 additions & 1 deletion examples/with-chakra-ui-typescript/src/components/Hero.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { Flex, Heading } from '@chakra-ui/react'

export const Hero = ({ title }: { title: string }) => (
<Flex justifyContent="center" alignItems="center" height="100vh">
<Flex
justifyContent="center"
alignItems="center"
height="100vh"
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text"
>
<Heading fontSize="6vw">{title}</Heading>
</Flex>
)
Expand Down
6 changes: 6 additions & 0 deletions examples/with-chakra-ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,9 @@ yarn create next-app --example with-chakra-ui with-chakra-ui-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

## Notes

Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).

If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.js`.
8 changes: 4 additions & 4 deletions examples/with-chakra-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
},
"dependencies": {
"@chakra-ui/icons": "^1.0.0",
"@chakra-ui/react": "^1.0.0",
"@chakra-ui/react": "^1.4.2",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"framer-motion": "^2.9.4",
"framer-motion": "^4.0.3",
"next": "latest",
"react": "^17.0.1",
"react-dom": "^17.0.1"
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "MIT"
}
4 changes: 2 additions & 2 deletions examples/with-chakra-ui/src/components/CTA.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const CTA = () => (
py={2}
>
<ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
<Button width="100%" variant="outline" variantcolor="green">
<Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
chakra-ui
</Button>
</ChakraLink>
Expand All @@ -23,7 +23,7 @@ export const CTA = () => (
flexGrow={3}
mx={2}
>
<Button width="100%" variant="solid" variantcolor="green">
<Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
View Repo
</Button>
</ChakraLink>
Expand Down
8 changes: 7 additions & 1 deletion examples/with-chakra-ui/src/components/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { Flex, Heading } from '@chakra-ui/react'

export const Hero = ({ title }) => (
<Flex justifyContent="center" alignItems="center" height="100vh">
<Heading fontSize="10vw">{title}</Heading>
<Heading
fontSize="10vw"
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text"
>
{title}
</Heading>
</Flex>
)

Expand Down

0 comments on commit 2e7d405

Please sign in to comment.