@optifye/dashboard-core 2.0.1 → 2.0.2

package/README.md

@@ -172,6 +172,23 @@ Or if using Yarn:
 yarn add react@^18 react-dom@^18 next@^13 tailwindcss@^3 @supabase/supabase-js@^2 date-fns@^4 date-fns-tz@^3
 ```
 
+### CSS Setup
+
+This package includes global CSS styles that need to be imported in your application. In your Next.js app, import the global CSS file once in your `_app.tsx` or `layout.tsx`:
+
+```tsx
+// pages/_app.tsx or app/layout.tsx
+import '@optifye/dashboard-core/global.css';
+```
+
+This CSS file includes:
+- Tailwind CSS base styles
+- Custom component styles
+- React Day Picker styles (for calendar components)
+- Range slider styling
+
+**Note:** You do NOT need to separately import `react-day-picker/dist/style.css` as these styles are already included in the package's global CSS.
+
 ## Integration Guide
 
 ### Basic Setup
@@ -641,10 +658,20 @@ This package is published to npm as `@optifye/dashboard-core` and follows semant
 
 ### How to trigger a new release
 
-1. Create a changeset for your changes: `pnpm changeset`
+1. Create a changeset for your changes: `pnpm changeset` or `npx changeset`
 2. Choose the appropriate version bump (patch, minor, major)
-3. Create a PR with "RELEASE" in the title
-4. When merged, the GitHub Actions workflow will automatically publish the package to npm
+3. Commit the changeset file and push your branch
+4. Run `npx changeset version` to update package.json and CHANGELOG.md
+5. Commit the version changes
+6. Create a PR with **"RELEASE"** (all caps) in the title
+7. When merged, the GitHub Actions workflow will automatically publish the package to npm
+
+**Important:** The release workflow is triggered by PR merges, not direct pushes to main. The PR title MUST contain "RELEASE" for the workflow to run.
+
+### Example Release PR Title
+```
+RELEASE v2.0.1: Fix Next.js CSS import error
+```
 
 ### Package Repository
 

package/dist/index.js

@@ -14,7 +14,6 @@ var lucideReact = require('lucide-react');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
 var reactDayPicker = require('react-day-picker');
-require('react-day-picker/dist/style.css');
 var recharts = require('recharts');
 var html2canvas = require('html2canvas');
 var jsPDF = require('jspdf');

package/dist/index.mjs

@@ -13,7 +13,6 @@ import { ChevronDown, ChevronUp, Check, Camera, Map as Map$1, Video, X, Clock, C
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import 'react-day-picker/dist/style.css';
 import { ResponsiveContainer, PieChart, Pie, Cell, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar, Legend, LabelList, LineChart as LineChart$1, Line } from 'recharts';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';

package/global.css

@@ -60,4 +60,137 @@ input[type="range"]:active::-moz-range-thumb {
   body {
     @apply bg-background text-foreground;
   }
+} 
+
+/* React Day Picker Styles - v9 */
+/* These styles are included to avoid Next.js CSS import issues */
+.rdp {
+  --rdp-background-color: #ffffff;
+  --rdp-accent-color: #4f46e5;
+  --rdp-accent-background-color: #e0e7ff;
+  --rdp-accent-background-color-dark: #4f46e5;
+  --rdp-accent-color-dark: #ffffff;
+  --rdp-disabled-color: #9ca3af;
+  --rdp-disabled-background-color: #f3f4f6;
+  --rdp-outline: 2px solid var(--rdp-accent-color);
+  --rdp-outline-selected: 2px solid var(--rdp-accent-color-dark);
+}
+
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  background: none;
+  font: inherit;
+  border: 0;
+  outline: none;
+}
+
+.rdp-button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  background: none;
+  font: inherit;
+  border: 0;
+  outline: none;
+}
+
+.rdp-months {
+  display: flex;
+}
+
+.rdp-month {
+  margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 0;
+}
+
+.rdp-month:last-child {
+  margin-right: 0;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-size) * 7);
+  border-collapse: collapse;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-size) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-row:nth-child(2) {
+  padding-top: 0.25em;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  text-align: center;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-size, 2.5rem);
+  height: 100%;
+  text-align: center;
+  padding: 0;
+}
+
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-weight: 500;
+  border: 2px solid transparent;
+  border-radius: 6px;
+}
+
+.rdp-day_today:not(.rdp-day_selected) {
+  font-weight: 700;
+  color: var(--rdp-accent-color);
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",