MOBILE-3321 core: Configure storybook

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+    framework: '@storybook/angular',
+    stories: ['../src/**/*.stories.ts'],
+}

.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../src/**/*"
+  ],
+  "exclude": [
+    "../src/**/tests/**",
+    "../src/testing/**",
+    "../src/**/*.test.ts"
+  ]
+}

package.json

@@ -28,6 +28,7 @@
     "dev:ios": "ionic cordova run ios",
     "prod:android": "NODE_ENV=production ionic cordova run android --prod",
     "prod:ios": "NODE_ENV=production ionic cordova run ios --prod",
+    "storybook": "start-storybook -p 6006",
     "test": "NODE_ENV=testing gulp && jest --verbose",
     "test:ci": "NODE_ENV=testing gulp && jest -ci --runInBand --verbose",
     "test:watch": "NODE_ENV=testing gulp watch & jest --watch",
@@ -138,6 +139,7 @@
     "@angular/language-service": "~10.0.14",
     "@ionic/angular-toolkit": "^2.3.3",
     "@ionic/cli": "^6.19.0",
+    "@storybook/angular": "~6.1",
     "@types/faker": "^5.1.3",
     "@types/node": "^12.12.64",
     "@types/resize-observer-browser": "^0.1.5",

src/core/components/stories/user-avatar.stories.ts

@@ -0,0 +1,37 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+import { story } from '@/storybook/utils/helpers';
+import { StorybookModule } from '@/storybook/storybook.module';
+
+import { CoreUserAvatarComponent } from '@components/user-avatar/user-avatar';
+
+export default <Meta> {
+    title: 'Core/User Avatar',
+    component: CoreUserAvatarComponent,
+    decorators: [
+        moduleMetadata({
+            declarations: [CoreUserAvatarComponent],
+            imports: [StorybookModule],
+        }),
+    ],
+};
+
+const Template: Story = () => ({
+    component: CoreUserAvatarComponent,
+});
+
+export const Primary = story(Template);

src/storybook/storybook.module.ts

@@ -0,0 +1,62 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { IonicModule } from '@ionic/angular';
+import { NgModule, ApplicationInitStatus, APP_INITIALIZER } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import englishTranslations from '@/assets/lang/en.json';
+import { CoreApplicationInitStatus } from '@classes/application-init-status';
+import { Translate } from '@singletons';
+
+// For translate loader. AoT requires an exported function for factories.
+export class StaticTranslateLoader extends TranslateLoader {
+
+    getTranslation(): Observable<typeof englishTranslations> {
+        return of(englishTranslations);
+    }
+
+}
+
+/**
+ * Module declaring dependencies for Storybook components.
+ */
+@NgModule({
+    imports: [
+        IonicModule.forRoot(),
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useClass: StaticTranslateLoader,
+            },
+        }),
+    ],
+    providers: [
+        { provide: ApplicationInitStatus, useClass: CoreApplicationInitStatus },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                Translate.setDefaultLang('en');
+                Translate.use('en');
+            },
+        },
+    ],
+    exports: [
+        IonicModule,
+        TranslateModule,
+    ],
+})
+export class StorybookModule {}

src/storybook/utils/helpers.ts

@@ -0,0 +1,30 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Story } from '@storybook/angular';
+
+/**
+ * Define story.
+ *
+ * @param template Story template.
+ * @param defaultArgs Default arguments.
+ * @returns Story.
+ */
+export function story<T>(template: Story<T>, defaultArgs: Partial<T> = {}): Story<T> {
+    const story = template.bind({});
+
+    story.args = defaultArgs;
+
+    return story;
+}

tsconfig.app.json

@@ -10,20 +10,7 @@
       "node",
       "resize-observer-browser",
       "webpack-env"
-    ],
-    "paths": {
-      "@addons/*": ["addons/*"],
-      "@classes/*": ["core/classes/*"],
-      "@components/*": ["core/components/*"],
-      "@directives/*": ["core/directives/*"],
-      "@features/*": ["core/features/*"],
-      "@guards/*": ["core/guards/*"],
-      "@pipes/*": ["core/pipes/*"],
-      "@services/*": ["core/services/*"],
-      "@singletons": ["core/singletons/index"],
-      "@singletons/*": ["core/singletons/*"],
-      "@/*": ["*"]
-    }
+    ]
   },
   "files": [
     "src/main.ts",
@@ -34,8 +21,11 @@
     "src/**/*.d.ts"
   ],
   "exclude": [
-    "src/**/*.test.ts",
+    "src/**/tests/**",
+    "src/**/stories/**",
     "src/testing/**",
-    "src/**/tests/**"
+    "src/storybook/**",
+    "src/**/*.test.ts",
+    "src/**/*.stories.*"
   ]
 }

tsconfig.test.json

@@ -14,20 +14,7 @@
       "jest",
       "node",
       "resize-observer-browser"
-    ],
-    "paths": {
-      "@addons/*": ["addons/*"],
-      "@classes/*": ["core/classes/*"],
-      "@components/*": ["core/components/*"],
-      "@directives/*": ["core/directives/*"],
-      "@features/*": ["core/features/*"],
-      "@guards/*": ["core/guards/*"],
-      "@pipes/*": ["core/pipes/*"],
-      "@services/*": ["core/services/*"],
-      "@singletons": ["core/singletons/index"],
-      "@singletons/*": ["core/singletons/*"],
-      "@/*": ["*"]
-    }
+    ]
   },
   "files": [
     "src/testing/setup.ts",