feat(components/data-grid): create an easy mode for data grid

apps/code-examples/src/app/app.component.scss

@@ -1,3 +1,10 @@
+:host {
+  display: block;
+  width: calc(100vw - var(--sky-viewport-left) - var(--sky-viewport-right));
+  height: calc(100vh - var(--sky-viewport-top) - var(--sky-viewport-bottom));
+  position: relative;
+}
+
 #home-btn {
   display: block;
   margin: 5px;
@@ -6,6 +13,9 @@
 #content {
   // Value set in the app component.
   margin-top: var(--sky-viewport-top);
+  overflow-y: auto;
+  position: absolute;
+  inset: 0;
 }
 
 #controls {

apps/code-examples/src/styles.scss

@@ -1,6 +1,5 @@
 html,
 body {
-  min-height: 100%;
   scroll-behavior: smooth;
 }
 

apps/e2e/data-grid-storybook-e2e/cypress.config.ts

@@ -0,0 +1,14 @@
+import { sendCypressScreenshotsToPercy } from '@skyux-sdk/e2e-schematics';
+import { skyE2ePreset } from '@skyux-sdk/e2e-schematics/cypress-preset';
+
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    ...skyE2ePreset(__dirname, {
+      setupNodeEvents: (on, config) => {
+        sendCypressScreenshotsToPercy(on, config);
+      },
+    }),
+  },
+});

apps/e2e/data-grid-storybook-e2e/eslint.config.js

@@ -0,0 +1,3 @@
+const config = require('../../../eslint-e2e.config');
+
+module.exports = config;

apps/e2e/data-grid-storybook-e2e/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "data-grid-storybook-e2e",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/e2e/data-grid-storybook-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/e2e/data-grid-storybook-e2e/cypress.config.ts",
+        "devServerTarget": "data-grid-storybook:storybook",
+        "baseUrl": "http://localhost:4400",
+        "browser": "chrome",
+        "testingType": "e2e"
+      },
+      "configurations": {
+        "ci": {
+          "baseUrl": "http://localhost:4200",
+          "browser": "chrome",
+          "devServerTarget": "data-grid-storybook:static-storybook:ci"
+        },
+        "prebuilt": {
+          "devServerTarget": "data-grid-storybook:static-storybook:prebuilt",
+          "baseUrl": ""
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["{projectRoot}/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["data-grid-storybook"]
+}

apps/e2e/data-grid-storybook-e2e/src/e2e/data-grid/data-grid.component.cy.ts

@@ -0,0 +1,29 @@
+import { E2eVariations } from '@skyux-sdk/e2e-schematics';
+
+describe('data-grid', () => {
+  E2eVariations.forEachTheme((theme) => {
+    describe(`in ${theme} theme`, () => {
+      beforeEach(() =>
+        cy.visit(
+          `/iframe.html?globals=theme:${theme}&id=data-gridcomponent--data-grid`,
+        ),
+      );
+
+      it('should render the component', () => {
+        cy.skyReady();
+        cy.get('app-data-grid').should('exist').should('be.visible');
+        cy.get(
+          '[row-index="6"] [col-id="jobTitle"] sky-ag-grid-cell-renderer-template',
+        )
+          .should('exist')
+          .should('be.visible')
+          .should('have.text', 'UX Designer');
+        cy.get('[row-index="6"] [col-id="context"] button.sky-dropdown-button')
+          .should('exist')
+          .should('be.visible')
+          .should('be.enabled');
+        cy.skyVisualTest(`data-grid-${theme}`);
+      });
+    });
+  });
+});

apps/e2e/data-grid-storybook-e2e/src/support/e2e.ts

@@ -0,0 +1,19 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+// Import commands.ts using ES2015 syntax:
+import '@percy/cypress';
+import '@skyux-sdk/cypress-commands';
+
+import './commands';

apps/e2e/data-grid-storybook-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+}

apps/e2e/data-grid-storybook/.storybook/main.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from 'storybook/internal/types';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { rootMain } from '../../../../.storybook/main';
+
+const config: StorybookConfig = {
+  ...rootMain,
+  stories: ['../src/app/**/*.stories.@(js|ts)'],
+};
+export default config;

apps/e2e/data-grid-storybook/.storybook/manager.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax
+export * from '../../../../.storybook/manager';

apps/e2e/data-grid-storybook/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import {
+  previewWrapperDecorators,
+  previewWrapperGlobalTypes,
+  previewWrapperParameters,
+} from '@skyux/storybook';
+import { moduleMetadata } from '@storybook/angular';
+
+export const parameters = {
+  ...previewWrapperParameters,
+};
+
+export const globalTypes = {
+  ...previewWrapperGlobalTypes,
+};
+
+export const decorators = [
+  ...previewWrapperDecorators,
+  moduleMetadata({
+    imports: [],
+  }),
+];

apps/e2e/data-grid-storybook/.storybook/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+
+    "*.ts",
+    "*.js",
+    "./*"
+  ]
+}

