Skip to content

Commit eac8255

Browse files
tim-fabiantim-fabian
authored
Merge pull request #116 from Service-Soft/fix-angular-library
fixed angular library
2 parents cd788f6 + 797aa3d commit eac8255

12 files changed

Lines changed: 269 additions & 32 deletions

‎cspell.words.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,5 @@ cldrjs
4141
htpasswd
4242
basicauth
4343
usersfile
44-
zibri
44+
zibri
45+
autodocs

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "monux-cli",
3-
"version": "2.5.0",
3+
"version": "2.5.1",
44
"license": "MIT",
55
"main": "index.js",
66
"engines": {

‎src/commands/add/add-angular-library/add-angular-library.command.ts‎

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { buttonComponentHtmlContent } from './button-component-html.content';
2+
import { buttonComponentTsContent } from './button-component-ts.content';
3+
import { buttonStoriesTsContent } from './button-stories-ts.content';
4+
import { storybookMainTsContent } from './storybook-main-ts.content';
15
import { AngularUtilities } from '../../../angular';
26
import { ANGULAR_JSON_FILE_NAME, BASE_TS_CONFIG_FILE_NAME, ESLINT_CONFIG_FILE_NAME, GIT_IGNORE_FILE_NAME, LIBS_DIRECTORY_NAME, PACKAGE_JSON_FILE_NAME } from '../../../constants';
37
import { FsUtilities, JsonUtilities, QuestionsFor } from '../../../encapsulation';
@@ -56,7 +60,6 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
5660
FsUtilities.rm(getPath(result.root, '.editorconfig')),
5761
FsUtilities.rm(getPath(result.root, GIT_IGNORE_FILE_NAME)),
5862
FsUtilities.rm(getPath(result.root, 'src', 'lib')),
59-
this.updatePublicApi(result.root),
6063
this.updateNgPackageJson(result.root),
6164
this.updateAngularJson(result.root, config.name),
6265
this.setupTsConfig(result.root, config),
@@ -74,15 +77,11 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
7477
' rules: {',
7578
' \'jsdoc/require-jsdoc\': \'off\'',
7679
' }',
77-
' }'
80+
' },'
7881
].join('\n')
7982
);
8083
}
8184

82-
private async updatePublicApi(root: string): Promise<void> {
83-
await FsUtilities.updateFile(getPath(root, 'src', 'public-api.ts'), '', 'replace');
84-
}
85-
8685
private async setupTailwind(root: string): Promise<void> {
8786
await TailwindUtilities.setupProjectTailwind(root);
8887
await FsUtilities.createFile(getPath(root, 'src', 'styles.css'), [
@@ -96,7 +95,8 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
9695
await NpmUtilities.updatePackageJson(name, {
9796
peerDependencies: result.oldPackageJson.peerDependencies,
9897
dependencies: undefined,
99-
devDependencies: undefined
98+
devDependencies: undefined,
99+
prettier: undefined
100100
});
101101
}
102102

@@ -176,10 +176,56 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
176176
}
177177
}
178178
);
179-
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', '.eslintrc.json'));
179+
180+
await FsUtilities.updateFile(
181+
getPath(newProject.path, '.storybook', 'main.ts'),
182+
storybookMainTsContent,
183+
'replace'
184+
);
185+
186+
await this.cleanup(newProject);
187+
188+
await this.createDefaultFiles(newProject);
189+
180190
return { root: newProject.path, oldPackageJson };
181191
}
182192

193+
private async createDefaultFiles(newProject: WorkspaceProject): Promise<void> {
194+
await FsUtilities.updateFile(getPath(newProject.path, 'src', 'public-api.ts'), 'export * from \'./stories\';', 'replace');
195+
await FsUtilities.createFile(
196+
getPath(newProject.path, 'src', 'stories', 'index.ts'),
197+
'export * from \'./button/button.component\';'
198+
);
199+
await FsUtilities.createFile(
200+
getPath(newProject.path, 'src', 'stories', 'button', 'button.component.ts'),
201+
buttonComponentTsContent
202+
);
203+
await FsUtilities.createFile(
204+
getPath(newProject.path, 'src', 'stories', 'button', 'button.component.html'),
205+
buttonComponentHtmlContent
206+
);
207+
await FsUtilities.createFile(
208+
getPath(newProject.path, 'src', 'stories', 'button', 'button.stories.ts'),
209+
buttonStoriesTsContent
210+
);
211+
}
212+
213+
private async cleanup(newProject: WorkspaceProject): Promise<void> {
214+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', '.eslintrc.json'));
215+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'button.component.ts'));
216+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'button.css'));
217+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'button.stories.ts'));
218+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'header.component.ts'));
219+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'header.css'));
220+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'header.stories.ts'));
221+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'page.component.ts'));
222+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'page.css'));
223+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'page.stories.ts'));
224+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'user.ts'));
225+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'Configure.mdx'));
226+
await FsUtilities.rm(getPath(newProject.path, 'src', 'stories', 'assets'));
227+
}
228+
183229
private async setupTsConfig(root: Path, config: AddAngularLibraryConfiguration): Promise<void> {
184230
// eslint-disable-next-line no-console
185231
console.log('sets up tsconfig');
@@ -238,7 +284,8 @@ export class AddAngularLibraryCommand extends BaseAddCommand<AddAngularLibraryCo
238284
include: [
239285
'src/**/*.spec.ts',
240286
'src/**/*.d.ts',
241-
'src/**/*.stories.ts'
287+
'src/**/*.stories.ts',
288+
'.storybook/*.ts'
242289
]
243290
};
244291
await FsUtilities.createFile(getPath(root, 'tsconfig.eslint.json'), JsonUtilities.stringify(eslintTsconfig));

