lib for ui
npm install @ubli/ui
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Um input de texto específico para situações adversas 😁
Explore a documentação »
Demo
·
Reportar problema
·
Solicitar funcionalidade
Existem muitas bibliotecas de componentes excelentes disponíveis no GitHub; no entanto, não encontrei uma que realmente atendesse às minhas necessidades, então criei esta aprimorada. Acho que é isso.
Aqui está o porquê:
* Facilidade no uso de máscaras em inputs de texto;
* Fácil customização, pois o componente é entregue o mais nativo possível;
* Leve e performático;
Obviamente, essa solução não atenderá a todos os projetos, pois suas necessidades podem ser diferentes. Então estarei adicionando mais funcionalidades no futuro próximo. Você também pode sugerir alterações bifurcando este repositório e criando uma pull request ou abrindo uma issue.
Esse projeto foi desenvolvido utilizando as versões mais recentes das seguintes bibliotecas:
* [![Next][Next.js]][Next-url]
* [![React][React.js]][React-url]
* [![TurboRepo][Turbo]][Turbo-url]
* [![StoryBook][Storybook]][Storybook-url]
Para colocar uma cópia local em funcionamento, siga estas etapas simples.
Por ser um projeto desenvolvido utilizando tecnologias do ecossistema react, assumi-se
que você tenha uma aplicação web desenvolvida com base no mesmo.
_Por ser tratar de uma biblioteca de componente, sua instalação e utilização se da de forma bem simples._
1. Instalando
``sh`
npm install @ubli/ui
Por ser tratar de um componente de input o mais puro possível, seu uso se da de forma simples e direta,
podendo ser customizado a depender do seu caso de uso.
`tsx
import { TextInput } from '@ubli/ui';
function Component() {
return (
)
}
`
_Para mais exemplos, por favor consulte a documentação Documentação_
- [x] Desenvolvimento do componente TextInput;
- [x] Suporte a máscaras;
- [x] Funções auxiliadoras;
- [x] Criação do storybook para documentação de uso;
- [ ] Suporte a Server Component;
- [ ] Utilização de uma máscara customizada;
As contribuições são o que torna a comunidade de código aberto um lugar incrível para aprender, inspirar e criar. Quaisquer contribuições que você fizer são muito apreciadas.
Se você tiver uma sugestão de melhora, bifurque o repositório e crie uma pull request. Você também pode simplesmente abrir uma issue com a tag "feature".
Não se esqueça de dar uma estrela ao projeto! Obrigado novamente!
1. Bifurque o projeto
2. Crie uma branch para o seu recurso (git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature'
3. Commit suas modificações ()git push origin feature/AmazingFeature`)
4. Envie sua branch (
5. Abra um Pull Request
Distribuído sob a licença MIT
Pedro H. - pedro.lg.cs@gmail.com
Project Link: https://github.com/pedrolgcs/ubli
[contributors-shield]: https://img.shields.io/github/contributors/pedrolgcs/ubli.svg?style=for-the-badge
[contributors-url]: https://github.com/pedrolgcs/ubli/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/pedrolgcs/ubli.svg?style=for-the-badge
[forks-url]: https://github.com/pedrolgcs/ubli/network/members
[stars-shield]: https://img.shields.io/github/stars/pedrolgcs/ubli.svg?style=for-the-badge
[stars-url]: https://github.com/pedrolgcs/ubli/stargazers
[issues-shield]: https://img.shields.io/github/issues/pedrolgcs/ubli.svg?style=for-the-badge
[issues-url]: https://github.com/pedrolgcs/ubli/issues
[license-shield]: https://img.shields.io/github/license/pedrolgcs/ubli.svg?style=for-the-badge
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/pedro-lg/
[product-screenshot]: /images/screenshot.png
[Next.js]: https://img.shields.io/badge/next.js-20232A?style=for-the-badge&logo=nextdotjs
[Next-url]: https://nextjs.org/
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react
[React-url]: https://reactjs.org/
[Turbo-url]: https://turbo.build/
[Turbo]: https://img.shields.io/badge/Turbo-20232A?style=for-the-badge&logo=turborepo
[Storybook-url]: https://storybook.js.org/
[Storybook]: https://img.shields.io/badge/Storybook-20232A?style=for-the-badge&logo=storybook
[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
[Vue-url]: https://vuejs.org/
[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
[Angular-url]: https://angular.io/
[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
[Svelte-url]: https://svelte.dev/
[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
[Laravel-url]: https://laravel.com
[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
[Bootstrap-url]: https://getbootstrap.com
[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
[JQuery-url]: https://jquery.com