osi-cards-lib 1.5.30 → 1.5.32

package/scripts/setup-angular-styles.js

@@ -1,169 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Setup Script for OSI Cards Library
- *
- * Automatically adds library styles to angular.json
- * This script can be run manually or as a post-install hook
- *
- * Usage:
- *   node scripts/setup-angular-styles.js
- *   OR
- *   npm run setup:styles (if added to package.json)
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const colors = {
-  reset: '\x1b[0m',
-  green: '\x1b[32m',
-  red: '\x1b[31m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-};
-
-function log(msg, color = colors.reset) {
-  console.log(`${color}${msg}${colors.reset}`);
-}
-
-function findAngularJson(startPath = process.cwd()) {
-  let currentPath = startPath;
-  const rootPath = path.parse(currentPath).root;
-
-  while (currentPath !== rootPath) {
-    const angularJsonPath = path.join(currentPath, 'angular.json');
-    if (fs.existsSync(angularJsonPath)) {
-      return angularJsonPath;
-    }
-    currentPath = path.dirname(currentPath);
-  }
-
-  return null;
-}
-
-function updateAngularJson(angularJsonPath) {
-  try {
-    const angularJson = JSON.parse(fs.readFileSync(angularJsonPath, 'utf8'));
-    let modified = false;
-
-    // Find all projects
-    for (const projectName in angularJson.projects) {
-      const project = angularJson.projects[projectName];
-
-      if (project.projectType === 'application' && project.architect?.build?.options) {
-        const buildOptions = project.architect.build.options;
-
-        // Check if styles array exists
-        if (!buildOptions.styles) {
-          buildOptions.styles = [];
-        }
-
-        // Check if library styles are already added
-        const libraryStylePath = 'node_modules/osi-cards-lib/styles/_styles-scoped.scss';
-        const hasLibraryStyles = buildOptions.styles.some(
-          (style) => style.includes('osi-cards-lib') && style.includes('_styles-scoped')
-        );
-
-        if (!hasLibraryStyles) {
-          // Add library styles after the main styles file
-          const mainStyleIndex = buildOptions.styles.findIndex(
-            (style) =>
-              style.includes('styles.sass') ||
-              style.includes('styles.scss') ||
-              style.includes('styles.css')
-          );
-
-          if (mainStyleIndex >= 0) {
-            buildOptions.styles.splice(mainStyleIndex + 1, 0, libraryStylePath);
-          } else {
-            buildOptions.styles.unshift(libraryStylePath);
-          }
-          modified = true;
-          log(`✓ Added library styles to project: ${projectName}`, colors.green);
-        } else {
-          log(`ℹ Library styles already configured in project: ${projectName}`, colors.blue);
-        }
-
-        // Ensure stylePreprocessorOptions exists
-        if (!buildOptions.stylePreprocessorOptions) {
-          buildOptions.stylePreprocessorOptions = {};
-        }
-
-        // Add includePaths if not present
-        if (!buildOptions.stylePreprocessorOptions.includePaths) {
-          buildOptions.stylePreprocessorOptions.includePaths = [];
-        }
-
-        const hasIncludePath = buildOptions.stylePreprocessorOptions.includePaths.some((path) =>
-          path.includes('osi-cards-lib')
-        );
-
-        if (!hasIncludePath) {
-          buildOptions.stylePreprocessorOptions.includePaths.push(
-            'node_modules/osi-cards-lib/styles'
-          );
-          modified = true;
-          log(`✓ Added includePaths to project: ${projectName}`, colors.green);
-        }
-
-        // Ensure sass options exist
-        if (!buildOptions.stylePreprocessorOptions.sass) {
-          buildOptions.stylePreprocessorOptions.sass = {};
-        }
-
-        if (!buildOptions.stylePreprocessorOptions.sass.silenceDeprecations) {
-          buildOptions.stylePreprocessorOptions.sass.silenceDeprecations = ['import'];
-          modified = true;
-          log(`✓ Added SASS deprecation silence to project: ${projectName}`, colors.green);
-        }
-      }
-    }
-
-    if (modified) {
-      // Write back with proper formatting
-      fs.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2) + '\n', 'utf8');
-      log('\n✅ Successfully updated angular.json!', colors.green);
-      log('\nNext steps:', colors.blue);
-      log('1. Remove the @import from your styles.sass/scss file if present', colors.yellow);
-      log('2. Rebuild your app: ng build or npm start', colors.yellow);
-      return true;
-    } else {
-      log('\nℹ angular.json is already configured correctly.', colors.blue);
-      return false;
-    }
-  } catch (error) {
-    log(`\n✗ Error updating angular.json: ${error.message}`, colors.red);
-    return false;
-  }
-}
-
-function main() {
-  log('\n═══════════════════════════════════════════════════════', colors.blue);
-  log('  OSI Cards Library - Angular Styles Setup', colors.blue);
-  log('═══════════════════════════════════════════════════════\n', colors.blue);
-
-  const angularJsonPath = findAngularJson();
-
-  if (!angularJsonPath) {
-    log("✗ angular.json not found. Make sure you're in an Angular project directory.", colors.red);
-    process.exit(1);
-  }
-
-  log(`Found angular.json at: ${angularJsonPath}\n`, colors.blue);
-
-  const success = updateAngularJson(angularJsonPath);
-
-  if (success) {
-    process.exit(0);
-  } else {
-    process.exit(0); // Still exit successfully if already configured
-  }
-}
-
-// Run if called directly
-if (require.main === module) {
-  main();
-}
-
-module.exports = { updateAngularJson, findAngularJson };

