Merge pull request #10 from nontangent/feat/rename-prop-names

Feat/rename prop names

libs/common/src/models/action-item.ts

@@ -1,8 +1,7 @@
-export interface ActionItem<ID = number | string> {
-  id: ID;
+import { Action } from "./action";
+
+export interface ActionItem<T = any> extends Action<T> {
   name: string;
   icon?: string;
   color?: string;
 }
-
-export type ActionItemEvent<T = any> = [ActionItem, T];

libs/common/src/models/action.ts

@@ -0,0 +1,4 @@
+export interface Action<T = any> {
+  id: string;
+  payload?: T;
+}

libs/common/src/models/public_api.ts

@@ -1,2 +1,3 @@
+export * from './action';
 export * from './action-item';
 export * from './menu-item';

libs/common/src/stores/entity/entity.store.ts

@@ -1,6 +1,4 @@
 import { ComponentStore } from '@ngrx/component-store';
-import { LoadingService } from '@ng-atomic/common/services/loading';
-import { SnackBarService } from '@ng-atomic/common/services/snack-bar';
 import { Observable } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
 
@@ -45,28 +43,16 @@ export abstract class EntityStore<S extends EntityState<Entity>, Entity> extends
 
   createEntity(value: Partial<Entity>) {
     const entity: Entity = ({...this.entity, ...value});
-
-    this.loading.setKey('[pages/stores/pages/store] Create Store');
-
-    return tryCatch(this._createEntity(entity))
-      .catch(error => (console.error(error), this.snackBar.openSnackBar('作成に失敗しました。')))
-      .finally(() => this.loading.removeKey('[pages/stores/pages/store] Create Store'));
+    return tryCatch(this._createEntity(entity));
   }
 
   updateEntity(value: Partial<Entity>) {
     const entity: Entity = ({...this.entity, ...value});
-
-    this.loading.setKey('[pages/stores/pages/store] Create Store');
     return this._updateEntity(entity)
-      .catch(error => (console.error(error), this.snackBar.openSnackBar('更新に失敗しました。')))
-      .finally(() => this.loading.removeKey('[pages/stores/pages/store] Create Store'));
   }
 
   abstract _getEntity(idOrParams: string): Observable<Entity>;
   abstract _createEntity(entity: Entity): Promise<Entity>;
   abstract _updateEntity(entity: Entity): Promise<void>;
 
-  abstract get loading(): LoadingService;
-  abstract get snackBar(): SnackBarService;
-
 }

libs/common/src/utils/mat-dayjs-date/dayjs-date.adapter.ts

@@ -61,7 +61,7 @@ export class DayjsDateAdapter extends DateAdapter<Dayjs> {
   }
 
   // TODO: Implement
