Tailwind UI React Components

Simple and feature-rich tailwind react components

> Documentation is under development

Installation

``bash
npm i @tkcrm/ui --save
`

$3

Add styles and context to your exist React project

`tsx
import * as ReactDOM from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import { ErrorBoundary, UIContext, UIContextClass } from "@tkcrm/ui";

import App from "./components/App";

// Routes are for breadcrumbs, where routes: Route[]
// but this is optional
import { routes } from "./routes";

import "./assets/css/style.css";

const rootElement = document.querySelector("#root");
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(







);
}
`

You can import styles from your exist base css file

`css
@import "@tkcrm/ui/dist/style.css";
// ...
`

Available components

- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Dropdown
- Errorboundary
- Form
- Link
- Modal
- Notification
- Page
- Preloader
- Result
- Spin
- Table

$3

- Number
- Text
- Textarea
- Password
- Email
- Switch
- Datetime
- Time
- Date
- Month
- Week

Examples

$3

`tsx
import { Alert } from "@tkcrm/ui";

const MyComponent: React.FC = () => {
return (
<>


);
};
`

$3

`tsx
import { notification } from "@tkcrm/ui";

notification.error({
title: "Error!"
description: "Something went wrong",
duration: 3000,
});

notification.success("Successfully created");

notification.warning("Hmm...");

notification.info({
description: "Successfully created",
image: "http://image_link/",
});
`

$3

`tsx
import { useState } from "react";
import { Modal, Button } from "@tkcrm/ui";

const MyComponent: React.FC = () => {
const [showModal, setShowModal] = useState(false);
const [loading, setLoading] = useState(false);

return (
<>
show={showModal}
onClose={setShowModal}
type="error"
footer={
<>
style="error"
rounded
loading={loading}
onClick={() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
setShowModal(false);
}, 3000);
}}
className="ml-3"
>
{t("delete")}

style="white"
rounded
border
onClick={() => setShowModal(false)}
>
{t("cancel")}


}
>
Delete user


You can use forms with any state manager, for example mobx-keystone

#### Define mobx-keystone model and a form configuration

`tsx
import type { FormGroupProps } from "@tkcrm/ui";

import { model, Model, prop, tProp, types } from "mobx-keystone";

const userForm: FormGroupProps[] = [
{
title: "User info",
fields: [
{
type: "text",
name: ["firstName"],
label: "First name",
required: true,
colSize: 6,
},
{
type: "text",
name: ["lastName"],
label: "Last name",
colSize: 6,
},
{
type: "number",
name: ["age"],
label: "Age",
colSize: 4,
},
{
type: "date",
name: ["birthday"],
label: "Birthday",
required: true,
colSize: 4,
},
{
type: "switch",
name: ["isActive"],
label: "Is Active",
colSize: 4,
},
],
},
{
title: "Notification settings",
fields: [
{
type: "switch",
name: ["notifyEmail"],
label: "Email",
colSize: 4,
},
{
type: "switch",
name: ["notifySMS"],
label: "SMS",
colSize: 4,
},
{
type: "switch",
name: ["notifyPush"],
label: "Push",
colSize: 4,
},
],
},
];

const organizationForm: FormGroupProps[] = [
{
title: "Organization info",
fields: [
{
type: "text",
name: ["shortName"],
label: "Short name",
required: true,
colSize: 6,
},
{
type: "text",
name: ["fullName"],
label: "Full name",
colSize: 6,
},
{
type: "text",
name: ["address"],
label: "Address",
colSize: 10,
},
{
type: "switch",
name: ["isActive"],
label: "Is active",
colSize: 2,
},
],
},
];

@model("frontend/user")
export class UserModel extends Model({
firstName: tProp(types.string, "").withSetter(),
lastName: tProp(types.string, "").withSetter(),
age: tProp(types.number, 0).withSetter(),
birthday: tProp(types.maybe(types.dateString)).withSetter(),
isActive: tProp(types.boolean, false).withSetter(),
notifyEmail: tProp(types.boolean, false).withSetter(),
notifySMS: tProp(types.boolean, false).withSetter(),
notifyPush: tProp(types.boolean, false).withSetter(),
}) {}

@model("frontend/users")
export class UsersModel extends Model({
getResponse: prop().withSetter(),
}) {}
`

#### Add form component

`tsx
import { observer } from "mobx-react-lite";
import { getSnapshot } from "mobx-keystone";
import {
Form,
Page,
notification,
getFormInstance,
updateMobxKeystoneModelFields,
FormInstance,
} from "@tkcrm/ui";

interface FormProps {
instance: FormInstance;
onSave?: (values: Record) => void;
}

const FormControls: React.FC = observer(({ instance, onSave }) => {
const handleUpdate = async (): Promise => {
return new Promise((r) => {
setTimeout(() => {
notification.success({ title: "Successfully updated" });
r(true);
}, 300);
});
};

return (