anubra266 / choc-ui Goto Github PK
View Code? Open in Web Editor NEWPrebuilt ⭐⭐⭐⭐⭐ Chakra UI Higher Order Components
Home Page: https://choc-ui.com
License: MIT License
Prebuilt ⭐⭐⭐⭐⭐ Chakra UI Higher Order Components
Home Page: https://choc-ui.com
License: MIT License
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.
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?
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", }}
Change .js examples to .tsx and add typings everywhere
@anubra266 https://choc-ui.tech/ has expired
//find
bg=\{useColorModeValue\("(.+?)", "(.+?)"\)\}
//replace
bg="$1"
_dark={{ bg: "$2" }}
Simple Centered CTA does not display well on large screens
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?
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;
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
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.
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.
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.
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.
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.
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.