Skip to content

Commit

Permalink
chore: Remove Storybook MDX documentation
Browse files Browse the repository at this point in the history
The mdx documentation is not actively maintained and outdated.
The main purpose was to get an overview over active stories, but this
is covered by the PR integration of reg-actions.
  • Loading branch information
MoritzWeber0 committed Nov 12, 2024
1 parent 4fe9a8d commit 35da419
Show file tree
Hide file tree
Showing 13 changed files with 25 additions and 477 deletions.
82 changes: 25 additions & 57 deletions docs/docs/development/frontend/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,50 +53,18 @@ import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { Component } from './component-name.component';

const meta: Meta<YourComponent> = {
title: 'Your Component',
component: YourComponent,
title: 'Your Component',
component: YourComponent,
};

export default meta;
type Story = StoryObj<YourComponent>;

export const ExampleStory: Story = {
args: {
...
},
args: {},
};
```

## Add documentation for the Story

In the same directory of the component, add a file `{component_name}.docs.mdx`
and use the following code as a template:

```mdx
import * as Component from './component-name.stories.ts';
import { Meta, Title, Story, Canvas, Unstyled } from '@storybook/blocks';

<Meta of={Component} />

<Title />

This is an example story for the component:

<Story of={Component.ExampleStory} />
```

If you want to use `HTML` in your template, you can use the `Unstyled` block.
In the example, we wrap the story in a `div` to show how it behaves on smaller
devices:

```mdx
<Unstyled>
<div style={{ width: '500px' }}>
<Story of={Component.ExampleStory} />
</div>
</Unstyled>
```

## Mock Angular services

You can mock services with the `moduleMetadata` decorator in Storybook. Here is
Expand All @@ -105,31 +73,31 @@ access levels:

```js
class MockProjectUserService implements Partial<ProjectUserService> {
role: ProjectUserRole
role: ProjectUserRole;

constructor(role: ProjectUserRole) {
this.role = role
}
constructor(role: ProjectUserRole) {
this.role = role;
}

verifyRole(requiredRole: ProjectUserRole): boolean {
const roles = ['user', 'manager', 'administrator']
return roles.indexOf(requiredRole) <= roles.indexOf(this.role)
}
verifyRole(requiredRole: ProjectUserRole): boolean {
const roles = ['user', 'manager', 'administrator'];
return roles.indexOf(requiredRole) <= roles.indexOf(this.role);
}
}

const mockProjectUserServiceProvider = (role: ProjectUserRole) => {
return {
provide: ProjectUserService,
useValue: new MockProjectUserService(role),
};
};

export const ExampleStory: Story = {
args: {
...
},
decorators: [
moduleMetadata({
providers: [
{
provide: ProjectUserService,
useFactory: () => new MockProjectUserService('user'),
},
],
}),
],
}
args: {},
decorators: [
moduleMetadata({
providers: [mockProjectUserServiceProvider('user')],
}),
],
};
```
23 changes: 0 additions & 23 deletions frontend/src/app/general/footer/footer.docs.mdx

This file was deleted.

23 changes: 0 additions & 23 deletions frontend/src/app/general/header/header.docs.mdx

This file was deleted.

23 changes: 0 additions & 23 deletions frontend/src/app/general/metadata/version/version.docs.mdx

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 35da419

Please sign in to comment.