How do you import an Angular Component in an MDX file ?

[apollyV]

The only solution I've found in this forum isn't up to date.
Here is my component, which contain colors :

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'ads-colors',
  imports: [CommonModule],
  standalone: true,
    template: `
    <p>
      Colors loaded!
    </p>
  `,
  styleUrls: ['./colors.component.scss']
})
export default class ColorsComponent implements OnInit {
  Charcoal!: string;
  Petrol!: string;
  Slate!: string;
  Storm!: string;
  Aluminium!: string;
  Snow!: string;
  Salt!: string;
  Ivory!: string;
  Concrete!: string;
  Unis!: string;
  Cactus!: string;
  Aqua!: string;
  Astrea!: string;
  Navy!: string;
  Beau!: string;
  Acssi!: string;
  Lemon!: string;
  Success!: string;
  SuccessLight!: string;
  Danger!: string;
  DangerLight!: string;
  Info!: string;
  InfoLight!: string;

  ngOnInit(): void {
    const styleSheet = getComputedStyle(document.documentElement);
    this.Charcoal = styleSheet.getPropertyValue('--ads-charcoal');
    this.Petrol = styleSheet.getPropertyValue('--ads-petrol');
    this.Slate = styleSheet.getPropertyValue('--ads-slate');
    this.Storm = styleSheet.getPropertyValue('--ads-storm');
    this.Aluminium = styleSheet.getPropertyValue('--ads-aluminium');
    this.Snow = styleSheet.getPropertyValue('--ads-snow');
    this.Salt = styleSheet.getPropertyValue('--ads-salt');
    this.Ivory = styleSheet.getPropertyValue('--ads-ivory');
    this.Concrete = styleSheet.getPropertyValue('--ads-concrete');
    this.Unis = styleSheet.getPropertyValue('--ads-unis');
    this.Cactus = styleSheet.getPropertyValue('--ads-cactus');
    this.Aqua = styleSheet.getPropertyValue('--ads-aqua');
    this.Astrea = styleSheet.getPropertyValue('--ads-astrea');
    this.Navy = styleSheet.getPropertyValue('--ads-navy');
    this.Beau = styleSheet.getPropertyValue('--ads-beau');
    this.Acssi = styleSheet.getPropertyValue('--ads-acssi');
    this.Lemon = styleSheet.getPropertyValue('--ads-lemon');
    this.Success = styleSheet.getPropertyValue('--ads-success');
    this.SuccessLight = styleSheet.getPropertyValue('--ads-success-light');
    this.Danger = styleSheet.getPropertyValue('--ads-danger');
    this.DangerLight = styleSheet.getPropertyValue('--ads-danger-light');
    this.Info = styleSheet.getPropertyValue('--ads-info');
    this.InfoLight = styleSheet.getPropertyValue('--ads-info-light');
    console.log(this);
  }
}

And here is the MDX file where I'm trying to import the component to re-use colors' variables:

import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
import { ColorsComponent } from "./colors.component";

<Meta title="Design System/Colors" />
# Colors
## Installation
npm i @ads-angular/colors

## Utilisation en Javascript
`import { ColorsComponent } from "@ads-angular/colors";` en haut du fichier<br/>
L'objet Colors contient un tableau de couleurs sous la forme clé/valeur qu'il suffit d'appeler, par exemple `ColorComponent.Charcoal` renvoie "#001218".

## Utilisation en CSS

## Palette
<ColorPalette>
  <ColorItem 
    title="theme.color.primary"
    subtitle="Principale" 
    colors={{ 
        Charcoal: ColorsComponent.Charcoal,
        Petrol: ColorsComponent.Petrol,
        Slate : ColorsComponent.Slate,
        Storm : ColorsComponent.Storm,
        Aluminium: ColorsComponent.Aluminium,
    }}
  />
  <ColorItem
    title="theme.color.background"
    subtitle="Fond"
    colors={{
        Snow: ColorsComponent.Snow,
        Salt: ColorsComponent.Salt,
        Ivory: ColorsComponent.Ivory,
        Concrete: ColorsComponent.Concrete,
    }}
  />
  <ColorItem
    title="theme.color.unis"
    subtitle="Unis"
    colors={{
        Unis: ColorsComponent.Unis,
        Cactus: ColorsComponent.Cactus,
        Aqua: ColorsComponent.Aqua,
    }}
  />
  <ColorItem
    title="theme.color.astrea"
    subtitle="Astrea"
    colors={{
        Astrea: ColorsComponent.Astrea,
        Navy: ColorsComponent.Navy,
        Beau: ColorsComponent.Beau,
    }}
  />
  <ColorItem
    title="theme.color.acssi"
    subtitle="Acssi"
    colors={{
        Acssi: ColorsComponent.Acssi,
        Lemon: ColorsComponent.Lemon,
    }}
  />
  <ColorItem
    title="theme.color.success"
    subtitle="Success"
    colors={{
        Success: ColorsComponent.Success,
        SuccessLight: ColorsComponent.SuccessLight,
    }}
  />
  <ColorItem
    title="theme.color.danger"
    subtitle="Danger"
    colors={{
        Danger: ColorsComponent.Danger,
        DangerLight: ColorsComponent.DangerLight,
    }}
  />
  <ColorItem
    title="theme.color.info"
    subtitle="Info"
    colors={{
        Info: ColorsComponent.Info,
        InfoLight: ColorsComponent.InfoLight,
    }}
  />
</ColorPalette>

And I have this kind of error in my console :
./projects/colors/src/lib/colors.mdx 47:20-44export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 48:18-40export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 49:17-38export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 50:17-38export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 51:21-46export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 57:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 58:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 59:17-38export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 60:20-44export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 66:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 67:18-40export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 68:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 74:18-40export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 75:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 76:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 82:17-38export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 83:17-38export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 89:19-42export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 90:24-52export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 96:18-40export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 97:23-50export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 103:16-36export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)./projects/colors/src/lib/colors.mdx 104:21-46export 'ColorsComponent' (imported as 'ColorsComponent') was not found in './colors.component' (possible exports: default)undefined undefined

[Marklb]

I haven't looked at why combining the default and named export doesn't let you import the named export in MDX, but that error goes away if you declare them separately.

export class ColorsComponent {}

export default ColorsComponent

Here is a Stackblitz without that error, by splitting them: https://stackblitz.com/edit/github-cbqhye?file=src%2Fapp%2Fcolors%2Fcolors.component.ts,src%2Fapp%2Fcolors%2Fcolors.mdx&preset=node

That doesn't fix the problem of what you are trying to do, though. You are referencing color variables, in a static way, that are not static. Those variables would only be available within a story that is initializing your component in an Angular app. It looks like you are just referencing css variables defined globaly, so you should be able to move the initialization of those variables to a function or class outside of the Angular component and use it independently from the Angular component or the MDX script.