amhsirak/chic-ui

Opinionated UI Component Library for React

chic-ui's Issues

Form error

New Component - Tooltip

Positions - left, right, top, bottom

Add Form

Hi @karishmashuklaa, Can I implement Form components? I'll use react-final-form

Enforce code style

Right now the code style of the project can be mixed by some people using double and other single quotes, mix tab or spaces, etc.
I think it's a great idea to enforce a code style to follow, so we could set a eslint file on the project for it

Add Size Prop for Avatar

add a size props for avatar so we can control the height and width of the avatar component

New Component - Drawer

Hi @karishmashuklaa ,

I would like to contribute.

Drawer Component - Overlay component which slides from the side of the page.

Requirement:

• The Drawer can appear from any edge of the screen.
• The Drawer should have sliding open close animation.

Whare can we use this.

• For the forms that are too heavy for a modal.
• For multistep forms whare we want user to interact without leaving the current page.

Move to monorepo

To include https://github.com/karishmashuklaa/chic-ui-docs here.

Add Badge Component (and rename Badge to Tag)

Hey! I would like to add a Badge component which displays a count or just a colored dot overlayed over its children. The old Badge component should be renamed to Tag as its more descriptive of its use.

The component should take these props:

• count: number - number to display in the badge
• limit: number - the maximum count after which we get something like 99+
• type: 'default' | 'secondary' | 'danger' | 'warning' | 'success'| 'light' - color
• size: number - the size in px
• shouldDisplayZero: boolean - badge should render even if count === 0
• shouldDisplayCount: boolean - should render count or just an empty dot
• offset: [number, number] - x and y offset in px

---

Question: What are your naming conventions for boolean props? I am personally not a fan of disabled or error when compared to isDisabled and hasError. Looking for your suggestions for the two boolean props here (showZero vs shouldDisplayZero etc.)

Path aliases

I think it would be good to configure path aliases to avoid imports like ../../ and we could use something like
@/components
@/config
Etc.

Add Select Component

Add a select component that takes a list and an onChange function as input and returns a drop-down select component. We can further extend this to make an auto-complete/filterable select component. I would like to work on this.

Add Switch Component

Add Alert Component

Add modal component

Hi @karishmashuklaa , can I implement the modal component ?

Add a Modal component

Pagination component

I think it would be cool to work in a pagination component, it could take props for:

• decide if you want the prev/next page to be buttons or arrows
• decide how many page buttons to display
• decide if you want to move between pages using buttons with page number or otherwhise use text input to write the page
• some color props to give style to the page buttons

I could work on this

Add Alerts Component

I could try and add an Alert Component. One of those Messages that could appear in any color in the palette.

Could be used for error messages etc.

Discussion: Making SearchBar flush with Search-Button

I was checking out the existing Components and wanted to put it our there for discussion, if it would be nicer to make the right side of the search bar flush with the Search-Button?

Changing the border-radius on the bar and the button would be necessary then.

Just asking if it would be a good idea?

Feature - Add `type` prop to Breadcrumb component

For colored breadcrumbs.
Add prop type based on existing theme.

Add AsyncSelect Component

Hey @karishmashuklaa I would like to add an AsyncSelect component which can lazy load data from API in select dropdown. If you are interested please assign it to me.

Add Multi-Select Component

Create a component that takes in a list of objects as input and displays a multi-select drop-down list allowing users to select more than one option. Can you please assign this to me? :)

Improve CSS style for form inputs

Hi @karishmashuklaa, I want to improve CSS style for the form input.

Add Progress Bar Component

Bug : Backdrop overflows on scroll

Webpack5 Support

Add Card Component

Add a simple card component which can take header, footer, text, images, links,

New component: Accordian

Props can be title and description

Circular Progress Bar

Slider Component

What do you think about having a slider component?

This allows the selection of values from a range via mouse, touch, or keyboard, similar to <input type="range">

something like this?

I could work on this.

classname prop

for custom styling as I told @karishmashuklaa a few days ago.

Website Frontend

how I can contribute to your website frontend in Chic UI

Proposal for theme structure

Hi, right now each person is doing copy-paste of the secondary, danger, warning, success, light themes in their own component, if the colors change in the future all the components would need to be modified.
I think the best solution is create a theme file with the theme object that everyone can import in their components.
If you agree with it, I can start working on the refactor

Feature - Add `type` prop to Link component

Currently, Link Component has a hard coded color.
Instead, pass a prop type based on existing theme.

New Component : Backdrop

props :

• visible
• color
• z-index

New Component - Steps

Hi @karishmashuklaa ,

I would like to contribute.

Steps Component- A navigation bar like component using which we can break a task into multiple steps and user navigates to next step after completing previous one.

Requirement:

• The component should be able to handle dynamic numbers of steps.
• The component should be rendered horizontally and vertically.
• Steps header should be static or clickable.
• Steps can have dynamic icon, header and sub header.
• Steps can accept theme property.
• Should accept dynamic separator and step node.

Whare can we use this:

• When a given task is complicated or has a certain sequence in the series of subtasks, we can break it into multiple steps to make things easier.
• We can show progress of certain task like tracking an order.

Add Notification Component

I could add a little Notification Pop-Up which appears at the bottom right/left side and can be closed with the X-Button.

Feature - Add options to Progress Bar component

It'd be nice a type props for make the bar with stripes or not. Furthermore, add options to make the bar animated or not. If it's possible I'd like to be assigned to this =D

Bug : TypeError: can't define property "current": Object is not extensible in Backdrop component

Add Breadcrumb Component

Implement recommended community standards to the project

Hello @karishmashuklaa

I was going though this project and noticed that there are some missing items based on the Github Community Standards recommendations that would make the project contributor friendly, e.g. a code of conduct, an issue template and a pull request template.

Let me know if this is something you would like to implement on this project.

Add FAB (Floating Action Button) component

props can be position, size, icon, disability.

Add Selectable card component

Hi @karishmashuklaa ! What do you think about creating a selectable card component? If you like the idea, assign me this issue!

Thanks!

Add Controls to component stories

Hi @karishmashuklaa ,

For some of the component stories storybook controls are missing to edit props.
I would like to pick this task to add controls according to prop types in these component stories.

New Component - Alert

Alert Component - one of those messages that could appear in any color based on existing theme.

Add dialog / Modal component

Hey @karishmashuklaa Let me what you think about creating a modal/dialog component with header and footer customization. If you are interested please assign it to me