This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
- use the nextv12 example from the storybook-addon-next repo as the with-storybook example found here: 6583c20803/examples/nextv12
- update the readme for the example to include details on what the example includes
- tweak the example from the `storybook-addon-next` repo to work with type checking and linting
Resolves#33889
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
## Context
This was kindly requested by @leerob in [this issue](https://github.com/RyanClementsHax/storybook-addon-next/issues/3) on the `storybook-addon-next` repo.
P.S. thanks to @leerob for making [this video](https://www.youtube.com/watch?v=cuoNzXFLitc&t=1502s). I found it very helpful for getting me up to speed with how to contribute. I hope I did everything right for y'all. Lmk if there was something I could have done better.
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`
Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).
## Documentation / Examples
- [x] Make sure the linting passes
[With next 11 requiring react 17](https://nextjs.org/blog/next-11#upgrade-guide), most of the examples
need to be updated, so the following snippet updated all the examples to
a compatible react version.
```bash
cd examples/
fd -g 'package.json' | xargs sed -r -i 's/"react": ".*"/"react": "^17.0.2"/
fd -g 'package.json' | xargs sed -r -i 's/"react-dom": ".*"/"react-dom": "^17.0.2"/'
# exclude experimental react version
git checkout with-reason-relay/package.json
```
This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.
Here's an example:
## 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
- [x] Examples updated
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [x] Make sure the linting passes
Unfortunately I couldn't push up changes for that branch as maintainers access was disabled.
Closes#18775
## 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
- [ ] Make sure the linting passes
Hi,
I'm submitting this PR for consideration as a new example app showing Styled JSX with SCSS working inside and outside storybook with example components.
Only known issue: I noticed that when running this example with:
`$ yarn next ./examples/with-storybook-styled-jsx-scss`
I receive the following error:
```
error - ./pages/_app.js
Error: [BABEL] .../next.js/examples/with-storybook-styled-jsx-scss/pages/_app.js: Cannot find module 'styled-jsx-plugin-sass' (While processing: ".../next.js/node_modules/next/babel.js")
```
However I notice that this same missing module error is triggered when running this existing example app "with-styled-jsx-scss".
Any changes/tweaks needed?
Thanks!
* Update with-storybook example
* Delete with-storybook-typescript example
* Add TypeScript section to the README
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
* Find/Replace "Deploy it to the cloud..."
* Find/Replace "Deploy it to the cloud..." (no colon)
* Find/Replace "Deploy it to the cloud..." for firebase
* Convert remaining ones
* Storybook deployment
* Update with-stripe-typescript
* Update contributing.md
* Remove `now`
* Update examples/with-stripe-typescript/README.md
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
* Add initial bit for plugins
* Add checks for needed metadata values
* Add test
* Initial plugins changes
* Add handling for _app middleware
* Add loading of _document middleware and
handling of multiple default export syntaxes
* Fix insert order for middleware member expression
* Remove early return from middleware plugin from testing
* Add tests for current plugin middlewares
* Update test plugin package.json
* Update handling for class default export
* Update to use webpack loader instead of babel
plugin, remove redundant middleware naming, and add field for required env for plugins
* Add middleware to support material-ui use case
and example material-ui plugin
* Update tests and remove tests stuff from google analytics plugin
* Remove old plugin suite
* Add init-server middleware
* Exit hard without stack trace when error in collecting plugins
* Add on-error-client and on-error-server and update
to run init-server with next-start in serverless mode
* Update init-client for google analytics plugin
* Add example Sentry plugin and update with-sentry-simple
* Remove middleware field/folder and use src dir for plugins
* Add post-hydration middleware and update
material-ui plugin
* Put plugins code behind flag
* Update chromedriver
* Revert "Update chromedriver"
This reverts commit 1461e978e677f7da05e29e0415ec614a04bf65f9.
* Update lock file
* Remove un-needed _app for sentry example
* Add auto loading of scoped packages, add plugins
config for manually listing plugins, and update
to only collect plugins once
* Update example plugins
* Expose plugins' config
* Rename plugin lifecycles and add babel-preset-build
* Rename other methods with unstable
* Update log when plugin config overrides auto-detecting
I wrote a [script](https://github.com/j0lv3r4/dependency-version-updater) to update dependencies recursively in `package.json` files, e.g.:
```
$ node index.js --path="./examples" --dependencies="react=^16.7.0,react-dom=^16.7.0"
```
This PR contains the result against the examples folder.
The purpose of the PR is to add the simplest possible integration with Storybook.
It leaves the default Storybook and also adds a custom component to show how it would be used in both the app and Storybook.
Update:
Tested with latest 👉 6.1.1
