Package Exports

@tkcrm/ui
@tkcrm/ui/index.cjs.js
@tkcrm/ui/index.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tkcrm/ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind UI React Components

Simple and feature-rich tailwind react components

Documentation is under development

Installation

npm i @tkcrm/ui --save

Add styles and context

Add styles and context to your exist React project

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(
    <ErrorBoundary>
      <UIContext.Provider value={new UIContextClass({ routes })}>
        <Router>
          <App />
        </Router>
      </UIContext.Provider>
    </ErrorBoundary>
  );
}

You can import styles from your exist base css file

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

Available components

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

Form fields

Number
Text
Textarea
Password
Email
Switch
Datetime
Time
Date
Month
Week

Examples

Alert

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

const MyComponent: React.FC = () => {
  return (
    <>
      <Alert type="success" title="Some pretty title" text="Hello world!" />
    </>
  );
};

Notification

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/",
});

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 (
    <>
      <Modal
        show={showModal}
        onClose={setShowModal}
        type="error"
        footer={
          <>
            <Button
              style="error"
              rounded
              loading={loading}
              onClick={() => {
                setLoading(true);
                setTimeout(() => {
                  setLoading(false);
                  setShowModal(false);
                }, 3000);
              }}
              className="ml-3"
            >
              {t("delete")}
            </Button>
            <Button
              style="white"
              rounded
              border
              onClick={() => setShowModal(false)}
            >
              {t("cancel")}
            </Button>
          </>
        }
      >
        <Modal.Title>Delete user</Modal.Title>
        <div className="mt-2">
          <Modal.Description>
            Are you sure you want to delete this user? It will be impossible to
            undo this action.
          </Modal.Description>
        </div>
      </Modal>
    </>
  );
};

Form

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

Define `mobx-keystone` model and a form configuration

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<UserModel>().withSetter(),
}) {}

Add form component

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<string, any>) => void;
}

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

  return (
    <div className="mt-4 flex justify-end">
      <Form.Reset instance={instance} className="mr-4">
        Reset
      </Form.Reset>
      <Form.Save
        instance={instance}
        loading={instance.isLoading}
        onSave={async (values) => {
          await handleUpdate();
          onSave?.(values);
        }}
      >
        Save
      </Form.Save>
    </div>
  );
});

const FormData: React.FC<FormProps> = ({ instance }) => {
  return (
    <>
      <Form instance={instance} />
      <FormControls instance={instance} />
    </>
  );
};

const Forms: React.FC = () => {
  const userModel = new UsersModel({
    getResponse: new UserModel({ firstName: "John" }),
  });

  let orgValues: Record<string, any> = {
    shortName: "LLC Google inc.",
    isActive: true,
  };

  const userFormInstance = getFormInstance(
    userForm,
    getSnapshot(userModel.getResponse),
    {
      formMessages: {
        form_validation_error_description: "Ошибка валидации формы",
      },
    }
  );

  const orgFormInstance = getFormInstance(organizationForm, orgValues);

  return (
    <Page.Wrapper max_width="lg">
      <Page.Heading title="Forms" />
      {/* Mobx Keystone example */}
      <FormData
        instance={userFormInstance}
        onSave={(values) => {
          updateMobxKeystoneModelFields(userModel.getResponse, values);
        }}
      />

      <div className="mt-8">
        {/* Example without state manager */}
        <FormData
          instance={orgFormInstance}
          onSave={(values) => {
            orgValues = values;
          }}
        />
      </div>
    </Page.Wrapper>
  );
};

Translate form messages

All form messages are available from here

import { FormMessages } from "@tkcrm/ui";

Add a new messages to a new form instance

const formInstance = getFormInstance(
  userForm,
  {},
  {
    formMessages: {
      form_validation_error_title: "Validating error!",
      form_validation_error_description: "Form validating error",
    },
  }
);

@tkcrm/ui