clarisights/knitui

A React Component library implementing the Knit design language

knit.design

Storybook : Link

Roadmap: https://www.figma.com/file/o3UDrumhtDT0huZEsPnGPw/KnitUI-planning?node-id=0%3A1

knitui's Issues

Add readme.md

• add figma link (knit design)
• add style guide
• setup guide

Reconcile the Icon container size and spacing with the design specs

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)

For input with disabled prop, the cursor should "not-allowed"

Icon could return a default icon if icon name not matched with defined icon set

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.

Explore usage of notistack for alerts

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.

Implement onLeave animations for Modal

Add additional prop for custom fill in icons for selected color indication to be dynamic

Need to add it to customOFormatColorFill and customOFormatColorText

Implement Breadcrumb component

Design - link

Drawing inspiritations from ant design's component while implementing our design.

Use this thread to add any particuar specs or for suggestions.

[lint]: tslint-config-prettier conflicting with tslint rules

Fixing the config as per suggestions.

Support onFocus & onBlur in Input props

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 :(

Add additional prop to button to change icon color on hover

cc @arorayash @Kushagra8888

Integrate npm package publishing through github

This will make publishing easier and more accessible for all collabroators.

Add code coverage tools

disabled button should not change color on hover/active/focus

As title explains.

Modal: Do not display the footer if there is no content.

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.

Add type definitions for KnitUI components

Add utility to dynamically determine font color based on background

Refer: https://codepen.io/zwattic/pen/VOepvd?editors=1111

Allow passing Icon fill color as a prop for Icons

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.

Current

  const StyledIcon = styled(Icon)`
    path {
      fill: 'white'
    }
  `

Proposed

<Icon type="info" color="white" />

The cursor on the buttons should default to pointer

refactor: remove dependency on "rc-dialog" & "rc-switch"

Hi there,
Great work on creating an awesome component lib cum design system. 👏 🎊

Description

The switch has a dependency of rc-switch

KnitUI/src/components/Switch/styledComponents.tsx

Line 1 in acb3221

import RCSwitch from "rc-switch"

Similarly, Modal too has a dependency of rc-dialog

KnitUI/src/components/Modal/ModalWrapper.tsx

Line 3 in fa9ab8c

import Dialog from "rc-dialog"

I think the components should be decoupled from such dependency.

What can be done?

• Custom implementation can be done (could make a difference in the long run 🚀 )

Let's discuss 📢

Setup theme based on the palette

Icon's size does not change with Button size

When Icon is passed as prop to Button, it's size does not changes corresponding to given button size.

Add storyshots

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)

Button does not respect the onHover prop.

If an onHover prop is passed, the corresponding actions should also be triggered along with the default hover behaviour of the button.

Clubhouse integration

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

Add ErrorBoundary

refer: https://reactjs.org/docs/error-boundaries.html