Skip to content

Commit 30490fc

Browse files
author
Austin Green
authored
chore(docs): add create-react-app codesandbox example (#357)
1 parent 24a73f1 commit 30490fc

File tree

14 files changed

+11231
-2
lines changed

14 files changed

+11231
-2
lines changed

‎.github/ISSUE_TEMPLATE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<!--
2020
BONUS POINTS: spin up and share an example via
21-
https://codesandbox.io/s/43nwpkn717 or https://codesandbox.io/s/new or https://stackblitz.com/fork/react.
21+
https://codesandbox.io/s/github/zendeskgarden/react-components/tree/master/examples/codesandbox/garden-create-react-app or https://codesandbox.io/s/new or https://stackblitz.com/fork/react.
2222
-->
2323

2424
### Fine Print

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ render(<App />, document.getElementById('root'));
173173

174174
Try out Garden React components in a mock product environment.
175175

176-
[![Edit Garden Create-React-App](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/43nwpkn717)
176+
[![Edit Garden Create-React-App](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/zendeskgarden/react-components/tree/master/examples/codesandbox/garden-create-react-app)
177177

178178
## Contribution
179179

‎examples/codesandbox/garden-create-react-app/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/codesandbox/garden-create-react-app/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎examples/codesandbox/garden-create-react-app/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": true,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎examples/codesandbox/garden-create-react-app/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"private": true,
3+
"name": "garden-create-react-app",
4+
"description": "An example application using the Zendesk Garden React Components",
5+
"version": "0.0.0",
6+
"scripts": {
7+
"build": "react-scripts build",
8+
"eject": "react-scripts eject",
9+
"start": "react-scripts start",
10+
"test": "react-scripts test"
11+
},
12+
"dependencies": {
13+
"@zendeskgarden/css-bedrock": "^7.0.25",
14+
"@zendeskgarden/css-variables": "^6.3.4",
15+
"@zendeskgarden/react-avatars": "^6.0.0",
16+
"@zendeskgarden/react-buttons": "^6.0.0",
17+
"@zendeskgarden/react-chrome": "^6.0.0",
18+
"@zendeskgarden/react-dropdowns": "^6.0.0",
19+
"@zendeskgarden/react-grid": "^6.0.0",
20+
"@zendeskgarden/react-loaders": "^6.0.0",
21+
"@zendeskgarden/react-modals": "^6.0.0",
22+
"@zendeskgarden/react-notifications": "^6.0.0",
23+
"@zendeskgarden/react-pagination": "^6.0.0",
24+
"@zendeskgarden/react-ranges": "^6.0.0",
25+
"@zendeskgarden/react-tables": "^6.0.0",
26+
"@zendeskgarden/react-tabs": "^6.0.0",
27+
"@zendeskgarden/react-tags": "^6.0.0",
28+
"@zendeskgarden/react-theming": "^6.0.0",
29+
"@zendeskgarden/react-typography": "^6.0.0",
30+
"@zendeskgarden/svg-icons": "^6.3.0",
31+
"prop-types": "^15.7.2",
32+
"react": "^16.8.6",
33+
"react-dom": "^16.8.6",
34+
"react-scripts": "3.0.1",
35+
"styled-components": "^4.3.1"
36+
},
37+
"keywords": [
38+
"a11y",
39+
"accessible",
40+
"garden",
41+
"react",
42+
"zendesk"
43+
],
44+
"browserslist": {
45+
"production": [
46+
">0.2%",
47+
"not dead",
48+
"not op_mini all"
49+
],
50+
"development": [
51+
"last 1 chrome version",
52+
"last 1 firefox version",
53+
"last 1 safari version"
54+
]
55+
},
56+
"eslintConfig": {
57+
"extends": "react-app"
58+
}
59+
}

‎examples/codesandbox/garden-create-react-app/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/codesandbox/garden-create-react-app/public/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<!--
9+
manifest.json provides metadata used when your web app is installed on a
10+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>You need to enable JavaScript to run this app.</noscript>
26+
<div id="root"></div>
27+
<!--
28+
This HTML file is a template.
29+
If you open it directly in the browser, you will see an empty page.
30+
31+
You can add webfonts, meta tags, or analytics to this file.
32+
The build step will place the bundled scripts into the <body> tag.
33+
34+
To begin the development, run `npm start` or `yarn start`.
35+
To create a production bundle, use `npm run build` or `yarn build`.
36+
-->
37+
</body>
38+
</html>

‎examples/codesandbox/garden-create-react-app/public/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎examples/codesandbox/garden-create-react-app/src/components/ExampleWrapper.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { zdSpacingLg } from '@zendeskgarden/css-variables';
4+
import {
5+
Chrome,
6+
Nav,
7+
NavItem,
8+
NavItemIcon,
9+
NavItemText,
10+
Body,
11+
Content,
12+
Main
13+
} from '@zendeskgarden/react-chrome';
14+
15+
import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
16+
import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/26/home-fill.svg';
17+
18+
const PaddedMain = styled(Main)`
19+
padding: ${zdSpacingLg};
20+
`;
21+
22+
const ExampleWrapper = ({ children }) => (
23+
<Chrome>
24+
<Nav expanded>
25+
<NavItem logo title="Zendesk Garden Code Sample">
26+
<NavItemIcon>
27+
<ZendeskIcon />
28+
</NavItemIcon>
29+
<NavItemText>Zendesk Connect</NavItemText>
30+
</NavItem>
31+
<NavItem title="Home" current>
32+
<NavItemIcon>
33+
<HomeIcon />
34+
</NavItemIcon>
35+
<NavItemText>Home</NavItemText>
36+
</NavItem>
37+
<NavItem brandmark title="&copy;Zendesk">
38+
<NavItemIcon>
39+
<ZendeskIcon />
40+
</NavItemIcon>
41+
<NavItemText>&copy;Zendesk</NavItemText>
42+
</NavItem>
43+
</Nav>
44+
<Body>
45+
<Content>
46+
<PaddedMain>{children}</PaddedMain>
47+
</Content>
48+
</Body>
49+
</Chrome>
50+
);
51+
52+
export default ExampleWrapper;

0 commit comments

Comments
 (0)