Migration Guide

This guide details the steps to migrate your code from nepali-bs-calendar-react v0.2.0 to v1.0.0.

Overview of Major Changes

In version 1.0.0, the component names and setup requirements have been modernized to offer stronger layout flexibility, portals, custom styles, and dynamic context providers.

1. Component Renaming

Calendar has been renamed/split into StaticNepaliCalendar and NepaliCalendar (the popup picker component).
DatePicker has been consolidated into NepaliCalendar with label, placeholder, and validation error capabilities.

2. Context Provider is Required

You must wrap components with NepaliCalendarProvider and pass defaultCalendarData or your own custom calendar definitions.

// Before: None
// After (Required):
import { NepaliCalendarProvider, defaultCalendarData } from 'nepali-bs-calendar-react'
 
function App() {
  return (
    <NepaliCalendarProvider data={defaultCalendarData}>
      {/* Your components */}
    </NepaliCalendarProvider>
  )
}

Step-by-Step Upgrade Guide

Step 1: Update the Dependency

Install the latest version from npm:

npm install nepali-bs-calendar-react@1.0.0

Step 2: Set Up the Provider

Add the NepaliCalendarProvider at the root of your application layouts (or wrapping the forms where you use the calendar).

Step 3: Replace Imports and Elements

Replacing `Calendar` (Static view)

If you rendered a calendar directly on a page:

// Before
import { Calendar } from 'nepali-bs-calendar-react'
<Calendar value={date} onChange={setDate} />
 
// After
import { StaticNepaliCalendar } from 'nepali-bs-calendar-react'
<StaticNepaliCalendar value={date} onChange={setDate} />

If you used the text-input trigger that displays a popup:

// Before
import { DatePicker } from 'nepali-bs-calendar-react'
<DatePicker value={date} onChange={setDate} placeholder="Select date" />
 
// After
import { NepaliCalendar } from 'nepali-bs-calendar-react'
<NepaliCalendar value={date} onChange={setDate} placeholder="Select date" />

Step 4: Verify Props and CSS overrides

Confirm that your custom style overrides are defined globally on :root or body using the updated CSS variable names (e.g. --nc-bg instead of custom selectors).
Double check that you've imported the default CSS:

import 'nepali-bs-calendar-react/styles.css'