@capillarytech/blaze-ui 4.2.0 → 4.3.0

package/dist/CapStatisticCard/README.md

@@ -0,0 +1,138 @@
+# CapStatisticCard
+
+A component for displaying statistics in a card layout with optional headers and dividers.
+
+## Migration from cap-ui-library
+
+This component has been migrated from `@capillarytech/cap-ui-library` to `@capillarytech/blaze-ui` with the following changes:
+
+### Breaking Changes
+
+**No breaking changes** - The component maintains full backward compatibility with the previous version.
+
+### Prop Changes
+
+| Prop | Status | Type | Description |
+|------|--------|------|-------------|
+| `statsItems` | ✅ Unchanged | `CapStatisticCardItem[]` | Array of statistic items to display |
+| `width` | ✅ Unchanged | `string` | Width for each statistic item (default: '20%') |
+| `type` | ✅ Unchanged | `string` | Optional type label displayed in the first column |
+| `showHeader` | ✅ Unchanged | `boolean` | Whether to show header row with item text labels |
+
+### TypeScript Interfaces
+
+```typescript
+export interface CapStatisticCardItem {
+  text: string;
+  value: string | number;
+  subText?: string;
+}
+
+export interface CapStatisticCardProps {
+  statsItems: CapStatisticCardItem[];
+  width?: string;
+  type?: string;
+  showHeader?: boolean;
+}
+```
+
+### API Changes
+
+- **TypeScript Support:** Full TypeScript support with exported `CapStatisticCardProps` and `CapStatisticCardItem` interfaces
+- **Styling:** Migrated from global SCSS to SCSS modules for better encapsulation
+- **Spacing:** Converted inline spacing values to use SCSS variables from `blaze-ui/components/styled/variables.scss`
+- **Pixel Values:** Converted pixel values to rem units (base: 14px = 1rem)
+
+### Behavioral Changes
+
+- **Class Names:** Now uses SCSS module class names (e.g., `styles['stats-card']`) instead of global class names
+- **Spacing Constants:** Uses SCSS variables (`$cap-space-04`, `$cap-space-08`, `$cap-space-12`) instead of JavaScript constants
+- **Pixel Conversion:** All pixel values converted to rem:
+  - `10px` → `0.714rem`
+  - `-4px` → `-0.286rem`
+  - `12px` → `0.857rem` (via `$cap-space-12`)
+
+### Usage Examples
+
+#### Basic Usage
+
+```tsx
+import { CapStatisticCard } from '@capillarytech/blaze-ui';
+
+const stats = [
+  { text: 'Total Users', value: 1234 },
+  { text: 'Active Users', value: 856 },
+  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
+];
+
+<CapStatisticCard statsItems={stats} />
+```
+
+#### With Type Label
+
+```tsx
+<CapStatisticCard
+  statsItems={stats}
+  type="Monthly Stats"
+  showHeader
+/>
+```
+
+#### Custom Width
+
+```tsx
+<CapStatisticCard
+  statsItems={stats}
+  width="25%"
+/>
+```
+
+#### With Subtext
+
+```tsx
+const statsWithSubtext = [
+  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
+  { text: 'Users', value: 1234, subText: '+5% growth' },
+];
+
+<CapStatisticCard statsItems={statsWithSubtext} />
+```
+
+### Migration Steps for Consumers
+
+1. **Update Import:**
+   ```tsx
+   // Before
+   import CapStatisticCard from '@capillarytech/cap-ui-library/components/CapStatisticCard';
+   
+   // After
+   import { CapStatisticCard } from '@capillarytech/blaze-ui';
+   ```
+
+2. **No prop changes required** - All props work exactly as before.
+
+3. **TypeScript Support:** If using TypeScript, you can now import types:
+   ```tsx
+   import { CapStatisticCard, CapStatisticCardProps, CapStatisticCardItem } from '@capillarytech/blaze-ui';
+   ```
+
+### TypeScript
+
+```tsx
+import { CapStatisticCard, CapStatisticCardProps, CapStatisticCardItem } from '@capillarytech/blaze-ui';
+
+const stats: CapStatisticCardItem[] = [
+  { text: 'Total Users', value: 1234 },
+  { text: 'Active Users', value: 856 },
+  { text: 'Revenue', value: '$12,345', subText: '+12% from last month' },
+];
+
+const props: CapStatisticCardProps = {
+  statsItems: stats,
+  type: 'Monthly Stats',
+  showHeader: true,
+  width: '20%',
+};
+
+<CapStatisticCard {...props} />
+```

package/dist/CapStatisticCard/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CapStatisticCardProps } from './types';
+export declare const renderCustomDivider: (type?: string) => import("react/jsx-runtime").JSX.Element | null;
+declare const CapStatisticCard: React.FC<CapStatisticCardProps>;
+export default CapStatisticCard;
+//# sourceMappingURL=index.d.ts.map

package/dist/CapStatisticCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapStatisticCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,mBAAmB,GAAI,OAAM,MAAW,mDAEpD,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqErD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}