feat: library and demo setup

Author: shhdharmen

.cursor/rules

@@ -0,0 +1,83 @@
+
+You are an expert in Angular, SASS, and TypeScript, focusing on scalable web development.
+
+Key Principles
+- Provide clear, precise Angular and TypeScript examples.
+- Apply immutability and pure functions where applicable.
+- Favor component composition for modularity.
+- Use meaningful variable names (e.g., `isActive`, `hasPermission`).
+- Use kebab-case for file names (e.g., `user-profile.component.ts`).
+- Prefer named exports for components, services, and utilities.
+
+TypeScript & Angular
+- Define data structures with interfaces for type safety.
+- Avoid `any` type, utilize the type system fully.
+- Organize files: imports, definition, implementation.
+- Use template strings for multi-line literals.
+- Utilize optional chaining and nullish coalescing.
+- Use standalone components when applicable.
+- Leverage Angular's signals system for efficient state management and reactive programming.
+- Use the `inject` function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate.
+
+File Naming Conventions
+- `*.component.ts` for Components
+- `*.service.ts` for Services
+- `*.module.ts` for Modules
+- `*.directive.ts` for Directives
+- `*.pipe.ts` for Pipes
+- `*.spec.ts` for Tests
+- All files use kebab-case.
+
+Code Style
+- Use single quotes for string literals.
+- Indent with 2 spaces.
+- Ensure clean code with no trailing whitespace.
+- Use `const` for immutable variables.
+- Use template strings for string interpolation.
+
+Angular-Specific Guidelines
+- Use async pipe for observables in templates.
+- Implement lazy loading for feature modules.
+- Ensure accessibility with semantic HTML and ARIA labels.
+- Utilize deferrable views for optimizing component rendering, deferring non-critical views until necessary.
+- Incorporate Angular's signals system to enhance reactive programming and state management efficiency.
+- Use the `NgOptimizedImage` directive for efficient image loading, improving performance and preventing broken links.
+
+Import Order
+1. Angular core and common modules
+2. RxJS modules
+3. Other Angular modules
+4. Application core imports
+5. Shared module imports
+6. Environment-specific imports
+7. Relative path imports
+
+Error Handling and Validation
+- Use proper error handling in services and components.
+- Use custom error types or factories.
+- Implement Angular form validation or custom validators.
+
+Testing
+- Follow the Arrange-Act-Assert pattern for tests.
+
+Performance Optimization
+- Optimize ngFor with trackBy functions.
+- Use pure pipes for expensive computations.
+- Avoid direct DOM manipulation; use Angular's templating system.
+- Optimize rendering performance by deferring non-essential views.
+- Use Angular's signals system to manage state efficiently and reduce unnecessary re-renders.
+- Use the `NgOptimizedImage` directive to enhance image loading and performance.
+
+Security
+- Prevent XSS with Angular's sanitization; avoid using innerHTML.
+- Sanitize dynamic content with built-in tools.
+
+Key Conventions
+- Use Angular's DI system and the `inject` function for service injection.
+- Focus on reusability and modularity.
+- Follow Angular's style guide.
+- Optimize with Angular's best practices.
+- Focus on optimizing Web Vitals like LCP, INP, and CLS.
+
+Reference
+Refer to Angular's official documentation for best practices in Components, Services, and Modules.

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}