Kamva UI Kit

Installation

$ npm install --save-dev @kamva/ui-kit

buttons

example:

import React from "react";
import { Button, PrimaryButton } from "@kamva/ui-kit";

const Example = () => {
  return (
      <Button>primary</Button>
      <PrimaryButton secondary>secondary button</Button>
      <PrimaryButton round>?</Button>
  ) ;
}

Input Props

| props | type | default | | -------- | ---------------- | ------------------------------------------- | | id | string. required | null | | label | string | null. if its passed render label with input | | isError | boolean | false. if will be true border color changes | | errorMsg | string OR null | false. if will be true border color changes | | ltr | boolean | false. |

💡 Fomrik example:

import React from "react";
import { Input } from "@kamva/ui-kit";

const Example = () => (
  <div>
    <h1>My Form</h1>
    <Formik
      initialValues={{ email: "eee", color: "red", firstName: "" }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={(props: any) => {
        const { handleSubmit, email, values } = props;
        return (
          <form onSubmit={handleSubmit}>
            <Input
              type={"email"}
              value={values.email}
              name="email"
              placeholder="Email"
              id="email"
              label={"hello"}
            />
            <button type="submit">Submit</button>
          </form>
        );
      }}
    />
  </div>
);

CheckBox Props

| props | type | default | | ----- | ---------------- | ------- | | id | string. required | null |

Alert

its just wrapper for react-alert

| props | type | default | | ----------------- | ---------------------------------------------------------- | ------------- | | optionsReactAlert | options | defaultOption |

default options

const providerOptions = {
  position: positions.TOP_CENTER,
  timeout: 3000,
  offset: "24px",
  transition: transitions.fade,
};

usage

import React from "react";
import { AppAlert, useAlert } from "@kamva/ui-kit";

const App = () => {
  const alert = useAlert();

  return (
    <div>
      <button
        onClick={() => {
          alert.error(<p>عملیات با موفقیت انجام شد</p>);
        }}
      >
        Show Alert
      </button>
    </div>
  );
};

render(
  <AppAlert>
    <App />
  </AppAlert>,
  document.getElementById("root"),
);