apps/e2e/data-grid-storybook/eslint.config.js

@@ -0,0 +1,3 @@
+const config = require('../../../eslint-storybook.config');
+
+module.exports = config;

apps/e2e/data-grid-storybook/project.json

@@ -0,0 +1,146 @@
+{
+  "name": "data-grid-storybook",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/e2e/data-grid-storybook/src",
+  "prefix": "app",
+  "tags": ["component-e2e"],
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "outputs": ["{options.outputPath.base}"],
+      "options": {
+        "outputPath": {
+          "base": "dist/apps/e2e/data-grid-storybook"
+        },
+        "index": "apps/e2e/data-grid-storybook/src/index.html",
+        "browser": "apps/e2e/data-grid-storybook/src/main.ts",
+        "polyfills": ["zone.js", "libs/components/packages/src/polyfills.js"],
+        "tsConfig": "apps/e2e/data-grid-storybook/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "stylePreprocessorOptions": {
+          "includePaths": ["{workspaceRoot}"]
+        },
+        "styles": [
+          "apps/e2e/data-grid-storybook/src/styles.scss",
+          "libs/components/theme/src/lib/styles/sky.scss",
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss"
+        ]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb",
+              "maximumError": "10kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "continuous": true,
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "data-grid-storybook:build:production"
+        },
+        "development": {
+          "buildTarget": "data-grid-storybook:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "data-grid-storybook:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["{projectRoot}/**/*.ts", "{projectRoot}/**/*.html"]
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "apps/e2e/data-grid-storybook/.storybook",
+        "browserTarget": "data-grid-storybook:build",
+        "compodoc": false,
+        "styles": [
+          "apps/e2e/data-grid-storybook/src/styles.scss",
+          "libs/components/theme/src/lib/styles/sky.scss",
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true,
+          "ci": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/data-grid-storybook",
+        "configDir": "apps/e2e/data-grid-storybook/.storybook",
+        "browserTarget": "data-grid-storybook:build",
+        "compodoc": false,
+        "styles": [
+          "apps/e2e/data-grid-storybook/src/styles.scss",
+          "libs/components/theme/src/lib/styles/sky.scss",
+          "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+          "libs/components/ag-grid/src/lib/styles/ag-grid-styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "buildTarget": "data-grid-storybook:build-storybook",
+        "staticFilePath": "dist/storybook/data-grid-storybook",
+        "spa": true
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "data-grid-storybook:build-storybook:ci"
+        },
+        "prebuilt": {
+          "buildTarget": "data-grid-storybook:noop"
+        }
+      }
+    },
+    "noop": {
+      "executor": "nx:noop"
+    }
+  }
+}

apps/e2e/data-grid-storybook/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  template: `<router-outlet />`,
+  imports: [RouterOutlet],
+})
+export class AppComponent {}

apps/e2e/data-grid-storybook/src/app/app.routes.ts

@@ -0,0 +1,13 @@
+import { Route } from '@angular/router';
+
+export const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'data-grid',
+  },
+  {
+    path: 'data-grid',
+    loadComponent: () => import('./data-grid/data-grid.component'),
+  },
+];