hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
439 stars 56 forks source link

Docs not working #200

Closed DavidLeonard77 closed 1 year ago

DavidLeonard77 commented 1 year ago

I am getting an error on a vanilla install for an Angular project.

storybook/angular v6.5.13

The initial error:

ERROR in ./stories/Introduction.stories.mdx 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import StackAlt from './assets/stackalt.svg';
| 
> <Meta title="Example/Introduction" />
| 
| <style>

If I remove the "../stories/**/*.stories.mdx" reference in main.js then the app loads successfully EXCEPT there is no documentation and the Docs tab is not present .. only Canvas tab is available.

Screenshot 2022-12-06 at 9 03 40 AM

Main.js:

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/angular",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "addons": ['storybook-dark-mode']
}

preview.js:

import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
import { themes } from "@storybook/theming";
setCompodocJson(docJson);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: { inlineStories: true },
  darkMode: {
    dark: {
      ...themes.dark,
      appBg: "#161616",
      appContentBg: "#191919"
    },
    light: {
      ...themes.light,
      appBg: "#ffffff",
      appContentBg: "#fafafa"
    },
    classTarget: "html",
    darkClass: "theia-theme-dark",
    lightClass: "theia-theme-light",
    stylePreview: true,
  }
};

package.json:

{
  "name": "theia-ui",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@babel/core": "^7.20.5",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/angular": "^6.5.13",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@types/jasmine": "~4.3.0",
    "babel-loader": "^8.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ng-packagr": "^15.0.0",
    "storybook-dark-mode": "^1.1.2",
    "typescript": "~4.8.2"
  }
}
hipstersmoothie commented 1 year ago

This doesn't seem like a storybook-dark-mode issue? I'd open up an issue on the storybook repo but looking at the error message it seems like something about mdx loading isn't set up right

DavidLeonard77 commented 1 year ago

mdx loads fine without the storybook-dark-mode addon implemented. So I have to disagree that it's a storybook issue. I'll open an issue there but they will probably point me back here. Either way .. storybook-dark-mode is not working with the current version of storybook... shouldn't that be a concern for this package??