‎src/commands/add/add-angular-library/button-component-html.content.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// eslint-disable-next-line jsdoc/require-jsdoc
2+
export const buttonComponentHtmlContent: string
3+
= `<button
4+
class="transition duration-200 ease-in-out rounded-md p-2 px-4 font-semibold"
5+
[ngClass]="{
6+
'bg-primary hover:bg-primary-darker text-primary-contrast': color === 'primary',
7+
'bg-secondary hover:bg-secondary-darker text-secondary-contrast': color === 'secondary',
8+
'bg-success hover:bg-success-darker text-success-contrast': color === 'success',
9+
'bg-warning hover:bg-warning-darker text-warning-contrast': color === 'warning',
10+
'bg-error hover:bg-error-darker text-error-contrast': color === 'error',
11+
'shadow-elevation-8': raised
12+
}"
13+
[type]="buttonType"
14+
>
15+
<ng-content></ng-content>
16+
</button>`;

‎src/commands/add/add-angular-library/button-component-ts.content.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// eslint-disable-next-line jsdoc/require-jsdoc
2+
export const buttonComponentTsContent: string
3+
= `import { CommonModule } from '@angular/common';
4+
import { Component, Input } from '@angular/core';
5+
6+
/**
7+
* A button.
8+
*/
9+
@Component({
10+
selector: 'ui-button',
11+
standalone: true,
12+
imports: [CommonModule],
13+
templateUrl: './button.component.html'
14+
})
15+
export class ButtonComponent {
16+
/**
17+
* The type of the button.
18+
*/
19+
@Input()
20+
buttonType: 'button' | 'menu' | 'reset' | 'submit' = 'button';
21+
22+
/**
23+
* The color theme of the button.
24+
*/
25+
@Input()
26+
color: 'primary' | 'secondary' | 'success' | 'warning' | 'error' = 'primary';
27+
28+
/**
29+
* Whether or not the button should look raised.
30+
*/
31+
@Input()
32+
raised: boolean = true;
33+
}`;

‎src/commands/add/add-angular-library/button-stories-ts.content.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// eslint-disable-next-line jsdoc/require-jsdoc
2+
export const buttonStoriesTsContent: string
3+
= `import { componentWrapperDecorator, StoryFn, type Meta } from '@storybook/angular';
4+
5+
import { ButtonComponent } from './button.component';
6+
7+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8+
const meta: Meta<ButtonComponent> = {
9+
title: 'Components/Button',
10+
component: ButtonComponent,
11+
decorators: [componentWrapperDecorator(ButtonComponent, ({ args }) => ({ ...args }))],
12+
tags: ['autodocs'],
13+
argTypes: {
14+
color: {
15+
control: 'select',
16+
options: ['primary', 'secondary', 'success', 'warning', 'error'],
17+
description: 'The color theme of the button.',
18+
table: {
19+
defaultValue: {
20+
summary: 'primary'
21+
}
22+
}
23+
},
24+
buttonType: {
25+
control: 'select',
26+
options: ['button', 'menu', 'reset', 'submit'],
27+
description: 'The html button type, what it should be used for.',
28+
table: {
29+
defaultValue: {
30+
summary: 'button'
31+
}
32+
}
33+
},
34+
raised: {
35+
control: 'boolean'
36+
}
37+
},
38+
args: {}
39+
};
40+
41+
export default meta;
42+
43+
type Story = StoryFn<ButtonComponent>;
44+
45+
export const Default: Story = (args) => ({ ...args, template: 'Primary' });`;

