clarisights / knitui Goto Github PK
View Code? Open in Web Editor NEWA React Component library implementing the Knit design language
Home Page: https://knitui.design
A React Component library implementing the Knit design language
Home Page: https://knitui.design
As title explains.
Hi there,
Great work on creating an awesome component lib cum design system. ๐ ๐
The switch has a dependency of rc-switch
Similarly, Modal too has a dependency of rc-dialog
I think the components should be decoupled from such dependency.
Let's discuss ๐ข
https://storybook.js.org/docs/testing/structural-testing/
Since we are already using storybooks, the stories can be used as jest snaphost test using this addon. I've attempted to integrate it but encountered some issues which I could not resolve...
yarn run v1.15.2
$ jest --verbose=false --no-cache
FAIL components/Button/__tests__/storyshots.test.js
โ Test suite failed to run
/home/kushagra/work/clarisghts/KnitUI/components/assets/fonts/Inter-Thin-BETA.woff:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){wOFF
SyntaxError: Invalid or unexpected token
> 1 | const InterThin = require("../assets/fonts/Inter-Thin-BETA.woff")
| ^
2 | const InterLight = require("../assets/fonts/Inter-Light-BETA.woff")
3 | const InterRegular = require("../assets/fonts/Inter-Regular.woff")
4 | const InterMedium = require("../assets/fonts/Inter-Medium.woff")
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
at Object.<anonymous> (components/styles/fonts.tsx:1:19)
This will make publishing easier and more accessible for all collabroators.
A common use case for svg icons is to be able to supply a color to better complement the foreground or background. At the moment it can be done by targeting the path through css but it would be a lot more convenient to be able to pass it via props.
const StyledIcon = styled(Icon)`
path {
fill: 'white'
}
`
<Icon type="info" color="white" />
When Icon is passed as prop to Button, it's size does not changes corresponding to given button size.
https://iamhosseindhv.com/notistack
This could help us trim down our own implementation while leveraging the benefits of a maintained open source implementation which seems to be better on customizability, features and documentation.
Presently Input doesn't pass onFocus and onBlur to the input tag, need it for several use cases.
cc @arorayash opting for a normal input tag for now. Will replace by KnitUI Input once this goes through.
... But I need addonBefore though :(
If an onHover
prop is passed, the corresponding actions should also be triggered along with the default hover behaviour of the button.
Design - link
Drawing inspiritations from ant design's component while implementing our design.
Use this thread to add any particuar specs or for suggestions.
When the passed icon name does not match the defined icon set, it results in script error similar to the one pasted below:
Icons["IconSystem".concat(...)] is not a function
TypeError: Icons["IconSystem".concat(...)] is not a function
at Icon (http://localhost:9001/main.14a3fe0b21ed408ed8c4.bundle.js:630:46)
Alternatively, a default placeholder icon could be returned to avoid unchecked client side errors.
This project is not currently integrated, anyone who have access to settings of this project, please integrate clubhouse, like our adwyze-frontend project. Here is the help page to setup clubhouse integration
The modal's footer has some default padding. Even when the footer does not have any content, the padding is still applied resulting in some visible space being occupied. Ideally, if no content is provided the paddings should not be there.
Need to add it to customOFormatColorFill
and customOFormatColorText
Screenshot of the icon and its container from the design specs which is a 18x18 container with an approximately 10x14 icon.
Below is the screenshot of the current implemented Icon component, which is a 28x28 wrapper containing a 24x32 svg (spills out of the container) which in turn contains a 13x13 path (the actual icon)
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.