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.

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/Guidelines.md

The guidelines route Make to setup instructions, foundations, component selection rules, and focused component usage notes. 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.

License

ISC