designrevision / shards-react Goto Github PK
View Code? Open in Web Editor NEW⚛️A beautiful and modern React design system.
Home Page: https://designrevision.com/downloads/shards-react/
License: MIT License
⚛️A beautiful and modern React design system.
Home Page: https://designrevision.com/downloads/shards-react/
License: MIT License
In Chrome 71 on windows 10 vertical button group is not alligned properly.
I followed this documentation to create a form: https://designrevision.com/docs/shards-react/component/form.
A form isn't very useful if you can't access the user supplied values so I'm trying to figure out how to access the values entered into the form.
I have a button in my form that when clicked I want to call a method and from that method access the form values. How do you do this?
I'm also new to react should I could be missing something obvious but help would be greatly appreciated.
Every time i try to run npm run-script build : getting error
cross-env REACT_APP_BASENAME=/demo/myproject react-scripts build
Creating an optimized production build...
/home/a/Desktop/Prod/myproject/node_modules/bluebird/js/release/async.js:61
fn = function () { throw arg; };
^
Error: Invalid mapping: {"generated":{"line":318,"column":4},"source":"/home/dataphi/a/Prod/myproject/src/node_modules/shards-ui/src/scss/mixins/_hover.scss","original":{"line":15,"column":-21},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (/h
When i pass a component as a tag to supported element like Nav
import { Link } from 'react-router-dom';
<NavbarBrand tag={Link} to="/">
Agweria
</NavbarBrand>
I get the error : Failed prop type: Invalid prop tag
supplied to NavbarBrand
See console error
Though it works fine even in the above case, is there a way to get rid of the console error.
See . facebook/prop-types#211
ERROR Failed to compile with 1 errors 10:50:51 AM
⠀
error in ./src/components/layout.scss
⠀
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
$popover-arrow-outer-width: $popover-arrow-width + 1px !default;
^
Incompatible units px and rem.
╷
759 │ $popover-arrow-outer-width: $popover-arrow-width + 1px !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
@tisk I'm happy to submit a PR for these errors if you're open to it.
Hi,
Here some npm warning :
npm WARN deprecated [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see axios/axios#3410
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 [email protected]: The zlib module provides APIs for brotli compression/decompression starting with Node.js v10.16.0, please use it over iltorb
According to this advisory, when using bootstrap 4.x, anything prior to 4.3.1 is vulnerable to XSS. Shards currently uses 4.1.3.
This project is great! Will you have official typescript support?
Package bootstrap
Patched in >=3.4.1 <4.0.0 || >=4.3.1
package axios
patched in >=0.21.1
trying to add to an exsitent app, using "yarn add shards-react" error pops up
Couldn't find package "shards-react" on the "npm" registry
Checkbox in toggle mode sends its label element as event.target
to change handler method instead of actual input="checkbox"
and therefor there is no way of determine current value of the toggle. As a result, each toggle at the form needs to have its own on-change handler which update exclusively its own state -> produces too much boiler-plate code
I have multiple dropdowns in my navbar, like notifications and user actions in here
https://designrevision.com/demo/shards-dashboard-react/components-overview
I want the dropdowns to collapse whenever I click anywhere outside the dropdown. Right now shards even allow multiple dropdowns to be open at once
I think someone needs to check the web. Because documentation for getting started in react is not showing up and the server is responding with the following error and is being logged in the console.
TypeError: Cannot read property 'json' of null
at Object.children (production-app.js:54)
at t.n.render (ensure-resources.js:139)
at ci (react-dom.production.min.js:163)
at ui (react-dom.production.min.js:162)
at hi (react-dom.production.min.js:171)
at $i (react-dom.production.min.js:202)
at qi (react-dom.production.min.js:203)
at Na (react-dom.production.min.js:218)
at Ra (react-dom.production.min.js:217)
at Ea (react-dom.production.min.js:214)
You're not returning any data.
I'm not sure why I'm posting an issue in a dead project; I guess this is just a warning to anyone who comes along. This project requires React 16 explicitly, which means you can't even install it if you are using React 17.
Since the maintainer hasn't even answered an issue here in god knows how long (including the recent issue called "Dead", where someone explicitly asks "Is it dead?" ... and no one answers), and since this library can't be used with modern React, I truly think it's safe to say it's dead ... at least until someone forks it and updates it.
Hi guys! Thanks for the awesome project!
I was wondering how to change my default theme's primary and secondary colours. Do I just define a theme object and render it with my main App component?
Thanks!
Most of the time, we want to include a simple tooltip, so I think all the tooltip logic should also be included as a prop to button component. Example:
<Button id="myId" theme="primary" tooltip="😁 Woo! I am a tooltip!" >My Button</Button>
First off let me just say that I <3 this library: it looks great, it's got some great basic utility functionality (but is still very minimal/lightweight), and it feels like a React library, not a UI library ported to React.
However, I have one minor request: the <Fade>
component is great, but I feel like you can't even see a visible fade, so it's more like a visible/not visible component.
To be honest, I was kind of surprised to discover that even just that was pretty useful (I prefer using the tag to display
style ternaries) ... but I feel like it would look a little cooler if I could somehow provide a prop to indicate "fade in 2x or 3x slower" (eg. fadeTime={300}
).
And maybe consider upping the default time too? My perfect scenario would be to have a quick but visible fade happen by default without any props.
EDIT: After a browser restart (among other things) the fade started becoming obvious again. I'd still like a way to have a slightly longer fade, but I think the default time is fine.
I try to add ListGroupItem dynamically. I added key like <ListGroupItem key={id}>...
But this key property has not set to <li>
item inside. Warning appears: Each child in a list should have a unique "key" prop.
Could you please fix this?
Thanks.
Code is deprecated, lots of errors when installing package.json dependencies, website is down... it's a shame, it looked like a beautiful UI library.
website is down:
https://designrevision.com/docs/shards-react/getting-started
react-dom.production.min.js:181 TypeError: Cannot read property 'json' of null
at Object.children (production-app.js:54)
at t.n.render (ensure-resources.js:139)
at ci (react-dom.production.min.js:163)
at ui (react-dom.production.min.js:162)
at hi (react-dom.production.min.js:171)
at $i (react-dom.production.min.js:202)
at qi (react-dom.production.min.js:203)
at Na (react-dom.production.min.js:218)
at Ra (react-dom.production.min.js:217)
at Ea (react-dom.production.min.js:214)
I get two different depreciation warnings while using this library.
react-transition-group
Warning: Legacy context API has been detected within a strict-mode tree:
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Transition$$1
Learn more about this warning here:
Dropdown
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Dropdown which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Context.Consumer)
in Manager (created by Dropdown)
To ensure future compatibility with react 17 (most likely the next react release), Any use of findDOMNode
should be replaced with useRef
or forwardRef
, and react-transition-group
updated accordingly (when it gets updated) (see reactjs/react-transition-group#429)
Hello,
Why FormInput doesn't have a type "hidden" ?
Thanks for your work.
Ben
Chrome's mobile version doesn't toggle the element while tapping on element itself but work normally while tapping the label.
I bought shards pro this morning, but I was also wondering if you have any plans for a pro version of shards react?
I'd happily pay additional $ for having a react storybook!
What is the real point of this due to already established things like reactstrap which this is pretty much just a clone of?? or just writing the bootstrap yourself??
I am not sure this is a bug or simply something I should be controlling myself.
In responsive view, a large table may spill outside of a parent Card.
At the moment in window notifications, we do not have a way to pass the props. Is there any planning for updating that?
I have revised it in our project and can open a possible pull request.
I'm using the Popover
component the way it is described by the documentation except it is throwing a warning in the console.
The warning:
Warning: Invalid value for prop
toggle
ontag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior
at div
at div
at InnerPopper (webpack-internal:///./node_modules/react-popper/lib/esm/Popper.js:52:35)
at Popper (webpack-internal:///./node_modules/react-popper/lib/esm/Popper.js:216:31)
at div
at PopperManager (webpack-internal:///./node_modules/shards-react/dist/shards-react.es.js:5626:5)
at Popover (webpack-internal:///./node_modules/shards-react/dist/shards-react.es.js:5857:5)
at InformationPopover (webpack-internal:///./components/Navbar/InformationPopover/InformationPopover.tsx:17:21)
The code I'm using:
<>
<Button id="nav-toggle-popover" onClick={togglePopover}>
Info
</Button>
<Popover placement="bottom" target="#nav-toggle-popover" toggle={togglePopover} open={isOpen}>
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>How the app works</PopoverBody>
</Popover>
</>
react version: 17.0.1
react-dom version: 17.0.1
shards-react version: 1.0.3
Note:
Everything does work the way it's supposed to, except I wouldn't expect a warning to be thrown.
ButtonGroup
and ButtonMenu
components can already pass down a size
property to their buttons, so:
<ButtonGroup size="sm">
<Button>Foo</Button>
<Button>Bar</Button>
</ButtonGroup>
is the same as:
<ButtonGroup>
<Button size="sm">Foo</Button>
<Button size="sm">Bar</Button>
</ButtonGroup>
In the same fashion, it would be nice if you could set "theme" on a group/menu, so that (for instance) if you wanted a group of dark buttons you could do so with:
<ButtonGroup theme="dark">
<Button>Foo</Button>
<Button>Bar</Button>
</ButtonGroup>
This seems like it would be simple enough to add, so I could potentially submit a PR if desired.
Greetings!
I believe the link to your documentation can be found here: https://designrevision.com/docs/shards-react/getting-started
If I click the "Documentation & Demo" link, it redirects to the correct URL. However, results in the following error:
Hopefully this helps (if you were not aware of the issue)!
Hello,
no specific technical issue here, but I am disappointed with this documentation page: https://designrevision.com/docs/shards-react/component/modal
I think there should be more complex examples and a better definition of the props. In the props section the allowed values should be clearly specified along with a relevant example.
Also for example, you mention in the ModalHeader that there is a closeAriaLabel
prop, that is "The close button's aria label".. But where exactly is this close button? How do I make it appear? Is it something that needs to pop out by default or should be implemented by the developer? These are all questions that are not answered by the Modal documentation page, nor showcased with complex examples, you only show the simplest possible modal...
Maybe it's just me, but I thought it would make sense to raise an issue and share some feedback. Thanks for your time!
Tried installing shards-react from a tutorial. Specifically this tutorial on Traversy Media's channel by @jherr.
Npm install command npm i shards-react
fails with the following error
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 [email protected]: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
npm WARN deprecated [email protected]: The zlib module provides APIs for brotli compression/decompression starting with Node.js v10.16.0, please use it over iltorb
> [email protected] install C:\xampp\htdocs\projects\nodejs\graphchat\client\node_modules\iltorb
> node ./scripts/install.js || node-gyp rebuild
info looking for cached prebuild @ C:\Users\koles\AppData\Roaming\npm-cache\_prebuilds\ee308d-iltorb-v2.4.5-node-v83-win32-x64.tar.gz
http request GET https://github.com/nstepien/iltorb/releases/download/v2.4.5/iltorb-v2.4.5-node-v83-win32-x64.tar.gz
http 404 https://github.com/nstepien/iltorb/releases/download/v2.4.5/iltorb-v2.4.5-node-v83-win32-x64.tar.gz
WARN install No prebuilt binaries found (target=14.4.0 runtime=node arch=x64 libc= platform=win32)
C:\xampp\htdocs\projects\nodejs\graphchat\client\node_modules\iltorb>if not defined npm_config_node_gyp (node "C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2019 (16.9.31205.134) found at:
gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
gyp ERR! find VS - "Visual Studio C++ core features" missing
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack at VisualStudioFinder.fail (C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack at C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack at C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack at C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack at C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack at C:\Users\koles\AppData\Roaming\nvm\v14.4.0\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack at ChildProcess.exithandler (child_process.js:310:5)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at maybeClose (internal/child_process.js:1051:16)
gyp ERR! System Windows_NT 10.0.19042
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\koles\\AppData\\Roaming\\nvm\\v14.4.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\xampp\htdocs\projects\nodejs\graphchat\client\node_modules\iltorb
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of react@^16.6.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^16.6.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node ./scripts/install.js || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\koles\AppData\Roaming\npm-cache\_logs\2021-04-16T22_51_33_384Z-debug.log
node-gyp
package-lock.json
file and re-running npm install
Still no luck... Any help would be much appreciated
https://drive.google.com/file/d/1w4ZyGTrrgp-yWfHJ176dCCtbeKMI7s4B/view?usp=sharing
Sidebar, top-left brand icon, search bar positioning change between pages.
Hi !
I've noticed that the close of button of a dismissible alert is not vertically centered :
Screenshot from the documentation
I'm using Windows 10, and it happens on both Chrome and Microsoft Edge.
Hi guys,
the FormCheckbox and FormRadio doesn't work when "onChange" and "checked" are not provided.
I found out that one of the label is missing htmlFor={id}
which would fix this problem.
PS: The FormCheckbox and FormRadio doesn't integrate well with react-hook-form. Any idea what's the problem?
Hello.
I have found that the DatePicker component shows the wrong week number when the previous year has 53 weeks instead of 52.
In Junary 2021, the component shows week number 1. However according to ISO calendar the correct week number is 53.
This makes all the following week number wrong.
The current package version installed is 1.0.3
Most of the other components are straightforward, and while their documentation is minimal, it's enough. But Slider ... what the heck is the connect
prop? It's in literally every example, but you never once even suggest what it's supposed to do ... it just says Array[Bool]Bool
.
How does pips
work? You've got two examples but never even describe how the prop is supposed to work. I wanted something extremely basic: a slider with only three values. That should have been trivial, but now I'm wondering if I should switch UI libraries (or at the very least go look for a secondary one with a good slider), because I can't even tell whether it's possible or not with this slider, let alone how to actually do it.
The component is full of props, but none are documented :(
Also, when I try to use the useState
hook (the official Facebook-recommended way to do state in React in 2019) I get:
index.js:1375 Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
For code like:
const [value, setter] = useState([0]);
return <Slider
connect
onSlide={setter}
pips={{ mode: "steps", stepped: true, density: 1 }}
start={value} />
I believe onSlide passses some second argument, which annoys React. This makes everyone have to do:
onSlide={value => setter(value)}
... except, for some odd reason the component doesn't parseFloat
the value (which makes no sense since start
is clearly meant to be an array of numbers), so what you actually have to do is:
onSlide={([value]) => setter([parseFloat(value)])}
... and that only works for single values: it gets uglier if you have multiple (although honestly I still don't "grok" how a two-dimensional slider can even have multiple values ... again with the poor documentation.)
Clearly it'd be simpler if the library let you do:
onSlide={setter}
or:
stateSetter={setter}
:)
Also, have you noticed that the slider handle is virtually invisible until you focus it? If the user's monitor doesn't have perfectly calibrated brightness/contrast, they might not even see the handle at all, and not recognize the component as a slider UI.
Please consider making this element more visible: it probably looks perfect on your well-tuned display, but something about the design just fails without perfect contrast, and web developers can't guarantee their users' monitor settings.
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.