@ngutil/layout 0.0.3-dev.0

package/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.yml"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/angular"
+
+const config: StorybookConfig = {
+    stories: ["../**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+    addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],
+    framework: {
+        name: "@storybook/angular",
+        options: {}
+    }
+}
+
+export default config
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/tsconfig.json

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

package/README.md

@@ -0,0 +1,7 @@
+# layout
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test layout` to execute the unit tests.

package/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+    displayName: "layout",
+    preset: "../../jest.preset.js",
+    setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
+    coverageDirectory: "../../coverage/packages/layout",
+    transform: {
+        "^.+\\.(ts|mjs|js|html)$": [
+            "jest-preset-angular",
+            {
+                tsconfig: "<rootDir>/tsconfig.spec.json",
+                stringifyContentPathRegex: "\\.(html|svg)$"
+            }
+        ]
+    },
+    transformIgnorePatterns: ["node_modules/(?!.*\\.mjs$)"],
+    snapshotSerializers: [
+        "jest-preset-angular/build/serializers/no-ng-attributes",
+        "jest-preset-angular/build/serializers/ng-snapshot",
+        "jest-preset-angular/build/serializers/html-comment"
+    ]
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/layout",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@ngutil/layout",
+  "version": "0.0.3-dev.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@ngutil/aria": "^0.0.3-dev.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,73 @@
+{
+  "name": "layout",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/layout/src",
+  "prefix": "nu",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/layout/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/layout/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/layout/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/layout/.storybook",
+        "browserTarget": "layout:build-storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/layout",
+        "configDir": "packages/layout/.storybook",
+        "browserTarget": "layout:build-storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c packages/layout/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "layout:build-storybook",
+        "staticFilePath": "dist/storybook/layout"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "layout:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./lib/layout/layout.component"

package/src/lib/layout/layout.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing"
+
+import { LayoutComponent } from "./layout.component"
+
+describe("LayoutComponent", () => {
+    let component: LayoutComponent
+    let fixture: ComponentFixture<LayoutComponent>
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [LayoutComponent]
+        }).compileComponents()
+
+        fixture = TestBed.createComponent(LayoutComponent)
+        component = fixture.componentInstance
+        fixture.detectChanges()
+    })
+
+    it("should create", () => {
+        expect(component).toBeTruthy()
+    })
+})

package/src/lib/layout/layout.component.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/angular"
+import { expect } from "@storybook/jest"
+import { within } from "@storybook/testing-library"
+
+import { LayoutComponent } from "./layout.component"
+
+const meta: Meta<LayoutComponent> = {
+    component: LayoutComponent,
+    title: "LayoutComponent"
+}
+export default meta
+type Story = StoryObj<LayoutComponent>
+
+export const Primary: Story = {
+    args: {}
+}
+
+export const Heading: Story = {
+    args: {},
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        expect(canvas.getByText(/layout works!/gi)).toBeTruthy()
+    }
+}

package/src/lib/layout/layout.component.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common"
+import { Component } from "@angular/core"
+
+@Component({
+    selector: "nu-layout",
+    standalone: true,
+    imports: [CommonModule],
+    template: `<p>layout works!</p>`,
+    styleUrl: "./layout.component.scss"
+})
+export class LayoutComponent {}

package/src/test-setup.ts

@@ -0,0 +1,9 @@
+import "jest-preset-angular/setup-jest"
+
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+    testEnvironmentOptions: {
+        errorOnUnknownElements: true,
+        errorOnUnknownProperties: true
+    }
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "**/*.stories.ts",
+    "**/*.stories.js"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}