Showcase/demo: Ideal code structure for atomic-component with Lit #4877

louis-bompart · 2025-01-18T03:24:49Z

A showcase of the "all-included" component in a directory approach:

component-name/component-name.ts: the component itself
component-name/component-name.mdx: the 'usage & more' documentation of the component
component-name/component-name.new.stories.tsx: the technical/storybook reference page
component-name/component-name.spec.tsx: the unit-tests of the component
component-name/e2e/page-object.ts: the playwright/e2e selector associated to this specific component
component-name/e2e/fixture.ts: all the selectors & utils required for the end-to-end testing of this component. May use selector of other components.
component-name/e2e/componen-name.e2e.ts: the end-to-end tests of the component

storybook: add mdx support storybook-dev: sync up lang & assets after a watch cycle dev: ignore e2e from watch cycle lit: add base page object

github-actions · 2025-01-18T03:30:05Z

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

Bundle Size

File	Old (kb)	New (kb)
case-assist	243.9	243.9
commerce	355.1	355.1
search	415	415
insight	406.3	406.3
recommendation	256.2	256.2
ssr	408.9	408.9
ssr-commerce	372.9	372.9

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

fbeaudoincoveo · 2025-01-22T18:53:20Z

...esult-template-components/atomic-result-example-component/atomic-result-example-component.ts

