CytoStyle

Reusable React components, Material UI theme providers, hooks, utilities, and design tokens for Cytognosis products.

CytoStyle is English-first and LTR by default. Compatibility helpers for Jalali dates and digit normalization remain available where products need them, but the documented product surface is English.

Installation

npm install @alimohammadiwork/cytostyle

Peer requirements:

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

Usage

import { Button, TextField, ThemeProvider } from "@alimohammadiwork/cytostyle";

Subpath imports are available for narrower bundles:

import { Button, TextField } from "@alimohammadiwork/cytostyle/components";
import { ThemeProvider, SPAThemeProvider } from "@alimohammadiwork/cytostyle/providers";
import { createApiRequest } from "@alimohammadiwork/cytostyle/libs";
import { createQueryParams } from "@alimohammadiwork/cytostyle/utils";
import { defaultColors } from "@alimohammadiwork/cytostyle/constants";

Theme Providers

For React single-page applications:

import { SPAThemeProvider, cytognosisAppColors } from "@alimohammadiwork/cytostyle";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <SPAThemeProvider
      dir="ltr"
      locale="en"
      themeMode="light"
      appColors={cytognosisAppColors}
    >
      {children}
    </SPAThemeProvider>
  );
}

For Next.js client layouts:

"use client";

import { ThemeProvider, cytognosisAppColors } from "@alimohammadiwork/cytostyle";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      dir="ltr"
      locale="en"
      themeMode="light"
      appColors={cytognosisAppColors}
    >
      {children}
    </ThemeProvider>
  );
}

Components

@alimohammadiwork/cytostyle/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 CytoStyle-specific props documented in Storybook.

Utilities And Hooks

Utilities are exported from @alimohammadiwork/cytostyle/utils, including date conversion helpers, digit normalization, query string creation, iframe messaging, and async helpers.

Hooks are exported from @alimohammadiwork/cytostyle/hooks, including shared Material UI hooks and CytoStyle helpers such as useErrorHandler, useMessage, and useWebOtpListener.

Fonts

Load the bundled font stylesheet once near the app root:

import "@alimohammadiwork/cytostyle/fonts.css";

Storybook

npm run storybook

Storybook runs on http://localhost:6006.