11import * as path from 'node:path'
22
3- import type { StorybookConfig } from '@storybook/nextjs'
4-
5- /**
6- * The `getAbsolutePath()` function is used to resolve the absolute path of a
7- * given package name. It points to the `package.json` file of the package.
8- *
9- * This function is particularly useful when we're running the Storybook in
10- * monorepo mode, and we want to resolve the absolute path of a package while
11- * starting up the Storybook with [Yarn](https://yarnpkg.com/).
12- *
13- * As we're using Bun Workspaces and it is still in the experimental phase, we
14- * need to resolve the absolute path of the package to make sure that the
15- * Storybook can find the package and its `package.json` file. Let's avoid some
16- * headaches for now.
17- */
18- function getAbsolutePath ( value : string ) {
19- return path . dirname ( require . resolve ( path . join ( value , 'package.json' ) ) )
20- }
3+ import remarkGfm from 'remark-gfm'
214
225/**
236 * The constant `WORKSPACE_ROOT` is used to define the root of the workspace
@@ -29,26 +12,37 @@ const WORKSPACE_ROOT = '../../..' as const
2912 * The constant `STORYBOOK_FILENAME_ANNOTATION` is used to define the annotation
3013 * for the storybook files. It uses the glob pattern to find the files.
3114 */
32- const STORYBOOK_FILENAME_ANNOTATION = '@( stories|docs) ' as const
15+ const STORYBOOK_FILENAME_ANNOTATION = 'stories' as const
3316
3417/**
3518 * The constant `STORYBOOK_FILE_EXTENSIONS` is used to define the file
3619 * extensions for the storybook files. It uses the glob pattern to find the
3720 * files.
3821 */
39- const STORYBOOK_FILE_EXTENSIONS = '@(ts|tsx|mdx )' as const
22+ const STORYBOOK_FILE_EXTENSIONS = '@(ts|tsx)' as const
4023
4124/**
4225 * The `getStoriesGlob()` function is used to define the location of the stories
43- * and documentation files. It uses the glob pattern to find the files.
26+ * files. It uses the glob pattern to find the files.
4427 *
4528 * It uses the given `pathname` parameter from the `WORKSPACE_ROOT` to find the
46- * stories and documentation files.
29+ * stories files.
4730 */
48- function getStoriesGlob ( pathname : string ) {
31+ function getStoriesGlob ( pathname ) {
4932 return `${ WORKSPACE_ROOT } ${ pathname } ${ STORYBOOK_FILENAME_ANNOTATION } ${ STORYBOOK_FILE_EXTENSIONS }
5033}
5134
35+ /**
36+ * The `getDocumentationGlob()` function is used to define the location of the
37+ * documentation files. It uses the glob pattern to find the files.
38+ *
39+ * It uses the given `pathname` parameter from the `WORKSPACE_ROOT` to find the
40+ * documentation files.
41+ */
42+ function getDocumentationGlob ( pathname : string ) {
43+ return `${ WORKSPACE_ROOT } ${ pathname }
44+ }
45+
5246/**
5347 * The constant `stories` is used to define the location of the stories and
5448 * documentation files. It uses the glob pattern to find the files.
@@ -58,25 +52,43 @@ const stories = [
5852 getStoriesGlob ( 'apps/storybook/stories' ) ,
5953 getStoriesGlob ( 'apps/www/src/components' ) ,
6054 getStoriesGlob ( 'apps/www/src/domains/**' ) ,
55+ getDocumentationGlob ( 'packages/**/**' ) ,
56+ getDocumentationGlob ( 'apps/storybook/stories' ) ,
57+ getDocumentationGlob ( 'apps/www/src/components' ) ,
58+ getDocumentationGlob ( 'apps/www/src/domains/**' ) ,
6159]
6260
63- const config : StorybookConfig = {
61+ /**
62+ * @type {require('@storybook/nextjs').StorybookConfig }
63+ */
64+ const config = {
6465 stories,
6566 addons : [
66- getAbsolutePath ( '@storybook/addon-links' ) ,
67- getAbsolutePath ( '@storybook/addon-essentials' ) ,
68- getAbsolutePath ( '@storybook/addon-interactions' ) ,
67+ '@storybook/addon-links' ,
68+ '@storybook/addon-essentials' ,
69+ '@storybook/addon-interactions' ,
6970 {
70- name : getAbsolutePath ( '@storybook/addon-postcss' ) ,
71+ name : '@storybook/addon-postcss' ,
7172 options : {
7273 postcssLoaderOptions : {
7374 implementation : require ( 'postcss' ) ,
7475 } ,
7576 } ,
7677 } ,
78+ {
79+ name : '@storybook/addon-docs' ,
80+ options : {
81+ mdxPluginOptions : {
82+ mdxCompileOptions : {
83+ remarkPlugins : [ remarkGfm ] ,
84+ } ,
85+ } ,
86+ } ,
87+ } ,
88+ '@storybook/addon-mdx-gfm' ,
7789 ] ,
7890 framework : {
79- name : getAbsolutePath ( '@storybook/nextjs' ) as '@storybook/nextjs' ,
91+ name : '@storybook/nextjs' ,
8092 options : {
8193 // builder: {
8294 // fsCache: true,
@@ -138,7 +150,9 @@ const config: StorybookConfig = {
138150 } ,
139151
140152 docs : {
141- autodocs : false ,
153+ autodocs : 'tag' ,
154+ defaultName : 'Documentation' ,
142155 } ,
143156}
144- export default config
157+
158+ module . exports = config
0 commit comments