+  render() {
+    return html`
+      <div>
+        <p>Hello, ${this.name}!</p>


We should showcase localization (of aria-label, too!)

https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_techniques when relevant, yes, using a aria-label could make sense.

fbeaudoincoveo · 2025-01-22T18:55:07Z

...esult-template-components/atomic-result-example-component/atomic-result-example-component.ts

+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('atomic-result-example-component')


The sample component should also have a slot and a couple of parts.

fbeaudoincoveo · 2025-01-22T18:56:16Z

...esult-template-components/atomic-result-example-component/atomic-result-example-component.ts

+
+  render() {
+    return html`
+      <div>


Ideally our sample components should showcase a few ARIA attributes.

Mhh... I disagree, ARIA Attributes are a bit of a crutch for the web IMO (see the warning in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA).

There are still many cases where using ARIA attributes is legit, though, and the current sample might be a little too simple.

fbeaudoincoveo · 2025-01-22T18:57:07Z

...esult-template-components/atomic-result-example-component/atomic-result-example-component.ts

@@ -0,0 +1,32 @@
+import {LitElement, html, css} from 'lit';


I think we should have samples for a result template component and for a non-result template component.

fbeaudoincoveo · 2025-01-22T18:59:37Z

.../components/search/result-template-components/atomic-result-example-component/e2e/fixture.ts

+interface TestFixture {
+  resultExample: AtomicResultExample;
+}
+export const test = base.extend<TestFixture & AxeFixture>({


Makes me wonder: should we test accessibility in UTs or in e2e?

UT minimally, TBD for e2e

fbeaudoincoveo · 2025-01-22T19:00:17Z

...-template-components/atomic-result-example-component/atomic-result-example-component.spec.ts

+import {describe, it, expect} from 'vitest';
+import './atomic-result-example-component.js';
+
+describe('atomic-result-example-component', () => {


Should UTs also cover localization (at least broadly)?

Probably yes, tbd

fpbrault · 2025-01-24T20:06:11Z

A showcase of the "all-included" component in a directory approach:

component-name/component-name.ts: the component itself

component-name/component-name.mdx: the 'usage & more' documentation of the component

component-name/component-name.new.stories.tsx: the technical/storybook reference page

component-name/component-name.spec.tsx: the unit-tests of the component

component-name/e2e/page-object.ts: the playwright/e2e selector associated to this specific component

component-name/e2e/fixture.ts: all the selectors & utils required for the end-to-end testing of this component. May use selector of other components.

component-name/e2e/componen-name.e2e.ts: the end-to-end tests of the component

I was wondering, is there a specific reason we have "new" in the stories file?

louis-bompart · 2025-01-24T20:51:16Z

A showcase of the "all-included" component in a directory approach:

component-name/component-name.ts: the component itself

component-name/component-name.mdx: the 'usage & more' documentation of the component

component-name/component-name.new.stories.tsx: the technical/storybook reference page

component-name/component-name.spec.tsx: the unit-tests of the component

component-name/e2e/page-object.ts: the playwright/e2e selector associated to this specific component

component-name/e2e/fixture.ts: all the selectors & utils required for the end-to-end testing of this component. May use selector of other components.

component-name/e2e/componen-name.e2e.ts: the end-to-end tests of the component

I was wondering, is there a specific reason we have "new" in the stories file?

We could/should probably remove it now 😂 It was when we did a Storybook revamp/transition

alexprudhomme and others added 16 commits January 15, 2025 10:22

component unit testing using vitest/browser

1dc9624

migrate some tests

cdfb733

Merge branch 'master' into stencil-vitest

38f0ec6

add workspace

77e5d0d

clean up

c8629b7

Update package-lock.json

a872075

fix tests and exclude stencil tests

c01ec50

Merge branch 'master' into stencil-vitest

72f5968

Add generated files

e6844fa

Trigger Build

b612c29

put vitest browser in the root..

2aa7be7

Update prbot.yml

2127d4f

Update product-template-common.spec.ts

4052587

Merge branch 'master' into stencil-vitest

c018f01

stop mocking

3222843

various utils fixes

24b7c2d

storybook: add mdx support storybook-dev: sync up lang & assets after a watch cycle dev: ignore e2e from watch cycle lit: add base page object

louis-bompart requested a review from a team as a code owner January 18, 2025 03:24

louis-bompart requested review from olamothe, fpbrault, y-lakhdar and fbeaudoincoveo January 18, 2025 03:24

louis-bompart had a problem deploying to PR Artifacts January 20, 2025 21:19 — with GitHub Actions Failure

louis-bompart force-pushed the lab/ideal-component branch from 3ee954a to 72470d4 Compare January 20, 2025 21:25

louis-bompart had a problem deploying to PR Artifacts January 20, 2025 21:33 — with GitHub Actions Failure

louis-bompart had a problem deploying to PR Artifacts January 20, 2025 22:11 — with GitHub Actions Failure

fbeaudoincoveo reviewed Jan 22, 2025

View reviewed changes

louis-bompart and others added 3 commits January 24, 2025 10:52

merge master

34a5596

showcase

5bfff7d

Add generated files

dcf6ce2

louis-bompart added 2 commits January 24, 2025 11:22

tweak generated file

e466171

build

a2bf081

louis-bompart force-pushed the lab/ideal-component branch from 42337a0 to a2bf081 Compare January 24, 2025 20:21

louis-bompart had a problem deploying to PR Artifacts January 24, 2025 20:31 — with GitHub Actions Failure

Base automatically changed from chore/dev-mode-niceties to master January 24, 2025 21:56

determine tests

dfeeed9

louis-bompart temporarily deployed to PR Artifacts January 24, 2025 22:28 — with GitHub Actions Inactive

louis-bompart temporarily deployed to PR Artifacts January 27, 2025 21:49 — with GitHub Actions Inactive

louis-bompart temporarily deployed to PR Artifacts January 31, 2025 13:56 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Showcase/demo: Ideal code structure for atomic-component with Lit #4877

Showcase/demo: Ideal code structure for atomic-component with Lit #4877

louis-bompart commented Jan 18, 2025

github-actions bot commented Jan 18, 2025 •

edited

Loading

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fbeaudoincoveo Jan 24, 2025

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fbeaudoincoveo Jan 22, 2025

louis-bompart Jan 24, 2025

fpbrault commented Jan 24, 2025

louis-bompart commented Jan 24, 2025

Showcase/demo: Ideal code structure for atomic-component with Lit #4877

Are you sure you want to change the base?

Showcase/demo: Ideal code structure for atomic-component with Lit #4877

Conversation

louis-bompart commented Jan 18, 2025

github-actions bot commented Jan 18, 2025 • edited Loading

Pull Request Report

PR Title

Live demo links

Bundle Size

SSR Progress

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fpbrault commented Jan 24, 2025

louis-bompart commented Jan 24, 2025

github-actions bot commented Jan 18, 2025 •

edited

Loading