-  setLocale(locale: string) {
+  override setLocale(locale: string) {
     super.setLocale(locale);
 
     const dayJsLocaleData = this.dayJs().localeData();
@@ -180,7 +180,7 @@ export class DayjsDateAdapter extends DateAdapter<Dayjs> {
    * @returns The deserialized date object, either a valid date, null if the value can be
    *     deserialized into a null date (e.g. the empty string), or an invalid date.
    */
-  deserialize(value: any): Dayjs | null {
+   override deserialize(value: any): Dayjs | null {
     let date;
     if (value instanceof Date) {
       date = this.dayJs(value);

libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.html

@@ -1,21 +1,21 @@
-<ng-container [ngSwitch]="actionItems.length">
+<ng-container [ngSwitch]="items?.length ?? 0">
   <ng-container *ngSwitchCase="0"></ng-container>
   <ng-container *ngSwitchCase="1">
-    <button mat-icon-button (click)="actionItemClick.emit([actionItems[0]])">
-      <mat-icon>{{ actionItems[0]?.icon }}</mat-icon>
+    <button mat-icon-button (click)="action.emit(items[0])">
+      <mat-icon>{{ items[0]?.icon }}</mat-icon>
     </button>
   </ng-container>
   <ng-container *ngSwitchDefault>
-    <button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="actionItems.length">
+    <button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="items.length">
       <mat-icon>menu</mat-icon>
     </button>
   </ng-container>
 </ng-container>
 
 <mat-menu #menu="matMenu">
   <button 
-    *ngFor="let actionItem of actionItems"
+    *ngFor="let item of items"
     mat-menu-item 
-    (click)="actionItemClick.emit([actionItem])"
-  >{{ actionItem.name }}</button>
+    (click)="action.emit(item)"
+  >{{ item.name }}</button>
 </mat-menu>

libs/components/src/atoms/smart-menu-button/smart-menu-button.atom.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'atoms-smart-menu-button',
@@ -9,8 +9,8 @@ import { ActionItem } from '@ng-atomic/common/models';
 })
 export class SmartMenuButtonAtom {
   @Input()
-  actionItems: ActionItem[] = [];
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<ActionItem>();
+  action = new EventEmitter<Action>();
 }

libs/components/src/atoms/smart-menu-button/smart-menu-button.stories.ts

@@ -10,10 +10,7 @@ export default {
 } as Meta;
 
 const Template: Story = (args) => ({
-  props: {
-    ...args,
-    ...buildActions(['actionItemClick']),
-  },
+  props: {...args, ...buildActions(['action']) },
   moduleMetadata: {
     imports: [
       BrowserModule,
@@ -25,7 +22,7 @@ const Template: Story = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  actionItems: [
+  items: [
     {
       id: 'test-action-01',
       name: 'テスト01',

libs/components/src/molecules/actions-column/actions-column.molecule.html

@@ -2,8 +2,8 @@
   <th mat-header-cell *matHeaderCellDef>操作</th>
   <td mat-cell *matCellDef="let item">
     <atoms-smart-menu-button
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit([$event[0], item])"
+      [items]="items"
+      (action)="action.emit({id: $event.id, payload: item})"
     ></atoms-smart-menu-button>
   </td>
 </ng-container>

libs/components/src/molecules/actions-column/actions-column.molecule.ts

@@ -1,6 +1,6 @@
 import { CdkCellDef, CdkColumnDef, CdkHeaderCellDef, CdkTable, TextColumnOptions, TEXT_COLUMN_OPTIONS } from '@angular/cdk/table';
 import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'molecules-actions-column',
@@ -21,11 +21,10 @@ export class ActionsColumnMolecule<T> {
   _name!: string;
 
   @Input()
-  actionItems: ActionItem[] = [];
-
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<[ActionItem, T]>();
+  action = new EventEmitter<Action>();
 
   @ViewChild(CdkColumnDef, {static: true})
   columnDef!: CdkColumnDef;

libs/components/src/molecules/actions-column/actions-column.stories.ts

@@ -11,13 +11,14 @@ export default {
 
 
 const Template: Story = (args) => ({
-  props: {...args, ...buildActions(['actionItemClick'])},
+  props: {...args, ...buildActions(['action'])},
   template: `
   <table mat-table [dataSource]="items" matSort matSortDisableClear matSortDirection="desc">
     <molecules-actions-column
       *ngFor="let name of displayedColumns" 
       [name]="name"
-      [actionItems]="actionItems"
+      [items]="items"
+      (action)="action($event)"
     ></molecules-actions-column>
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
     <tr mat-row *matRowDef="let item; columns: displayedColumns;"></tr>
@@ -32,15 +33,14 @@ const Template: Story = (args) => ({
 });
 
 enum ActionId {
-  TEST1,
-  TEST2,
+  TEST1 = 'test 1',
+  TEST2 = 'test 2',
 }
 
 export const Default = Template.bind({});
 Default.args = {
-  items: [{id: '01'}, {id: '02'}, {id: '03'}],
   displayedColumns: ['__actions'],
-  actionItems: [
+  items: [
     {id: ActionId.TEST1, name: 'TEST 1'},
     {id: ActionId.TEST2, name: 'TEST 2'},
   ]

libs/components/src/molecules/chips-input-field/chips-input-field.molecule.html

@@ -1,4 +1,4 @@
-<mat-form-field [appearance]="appearance">
+<mat-form-field [appearance]="appearance" [floatLabel]="floatLabel">
   <mat-label>{{ label }}</mat-label>
   <mat-chip-list #chipList>
     <mat-chip *ngFor="let chip of chipsManager.chips" (removed)="remove(chip)">

libs/components/src/molecules/chips-input-field/chips-input-field.molecule.ts

@@ -22,6 +22,9 @@ export class ChipsInputFieldMolecule {
   @Input()
   control = new FormControl<string>('');
 
+  @Input()
+  floatLabel = 'auto';
+
   @Input()
   label = 'label';
 

libs/components/src/molecules/header/header.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderMolecule } from './header.molecule';
+
+
+
+@NgModule({
+  declarations: [
+    HeaderMolecule
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    HeaderMolecule
+  ]
+})
+export class HeaderModule { }

libs/components/src/molecules/header/header.molecule.html

@@ -0,0 +1,2 @@
+<span class="title">{{ title ?? '' }}</span>
+<span class="description">{{ description ?? '' }}</span>

libs/components/src/molecules/header/header.molecule.scss

@@ -0,0 +1,20 @@
+@use 'scoped-var/strict' as * with ($host: 'header');
+@use 'atomic/molecule' as *;
+
+:host {
+	@include molecule($host);
+}
+
+:host {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: flex-end;
+
+	.description {
+		line-height: 1em;
+		font-size: 12px;
+		margin-bottom: 8px;
+		margin-left: 4px;
+	}
+}

libs/components/src/molecules/header/header.molecule.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderMolecule } from './header.molecule';
+
+describe('HeaderMolecule', () => {
+  let component: HeaderMolecule;
+  let fixture: ComponentFixture<HeaderMolecule>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderMolecule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderMolecule);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/components/src/molecules/header/header.molecule.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'molecules-header',
+  templateUrl: './header.molecule.html',
+  styleUrls: ['./header.molecule.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HeaderMolecule {
+
+  @Input()
+  title = 'title';
+
+  @Input()
+  description?: string;
+
+}

libs/components/src/molecules/header/header.stories.ts

@@ -0,0 +1,26 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, Story } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { HeaderMolecule, HeaderModule } from '.';
+
+export default {
+  title: 'Molecules/Header',
+  component: HeaderMolecule,
+} as Meta;
+
+const ACTIONS = {
+  // eventEmitterName: action('eventEmitterName'),
+};
+
+
+const Template: Story = (args) => ({
+  props: {...args, ...ACTIONS},
+  moduleMetadata: {
+    imports: [
+      HeaderModule,
+    ]
+  }
+});
+
+export const Default = Template.bind({});
+Default.args = {};

libs/components/src/molecules/header/index.ts

@@ -0,0 +1,2 @@
+export { HeaderMolecule } from './header.molecule';
+export { HeaderModule } from './header.module';

libs/components/src/molecules/header/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/components",
+  "lib": {
+    "entryFile": "index.ts",
+    "styleIncludePaths": [
+      "../../../../node_modules",
+      "../../styles"
+    ]
+  }
+}

libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.html

@@ -1,3 +1,3 @@
-<ng-container *ngFor="let item of actionItems; trackBy: trackById">
-  <button mat-raised-button color="primary" (click)="actionItemClick.emit([item])">{{ item?.name }}</button>
+<ng-container *ngFor="let item of items; trackBy: trackById">
+  <button mat-raised-button color="primary" (click)="action.emit(item)">{{ item?.name }}</button>
 </ng-container>

libs/components/src/organisms/action-buttons-section/action-buttons-section.organism.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { ActionItem } from '@ng-atomic/common/models';
+import { Action, ActionItem } from '@ng-atomic/common/models';
 
 @Component({
   selector: 'organisms-action-buttons-section',
@@ -10,10 +10,10 @@ import { ActionItem } from '@ng-atomic/common/models';
 })
 export class ActionButtonsSectionOrganism {
   @Input()
-  actionItems: ActionItem[] = [];
+  items: ActionItem[] = [];
 
   @Output()
-  actionItemClick = new EventEmitter<[ActionItem]>();
+  action = new EventEmitter<Action>();
 
   trackById = (item: ActionItem) => item.id;
 }

libs/components/src/organisms/back-navigator/back-navigator.organism.html

@@ -10,8 +10,8 @@
   </div>
   <div>
     <atoms-smart-menu-button
-      [actionItems]="actionItems"
-      (actionItemClick)="actionItemClick.emit($event)"
+      [items]="items"
+      (action)="action.emit($event)"
     ></atoms-smart-menu-button>
   </div>
 </mat-toolbar>