patternfly / patternfly-react-seed Goto Github PK
View Code? Open in Web Editor NEWA PatternFly 5 seed for React web applications
Home Page: http://patternfly-react-seed.surge.sh/
License: MIT License
A PatternFly 5 seed for React web applications
Home Page: http://patternfly-react-seed.surge.sh/
License: MIT License
To reproduce, add a deep route - eg /some/thing
- and have it served by any sample component. Then hit the refresh button; the app will fail to load because bundles are served from a path that's relative to the current route.
A way to address the issue is to add a <base href="/">
tag in the header section of the index.html file, but I wonder if that's the best way to do it.
I have patternfly-react-seed running behind nginx which routes /console to it. Hitting that url, I get:
GET https://devel.example.com/app.bundle.js/ net::ERR_ABORTED 404
The source looks like this (call to script has the error):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Patternfly Seed</title>
<meta id="appName" name="application-name" content="Patternfly Seed" />
</head>
<body>
<noscript>Enabling JavaScript is required to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
Hi there,
First off: Congrats on Pf4. Looks pretty well thought over :)
I have done a project in Patternfly 3, years back and I was looking to start with PatternFly4 on this upcoming project. I am looking to use the React components together with Nextjs(https://nextjs.org/) and I am looking for somebody who has done the same and could share the base setup with me. I'm not the biggest webpack hero :D ... yet
Some customers may find it desirable to support IE11, even though Patternfly does not. Let's take a shot at making this happen to see if it's possible to accomplish without having to touch PF core or react.
Set up yarn and pull in least required packages to make a build
Create a readme
gitignore
etc.
Do you have any example of using Routers with React Lazy and Suspense .
Right Now All Routes are defined in routes.tsx
I am trying to implement Micro Front End with Remote routes using web pack module-federation
Thanks !!
Same as title; To migrate from master branch to main to be inline with the Red Hat initiative
We'd like to show users how to avoid automatically pulling in all patternfly 4 stylesheets during development mode, for the case where it's desired to manually load individual stylesheets from core. Looks like null-loader may be able to help with this.
It's all in an effort to not have to deal with so many stylesheets during development.
Jest has migrated to Babel 7 (jestjs/jest#7016), and currently supported in their v24.0.0-alpha.9 build.
If we upgrade to v24 once it's available, we can remove "babel-core": "^7.0.0-bridge.0"
from our package.json
$ git clone git@[email protected]:patternfly/patternfly-react-seed.git
$ cd patternfly-react-seed
$ rm package-lock.json
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.5.4 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-router-last-location
npm ERR! react-router-last-location@"^2.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/javiroman/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/javiroman/.npm/_logs/2022-04-04T06_44_47_718Z-debug-0.log
$ npm --version
8.3.1
$ node --version
v16.14.0
I'm not sure about the issue, any idea about re-creating the dependency tree when the package-lock.json file is missing?
The following request came in from a community user:
I just want a global constant that can be one thing when the environment is in dev mode (e.g.
dev.blah.com
), and have it be another (e.g.api.blah.com
) when it's prod
Let's see if we can make this happen in a generic and simple way.
When performing a production build I noticed that there images where not getting base64 encoded or copied to the dist directory during the build. The images remained in the original folder /assets/images. Since products would deliver what's in the dist directory we should update the build to copy the images over to the dist directory.
In v3, there was a seed code for html/css but I don't see any in the v4.
The repo currently has both package-lock.json
and yarn.lock
files present.
Our README uses npm
commands, so I assume the intention was to switch from yarn to npm. Inspecting the history:
yarn.lock
initiallyyarn.lock
and switched us to npm's package-lock.json
yarn.lock
as a side-effectdependabot
, where package-lock.json
has also been modified by handSo I think we just need to delete yarn.lock
. I wonder if we should add it to .gitignore?
The javascript
branch has become out of date, let's update the dependencies and out of box config so that it's comparable to the default branch which is geared toward typescript.
It would be nice if users didn't have to implement routing, it's like, the very first battle every dev will run into. Can we add minimal support for this out of the box?
As a developer, it's a bit cumbersome to consume pf-seed in its current form. People have to clone/fork it, find & replace a bunch of text, likely make other small adjustments to suit their needs.. before you know it what could have been a 1-minute setup turned into, well, something less straight forward.
We'd like to be able to offer some level of automatic configuration that's not possible with a single offering like we have today. For example, the ability to choose between TypeScript and JavaScript as a base language, or a specify a certain type of testing framework.
Something like the angular cli or create-react-app would really help us in both the short and long term. Yeoman has been around for a long time and has quite a community, and gives us the ability to create custom generators. similar to those I mentioned.
Let's give it a try and see what it would take to offer a TypeScript and JavaScript configuration option, as well as exposing options for setting the app name and other simple things that will keep users from having to immediately find & replace upon installing the seed project.
Generally, we want to ensure that after a new view is loaded, screen reader users are informed and adequately oriented so that they can easily find and consume the new content.
For us to do this, the following needs to be addressed;
<title>
needs to be updated per pageCurrently, after selecting an item from the primary navigation, nothing relevant to the page change is announced and it's verified that the user is still focused on the link. Let's improve this so that some basic information is provided and ideally send focus to the new content once it's available.
Describe the bug
npm run start:dev produces error
To Reproduce
Steps to reproduce the behavior
Expected behavior
working build/service
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
cd patternfly-react-seed
npm install && npm run start:dev
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated @storybook/[email protected]: deprecating @storybook/addon-knobs in favor of @storybook/addon-controls
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
added 3077 packages, and audited 3078 packages in 38s
230 packages are looking for funding
run `npm fund` for details
44 vulnerabilities (3 low, 9 moderate, 30 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
> [email protected] start:dev
> webpack serve --color --progress --config webpack.dev.js
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ 「wds」: Project is running at http://localhost:9000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ./dist
ℹ 「wds」: 404s will fallback to /index.html
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/util/createHash.js:145:18)
at BulkUpdateDecorator.update (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/util/createHash.js:46:50)
at OriginalSource.updateHash (/home/daemonna/patternfly-react-seed/node_modules/webpack/node_modules/webpack-sources/lib/OriginalSource.js:104:8)
at NormalModule._initBuildHash (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:870:17)
at handleParseResult (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:936:10)
at /home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:1028:4
at processResult (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:745:11)
at /home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:809:5
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/util/createHash.js:145:18)
at BulkUpdateDecorator.update (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/util/createHash.js:46:50)
at OriginalSource.updateHash (/home/daemonna/patternfly-react-seed/node_modules/webpack/node_modules/webpack-sources/lib/OriginalSource.js:104:8)
at NormalModule._initBuildHash (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:870:17)
at handleParseResult (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:936:10)
at /home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:1028:4
at processResult (/home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:745:11)
at /home/daemonna/patternfly-react-seed/node_modules/webpack/lib/NormalModule.js:809:5 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
ensure the dependabot's version bumps are nonbreaking and merge them
make appropriate changes so that dependencies can be brought up to date
The idea is that the simplest version of this build system will ONLY produce a working build and not also provide things like application layout/structure with routing and all those features. Instead, the only proof that things are up and running should be a single SUCCESS notification in the middle of the screen upon launching the app.
From there, users can take the app in any direction they choose.
See #150 for context.
We need to wait for storybookjs/storybook#14119 to be resolved, and then upgrade to the latest release of Storybook once that fix is released.
When running npm install
, these warnings are all due to outdated dependencies in Storybook:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN @reach/router@"^1.2.1" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info/node_modules/@storybook/api
npm WARN 3 more (@storybook/router, @storybook/api, @storybook/router)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN @reach/router@"^1.2.1" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info/node_modules/@storybook/api
npm WARN 3 more (@storybook/router, @storybook/api, @storybook/router)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 42 more (@patternfly/react-core, @patternfly/react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN @reach/router@"^1.2.1" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info/node_modules/@storybook/api
npm WARN 3 more (@storybook/router, @storybook/api, @storybook/router)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN @reach/router@"^1.2.1" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info/node_modules/@storybook/api
npm WARN 3 more (@storybook/router, @storybook/api, @storybook/router)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/create-react-context
npm WARN create-react-context@"0.3.0" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN 1 more (react-popper)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/create-react-context
npm WARN create-react-context@"0.3.0" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN 1 more (react-popper)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/mini-create-react-context
npm WARN mini-create-react-context@"^0.4.0" from [email protected]
npm WARN node_modules/react-router
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/mini-create-react-context
npm WARN mini-create-react-context@"^0.4.0" from [email protected]
npm WARN node_modules/react-router
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-clientside-effect
npm WARN react-clientside-effect@"^1.2.2" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-clientside-effect
npm WARN react-clientside-effect@"^1.2.2" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0" from [email protected]
npm WARN node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0" from [email protected]
npm WARN node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 42 more (@patternfly/react-core, @patternfly/react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0" from [email protected]
npm WARN node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0" from [email protected]
npm WARN node_modules/react-element-to-jsx-string
npm WARN react-element-to-jsx-string@"^14.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/addon-info
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN react-focus-lock@"^2.1.0" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN react-focus-lock@"^2.1.0" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN 1 more (@storybook/ui)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN 1 more (@storybook/ui)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 42 more (@patternfly/react-core, @patternfly/react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN 1 more (@storybook/ui)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN 1 more (@storybook/ui)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"0.14.x || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-popper
npm WARN react-popper@"^1.3.7" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"0.14.x || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-popper
npm WARN react-popper@"^1.3.7" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.6.0" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN react-popper-tooltip@"^2.8.3" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16.6.0" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN react-popper-tooltip@"^2.8.3" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 42 more (@patternfly/react-core, @patternfly/react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.6.0" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN react-popper-tooltip@"^2.8.3" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^16.6.0" from [email protected]
npm WARN node_modules/react-popper-tooltip
npm WARN react-popper-tooltip@"^2.8.3" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=0.14.0 <17.0.0" from [email protected]
npm WARN node_modules/react-textarea-autosize
npm WARN react-textarea-autosize@"^7.1.0" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@">=0.14.0 <17.0.0" from [email protected]
npm WARN node_modules/react-textarea-autosize
npm WARN react-textarea-autosize@"^7.1.0" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^1.0.0-alpha.6" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^1.0.0-alpha.6" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 42 more (@patternfly/react-core, @patternfly/react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^1.0.0-alpha.6" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^1.0.0-alpha.6" from @storybook/[email protected]
npm WARN node_modules/@storybook/components
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/use-callback-ref
npm WARN use-callback-ref@"^1.2.1" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/use-callback-ref
npm WARN use-callback-ref@"^1.2.1" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 89 more (@emotion/core, @emotion/styled, @emotion/styled-base, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/use-sidecar
npm WARN use-sidecar@"^1.0.1" from [email protected]
npm WARN node_modules/react-focus-lock
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"^16.8.0" from [email protected]
npm WARN node_modules/use-sidecar
npm WARN use-sidecar@"^1.0.1" from [email protected]
npm WARN node_modules/react-focus-lock
Setup MiniCssExtractPlugin
https://github.com/survivejs/webpack-book/blob/dev/manuscript/styling/02_separating_css.md
Ensure we have nice css sourcemaps in both dev and prod.
The seed application should be streamlined for startup applications and not component development.
Reference this task as including storybook was a feature request.
Jest and enzyme, probably.
With the latest round of webpack upgrades, storybook seems to have broken. I did work through the noted migration steps locally, but still no luck as I get the common TypeError: Cannot read property 'tapAsync' of undefined
error that others are hitting. Maybe a future storybook upgrade will fix it?
As the size of a project based on this seed app grows, we begin to notice performance problems, particularly around running production builds, but also even just around starting/hot-reloading the dev server. No errors per-say, but at one point I saw the dev server and prod build taking minute(s) to recompile - this is far too slow to be practical for development.
Can we make some improvements to the webpack config to make it better again?
Here's an example of how long it takes to build the empty project/start dev server on my local machine (~11 seconds).
Hello,
thanks for the cool project, although the learning curve seems pretty steep for a newbie.
When following the Quickstart Guide the build fails due to a missing rimraf
and webpack
Dependency/Installation. Maybe it would make sense to include that into the Quickstart?
Thanks!
I'm having trouble with the CSS variables. I'm trying to apply {background-position: center;}
to my <BackgroundImage />
, but no luck so far.
I've read about how the variable names are structured, but I'm obviously not doing it correctly (since it's not working!). I've also done the customization tutorial, but, again, there's some kind of disconnect.
I'm using the :root
pseudoclass per the tutorial, and I've structured the property name based on the names given on the BackgroundImage component's doc page.
:root {
--pf-c-background-image--BackgroundPosition: center;
}
It also fails using the css class given in the doc page, eg:
.pf-c-background-image {
background-position: center;
}
While help with this particular issue would be lovely, what I'd really like to see would be, in the seed repo, a couple of css variable overrides in the app.css
file, so users can see functional code - preferably in a css property that isn't explicitly given on the documentation pages, so users can see how to construct new ones.
This issue is for making build/configuration/naming convention alignment type changes to the codebase. We want patternfly seed project to reflect successful aspects of other PF project setups where possible, in terms of directory structure and code-level design patterns.
My understanding is that aria-current for NavLink is automatically set by inspecting the current URL and comparing it against the route path defined for a given route. It doesn't seem to be working, it would be great if we can fix it as it improves the experience for users of assistive technology.
Right now we suggest doing something like this
const SomePage = (routeProps: RouteComponentProps) => {
const lastNavigation = useLastLocation();
return (
<DynamicImport load={getSomePageModuleAsync()} focusContentAfterMount={lastNavigation !== null}>
{(Component: any) => {
if (Component === null) {
return (
<PageSection aria-label="Loading Content Container">
<div className="pf-l-bullseye">
<Alert title="Loading" className="pf-l-bullseye__item" />
</div>
</PageSection>
);
} else {
return <Component />; // we are not passing a prop that is required, but the TS compiler can't know this because we lost the component's types in the process!
}
}}
</DynamicImport>
);
};
Component
is typed as any
, which makes it impossible to make sure the right props are being passed to the component.
It would be nice specifying the interface the dynamically loaded component should respect, something like this:
interface SomePageRoute {
foo: string;
}
const SomePage = (routeProps: RouteComponentProps<SomePageRoute>) => {
const lastNavigation = useLastLocation();
return (
<DynamicImport<ISomePageProps> load={getSomePageAsync()} focusContentAfterMount={lastNavigation !== null}>
{(Component) => {
// Component here would be the actual component class/function, with the right type.
if (Component === null) {
return (
<PageSection aria-label="Loading Content Container">
<div className="pf-l-bullseye">
<Alert title="Loading" className="pf-l-bullseye__item" />
</div>
</PageSection>
);
} else {
return <Component someRequiredPropFromTheRouter={routeProps.match.params.foo} />;
}
}}
</DynamicImport>
);
};
It doesn't sound like much, but this way the compiler can help you avoiding gluing a component to a route that doesn't provide the required data to instantiate it.
It would be good to have even the smallest support for multiple types of builds for multiple environments. Let's add hook which allows for production and development build modes.
Awesome source maps please!
Steps to reproduce:
<Toolbar>
<ToolbarContent>
<ToolbarItem>Foo</ToolbarItem>
</ToolbarContent>
</Toolbar>
npm install && npm run start:dev
to start the dev server as described in the https://github.com/patternfly/patternfly-react-seed#quick-startAdditional Info:
The extra padding there is caused by the hidden div
not having the proper styles. Since the div
has the class pf-m-hidden
and the attribute hidden
it should have display: none
but it actually has display: flex
This causes it to be part of the document and the row-gap: 24px
of the toolbar causes it to put a 24px space between the actual toolbar content div and the hidden div
Just a tiny issue. Thanks for this.
Stand up a basic development server to handle transpiling, live reloading, etc.
I don't know if this is the place to ask questions, let me know please where can I join.
I'm building the new Infinispan Console with Patternfly 4 and react, taking this seed as the starting point.
https://github.com/karesti/infinispan-console-ng
I've put under `src/app/assets/images' the images we need to display on the header.
I updated the AppLayout such as
import brand from '@app/assets/images/brand.svg';
const Header = (
<PageHeader
logo={<Brand src={brand} alt="Datagrid Management Console"/>}
Unfortunately, the svg image does not display. I tested with a png and it works.
Do I need to add anything else? In the official documentation, the svg seems supported in the brand component.
Thank you!
Katia
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
Use case is to take the files generated in dist/
and put them on a webserver in a non-root path.
The error I encounter when doing this is that the patternfly fonts, specified in the main.css
use a url(/fonts/...)
path, which forces the browser to look at the root, rather than relative to the base path.
Is there anyway to update webpack to change this?
People who want to get started in building PatternFly UIs are encouraged to fork this seed repository as a starting point for their development, however repository forking was not intended for this purpose and thus doing it this way creates some annoyances for downstream developers:
This means that users who want to bypass this will most likely simply clone the repository and push into a new one which is annoying/time consuming.
GitHub provides a feature known as template repositories [1] which makes these annoyances moot, users who create new repositories off of a template will start with a blank git commit history and are free to choose between public and private visibility for the generated repository.
We've spoke about it for a while, in a nutshell the issue is that tslint will be deprecated in favor of eslint. We currently use tslint for linting, can we add eslint and keep both until we need to remove tslint?
We have a bunch of projects based on this, and we just found out that Typescript's type checking is completely disabled across the board.
This means that you can write invalid code like the following and not get a warning when building the project.
const foo: string[] = [1, 2, 3]; // <- this shouldn't pass
Flipping this boolean will properly detect the error and stop the project from being built.
Hi,
When building, the following warnings appear, followed by a page of related warnings.
warning " > @storybook/[email protected]" has unmet peer dependency "@babel/core@^7.0.1".
warning " > @storybook/[email protected]" has unmet peer dependency "babel-loader@^7.0.0 || ^8.0.0".
Mike
Decide what's worth documenting and take a first pass on documenting the patternfly specific aspects of the build. Some topics could be
Adding the ability to test typescript components would help us:
Linting script would be great
Prettier
Bundle analyzer
etc.
Tried to add a background image to the project using the instructions found here:
http://patternfly-react.surge.sh/patternfly-4/components/backgroundimage
Unfortunately it didn't not get displayed, it was just the grey background with no image. The images where located in /assets/images that I created within the project.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.