package/styles/_components.scss

@@ -1,38 +0,0 @@
-/* ===================================================================
-   SHARED COMPONENT STYLES BUNDLE
-
-   This file contains all component imports shared across all entry points:
-   - _styles.scss (demo app, :root scope)
-   - _styles-scoped.scss (integration, .osi-cards-container scope)
-   - _styles-standalone.scss (full isolation with Bootstrap reset)
-
-   Each entry point imports this bundle after setting up its scope and variables.
-
-   Note: Using @import here as Sass @use/@forward requires restructuring
-   the entire SCSS architecture. These warnings can be safely ignored
-   until Dart Sass 3.0.0 when migration will be required.
-   =================================================================== */
-
-// Core styles (must come first, after variables)
-@import "core/mixins";
-@import "core/surface-layers";
-@import "core/global";
-@import "core/utilities";
-@import "core/animations";
-
-// Streaming effects (must come after animations)
-@import "components/streaming-effects";
-
-// Layout styles
-@import "layout/tilt";
-@import "layout/masonry";
-@import "layout/feature-grid";
-
-// Hero card and feature card styles
-@import "components/hero-card";
-
-// Component styles
-@import "components/cards/ai-card";
-
-// All section styles (consolidated)
-@import "components/sections/sections-all";

package/styles/_index.scss

@@ -1,25 +0,0 @@
-/**
- * OSI Cards Style System
- * Single entry point for all styles
- *
- * Usage in applications:
- * @use 'osi-cards-lib/styles' as osi;
- *
- * Or import individual parts:
- * @use 'osi-cards-lib/styles/tokens' as tokens;
- * @use 'osi-cards-lib/styles/mixins' as mixins;
- */
-
-// Design tokens (CSS custom properties)
-@forward "osi-cards-tokens";
-
-// SCSS mixins and utilities
-@forward "osi-cards-mixins";
-
-// Component styles
-@forward "components/card" as card-*;
-@forward "components/section" as section-*;
-
-// Optional: Theme utilities
-@forward "themes/light" as light-*;
-@forward "themes/dark" as dark-*;

package/styles/_osi-cards-mixins.scss