‎src/commands/add/add-angular-library/storybook-main-ts.content.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// eslint-disable-next-line jsdoc/require-jsdoc
2+
export const storybookMainTsContent: string
3+
= `import { join, dirname } from 'path';
4+
5+
import type { StorybookConfig } from '@storybook/angular';
6+
7+
/**
8+
* This function is used to resolve the absolute path of a package.
9+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
10+
* @param value - The original value to get the absolute path for.
11+
* @returns The absolute path.
12+
*/
13+
function getAbsolutePath(value: string): string {
14+
// eslint-disable-next-line typescript/no-unsafe-return, typescript/no-unsafe-call, typescript/no-unsafe-member-access
15+
return dirname(require.resolve(join(value, 'package.json')));
16+
}
17+
18+
const config: StorybookConfig = {
19+
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
20+
addons: [getAbsolutePath('@storybook/addon-docs')],
21+
framework: {
22+
name: getAbsolutePath('@storybook/angular'),
23+
options: {}
24+
}
25+
};
26+
27+
export default config;`;

‎src/commands/init/init.command.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { initConfigQuestions, InitConfiguration } from './init-configuration.model';
22
import { APPS_DIRECTORY_NAME, ENV_FILE_NAME, ENVIRONMENT_TS_FILE_NAME, ESLINT_CONFIG_FILE_NAME, GIT_IGNORE_FILE_NAME, LIBS_DIRECTORY_NAME, ROBOTS_FILE_NAME, TAILWIND_CONFIG_FILE_NAME } from '../../constants';
33
import { DockerUtilities } from '../../docker';
4-
import { COLOR_PRIMARY, CPUtilities, FsUtilities, InquirerUtilities } from '../../encapsulation';
4+
import { CPUtilities, FsUtilities, InquirerUtilities } from '../../encapsulation';
55
import { EnvUtilities } from '../../env';
66
import { GithubUtilities } from '../../github';
77
import { NpmPackage, NpmUtilities } from '../../npm';
88
import { TsConfigUtilities } from '../../tsconfig';
99
import { exitWithError, getPath } from '../../utilities';
1010
import { WorkspaceConfig, WorkspaceUtilities } from '../../workspace';
1111
import { BaseCommand } from '../base-command.model';
12+
import { tailwindConfigJsContent } from './tailwind-config-js.content';
1213

1314
/**
1415
* Initializes a new Monux monorepo.
@@ -113,22 +114,7 @@ export class InitCommand extends BaseCommand<InitConfiguration> {
113114
private async createTailwindConfig(): Promise<void> {
114115
await FsUtilities.createFile(
115116
getPath(TAILWIND_CONFIG_FILE_NAME),
116-
[
117-
`const PRIMARY = '${COLOR_PRIMARY}'`,
118-
'',
119-
'// eslint-disable-next-line jsdoc/require-description',
120-
'/** @type {import(\'tailwindcss\').Config} */',
121-
'module.exports = {',
122-
' theme: {',
123-
' colors: {',
124-
' primary: {',
125-
' DEFAULT: PRIMARY,',
126-
' darker: `color-mix(in srgb, ${PRIMARY} 90%, black)`',
127-
' }',
128-
' }',
129-
' }',
130-
'};'
131-
]
117+
tailwindConfigJsContent
132118
);
133119
}
134120
}

