Merge pull request #1532 from GSA/1428-fix-stackblitz-for-all-components

Update Stackblitz Generation Script

libs/documentation/src/lib/storybook/formly/formly-file-input/formly-file-input-custom/formly-file-input-custom.component.ts

@@ -7,7 +7,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
   selector: 'sds-formly-file-input-custom',
   templateUrl: './formly-file-input-custom.component.html',
 })
-export class TableFileInputComponent implements AfterViewInit {
+export class TableFileInputCustomComponent implements AfterViewInit {
   @ViewChild('replacementTemplate') replacementTemplate: TemplateRef<any>;
   fields: FormlyFieldConfig[] = [
     {

libs/documentation/src/lib/storybook/formly/formly-file-input/formly-file-input-custom/formly-file-input-custom.module.ts

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TableFileInputComponent } from './formly-file-input-custom.component';
+import { TableFileInputCustomComponent } from './formly-file-input-custom.component';
 import { SdsFormlyModule } from '@gsa-sam/sam-formly';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { SdsTableModule } from '@gsa-sam/sam-material-extensions';
 import { RouterTestingModule } from '@angular/router/testing';
 
 @NgModule({
-  declarations: [TableFileInputComponent],
+  declarations: [TableFileInputCustomComponent],
   imports: [
     CommonModule,
     SdsFormlyModule,
@@ -17,7 +17,7 @@ import { RouterTestingModule } from '@angular/router/testing';
     SdsTableModule,
     RouterTestingModule,
   ],
-  exports: [TableFileInputComponent],
-  bootstrap: [TableFileInputComponent],
+  exports: [TableFileInputCustomComponent],
+  bootstrap: [TableFileInputCustomComponent],
 })
 export class FormlyFileInputCustomModule {}

libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts

@@ -4,9 +4,9 @@ import { SdsStepComponent, SdsStepper } from '@gsa-sam/sam-formly';
 @Component({
   selector: `sds-formly-stepper-basic-uneven`,
   templateUrl: './formly-stepper-basic-uneven.component.html',
-  providers: [{ provide: SdsStepper, useExisting: USWDSCustomStepperComponent }],
+  providers: [{ provide: SdsStepper, useExisting: USWDSBasicStepperComponent }],
 })
-export class USWDSCustomStepperComponent extends SdsStepper implements AfterContentInit {
+export class USWDSBasicStepperComponent extends SdsStepper implements AfterContentInit {
   stepLabels = [];
   currentStepIndex = 0;
 

libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts

@@ -17,7 +17,7 @@ import {
 import { IconModule } from '@gsa-sam/ngx-uswds-icons';
 import { SdsStepArrowModule } from '@gsa-sam/components';
 import { FormlyStepperBasicComponent } from './formly-stepper-basic.component';
-import { USWDSCustomStepperComponent } from './formly-stepper-basic-uneven.component';
+import { USWDSBasicStepperComponent } from './formly-stepper-basic-uneven.component';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 
@@ -42,8 +42,8 @@ import { FormsModule } from '@angular/forms';
     FormsModule,
     RouterTestingModule,
   ],
-  declarations: [FormlyStepperBasicComponent, USWDSCustomStepperComponent],
+  declarations: [FormlyStepperBasicComponent, USWDSBasicStepperComponent],
   bootstrap: [FormlyStepperBasicComponent],
-  exports: [FormlyStepperBasicComponent, USWDSCustomStepperComponent],
+  exports: [FormlyStepperBasicComponent, USWDSBasicStepperComponent],
 })
 export class FormlyStepperBasicModule {}

misc/generate-stackblitzes.ts

@@ -13,15 +13,6 @@ const samFormlyPackage = fs.readJsonSync('libs/packages/sam-formly/package.json'
 const samMaterialExtensions = fs.readJsonSync('libs/packages/sam-material-extensions/package.json');
 
 let dependencies = packageJson.dependencies;
-// Locking version at 11.0.3 - issue with stackblitz is that it does not pick up newly released npm modules for weeks
-const samDependencies = {
-  '@gsa-sam/layouts': '12.0.0',
-  '@gsa-sam/components': '16.0.16',
-  '@gsa-sam/sam-formly': '16.0.16',
-  '@gsa-sam/sam-material-extensions': '16.0.16',
-};
-
-dependencies = { ...dependencies, ...samDependencies };
 
 function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -56,7 +47,7 @@ if (isFederalistBuild) {
   base = path.join('apps', 'sam-design-system-site', 'src', 'assets', 'stackblitzes');
 }
 
-const root = path.join('libs', 'documentation', 'src', 'lib');
+const root = path.join('libs', 'documentation', 'src', 'lib', 'storybook');
 
 const initialData = {
   stackblitzUrl,
@@ -93,8 +84,7 @@ modulesInfo.forEach((value, demoModule) => {
   demoFolder = path.relative(root, path.resolve(demoFolder));
 
   const splitDemoFolder = demoFolder.replace(root, '').split(path.sep);
-  const isStorybookDemo = demoFolder.startsWith('storybook');
-  const componentName = splitDemoFolder[splitDemoFolder.length - (isStorybookDemo ? 2 : 3)];
+  const componentName = splitDemoFolder[splitDemoFolder.length - 2];
   const demoName = splitDemoFolder[splitDemoFolder.length - 1];
   const modulePath = path.basename(demoModule, '.ts');
 
@@ -133,13 +123,16 @@ modulesInfo.forEach((value, demoModule) => {
   });
   for (const file of demoFiles) {
     const destFile = path.basename(file);
-    try {
-      stackblitzData.files.push({
-        name: `src/app/${destFile}`,
-        source: fs.readFileSync(file).toString(),
-      });
-    } catch (exception) {
-      console.log(file);
+    if(path.extname(destFile) !== ''){
+      try {
+        stackblitzData.files.push({
+          name: `src/app/${destFile}`,
+          source: fs.readFileSync(file).toString(),
+        });
+      } catch (exception) {
+        console.log(file);
+        console.error(exception)
+      }
     }
 
     // Look for service folders and add those in as well to the demo

misc/parse-demo.ts

@@ -49,6 +49,9 @@ export function parseDemo(globPath: string): Map<string, DemoMetadata> {
             if (textDecorator.startsWith('@Component')) {
               const matches = SELECTOR_REGEX.exec(textDecorator);
               if (matches) {
+                if(components.has(className)){
+                  throw new Error(`COMPONENT NAME COLLISION: Component Name ${className} already exists. Stackblitz will render wrong component if not corrected!`)
+                }
                 components.set(className, {selector: matches[1], fileName: path.basename(sourceFile.fileName)});
               }
             }

package.json

@@ -83,7 +83,7 @@
     "raw-loader": "^4.0.2",
     "rxjs": ">=7.5.0",
     "tslib": "^2.0.0",
-    "typescript": "^5.3.2",
+    "typescript": "<5.5.0",
     "zone.js": "^0.14.4"
   },
   "devDependencies": {