@@ -1,459 +0,0 @@
-/**
- * OSI Cards SCSS Mixins
- * Reusable style patterns for components
- *
- * Usage:
- * @use 'osi-cards-mixins' as mixins;
- *
- * .my-component {
- *   @include mixins.card-base;
- * }
- */
-
-// ============================================================================
-// CARD MIXINS
-// ============================================================================
-
-/// Base card styles
-@mixin card-base {
-  background: var(--osi-card-bg, white);
-  border: 1px solid var(--osi-card-border, var(--osi-neutral-200));
-  border-radius: var(--osi-card-radius, var(--osi-radius-xl));
-  box-shadow: var(--osi-card-shadow, var(--osi-shadow-md));
-}
-
-/// Card hover state
-@mixin card-hover {
-  transition:
-    transform var(--osi-duration-200) var(--osi-ease-out),
-    box-shadow var(--osi-duration-200) var(--osi-ease-out);
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--osi-shadow-lg);
-  }
-}
-
-/// Card interactive (clickable)
-@mixin card-interactive {
-  @include card-hover;
-  cursor: pointer;
-
-  &:active {
-    transform: translateY(0);
-    box-shadow: var(--osi-shadow-sm);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--osi-primary-500);
-    outline-offset: 2px;
-  }
-}
-
-// ============================================================================
-// SECTION MIXINS
-// ============================================================================
-
-/// Base section styles
-@mixin section-base {
-  padding: var(--osi-spacing-4);
-
-  & + & {
-    border-top: 1px solid var(--osi-border-default);
-  }
-}
-
-/// Section header styles
-@mixin section-header {
-  display: flex;
-  align-items: center;
-  gap: var(--osi-spacing-2);
-  margin-bottom: var(--osi-spacing-3);
-  font-size: var(--osi-text-sm);
-  font-weight: var(--osi-font-semibold);
-  color: var(--osi-section-header-color);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/// Section content styles
-@mixin section-content {
-  color: var(--osi-section-content-color);
-  font-size: var(--osi-text-sm);
-  line-height: var(--osi-leading-relaxed);
-}
-
-// ============================================================================
-// FIELD MIXINS
-// ============================================================================
-
-/// Field container
-@mixin field-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--osi-field-gap);
-}
-
-/// Field label
-@mixin field-label {
-  font-size: var(--osi-text-xs);
-  font-weight: var(--osi-font-medium);
-  color: var(--osi-field-label-color);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/// Field value
-@mixin field-value {
-  font-size: var(--osi-text-base);
-  font-weight: var(--osi-font-medium);
-  color: var(--osi-field-value-color);
-}
-
-/// Field value large (for metrics)
-@mixin field-value-lg {
-  font-size: var(--osi-text-2xl);
-  font-weight: var(--osi-font-bold);
-  color: var(--osi-field-value-color);
-  line-height: var(--osi-leading-tight);
-}
-
-// ============================================================================
-// GRID MIXINS
-// ============================================================================
-
-/// Responsive grid container
-@mixin grid-container($min-column: 200px, $gap: var(--osi-grid-gap)) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($min-column, 1fr));
-  gap: $gap;
-}
-
-/// Fixed column grid
-@mixin grid-fixed($columns: 2, $gap: var(--osi-grid-gap)) {
-  display: grid;
-  grid-template-columns: repeat($columns, 1fr);
-  gap: $gap;
-}
-
-/// Masonry-like grid (using CSS grid)
-@mixin masonry-grid($min-column: 250px) {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax($min-column, 1fr));
-  grid-auto-rows: 20px;
-  gap: var(--osi-spacing-4);
-}
-
-// ============================================================================
-// TYPOGRAPHY MIXINS
-// ============================================================================
-
-/// Heading styles
-@mixin heading($level: 1) {
-  font-family: var(--osi-font-sans);
-  font-weight: var(--osi-font-bold);
-  line-height: var(--osi-leading-tight);
-  color: var(--osi-text-primary);
-
-  @if $level == 1 {
-    font-size: var(--osi-text-3xl);
-  } @else if $level == 2 {
-    font-size: var(--osi-text-2xl);
-  } @else if $level == 3 {
-    font-size: var(--osi-text-xl);
-  } @else if $level == 4 {
-    font-size: var(--osi-text-lg);
-  } @else {
-    font-size: var(--osi-text-base);
-  }
-}
-
-/// Body text
-@mixin body-text {
-  font-family: var(--osi-font-sans);
-  font-size: var(--osi-text-base);
-  font-weight: var(--osi-font-normal);
-  line-height: var(--osi-leading-normal);
-  color: var(--osi-text-secondary);
-}
-
-/// Small text
-@mixin small-text {
-  font-size: var(--osi-text-sm);
-  color: var(--osi-text-tertiary);
-}
-
-/// Truncate text with ellipsis
-@mixin truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/// Multi-line truncate
-@mixin line-clamp($lines: 2) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-// ============================================================================
-// BUTTON MIXINS
-// ============================================================================
-
-/// Base button styles
-@mixin button-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--osi-spacing-2);
-  padding: var(--osi-btn-padding-y) var(--osi-btn-padding-x);
-  font-size: var(--osi-btn-font-size);
-  font-weight: var(--osi-btn-font-weight);
-  border-radius: var(--osi-btn-radius);
-  border: none;
-  cursor: pointer;
-  transition: all var(--osi-duration-150) var(--osi-ease-out);
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--osi-primary-500);
-    outline-offset: 2px;
-  }
-}
-
-/// Primary button
-@mixin button-primary {
-  @include button-base;
-  background: var(--osi-primary-500);
-  color: white;
-
-  &:hover:not(:disabled) {
-    background: var(--osi-primary-600);
-  }
-
-  &:active:not(:disabled) {
-    background: var(--osi-primary-700);
-  }
-}
-
-/// Secondary button
-@mixin button-secondary {
-  @include button-base;
-  background: var(--osi-neutral-100);
-  color: var(--osi-text-primary);
-
-  &:hover:not(:disabled) {
-    background: var(--osi-neutral-200);
-  }
-
-  &:active:not(:disabled) {
-    background: var(--osi-neutral-300);
-  }
-}
-
-/// Ghost button
-@mixin button-ghost {
-  @include button-base;
-  background: transparent;
-  color: var(--osi-text-secondary);
-
-  &:hover:not(:disabled) {
-    background: var(--osi-neutral-100);
-    color: var(--osi-text-primary);
-  }
-}
-
-// ============================================================================
-// UTILITY MIXINS
-// ============================================================================
-
-/// Visually hidden (for screen readers)
-@mixin visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-/// Reset list styles
-@mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/// Reset button styles
-@mixin button-reset {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-/// Flexbox center
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/// Flex column
-@mixin flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-/// Flex between
-@mixin flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/// Absolute fill (position absolute, fill container)
-@mixin absolute-fill {
-  position: absolute;
-  inset: 0;
-}
-
-/// Fixed fill (position fixed, fill viewport)
-@mixin fixed-fill {
-  position: fixed;
-  inset: 0;
-}
-
-// ============================================================================
-// RESPONSIVE MIXINS
-// ============================================================================
-
-/// Mobile-first breakpoint
-@mixin breakpoint($size) {
-  @if $size == "sm" {
-    @media (min-width: 640px) {
-      @content;
-    }
-  } @else if $size == "md" {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $size == "lg" {
-    @media (min-width: 1024px) {
-      @content;
-    }
-  } @else if $size == "xl" {
-    @media (min-width: 1280px) {
-      @content;
-    }
-  } @else if $size == "2xl" {
-    @media (min-width: 1536px) {
-      @content;
-    }
-  }
-}
-
-/// Max-width breakpoint
-@mixin breakpoint-down($size) {
-  @if $size == "sm" {
-    @media (max-width: 639px) {
-      @content;
-    }
-  } @else if $size == "md" {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $size == "lg" {
-    @media (max-width: 1023px) {
-      @content;
-    }
-  } @else if $size == "xl" {
-    @media (max-width: 1279px) {
-      @content;
-    }
-  }
-}
-
-// ============================================================================
-// ANIMATION MIXINS
-// ============================================================================
-
-/// Fade in animation
-@mixin fade-in($duration: var(--osi-duration-200)) {
-  animation: osi-fade-in $duration var(--osi-ease-out);
-}
-
-/// Slide up animation
-@mixin slide-up($duration: var(--osi-duration-300)) {
-  animation: osi-slide-up $duration var(--osi-ease-out);
-}
-
-/// Pulse animation
-@mixin pulse($duration: 2s) {
-  animation: osi-pulse $duration infinite;
-}
-
-/// Loading shimmer
-@mixin loading-shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--osi-neutral-200) 25%,
-    var(--osi-neutral-100) 50%,
-    var(--osi-neutral-200) 75%
-  );
-  background-size: 200% 100%;
-  animation: osi-shimmer 1.5s infinite;
-}
-
-// Keyframe definitions
-@keyframes osi-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes osi-slide-up {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 10px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes osi-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes osi-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}