‎src/commands/init/tailwind-config-js.content.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// eslint-disable-next-line jsdoc/require-jsdoc
2+
export const tailwindConfigJsContent: string
3+
= `const PRIMARY = '#37517e';
4+
const PRIMARY_CONTRAST = 'white';
5+
6+
const SECONDARY = '#00B4D8';
7+
const SECONDARY_CONTRAST = 'white';
8+
9+
const SUCCESS = 'green';
10+
const SUCCESS_CONTRAST = 'white';
11+
12+
const WARNING = 'orange';
13+
const WARNING_CONTRAST = 'black';
14+
const ERROR = 'red';
15+
const ERROR_CONTRAST = 'white';
16+
17+
// eslint-disable-next-line jsdoc/require-description
18+
/** @type {import('tailwindcss').Config} */
19+
module.exports = {
20+
theme: {
21+
colors: {
22+
inherit: 'inherit',
23+
transparent: 'transparent',
24+
primary: {
25+
DEFAULT: PRIMARY,
26+
darker: \`color-mix(in srgb, \${PRIMARY} 80%, black)\`,
27+
contrast: PRIMARY_CONTRAST
28+
},
29+
secondary: {
30+
DEFAULT: SECONDARY,
31+
darker: \`color-mix(in srgb, \${SECONDARY} 80%, black)\`,
32+
contrast: SECONDARY_CONTRAST
33+
},
34+
success: {
35+
DEFAULT: SUCCESS,
36+
darker: \`color-mix(in srgb, \${SUCCESS} 80%, black)\`,
37+
contrast: SUCCESS_CONTRAST
38+
},
39+
warning: {
40+
DEFAULT: WARNING,
41+
darker: \`color-mix(in srgb, \${WARNING} 80%, black)\`,
42+
contrast: WARNING_CONTRAST
43+
},
44+
error: {
45+
DEFAULT: ERROR,
46+
darker: \`color-mix(in srgb, \${ERROR} 80%, black)\`,
47+
contrast: ERROR_CONTRAST
48+
}
49+
},
50+
boxShadow: {
51+
'elevation-none': 'none',
52+
'elevation-1': '0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)',
53+
'elevation-2': '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
54+
'elevation-3': '0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12)',
55+
'elevation-4': '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)',
56+
'elevation-5': '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)',
57+
'elevation-6': '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)',
58+
'elevation-7': '0px 4px 5px -2px rgba(0,0,0,0.2), 0px 7px 10px 1px rgba(0,0,0,0.14), 0px 2px 16px 1px rgba(0,0,0,0.12)',
59+
'elevation-8': '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
60+
'elevation-9': '0px 5px 6px -3px rgba(0,0,0,0.2), 0px 9px 12px 1px rgba(0,0,0,0.14), 0px 3px 16px 2px rgba(0,0,0,0.12)',
61+
'elevation-10': '0px 6px 6px -3px rgba(0,0,0,0.2), 0px 10px 14px 1px rgba(0,0,0,0.14), 0px 4px 18px 3px rgba(0,0,0,0.12)',
62+
'elevation-11': '0px 6px 7px -4px rgba(0,0,0,0.2), 0px 11px 15px 1px rgba(0,0,0,0.14), 0px 4px 20px 3px rgba(0,0,0,0.12)',
63+
'elevation-12': '0px 7px 8px -4px rgba(0,0,0,0.2), 0px 12px 17px 2px rgba(0,0,0,0.14), 0px 5px 22px 4px rgba(0,0,0,0.12)',
64+
'elevation-13': '0px 7px 8px -4px rgba(0,0,0,0.2), 0px 13px 19px 2px rgba(0,0,0,0.14), 0px 5px 24px 4px rgba(0,0,0,0.12)',
65+
'elevation-14': '0px 7px 9px -4px rgba(0,0,0,0.2), 0px 14px 21px 2px rgba(0,0,0,0.14), 0px 5px 26px 4px rgba(0,0,0,0.12)',
66+
'elevation-15': '0px 8px 9px -5px rgba(0,0,0,0.2), 0px 15px 22px 2px rgba(0,0,0,0.14), 0px 6px 28px 5px rgba(0,0,0,0.12)',
67+
'elevation-16': '0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)',
68+
'elevation-17': '0px 8px 11px -5px rgba(0,0,0,0.2), 0px 17px 26px 2px rgba(0,0,0,0.14), 0px 6px 32px 5px rgba(0,0,0,0.12)',
69+
'elevation-18': '0px 9px 11px -5px rgba(0,0,0,0.2), 0px 18px 28px 2px rgba(0,0,0,0.14), 0px 7px 34px 6px rgba(0,0,0,0.12)',
70+
'elevation-19': '0px 9px 12px -6px rgba(0,0,0,0.2), 0px 19px 29px 2px rgba(0,0,0,0.14), 0px 7px 36px 6px rgba(0,0,0,0.12)',
71+
'elevation-20': '0px 10px 13px -6px rgba(0,0,0,0.2), 0px 20px 31px 3px rgba(0,0,0,0.14), 0px 8px 38px 7px rgba(0,0,0,0.12)',
72+
'elevation-21': '0px 10px 13px -6px rgba(0,0,0,0.2), 0px 21px 33px 3px rgba(0,0,0,0.14), 0px 8px 40px 7px rgba(0,0,0,0.12)',
73+
'elevation-22': '0px 10px 14px -6px rgba(0,0,0,0.2), 0px 22px 35px 3px rgba(0,0,0,0.14), 0px 8px 42px 7px rgba(0,0,0,0.12)',
74+
'elevation-23': '0px 11px 14px -7px rgba(0,0,0,0.2), 0px 23px 36px 3px rgba(0,0,0,0.14), 0px 9px 44px 8px rgba(0,0,0,0.12)',
75+
'elevation-24': '0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)'
76+
}
77+
}
78+
};`;

0 commit comments

Comments
 (0)