anubra266 / choc-ui Goto Github PK

View Code? Open in Web Editor NEW

1.2K 18.0 74.0 4.49 MB

Prebuilt ⭐⭐⭐⭐⭐ Chakra UI Higher Order Components

Home Page: https://choc-ui.com

License: MIT License

JavaScript 5.38% CSS 0.44% TypeScript 94.18%

chakra-ui chakra component-library react hacktoberfest

choc-ui's Introduction

choc-ui's People

Contributors

Stargazers

Watchers

Forkers

otilor julirash veerjainatgmail jmcelreavey johnalexx informsharique daggy1234 soltrinox uinstinct gilbertobotaro derplak dipeshwagle tomocrafter mtarapata pszafer ovistoica sufianbabri cbdesignsbybre bhanudev-org ismaaa kayoronald teacherstrange buupu mehulkundu amaan-ahmad meierpatrick uvacoder mochi-sann edizyurdakul aver343 anishde12020 amit08255 kl-kim stungkit axchanda ahayder 0xforked two-left-hands panbenson pks-os vhnam hyperting dylanalezra htinz soumya-78 abbyb97 codellyson tobisupreme ramizqazi dineshliyanage0 felipeferrarini bishnoimukesh jacksonhardaker iexcel-unmc ansub johannespn geeth24 ansont gg-big-org kloyaa timbaron rahul-ghimire-au6 nickhodges rajasingh10 298977887 tiger-githubb alexanderjmat dpandev rajulamsal124 https-github-com-rajulamsal124 mctozal x03ck0x cheemma1 ibrhm0v

choc-ui's Issues

Change .js examples to .tsx and add typings everywhere

Can't install autocomplete library due to framer-motion error

Latest chakra UI version

AutoComplete.InputGroup does not respect InputLeftElement

import {
	InputGroup,
	InputLeftElement,
	InputRightElement,
	Icon,
} from '@chakra-ui/react';
import {
	AutoComplete,
	AutoCompleteInput,
	AutoCompleteItem,
	AutoCompleteList,
	AutoCompleteGroup,
	AutoCompleteFixedItem,
  } from '@choc-ui/chakra-autocomplete';
  import { SearchIcon, ChevronRightIcon, ChevronDownIcon } from '@chakra-ui/icons';

const SearchBar = props => {
	const options = ['apple', 'appoint', 'zap', 'cap', 'japan'];
  
	return (
		<AutoComplete rollNavigation>
			{({ isOpen }) => (
				<>
					<InputGroup>
						<InputLeftElement
							pointerEvents="none"
							children={<SearchIcon />}
						/>
						<AutoCompleteInput
							variant="filled"
							placeholder="    Search..."
						/>
						<InputRightElement
							pointerEvents="none"
							children={
								<Icon as={isOpen ? ChevronRightIcon : ChevronDownIcon} />
							}
						/>
					</InputGroup>
					<AutoCompleteList>
						{options.map((option, oid) => (
							<AutoCompleteItem
								key={`optio-${oid}`}
								value={option}
								textTransform="capitalize"
								align="center"
							>
								{option}
							</AutoCompleteItem>
						))}
					</AutoCompleteList>
				</>
			)}
		</AutoComplete>
	);
};

export default SearchBar;

Result is

Enhancement: show ctrl instead of the command key in the search box on windows/linux

Now, all platforms show the command key symbol + k but on windows/linux the hotkey is the control key so it would be better if the ctrl key symbol would be shown.

I am willing to work on this issue

Form tccst radio and checkboxes fix for light mode and small font changes in the company footer

Hey @anubra266 I think we should fix the tccst form the radio buttons and checkboxes are not at all visible. I have made the changes in local I ll link the pr here itself. checkout the image

