feat(design, storefront)!: move DaffQuantityFieldComponent into the storefront package

apps/daffio/src/app/docs/design/examples/content.provider.ts

@@ -22,7 +22,6 @@ import { provideDaffDesignNavbarExamplesContent } from '@daffodil/design-example
 import { provideDaffDesignNotificationExamplesContent } from '@daffodil/design-examples/notification';
 import { provideDaffDesignPaginatorExamplesContent } from '@daffodil/design-examples/paginator';
 import { provideDaffDesignProgressBarExamplesContent } from '@daffodil/design-examples/progress-bar';
-import { provideDaffDesignQuantityFieldExamplesContent } from '@daffodil/design-examples/quantity-field';
 import { provideDaffDesignRadioExamplesContent } from '@daffodil/design-examples/radio';
 import { provideDaffDesignSelectExamplesContent } from '@daffodil/design-examples/select';
 import { provideDaffDesignSidebarExamplesContent } from '@daffodil/design-examples/sidebar';
@@ -62,7 +61,6 @@ export const provideDaffioDesignExamplesContent = () => makeEnvironmentProviders
   provideDaffDesignNotificationExamplesContent(),
   provideDaffDesignPaginatorExamplesContent(),
   provideDaffDesignProgressBarExamplesContent(),
-  provideDaffDesignQuantityFieldExamplesContent(),
   provideDaffDesignRadioExamplesContent(),
   provideDaffDesignSelectExamplesContent(),
   provideDaffDesignSidebarExamplesContent(),

apps/demo/package.json

@@ -48,6 +48,7 @@
     "@daffodil/product-configurable": "0.0.0-PLACEHOLDER",
     "@daffodil/router": "0.0.0-PLACEHOLDER",
     "@daffodil/related-products": "0.0.0-PLACEHOLDER",
+    "@daffodil/storefront": "0.0.0-PLACEHOLDER",
     "@daffodil/upsell-products": "0.0.0-PLACEHOLDER"
   }
 }

apps/demo/src/app/cart/components/cart-item/cart-item.component.html

@@ -14,11 +14,11 @@
       <span class="demo-cart-item__mobile-qty">{{item.qty}}</span>
       <span class="demo-cart-item__desktop-qty">
         <daff-form-field>
-          <daff-quantity-field
+          <daff-sf-quantity-field
             [formControl]="quantity"
             name="quantity"
             [id]="quantityId">
-          </daff-quantity-field>
+          </daff-sf-quantity-field>
         </daff-form-field>
       </span>
     </div>

apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts

@@ -17,15 +17,11 @@ import {
 } from '@daffodil/cart/state/testing';
 import { DaffCartItemFactory } from '@daffodil/cart/testing';
 import { DaffFormFieldModule } from '@daffodil/design/form-field';
-import {
-  DaffQuantityFieldComponent,
-  DaffQuantityFieldModule,
-} from '@daffodil/design/quantity-field';
 import { DaffProductImageFactory } from '@daffodil/product/testing';
+import { DaffSfQuantityFieldComponent } from '@daffodil/storefront/quantity-field';
 
 import { CartItemComponent } from './cart-item.component';
 
