anubra266 / choc-ui Goto Github PK

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

Change font styles for CTA Headers.

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} />

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!

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

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

Add hypertheme for theme customization.

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

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

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?

• Molecule:Packages
• Atom: @choc-ui/paginator

The pagination styles are not applied to dark mode

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

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", }}

Latest chakra UI version

Change .js examples to .tsx and add typings everywhere

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

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

Simple Centered CTA does not display well on large screens

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

Several of your components have the following error:

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.

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

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

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.

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

Hey I recently was able to create a toast that resembles android snackbar I think it can give a PWA made using chakra-ui a native like experience, should I create a PR for the same?

• Molecule: Elements
• Atom: Pagination

The Pagination is not responsive

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

Hi

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

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

It goes to a 404

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

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

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.

.

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

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

The SIte should be well presented when links are shared

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

[x] Elements

The onChange prop is not documented in the Pagination documentation.

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

This happens when we close the sidebar.

When using TAB to navigate the page, pagination buttons focus is not shown (the blue-ish ring around focused button).
That is a major accessibility issue and should be enabled (or maybe introduce a prop to define on demand)

Thank you in advance, great work!

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