Expired choc-ui.tech - (It was moved to https://choc-ui.com)

Failing Navbars Codesandbox

The Navbars are not building on codesandbox, due to Logo path error.

Switch Brand Colors

Is your feature request related to a problem? Please describe.

I just think everyone should see the components in their respective favorite colors

Describe the solution you'd like

A widget that allows changing the brand color

Add Keyboard Navigation to modal search

This code should do it when myself or anyone decides to open a pull request.

const [activeItem,setActiveItem] = useState(0)

const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {
        //* When Enter is pressed
        if (e.keyCode === 13) {
            openPage(result[activeItem]);
            //* When Up arrow is pressed
        } else if (e.key === 'ArrowUp') {
            if (activeItem === 0) {
                e.preventDefault();
                return;
            }
            setActiveItem((a) => a - 1);
            e.preventDefault();
            //* When Down arrow is pressed
        } else if (e.key === 'ArrowDown') {
            if (activeItem === result.length - 1) {
                return;
            }
            setActiveItem((a) => a + 1);
        }
    };

const onChange = () => {
    ...whateverWasThereBefore
    setActiveItem(0)
}

<Input onKeyDown={onKeyDown} onChange={onChange} />

Warning: React has detected a change in the order of Hooks called by PaginationComp. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

I'm using the pagination component with react table, the implementation looks something like this:

<Pagination
  defaultCurrent={initialPageIndex + 1}
  total={totalResults}
  paginationProps={{ display: "flex" }}
  baseStyles={{ bg: "white" }}
  hoverStyles={{ bg: "gray.50" }}
  activeStyles={{ bg: "gray.100" }}
  pageNeighbours={3}
  showTotal={(total) => `Mostrando ${page.length} de ${total} resultados`}
  onChange={(page) => {
    gotoPage(page - 1)
  }}
/>

I'm getting the following warning when I refresh the page:

Warning: React has detected a change in the order of Hooks called by PaginationComp. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Undefined Component Demos' Height

All Components demo are ignoring set Height and using fallback 500px height.

Irresponsive pagination

Molecule: Elements
Atom: Pagination

The Pagination is not responsive

Great work!

This ui framework is awesome, looking forward to more components :D

How to use the Alerts?

Hello folks,
First, thank you very much for the amazing UI template.
I just have a question about how to implement the Choc UI Alert in a Toast or alert component.
Because Choc UI Alert is wrapped with , so how can I use it as a pop-up alert?
Thanks!

Component Error

Several of your components have the following error:

the table " Mobile Responsive Table With Print Support" have a responsive issue

the header doesn't align with the body in the tablet/md view

to fix the problem the "lg" in line 71 needs to be "md":
<Tbody display={{ base: "block", md: "table-row-group", }}

Bug: Page title and sidebar icon overlap

This happens when we close the sidebar.

Social Links preview

Is your feature request related to a problem? Please describe.

Sharing links on social media just shows site logo

Describe the solution you'd like
Have a picture for each section that is set with meta tags

Feature Request: An FAQ page section

An FAQ page section that is easy to add, simple, customizable and looks pretty out of the box.

If you want, I can make it myself.

Obviously not exactly like this one, but something inspired from it.

2022-05-20.17-30-04.mp4

Pl fix Push Alert Notification in the site : https://choc-ui.tech/docs/installation#deny

Hi... Just not able to go through the documentation due to this persistant alert. Kindly fix

Add hypertheme

Add hypertheme for theme customization.

Responsive navbar and sidebar

Bad Display in Simple Centered CTA

Simple Centered CTA does not display well on large screens

https://choc-ui.tech/docs/page-sections/cta#cta/sc

Site crashes in Firefox with "Hydration failed because the initial UI does not match what was rendered on the server."

In Firefox the site often crashes with a blank page and the error message:

Application error: a client-side exception has occurred (see the browser console for more information).

Here's a screenshot:

When I open the console I see the following message:

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

which, if you follow the link, leads to this error message:

Hydration failed because the initial UI does not match what was rendered on the server.

I cleared cookies/site data and that fixed it temporarily. But then I was browsing the site and the error eventually popped up again. A hard refresh fixed it. Then when viewing the CTA page it happened again, but with a different error:

Uncaught TypeError: document.getElementById(...) is null
    getUrlVar https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
    init https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
    <anonymous> https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech:1
[carbon.js:1:9445](https://cdn.carbonads.com/carbon.js?serve=CESDP23M&placement=choc-uitech)

Console logs are here: console-export-2023-10-11_9-38-8.txt

I'm don't have a lot of experience with NextJS so I'm not entirely sure how to best troubleshoot. I tried with a "clean" Firefox profile (no extensions or anything additional installed) and saw the same behavior.

Can't see code for Forms snippet in docs

I was looking at the form components, but when I click "view code" button, it doesn't show anything.

Adding showQuickJumper to Pagination can't update my UI

I found that after Pagination adds showQuickJumper configuration, all possible events like onChange are not fired. The same is true for the example in the documentation, why?

Feature Request: I want a Button that can switch the viewer size between PC, tablet, and smartphone.

I'd like to see a button that can switch the viewer size when the button is pressed, like https://chakra-templates.dev/page-sections/hero

screenshot.2021-11-29.12.14.05.mov

Why choc-ui folder in being kept inside the project repository?

If there are no dependencies on the remix project, then its better to move it to a entirely new repository. # #

Feature Request: replace react-icons with react-feather

Description

I can't tell, if it is causing my display issues, but 5 year old deprecation errors overloading logs could easily break in the next React v19, if not already.

Problem Statement/Justification

react-icons keeps throwing deprecation warnings.
Visiting issues on their github repo shows that this is a problem that's overwhelmed the new maintainer for years.
See navbar components for example of this problem.

Proposed Solution or API

I gave up on trying a few SVG libs for React.
Just dropping in https://github.com/feathericons/react-feather worked fast & easy.
Works with React v18, and MIT license.
Updates could be better, but are better than react-icons, with fewer open issues.
No tree shaking needed! Early performance check looks great.

Alternatives

css.gg
icomoon

Domain Expired

@anubra266 https://choc-ui.tech/ has expired

choc-ui.tech domain name is expired

As the title states; choc-ui.tech domain name is expired

Pagination package styling error

Molecule:Packages
Atom: @choc-ui/paginator

The pagination styles are not applied to dark mode

Color tokens not getting into component demo

Lots of tokens not getting into component demo, so some components are looking wrong

Add `onChange` prop to Paginator's documentation

The onChange prop is not documented in the Pagination documentation.

Strange behavior on the carousels component

In order to see this 'bug', go to the Choc UI docs, to the carousel showcase. Then click the left arrow to see what happends (you go from the first element on the carousel to the last one). If you click again on the same arrow, it will go back to the first element on the carrousel instead of the penultimate one.

Codesandbox Link no working for Forms

It goes to a 404

Ugly Font Styles in CTA

Change font styles for CTA Headers.

Feature Request - Footer

Hey @anubra266 , This looks like an awesome initiative I think the collection deserves an attractive footer I am thinking of adding something like this let me know if I should work on this I ll add some extra changes as well along with light and dark theming

Describe the solution you'd like
Add description and og:image meta tags for all components

[x] Elements

Use color mode tokens instead of `useColorModeValue` hook

//find
bg=\{useColorModeValue\("(.+?)", "(.+?)"\)\}

//replace
 bg="$1"
      _dark={{ bg: "$2" }}

IconButton Badge

Is your feature request related to a problem? Please describe.

Please describe the problem you are trying to solve.
Badges in Buttons

Describe the solution you'd like

Please describe the desired behavior.
IconButton Badge

_Abraham 💻 🎨 🚧	_{Akinyosoye Gabriel} 🚧	_{Michael Grigoryan} 💻 🎨	_Anu 💻	_{Julius Idowu} 🚧	_{John McElreavey} 💻	_{Arnav Jindal} 💻
_{Dipesh Wagle} 💻	_Pawel 💻	_Sufian 💻	_{Ismail D.} 💻	_{Sammy Fattah} 📖	_{Benson Pan} 💻	_Abby 💻
_{Jackson Hardaker} 💻	_{Geeth Gunnampalli} 💻

anubra266 / choc-ui Goto Github PK

choc-ui's Introduction

About Choc UI

Official Documentation

Components

Contributing

License

Sponsors ✨

Contributors ✨

choc-ui's People

Contributors

Stargazers

Watchers

Forkers

choc-ui's Issues

Description

Problem Statement/Justification

Proposed Solution or API

Alternatives

Recommend Projects

Recommend Topics

Recommend Org