-
 @Component({
   template: '<demo-cart-item [item]="cartItemValue"></demo-cart-item>',
   standalone: false,
@@ -38,7 +34,7 @@ describe('CartItemComponent', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
   let cartItemComponent;
-  let quantityFieldComponent: DaffQuantityFieldComponent;
+  let quantityFieldComponent: DaffSfQuantityFieldComponent;
   let router: Router;
   let cartItemFactory: DaffCartItemFactory;
   let productImageFactory: DaffProductImageFactory;
@@ -49,10 +45,10 @@ describe('CartItemComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        DaffQuantityFieldModule,
         DaffCartStateTestingModule,
         ReactiveFormsModule,
         DaffFormFieldModule,
+        DaffSfQuantityFieldComponent,
       ],
       declarations: [
         CartItemComponent,
@@ -75,7 +71,7 @@ describe('CartItemComponent', () => {
 
     wrapper.cartItemValue = mockCartItem;
     cartItemComponent = fixture.debugElement.query(By.css('demo-cart-item'));
-    quantityFieldComponent = fixture.debugElement.query(By.css('daff-quantity-field')).componentInstance;
+    quantityFieldComponent = fixture.debugElement.query(By.css('daff-sf-quantity-field')).componentInstance;
 
     fixture.detectChanges();
   });
@@ -88,7 +84,7 @@ describe('CartItemComponent', () => {
     expect(cartItemComponent.componentInstance.item).toEqual(mockCartItem);
   });
 
-  it('renders a <daff-quantity-field>', () => {
+  it('renders a <daff-sf-quantity-field>', () => {
     expect(quantityFieldComponent).not.toBeNull();
   });
 

apps/demo/src/app/cart/components/cart-item/cart-item.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { DaffFormFieldModule } from '@daffodil/design/form-field';
-import { DaffQuantityFieldModule } from '@daffodil/design/quantity-field';
+import { DaffSfQuantityFieldComponent } from '@daffodil/storefront/quantity-field';
 
 import { CartItemComponent } from './cart-item.component';
 
@@ -12,7 +12,7 @@ import { CartItemComponent } from './cart-item.component';
     CommonModule,
     ReactiveFormsModule,
     DaffFormFieldModule,
-    DaffQuantityFieldModule,
+    DaffSfQuantityFieldComponent,
   ],
   declarations: [
     CartItemComponent,

apps/demo/src/app/product/components/product/product.component.html

@@ -13,11 +13,11 @@ <h1 class="demo-product__name">{{product.name}}</h1>
         <div class="demo-product__qty">
           <span>Quantity</span>
           <daff-form-field>
-            <daff-quantity-field
+            <daff-sf-quantity-field
               [formControl]="quantity"
               name="quantity"
               [id]="quantityId">
-            </daff-quantity-field>
+            </daff-sf-quantity-field>
           </daff-form-field>
         </div>
         <div class="demo-product__button">

apps/demo/src/app/product/components/product/product.component.spec.ts

@@ -18,9 +18,9 @@ import { StoreModule } from '@ngrx/store';
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 import { DaffContainerComponent } from '@daffodil/design/container';
 import { DaffFormFieldComponent } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
 import { DaffProduct } from '@daffodil/product';
 import { DaffProductFactory } from '@daffodil/product/testing';
+import { DaffSfQuantityFieldComponent } from '@daffodil/storefront/quantity-field';
 
 import { ProductComponent } from './product.component';
 
@@ -56,8 +56,8 @@ describe('ProductComponent', () => {
         ReactiveFormsModule,
         DaffContainerComponent,
         DAFF_ACCORDION_COMPONENTS,
-        DaffQuantityFieldComponent,
         DaffFormFieldComponent,
+        DaffSfQuantityFieldComponent,
         WrapperComponent,
         StoreModule.forRoot({}),
       ],

apps/demo/src/app/product/components/product/product.component.ts

@@ -21,8 +21,8 @@ import {
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 import { DaffContainerComponent } from '@daffodil/design/container';
 import { DaffFormFieldComponent } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
 import { DaffProduct } from '@daffodil/product';
+import { DaffSfQuantityFieldComponent } from '@daffodil/storefront/quantity-field';
 
 import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.module';
 
@@ -36,7 +36,7 @@ import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.mo
     DAFF_ACCORDION_COMPONENTS,
     DaffContainerComponent,
     DaffFormFieldComponent,
-    DaffQuantityFieldComponent,
+    DaffSfQuantityFieldComponent,
     ImageGalleryModule,
   ],
 })

libs/design/quantity-field/src/quantity-field.component.ts

@@ -18,6 +18,9 @@ import { DaffFormFieldControl } from '@daffodil/design/form-field';
 import { DaffQuantityInputComponent } from './quantity-input/quantity-input.component';
 import { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';
 
+/**
+ * @deprecated in favor of DaffSfQuantityFieldComponent. Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ */
 @Component({
   selector: 'daff-quantity-field',
   templateUrl: './quantity-field.component.html',

libs/design/quantity-field/src/quantity-field.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 import { DaffQuantityFieldComponent } from './quantity-field.component';
 
 /**
- * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ * @deprecated in favor of DaffSfQuantityFieldComponent.
  */
 @NgModule({
   imports: [

libs/design-examples/quantity-field/ng-package.json → libs/storefront-examples/quantity-field/ng-package.json

@@ -4,4 +4,4 @@
     "entryFile": "src/index.ts",
     "styleIncludePaths": ["../../scss"]
   }
-}
+}

libs/storefront-examples/quantity-field/src/basic-quantity-field/basic-quantity-field.component.html

@@ -0,0 +1,4 @@
+<daff-form-field>
+  <daff-form-label>Quantity</daff-form-label>
+  <daff-sf-quantity-field [formControl]="control"></daff-sf-quantity-field>
+</daff-form-field>

libs/design-examples/quantity-field/src/basic-quantity-field/basic-quantity-field.component.ts → libs/storefront-examples/quantity-field/src/basic-quantity-field/basic-quantity-field.component.ts

@@ -5,21 +5,22 @@ import {
 import {
   UntypedFormControl,
   ReactiveFormsModule,
+  Validators,
 } from '@angular/forms';
 
 import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+import { DAFF_SF_QUANTITY_FIELD_COMPONENTS } from '@daffodil/storefront/quantity-field';
 
 @Component({
   selector: 'basic-quantity-field-example',
   templateUrl: './basic-quantity-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_FORM_FIELD_COMPONENTS,
-    DaffQuantityFieldComponent,
+    DAFF_SF_QUANTITY_FIELD_COMPONENTS,
     ReactiveFormsModule,
   ],
 })
 export class BasicQuantityFieldExampleComponent {
-  control = new UntypedFormControl(1);
+  control = new UntypedFormControl(50, [ Validators.max(5)]);
 }

libs/storefront-examples/quantity-field/src/custom-range-quantity-field/custom-range-quantity-field.component.html

@@ -0,0 +1,12 @@
+<daff-form-field>
+  <daff-form-label>Quantity</daff-form-label>
+  <daff-sf-quantity-field
+    [formControl]="control"
+    [min]="5"
+    [max]="50"
+  ></daff-sf-quantity-field>
+</daff-form-field>
+
+<p>
+  Control Value: {{control.value}}
+</p>

libs/design-examples/quantity-field/src/custom-range-quantity-field/custom-range-quantity-field.component.ts → libs/storefront-examples/quantity-field/src/custom-range-quantity-field/custom-range-quantity-field.component.ts

@@ -8,15 +8,15 @@ import {
 } from '@angular/forms';
 
 import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+import { DAFF_SF_QUANTITY_FIELD_COMPONENTS } from '@daffodil/storefront/quantity-field';
 
 @Component({
   selector: 'custom-range-quantity-field-example',
   templateUrl: './custom-range-quantity-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_FORM_FIELD_COMPONENTS,
-    DaffQuantityFieldComponent,
+    DAFF_SF_QUANTITY_FIELD_COMPONENTS,
     ReactiveFormsModule,
   ],
 })

libs/storefront-examples/quantity-field/src/disabled-quantity-field/disabled-quantity-field.component.html

@@ -0,0 +1,8 @@
+<daff-form-field>
+  <daff-form-label>Quantity</daff-form-label>
+  <daff-sf-quantity-field [formControl]="control"></daff-sf-quantity-field>
+</daff-form-field>
+
+<p>
+  Control Value: {{control.value}}
+</p>

libs/design-examples/quantity-field/src/disabled-quantity-field/disabled-quantity-field.component.ts → libs/storefront-examples/quantity-field/src/disabled-quantity-field/disabled-quantity-field.component.ts

@@ -8,15 +8,15 @@ import {
 } from '@angular/forms';
 
 import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+import { DAFF_SF_QUANTITY_FIELD_COMPONENTS } from '@daffodil/storefront/quantity-field';
 
 @Component({
   selector: 'disabled-quantity-field-example',
   templateUrl: './disabled-quantity-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_FORM_FIELD_COMPONENTS,
-    DaffQuantityFieldComponent,
+    DAFF_SF_QUANTITY_FIELD_COMPONENTS,
     ReactiveFormsModule,
   ],
 })

libs/design-examples/quantity-field/src/provider.ts → libs/storefront-examples/quantity-field/src/provider.ts

@@ -2,7 +2,7 @@ import { makeEnvironmentProviders } from '@angular/core';
 
 import { provideDaffDocsExampleContent } from '@daffodil/docs';
 
-export const provideDaffDesignQuantityFieldExamplesContent = () => makeEnvironmentProviders(provideDaffDocsExampleContent(
+export const provideDaffStorefrontQuantityFieldExamplesContent = () => makeEnvironmentProviders(provideDaffDocsExampleContent(
   {
     id: 'basic-quantity-field',
     component: () => import('./basic-quantity-field/basic-quantity-field.component').then(c => c.BasicQuantityFieldExampleComponent),

libs/design-examples/quantity-field/src/public_api.ts → libs/storefront-examples/quantity-field/src/public_api.ts

@@ -2,4 +2,3 @@ export { BasicQuantityFieldExampleComponent } from './basic-quantity-field/basic
 export { CustomRangeQuantityFieldExampleComponent } from './custom-range-quantity-field/custom-range-quantity-field.component';
 export { DisabledQuantityFieldExampleComponent } from './disabled-quantity-field/disabled-quantity-field.component';
 export { SelectMaxQuantityFieldExampleComponent } from './select-max-quantity-field/select-max-quantity-field.component';
-export { provideDaffDesignQuantityFieldExamplesContent } from './provider';

libs/storefront-examples/quantity-field/src/select-max-quantity-field/select-max-quantity-field.component.html

@@ -0,0 +1,7 @@
+<daff-form-field>
+  <daff-form-label>Quantity</daff-form-label>
+  <daff-sf-quantity-field
+    [formControl]="control"
+    [selectMax]="15"
+  ></daff-sf-quantity-field>
+</daff-form-field>

libs/design-examples/quantity-field/src/select-max-quantity-field/select-max-quantity-field.component.ts → libs/storefront-examples/quantity-field/src/select-max-quantity-field/select-max-quantity-field.component.ts

@@ -8,15 +8,15 @@ import {
 } from '@angular/forms';
 
 import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
-import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+import { DAFF_SF_QUANTITY_FIELD_COMPONENTS } from '@daffodil/storefront/quantity-field';
 
 @Component({
   selector: 'select-max-quantity-field-example',
   templateUrl: './select-max-quantity-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_FORM_FIELD_COMPONENTS,
-    DaffQuantityFieldComponent,
+    DAFF_SF_QUANTITY_FIELD_COMPONENTS,
     ReactiveFormsModule,
   ],
 })