feat(atomic): migrate atomic-smart-snippet to Lit with Tailwind styles

[Copilot]

Description

Migrates atomic-smart-snippet from Stencil to Lit, maintaining all functionality while modernizing the implementation to use Lit decorators, lifecycle methods, and functional component patterns. Includes migration from PCSS to Tailwind CSS with expanded utility classes.

Changes

Component Migration

• Converted from Stencil .tsx to Lit .ts using @customElement, @property, @state decorators
• Migrated to Lit lifecycle (connectedCallback, disconnectedCallback, willUpdate)
• Integrated with existing Lit functional components (renderSnippetWrapper, renderSnippetQuestion, renderSnippetFooter, etc.)
• Event listeners properly registered/removed in lifecycle hooks
• Array properties use arrayConverter for tabs-included/tabs-excluded
• Migrated PCSS to Tailwind CSS (atomic-smart-snippet.tw.css.ts)
  • Expanded custom Tailwind utilities (link-style, set-font-size-*) to CSS variables since @reference directives are not supported in Lit's css template literals
  • Converted @apply directives to standard CSS using CSS custom properties
• Added @withTailwindStyles decorator for proper style encapsulation
• Fixed TypeScript errors (private field #id instead of private id)
• Fixed import path for atomic-smart-snippet-source component to resolve Rollup bundling error

Testing

• Unit tests: Comprehensive 445-line test suite covering:
  • Props validation and controller integration
  • Rendering states and lifecycle
  • Tab filtering and feedback functionality
  • Inline link events and expandable answer integration
  • Dynamic updates (question/answer changes)
  • Custom styling (template and attribute-based)
  • Slot attributes
  • All scenarios from original Cypress tests
• E2E tests: Simplified to single rendering test (all other tests migrated to unit tests)
• Cypress removal: Removed smart-snippet.cypress.ts with all coverage preserved in unit tests

Documentation

• MDX documentation covering features, props, customization patterns
• Includes examples for styling, tab filtering, slot usage

Notes

• Stencil version preserved temporarily for validation
• Corrected import path from @/src/components/common/smart-snippets/atomic-smart-snippet-source to @/src/components/common/atomic-smart-snippet-source/atomic-smart-snippet-source
• Tailwind utilities expanded inline to work with Lit's css template tag constraints

✅ Checklist

• 🧪 The component is unit tested
• 🧪 The component includes E2E tests
• 🗑️ Old Cypress tests exclusive to the component are removed
• 📖 The component is documented in storybook with an .mdx file
• ♿ The component complies with the Web Content Accessibility Guidelines.
• 🌐 All strings intended for humans or assistive technology must be localized with i18n.
• 📦 The Lit component is exported in the appropriate index.ts and lazy-index.ts files.
• 🎨 CSS parts are documented still accessible.
• 🦥 Slotted Content, public methods and properties are documented
• 🔄 The component outputs the same Angular output as before with Stencil
• 🏷️ The component declares the component type in the HTMLElementTagNameMap

https://coveord.atlassian.net/browse/KIT-5062

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Migrate atomic-smart-snippet</issue_title>
<issue_description>

Jira Issue: KIT-5062

Type: Story
Status: New
Priority: Medium

---

Comments on the Issue (you are @copilot in this section)

Custom agent used: StencilToLitMigrationV1
Specialized agent for migrating Atomic Stencil code to Lit (components, functional components, and utils)

• Fixes Migrate atomic-smart-snippet #6348

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[y-lakhdar]

@copilot few adjustments:

• remove packages/atomic/cypress/e2e/smart-snippet.cypress.ts and ensure that atomic-smart-snippet.spec.ts has the same test coverage.
• keep only one e2e tests to ensure the component render correctly (all tests should be added in .spec.ts file).
• ensure there is no tsc errors in the component
• ensure the pcss file is migrated into tw.ts.css file (and use the withTailwinwStyles decorator)
  do not stop until all tests are passing and no typescript static errors

[Copilot]

@copilot few adjustments:

• remove packages/atomic/cypress/e2e/smart-snippet.cypress.ts and ensure that atomic-smart-snippet.spec.ts has the same test coverage.
• keep only one e2e tests to ensure t...

All adjustments completed in commit 4207d6c:

✅ Removed packages/atomic/cypress/e2e/smart-snippet.cypress.ts
✅ Expanded atomic-smart-snippet.spec.ts with comprehensive test coverage (445 lines, covering all Cypress tests)
✅ Simplified E2E tests to single rendering test (all other tests moved to .spec.ts)
✅ Migrated PCSS to atomic-smart-snippet.tw.css.ts file
✅ Added @withTailwindStyles decorator to component
✅ Fixed TypeScript error (changed private id to private field #id)

The component now uses Tailwind styles, has comprehensive unit test coverage, and passes all linting checks.

fixed