feat(hf): en documentation

Author: ZeRiix

docs/.vitepress/config.ts

@@ -315,11 +315,11 @@ export default defineConfig({
 									items: [
 										{
 											text: "GitHub Actions",
-											link: "/fr/v0/guide/ci/githubActions",
+											link: "/en/v0/guide/ci/githubActions",
 										},
 										{
 											text: "GitLab CI",
-											link: "/fr/v0/guide/ci/gitlabCI",
+											link: "/en/v0/guide/ci/gitlabCI",
 										},
 									],
 								},

docs/en/index.md

@@ -0,0 +1,40 @@
+---
+layout: home
+title: "@duplojs/playwright"
+
+hero:
+  name: "@duplojs/playwright"
+  text: "Test a website, not locators"
+  tagline: "A layer to write Playwright tests that are more readable, more stable, and closer to the business domain."
+  image: "/images/logo.png"
+  actions:
+    - theme: brand
+      text: Get Started
+      link: "/en/v0/guide/"
+    - theme: alt
+      text: API Reference
+      link: "/en/v0/api/"
+    - theme: alt
+      text: View on GitHub
+      link: "https://github.com/duplojs/playwright"
+
+features:
+  - icon: "🧠"
+    title: "Intention-oriented tests"
+    details: "The goal is no longer to manipulate locators everywhere, but to express what the test is actually doing."
+  - icon: "🗂️"
+    title: "A clear structure"
+    details: "The Website, Page, and Component model helps organize the test suite around the website rather than around isolated pieces of code."
+  - icon: "♻️"
+    title: "Less duplication"
+    details: "Selectors, helpers, and shared behaviors are defined once and then reused wherever they make sense."
+  - icon: "🔎"
+    title: "A better reading level"
+    details: "Tests remain understandable even as the suite grows, because they talk more about the user journey than about the Playwright implementation."
+  - icon: "🧪"
+    title: "Designed for integration"
+    details: "The lib helps test the website in conditions close to reality, with a light abstraction above Playwright rather than an opaque framework."
+  - icon: "🧱"
+    title: DuploJS standards
+    details: Always strongly typed, always robust, always opinionated, always saving time on unnecessary technical aspects.
+---

docs/en/v0/api/actions.md

@@ -0,0 +1,156 @@
+---
+outline: [2, 3]
+prev:
+  text: "Page"
+  link: "/en/v0/api/page"
+next:
+  text: "Assertions"
+  link: "/en/v0/api/assertions"
+description: "Overview of the ready-to-use actions provided by Actions in @duplojs/playwright."
+---
+
+# Actions
+
+`Actions` groups the ready-to-use interactions applied to a component and one of its element keys.
+
+In practice, this namespace avoids writing low-level Playwright calls everywhere in the tests and gives the suite a more consistent vocabulary.
+
+## Simple example
+
+```ts twoslash
+// @version: 0
+<!--@include: @/examples/v0/api/actions/main.ts-->
+```
+::: tip What is happening here
+- the component exposes named elements
+- `Actions.fill(...)` and `Actions.click(...)` rely on these element keys
+- the test stays focused on intention rather than raw Playwright calls
+:::
+
+## What is it for?
+
+`Actions` is mainly used to:
+
+- share frequent interactions
+- keep a consistent writing style
+- reuse the same behaviors across several components
+- avoid scattering locator calls in tests
+
+## click
+
+```ts
+Actions.click(component, elementKey)
+```
+
+Clicks a declared element of the component.
+
+## forceClick
+
+```ts
+Actions.forceClick(component, elementKey)
+```
+
+Forces a click with `click({ force: true })`.
+
+## hover
+
+```ts
+Actions.hover(component, elementKey)
+```
+
+Hovers over a declared element of the component.
+
+## focus
+
+```ts
+Actions.focus(component, elementKey)
+```
+
+Focuses a declared element of the component.
+
+## fill
+
+```ts
+Actions.fill(component, elementKey, content)
+```
+
+Fills an element with a text value.
+
+## type
+
+```ts
+Actions.type(component, elementKey, text, options?)
+```
+
+Types text sequentially into an element.
+
+## clear
+
+```ts
+Actions.clear(component, elementKey)
+```
+
+Clears the current value of an element.
+
+## press
+
+```ts
+Actions.press(component, elementKey, key)
+```
+
+Sends a keyboard key to an element.
+
+## check
+
+```ts
+Actions.check(component, elementKey)
+```
+
+Checks a compatible element.
+
+## uncheck
+
+```ts
+Actions.uncheck(component, elementKey)
+```
+
+Unchecks a compatible element.
+
+## selectOption
+
+```ts
+Actions.selectOption(component, elementKey, values)
+```
+
+Selects one or more options on an element.
+
+## dragTo
+
+```ts
+Actions.dragTo(component, elementKey, target, options?)
+```
+
+Moves an element to a target locator.
+
+## extractContent
+
+```ts
+Actions.extractContent(component, elementKey)
+```
+
+Returns the text content of an element.
+
+## withStep
+
+```ts
+Actions.withStep(label).action(component, elementKey, ...args)
+```
+
+Returns the same actions, but grouped under a custom `test.step(...)`.
+The useful call is then chained on the returned wrapper.
+
+## See also
+
+- [`Assertions`](/en/v0/api/assertions) - for ready-to-use checks on components.
+- [`Component`](/en/v0/api/component) - to define the elements the actions apply to.
+- [`Component Interaction`](/en/v0/api/componentInteraction) - to create custom interactions if the provided actions are not enough.

docs/en/v0/api/assertions.md

@@ -0,0 +1,167 @@
+---
+outline: [2, 3]
+prev:
+  text: "Actions"
+  link: "/en/v0/api/actions"
+next:
+  text: "API Reference"
+  link: "/en/v0/api/"
+description: "Overview of the ready-to-use assertions provided by Assertions in @duplojs/playwright."
+---
+
+# Assertions
+
+`Assertions` groups the ready-to-use checks applied to a component and one of its element keys.
+
+In practice, this namespace makes it possible to write expectations that are more readable and more consistent than a sequence of Playwright calls scattered across the tests.
+
+## Simple example
+
+```ts twoslash
+// @version: 0
+<!--@include: @/examples/v0/api/assertions/main.ts-->
+```
+::: tip What is happening here
+- the component exposes named elements
+- `Assertions.toHaveValue(...)` and `Assertions.toBeVisible(...)` target these elements directly
+- the test stays focused on business verification rather than technical details
+:::
+
+## What is it for?
+
+`Assertions` is mainly used to:
+
+- share frequent expectations
+- keep a consistent vocabulary in tests
+- avoid repeating the same assertion sequences
+- centralize enriched checks such as prior visibility
+
+## toBeVisible
+
+```ts
+Assertions.toBeVisible(component, elementKey)
+```
+
+Checks that an element is visible.
+
+## toHaveText
+
+```ts
+Assertions.toHaveText(component, elementKey, text)
+```
+
+Checks that an element has exactly the expected text.
+
+## toContainText
+
+```ts
+Assertions.toContainText(component, elementKey, text)
+```
+
+Checks that an element contains the expected text.
+
+## toHaveNoText
+
+```ts
+Assertions.toHaveNoText(component, elementKey)
+```
+
+Checks that an element has no text.
+
+## toBeHidden
+
+```ts
+Assertions.toBeHidden(component, elementKey)
+```
+
+Checks that an element is hidden.
+
+## toHaveQuantity
+
+```ts
+Assertions.toHaveQuantity(component, elementKey, {
+  quantity,
+  operator?,
+})
+```
+
+Checks the number of elements matching a locator.
+
+## toBeEnabled
+
+```ts
+Assertions.toBeEnabled(component, elementKey)
+```
+
+Checks that an element is enabled.
+
+## toBeChecked
+
+```ts
+Assertions.toBeChecked(component, elementKey)
+```
+
+Checks that an element is checked.
+
+## toBeDisabled
+
+```ts
+Assertions.toBeDisabled(component, elementKey)
+```
+
+Checks that an element is disabled.
+
+## toHaveAttribute
+
+```ts
+Assertions.toHaveAttribute(component, elementKey, name, value?)
+```
+
+Checks that an element has an expected attribute.
+
+## toHaveClass
+
+```ts
+Assertions.toHaveClass(component, elementKey, value)
+```
+
+Checks that an element has the expected class.
+
+## toHaveValue
+
+```ts
+Assertions.toHaveValue(component, elementKey, value)
+```
+
+Checks that an element has the expected value.
+
+## toBeBusy
+
+```ts
+Assertions.toBeBusy(component, elementKey)
+```
+
+Checks that an element has `aria-busy="true"`.
+
+## toBeNotBusy
+
+```ts
+Assertions.toBeNotBusy(component, elementKey)
+```
+
+Checks that an element has `aria-busy="false"`.
+
+## withStep
+
+```ts
+Assertions.withStep(label).assertion(component, elementKey, ...args)
+```
+
+Returns the same assertions, but grouped under a custom `test.step(...)`.
+The useful call is then chained on the returned wrapper.
+
+## See also
+
+- [`Actions`](/en/v0/api/actions) - for ready-to-use interactions on components.
+- [`Component`](/en/v0/api/component) - to define the elements the assertions apply to.
+- [`Component Interaction`](/en/v0/api/componentInteraction) - to create custom checks if the provided assertions are not enough.