@qazi9amaan/formlibrary v0.0.1-9.alpha.14
🎨✨ @qazi9amaan/formlibrary
A delightful npm package that provides you with Tailwind CSS styled UI elements 🌟, fully compatible with Formik 📝. Unleash your creativity with a variety of components and utilities to design stunning dashboards, including tables, forms, and more! Get ready to level up your web projects! 🚀💯
🌟 Features
- Tailwind CSS styled components
- Formik support for form handling
- Dashboard components: tables, forms, and more
- Highly modular and reusable code
🚀 Getting Started
Installation
- Install the package via npm:
npm install @qazi9amaan/formlibrary
- Import the style.css file in your index:
import '@qazi9amaan/formlibrary/dist/style.css'
- Import the components you need in your project:
import { Table, Form } from '@qazi9amaan/formlibrary';
📝 Documentation
// form components
import { Button } from '@qazi9amaan/formlibrary';
import { FormInput } from '@qazi9amaan/formlibrary';
import { FormDate } from '@qazi9amaan/formlibrary';
import { FormButton } from '@qazi9amaan/formlibrary';
import { FormSelect } from '@qazi9amaan/formlibrary';
import { FormMultiSelect } from '@qazi9amaan/formlibrary';
import { FormCheckbox } from '@qazi9amaan/formlibrary';
import { FormRadio } from '@qazi9amaan/formlibrary';
import { FormChips } from '@qazi9amaan/formlibrary';
import { FormTextarea } from '@qazi9amaan/formlibrary';
// formik builder forms from json
import { FormikBuilder } from '@qazi9amaan/formlibrary'
// layouts
import { Row } from '@qazi9amaan/formlibrary'
import { Column } from '@qazi9amaan/formlibrary'
import { AutoLayout } from '@qazi9amaan/formlibrary'
import { Alert } from '@qazi9amaan/formlibrary'
import { Button } from '@qazi9amaan/formlibrary'
import { EmptyPlaceHolder } from '@qazi9amaan/formlibrary'
import { Header } from '@qazi9amaan/formlibrary'
import { Panel } from '@qazi9amaan/formlibrary'
// Loader with utility
import { Loader } from '@qazi9amaan/formlibrary'
import { useLoader } from '@qazi9amaan/formlibrary'
import { LoaderProvider, LoaderContext } from '@qazi9amaan/formlibrary'
// Modal with utility
import { Modal } from '@qazi9amaan/formlibrary'
import { useModal } from '@qazi9amaan/formlibrary';
import { ModalContext, ModalProvider } from '@qazi9amaan/formlibrary';
// hocs, hooks and utils
import { useError } from '@qazi9amaan/formlibrary';
import { withForm } from '@qazi9amaan/formlibrary';
import { useForm } from '@qazi9amaan/formlibrary'; //<- has custom helpers
// table
import { Table } from '@qazi9amaan/formlibrary';
📝 withForm
import { withForm } from '@qazi9amaan/formlibrary';
const LoginForm = withForm<ILogin>({
initialValues: {
username: '',
password: '',
},
mapPropsToValues: (props) => {
return { username: props.hello };
},
validationSchema: Yup.object().shape({
username: Yup.string().required('Username is required'),
password: Yup.string().required('Password is required'),
}),
mode: 'CREATE',
})(LoginWrappedForm);
📝 FormikBuilder
// formik builder
<FormikBuilder
mode='CREATE'
formJSON={formJSON}
handleSubmit={handleSubmit}
initialValues={initialValues}
validationSchema={validationSchema}
/>
export type IReg = {
email: string;
password: string;
confirmPassword?: string;
};
export const initialValues: IReg = {
email: '',
password: '',
confirmPassword: '',
};
export const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string().required('Required'),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password')], 'Passwords must match')
.required('Required'),
});
export const formJSON: IFormJSON<IReg, IBuilderProps<IReg>> = [
{
id: 1,
items: [
{
label: 'Email',
name: 'email',
type: 'email',
},
],
},
{
id: 2,
items: [
{
label: 'Password',
name: 'password',
type: 'password',
},
{
label: 'Confirm Password',
name: 'confirmPassword',
type: 'password',
},
],
},
];
📝 useError
import { useError } from '@qazi9amaan/formlibrary';
const { error, setError } = useError();
setError('Error message');
📝 useLoader
import { useLoader } from '@qazi9amaan/formlibrary';
const { loading, setLoading } = useLoader();
setLoading(true);
📝 useModal
import { useModal } from '@qazi9amaan/formlibrary';
const { openDeleteModal } = useModal();
openDeleteModal();
Table
import { ITableHeader, Table } from '@qazi9amaan/formlibrary';
type IBook = {
name: string;
author: string;
};
const header: ITableHeader<IBook> = [
{ type: 'string', label: 'Name', sortable: true, key: 'name' },
{ type: 'string', label: 'Author', key: 'author' },
{ type: 'actions', label: 'Actions', actions: ['view'] },
];
const books: IBook[] = [
{
name: 'The Lord of the Rings',
author: 'J.R.R. Tolkien',
},
];
export const App = () => {
//
return (
<Table
idKey='name' // key to be used as unique identifier
showSelect // show checkbox
showSearch // show search input
header={header} // table header
data={books} // table data
selectActions={['view', 'edit']} // actions to be shown in when checkbox is selected
handleActions={console.log} // handle actions when clicked
handleCellClick={console.log} // handle cell click
handleSelectAction={console.log} // handle select action
pagination={{
totalPages: 10, // total number of pages
page: 1, // current page
handlePagination: console.log, // handle pagination
}}
/>
);
};
🤝 Contributing
Contributions are more than welcome! 🎉
👥 Credits
Built with ❤️ by Qazi Amaan.
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
7 months ago
5 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
5 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago