feat(list): add minimal style for list component

apps/demo-app/src/app/app.routes.ts

@@ -21,19 +21,31 @@ export const appRoutes: Route[] = [
       {
         path: '',
         loadComponent: () =>
-          import('./pages/list-sample/list-sample.component').then(
-            (m) => m.ListSampleComponent
-          ),
+          import(
+            './pages/list-sample/pure-headless/pure-headless.component'
+          ).then((m) => m.PureHeadlessComponent),
       },
       {
-        matcher: (segments) =>
-          segments.length && UUID_REGEX.test(segments[0].path)
-            ? { consumed: segments }
-            : null,
-        loadComponent: () =>
-          import('./pages/list-sample/list-sample.component').then(
-            (m) => m.ListSampleComponent
-          ),
+        path: 'with-styles',
+        children: [
+          {
+            path: '',
+            loadComponent: () =>
+              import(
+                './pages/list-sample/with-style/with-style.component'
+              ).then((m) => m.WithStyleComponent),
+          },
+          {
+            matcher: (segments) =>
+              segments.length && UUID_REGEX.test(segments[0].path)
+                ? { consumed: segments }
+                : null,
+            loadComponent: () =>
+              import(
+                './pages/list-sample/with-style/with-style.component'
+              ).then((m) => m.WithStyleComponent),
+          },
+        ],
       },
     ],
   },

apps/demo-app/src/app/components/card/card.component.html

@@ -1,9 +1,9 @@
 <div class="sk-title">{{ label() }}</div>
 <ng-content></ng-content>
 <div class="sk-actions">
-  @if (link()) {
-  <a class="sk-link" [routerLink]="link()">View Component</a>
-  } @else {
+  @if (routes()) { @for (route of routes(); track route.route) {
+  <a class="sk-link" [routerLink]="route.route">{{ route.label }}</a>
+  } } @else {
   <span class="sk-link">View Component</span>
   }
 </div>

apps/demo-app/src/app/components/card/card.component.spec.ts

@@ -14,7 +14,7 @@ describe('CardComponent', () => {
 
     fixture = TestBed.createComponent(CardComponent);
     fixture.componentRef.setInput('label', 'Test 1');
-    fixture.componentRef.setInput('link', '1');
+    fixture.componentRef.setInput('routes', [{ route: '1', label: 'Test 1' }]);
     component = fixture.componentInstance;
 
     fixture.detectChanges();

apps/demo-app/src/app/components/card/card.component.ts

@@ -10,6 +10,6 @@ import { RouterLink } from '@angular/router';
   styleUrl: './card.component.css',
 })
 export class CardComponent {
-  link = input<string>();
+  routes = input<{ route: string; label: string }[]>();
   label = input.required<string>();
 }

apps/demo-app/src/app/pages/list-sample/list-sample.component.css

@@ -1,56 +0,0 @@
-:host {
-  padding: 0 1rem;
-}
-
-.sk-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-sk-list-item {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.sk-child-list,
-.sk-grand-child-list {
-  gap: 0.5rem;
-}
-
-.sk-child-list {
-  margin: 0 0 0.5rem 0.5rem;
-}
-
-.sk-grand-child-list {
-  margin-bottom: 1rem;
-}
-
-.sk-list.sk-grand-child-list {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-}
-
-.sk-label {
-  height: 32px;
-  padding: 1rem;
-  background: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border-radius: 0.5rem;
-  color: #000;
-}
-
-.sk-active {
-  color: var(--sk-primary-color);
-}
-
-.sk-active.sk-label span {
-  will-change: transform;
-  transition: transform 0.3s ease-in-out;
-  transform: scale(1.1) translateX(0.5rem);
-}

apps/demo-app/src/app/pages/list-sample/list-sample.component.html

@@ -1,67 +1 @@
-<sk-list skListProvider (activeIdChanged)="rootActiveId.set($event)">
-  <div class="sk-list" @skListAnimation>
-    @for (rootItem of items(); track rootItem.link) {
-    <sk-list-item [skListItemId]="rootItem.link" [skEnableRouting]="true">
-      <div
-        class="sk-label"
-        [class.sk-active]="rootActiveId() === rootItem.link"
-        sk-label
-      >
-        <span> {{ rootItem.label }} </span>
-      </div>
-      @if (rootItem.children?.length && rootActiveId() === rootItem.link) {
-      <sk-list
-        class="sk-child-list"
-        sk-childs
-        (activeIdChanged)="childActiveId.set($event)"
-      >
-        <div class="sk-list sk-child-list" @skListAnimation>
-          @for (childItem of rootItem.children; track childItem.link) {
-          <sk-list-item
-            [skListItemId]="childItem.link"
-            [skEnableRouting]="true"
-          >
-            <div
-              class="sk-label"
-              [class.sk-active]="childActiveId() === childItem.link"
-              sk-label
-            >
-              <span> {{ childItem.label }} </span>
-            </div>
-            @if (childItem.children?.length && childActiveId() ===
-            childItem.link) {
-            <sk-list
-              class="sk-grand-child-list"
-              sk-childs
-              (activeIdChanged)="grandChildActiveId.set($event)"
-            >
-              <div class="sk-list sk-grand-child-list" @skListAnimation>
-                @for (grandChildItem of childItem.children; track
-                grandChildItem.link) {
-                <sk-list-item
-                  [skListItemId]="grandChildItem.link"
-                  [skEnableRouting]="true"
-                >
-                  <div
-                    class="sk-label"
-                    [class.sk-active]="
-                      grandChildActiveId() === grandChildItem.link
-                    "
-                    sk-label
-                  >
-                    <span> {{ grandChildItem.label }} </span>
-                  </div>
-                </sk-list-item>
-                }
-              </div>
-            </sk-list>
-            }
-          </sk-list-item>
-          }
-        </div>
-      </sk-list>
-      }
-    </sk-list-item>
-    }
-  </div>
-</sk-list>
+<router-outlet></router-outlet>

apps/demo-app/src/app/pages/list-sample/list-sample.component.ts

@@ -1,43 +1,13 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {
-  ListComponent,
-  ListItemActiveDirective,
-  ListItemComponent,
-  ListProviderDirective,
-} from '@qupaya/sketch';
-import { SAMPLE_DATA } from './list-sample.data';
-import { query, transition, trigger } from '@angular/animations';
-import { slideFadeAnimationFactory } from '../../animations/slide.animation';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-list-sample',
   standalone: true,
-  imports: [
-    CommonModule,
-    ListItemActiveDirective,
-    ListItemComponent,
-    ListComponent,
-    RouterOutlet,
-    ListProviderDirective,
-  ],
+  imports: [CommonModule, RouterOutlet],
   templateUrl: './list-sample.component.html',
   styleUrl: './list-sample.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('skListAnimation', [
-      transition(':enter', [
-        query(':enter', slideFadeAnimationFactory(), { optional: true }),
-      ]),
-    ]),
-  ],
 })
-export class ListSampleComponent {
-  readonly rootActiveId = signal<string | undefined>(undefined);
-  readonly childActiveId = signal<string | undefined>(undefined);
-  readonly grandChildActiveId = signal<string | undefined>(undefined);
-  readonly items = signal(SAMPLE_DATA, {
-    equal: (a, b) => a.length === b.length,
-  });
-}
+export class ListSampleComponent {}

apps/demo-app/src/app/pages/list-sample/list-sample.data.ts

@@ -1,6 +1,6 @@
 interface DemoItem {
   label: string;
-  link: string;
+  route: string;
   children?: DemoItem[];
 }
 
@@ -9,19 +9,19 @@ function generateRandomList(): DemoItem[] {
   for (let i = 1; i <= 10; i++) {
     const item = {
       label: `${SAMPLE_DATA_ITEM_PREFIX} ${i}`,
-      link: crypto.randomUUID(),
+      route: crypto.randomUUID(),
       children: Array.of<DemoItem>(),
     };
     for (let j = 1; j <= 5; j++) {
       const child: DemoItem = {
         label: `${SAMPLE_DATA_ITEM_PREFIX} child ${j}`,
-        link: `${item.link}/${crypto.randomUUID()}`,
+        route: `${item.route}/${crypto.randomUUID()}`,
         children: Array.of<DemoItem>(),
       };
       for (let k = 1; k <= 3; k++) {
         const subChild: DemoItem = {
           label: `${SAMPLE_DATA_ITEM_PREFIX} grand child ${k}`,
-          link: `${child.link}/${crypto.randomUUID()}`,
+          route: `${child.route}/${crypto.randomUUID()}`,
         };
         child.children?.push(subChild);
       }

apps/demo-app/src/app/pages/list-sample/pure-headless/pure-headless.component.css

@@ -0,0 +1,2 @@
+sk-list-item {
+}

apps/demo-app/src/app/pages/list-sample/pure-headless/pure-headless.component.html

@@ -0,0 +1,28 @@
+<sk-list skListProvider>
+  @for (rootItem of items(); track rootItem.route) {
+    <sk-list-item [skListItemId]="rootItem.route">
+      <div skLabel>
+        <span> {{ rootItem.label }} </span>
+      </div>
+      <sk-list skChilds>
+        @for (childItem of rootItem.children; track childItem.route) {
+          <sk-list-item [skListItemId]="childItem.route">
+            <div skLabel>
+              <span> {{ childItem.label }} </span>
+            </div>
+            <sk-list skChilds>
+              @for (grandChildItem of childItem.children; track
+                grandChildItem.route) {
+                <sk-list-item [skListItemId]="grandChildItem.route">
+                  <div skLabel>
+                    <span> {{ grandChildItem.label }} </span>
+                  </div>
+                </sk-list-item>
+              }
+            </sk-list>
+          </sk-list-item>
+        }
+      </sk-list>
+    </sk-list-item>
+  }
+</sk-list>

apps/demo-app/src/app/pages/list-sample/pure-headless/pure-headless.component.spec.ts

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

apps/demo-app/src/app/pages/list-sample/pure-headless/pure-headless.component.ts

@@ -0,0 +1,28 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ListComponent,
+  ListItemActiveDirective,
+  ListItemComponent,
+  ListProviderDirective,
+} from '@qupaya/sketch';
+import { SAMPLE_DATA } from '../list-sample.data';
+
+@Component({
+  selector: 'app-pure-headless',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ListItemActiveDirective,
+    ListItemComponent,
+    ListComponent,
+    ListProviderDirective,
+  ],
+  templateUrl: './pure-headless.component.html',
+  styleUrl: './pure-headless.component.css',
+})
+export class PureHeadlessComponent {
+  readonly items = signal(SAMPLE_DATA, {
+    equal: (a, b) => a.length === b.length,
+  });
+}