storybook test

.storybook/main.js

@@ -3,6 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/addon-notes'
+    '@storybook/addon-notes',
+    '@storybook/addon-knobs'
   ]
 };

package.json

@@ -103,6 +103,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@storybook/addon-knobs": "^5.3.18",
     "tslib": "^1.10.0"
   },
   "devDependencies": {

projects/ui/src/lib/components/float-action-button.component.stories.ts

@@ -0,0 +1,74 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { withKnobs, text, object } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { UiModule } from '../ui.module';
+
+import { FloatActionButtonComponent } from './float-action-button.component';
+import { ucapAnimations } from '../animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { I18nModule } from '@ucap/ng-i18n';
+
+storiesOf('ui/FloatActionButtonComponent', module)
+  .addDecorator(withKnobs)
+  .addDecorator(
+    moduleMetadata({
+      imports: [BrowserModule, BrowserAnimationsModule, UiModule],
+      providers: []
+    })
+  )
+  .add(
+    'Default',
+    () => {
+      const props: { [K in keyof FloatActionButtonComponent]?: any } = {
+        buttons: object('Buttons', [
+          {
+            icon: 'chat',
+            tooltip: 'tooltip_chat',
+            divisionType: 'div_chat'
+          },
+          {
+            icon: 'group',
+            tooltip: 'tooltip_group',
+            divisionType: 'div_group'
+          }
+        ]),
+        buttonClick: (e) => {
+          console.log(e);
+          action('buttonClick')(e);
+        }
+      };
+      return {
+        component: FloatActionButtonComponent,
+        props
+      };
+    },
+    {
+      note: 'Default component.'
+    }
+  );
+
+// export default {
+//   title: 'FloatActionButtonComponent',
+//   component: FloatActionButtonComponent
+// };
+
+// export const Text = () => ({
+//   component: FloatActionButtonComponent,
+//   props: {
+//     text: 'Hello FloatActionButtonComponent'
+//   }
+// });