Tailwind React UI components
npm install @tkcrm/uiSimple and feature-rich tailwind react components
> Documentation is under development
``bash`
npm i @tkcrm/ui --save
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";
// ...
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Dropdown
- Errorboundary
- Form
- Link
- Modal
- Notification
- Page
- Preloader
- Result
- Spin
- Table
- Number
- Text
- Textarea
- Password
- Email
- Switch
- Datetime
- Time
- Date
- Month
- Week
`tsx
import { Alert } from "@tkcrm/ui";
const MyComponent: React.FC = () => {
return (
<>
>
);
};
`
`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/",
});
`
`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 (
<>
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")}
>
}
>
$3
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 (
Reset
instance={instance}
loading={instance.isLoading}
onSave={async (values) => {
await handleUpdate();
onSave?.(values);
}}
>
Save
);
});const FormData: React.FC = ({ instance }) => {
return (
<>
>
);
};
const Forms: React.FC = () => {
const userModel = new UsersModel({
getResponse: new UserModel({ firstName: "John" }),
});
let orgValues: Record = {
shortName: "LLC Google inc.",
isActive: true,
};
const userFormInstance = getFormInstance(
userForm,
getSnapshot(userModel.getResponse),
{
formMessages: {
form_validation_error_description: "Ошибка валидации формы",
},
}
);
const orgFormInstance = getFormInstance(organizationForm, orgValues);
return (
{/ Mobx Keystone example /}
instance={userFormInstance}
onSave={(values) => {
updateMobxKeystoneModelFields(userModel.getResponse, values);
}}
/>
{/ Example without state manager /}
instance={orgFormInstance}
onSave={(values) => {
orgValues = values;
}}
/>
);
};
`#### Translate form messages
All form messages are available from here
`tsx
import { FormMessages } from "@tkcrm/ui";
`Add a new messages to a new form instance
`tsx
const formInstance = getFormInstance(
userForm,
{},
{
formMessages: {
form_validation_error_title: "Validating error!",
form_validation_error_description: "Form validating error",
},
}
);
``