@eric-emg/symphiq-components 1.2.0

package/README.md

@@ -0,0 +1,179 @@
+# Funnel Analysis Library
+
+A comprehensive Angular library for building funnel analysis dashboards with performance visualization and metrics analysis.
+
+## Installation
+
+### From NPM (once published)
+```bash
+npm install funnel-analysis-lib
+```
+
+### Local Development (from this workspace)
+```bash
+# Build the library
+npm run build:lib:prod
+
+# The library will be available at dist/funnel-analysis-lib
+```
+
+## Usage
+
+### Import Components
+```typescript
+import { DashboardComponent } from 'funnel-analysis-lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, DashboardComponent],
+  template: `
+    <lib-dashboard [data]="performanceData"></lib-dashboard>
+  `
+})
+export class AppComponent {
+  performanceData = { /* your performance data */ };
+}
+```
+
+### Import Models and Interfaces
+```typescript
+import { 
+  PerformanceOverviewStructuredV3Interface,
+  GradeEnum,
+  MetricStatusEnum 
+} from 'funnel-analysis-lib';
+
+const assessment: PerformanceOverviewStructuredV3Interface = {
+  // your data structure
+};
+```
+
+### Import Services
+```typescript
+import { ModalService, FunnelOrderService } from 'funnel-analysis-lib';
+
+@Injectable()
+export class MyService {
+  constructor(
+    private modalService: ModalService,
+    private funnelOrderService: FunnelOrderService
+  ) {}
+}
+```
+
+## Features
+
+- **Dashboard Component**: Main visualization component for funnel analysis
+- **Metric Cards**: Individual metric display components
+- **Insight Cards**: Actionable insights from funnel data
+- **Breakdown Sections**: Detailed breakdowns by various dimensions (device, channel, etc.)
+- **Overall Assessment**: Summary assessment of funnel health
+- **Modal Management**: Built-in modal service for notifications and dialogs
+- **Funnel Ordering**: Service for organizing and prioritizing funnel items
+
+## Styling
+
+The library uses **Tailwind CSS** for all styling. To use this library in your project, follow these steps:
+
+### Step 1: Install Tailwind CSS (if not already installed)
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### Step 2: Configure Tailwind to scan the library files
+
+**IMPORTANT**: Update your `tailwind.config.js` to include the library's compiled files:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+    "./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs}",  // ← ADD THIS LINE
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+**Note**: The path `./node_modules/@eric-emg/funnel-analysis-lib/**/*.{js,mjs}` tells Tailwind to scan the compiled library files for class names.
+
+### Step 3: Import Tailwind CSS in your global styles
+
+```css
+/* In your global styles.css or main.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### Custom Colors
+If you want to use the library's custom color palette, add to your `tailwind.config.js`:
+
+```js
+theme: {
+  extend: {
+    colors: {
+      'symphiq-blue': '#1a56db',
+      'symphiq-dark': '#0f172a',
+      'symphiq-gray': '#64748b',
+    },
+  },
+}
+```
+
+## Building the Library
+
+```bash
+# Build for production
+npm run build:lib:prod
+
+# Build for development
+npm run build:lib
+
+# Build everything (library + demo)
+npm run build:all
+```
+
+## Testing
+
+```bash
+# Run library tests
+ng test funnel-analysis-lib
+
+# Run library tests with watch mode
+ng test funnel-analysis-lib --watch
+```
+
+## Development
+
+To develop and test the library:
+
+1. Start the demo application which imports the library:
+```bash
+npm start
+```
+
+2. The demo app will hot-reload when you make changes to both the library and demo app
+
+## Publishing to NPM
+
+1. Update the version in `projects/funnel-analysis-lib/package.json`
+2. Build the library:
+```bash
+npm run build:lib:prod
+```
+3. Publish from the dist folder:
+```bash
+cd dist/funnel-analysis-lib
+npm publish
+```
+
+## License
+
+MIT