Injast Core

Reusable React components, Material UI theme providers, hooks, utilities, and design tokens used by Injast applications.

Installation

npm install injast-core

Peer requirements:

npm install react@^18.2.0 react-dom@^18.2.0

The package is published as ESM and is intended for modern React bundlers such as Vite, Next.js, and similar tooling.

Usage

Root imports are supported:

import { Button, TextField, ThemeProvider, coreFaIR } from "injast-core";

Subpath imports are also available when you want a narrower entrypoint:

import { Button, TextField } from "injast-core/components";
import { ThemeProvider, SPAThemeProvider } from "injast-core/providers";
import { createApiRequest } from "injast-core/libs";
import { convertRialToToman, formatPersianNumber } from "injast-core/utils";
import { defaultColors } from "injast-core/constants";

Theme Providers

For React single-page applications:

import { SPAThemeProvider, coreFaIR } from "injast-core";

const appColors = {
  primary: {
    main: "#1DBF98",
    light: "#1DBF98",
    dark: "#1DBF98",
    contrastText: "#ffffff",
  },
  secondary: {
    main: "#4F545E",
    light: "#4F545E",
    dark: "#4F545E",
    contrastText: "#ffffff",
  },
};

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <SPAThemeProvider
      dir="rtl"
      appColors={appColors}
      themeOptions={{ ...coreFaIR }}
    >
      {children}
    </SPAThemeProvider>
  );
}

For Next.js client layouts or app providers:

"use client";

import { ThemeProvider } from "injast-core";

const appColors = {
  primary: {
    main: "#1DBF98",
    light: "#1DBF98",
    dark: "#1DBF98",
    contrastText: "#ffffff",
  },
  secondary: {
    main: "#4F545E",
    light: "#4F545E",
    dark: "#4F545E",
    contrastText: "#ffffff",
  },
};

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider dir="rtl" appColors={appColors}>
      {children}
    </ThemeProvider>
  );
}

Components

injast-core/components exports wrappers and custom components including Button, TextField, Select, Modal, Toast, MobileDatePicker, WheelDatePicker, DataGrid, MultiSelect, OtpInput, NumberInput, CardNumberInput, and common Material UI layout primitives.

Most wrapper components accept the corresponding Material UI component props, with additional Injast-specific props where documented in Storybook stories.

Persian Calendar

برای انتخاب تاریخ شمسی، از MobileDatePicker یا WheelDatePicker استفاده کنید. هر دو کامپوننت تاریخ را برای کاربر به صورت شمسی نمایش می‌دهند.

MobileDatePicker برای تقویم مودالی مناسب است. مقدار value و خروجی onChange آن میلادی و با فرمت YYYY-MM-DD است، اما minDate و maxDate را به صورت شمسی YYYY/MM/DD می‌گیرد:

import { useState } from "react";
import { MobileDatePicker } from "injast-core";

export function BirthDateField() {
  const [birthDate, setBirthDate] = useState("2024-03-20");

  return (
    <MobileDatePicker
      label="تاریخ تولد"
      placeholder="تاریخ را انتخاب کنید"
      value={birthDate}
      onChange={setBirthDate}
      minDate="1300/01/01"
      maxDate="1403/12/30"
    />
  );
}

WheelDatePicker برای انتخابگر چرخشی داخل دراور مناسب است. اگر می‌خواهید state فرم شمسی بماند، dateFormat="jalali" بگذارید:

import { useState } from "react";
import { WheelDatePicker } from "injast-core";

export function DeliveryDateField() {
  const [deliveryDate, setDeliveryDate] = useState<string | null>("1403/01/01");

  return (
    <WheelDatePicker
      title="تاریخ تحویل"
      placeholder="تاریخ تحویل"
      value={deliveryDate}
      onChange={(value) =>
        setDeliveryDate(typeof value === "string" ? value : null)
      }
      dateFormat="jalali"
    />
  );
}

برای ارسال تاریخ به API یا نمایش تاریخ، از utilityهای آماده استفاده کنید و تبدیل شمسی/میلادی را دستی ننویسید:

import {
  gregorianToJalali,
  jalaliToGregorian,
  shortDateFormat,
} from "injast-core";

gregorianToJalali("2024-03-20"); // "1403/01/01"
jalaliToGregorian("1403/01/01"); // "2024-03-20"
shortDateFormat("2024-03-20");

Utilities and Hooks

Useful utilities are exported from injast-core/utils, including date conversion helpers, Persian number formatting, query string creation, iframe messaging, and coreFaIR for MUI Persian locale configuration.

Hooks are exported from injast-core/hooks, including shared Material UI hooks and Injast-specific helpers such as useErrorHandler, useMessage, and useWebOtpListener.

Fonts and Date Picker CSS

The theme uses the IRANYekanX and IRANYekanXFaNum font families. You can load the bundled font stylesheet once in your app:

import "injast-core/fonts.css";

MobileDatePicker imports the required react-multi-date-picker mobile layout stylesheet from its dependency. Ensure your bundler supports CSS imports from JavaScript modules.

Figma Make

Figma Make users should select the public npm package named injast-core. Do not use @alimohammadiwork/injast-core or @make-kits/injast-core-make-kit for the public package path.

If the package selector ranks unrelated core packages when searching injast-core, search for:

injast

Then select injast-core from the public unscoped package results.

For Make kits, start with the included guidelines:

guidelines/ai-index.md
guidelines/Guidelines.md

The AI index routes Make and coding agents to setup instructions, foundations, component selection rules, focused component usage notes, runtime helpers, and TypeScript types. In a Vite/React Make file, use SPAThemeProvider, import injast-core/fonts.css once, and prefer Injast components over raw HTML controls.

For Figma-driven implementation, use the Figma MCP flow before coding. The local MCP endpoint is:

http://127.0.0.1:3845/mcp

Fetch structured design context and a screenshot for the exact node, then translate the design into Injast Core components, RTL layout, Persian copy, and the project guidelines.

Generated mobile app screens should follow the Gold reference app at /Users/ali/Documents/Gold: centered max-width: 520px shell, wired navigation and overlay behavior, Injast Core inputs, drawer-based pre-invoices, and no mobile OS/app status bar chrome.

Codex Skill

The package ships a Codex skill for Injast app generation:

skills/injast-app-builder

After installing the package, consumers can point Codex at node_modules/injast-core/skills/injast-app-builder or copy that folder into their Codex skills directory if their Codex setup does not auto-discover package-bundled skills.

The skill starts from guidelines/ai-index.md and then loads focused guideline files for the requested screen or flow.

License

ISC

Added in 1.0.86

The patch adds reusable, lending-agnostic primitives:

import {
  Avatar,
  EmptyState,
  FileUpload,
  Tooltip,
  createCookieApiRequest,
} from "injast-core";

FileUpload owns accessible local file selection only; applications remain responsible for network upload, authorization, and persistence. createCookieApiRequest is an opt-in cookie/session transport with credentials: "include", CSRF header support, and RFC 9457 Problem Details errors. The legacy createApiRequest remains available for backward compatibility.