@faststore/components 4.1.0-dev.3 → 4.1.0-dev.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<a href="https://faststore
|
|
2
|
+
<a href="https://developers.vtex.com/docs/guides/faststore">
|
|
3
3
|
<img alt="Faststore" src="../ui/static/logo.png" width="60" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
@@ -8,15 +8,95 @@
|
|
|
8
8
|
</h1>
|
|
9
9
|
<p align="center">
|
|
10
10
|
<strong>
|
|
11
|
-
|
|
11
|
+
FastStore UI components without a style layer
|
|
12
12
|
</strong>
|
|
13
13
|
</p>
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
<img src="https://badge.fury.io/js/%40faststore%2Fui.svg" />
|
|
18
|
-
</a>
|
|
19
|
-
<a href="https://bundlephobia.com/package/@faststore/components" style="padding: 0px 0px 0px 2px">
|
|
20
|
-
<img src="https://badgen.net/bundlephobia/dependency-count/@faststore/components" />
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://www.npmjs.com/package/@faststore/components">
|
|
16
|
+
<img src="https://badge.fury.io/js/%40faststore%2Fcomponents.svg" alt="npm version" />
|
|
21
17
|
</a>
|
|
22
|
-
</
|
|
18
|
+
</p>
|
|
19
|
+
|
|
20
|
+
`@faststore/components` provides the structure, logic, and accessibility of FastStore UI components — without any styling. It organizes the components into atoms, molecules, and organisms.
|
|
21
|
+
|
|
22
|
+
Styling is handled separately by `@faststore/ui`, which consumes this package and applies design tokens and structural SCSS on top of the data attributes defined here.
|
|
23
|
+
|
|
24
|
+
## Package structure
|
|
25
|
+
|
|
26
|
+
```text
|
|
27
|
+
src/
|
|
28
|
+
├── atoms/ # Basic building blocks (Button, Input, Badge, Icon, etc.)
|
|
29
|
+
├── molecules/ # Composite components (Accordion, CartItem, ProductCard, etc.)
|
|
30
|
+
├── organisms/ # Complex feature components (Hero, Filter, ProductShelf, etc.)
|
|
31
|
+
├── hooks/ # UI state hooks (useSlider, useSearch, useTrapFocus, etc.)
|
|
32
|
+
├── typings/ # Shared TypeScript types
|
|
33
|
+
└── index.ts # Public exports
|
|
34
|
+
test/
|
|
35
|
+
└── molecules/ # Component tests (incomplete — see note below)
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
> **Note:** Test coverage is currently incomplete. Tests should live in `test/{category}/{ComponentName}/` for all atoms, molecules, and organisms. Contributions adding missing test coverage are welcome.
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## How to run
|
|
42
|
+
|
|
43
|
+
### Prerequisites
|
|
44
|
+
|
|
45
|
+
- Node.js ≥ 20
|
|
46
|
+
- pnpm
|
|
47
|
+
|
|
48
|
+
### Local setup
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
# 1. Install dependencies (from the repo root)
|
|
52
|
+
pnpm install
|
|
53
|
+
|
|
54
|
+
# 2. Start the build in watch mode
|
|
55
|
+
pnpm dev
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## How to develop
|
|
59
|
+
|
|
60
|
+
### Adding a new component
|
|
61
|
+
|
|
62
|
+
1. **Categorize** the component: atom, molecule, or organism
|
|
63
|
+
2. **Create** `src/{category}/{ComponentName}/{ComponentName}.tsx` and `index.ts`
|
|
64
|
+
3. **Use data attributes** for styling hooks — no style imports in this package:
|
|
65
|
+
```tsx
|
|
66
|
+
<div
|
|
67
|
+
data-fs-badge // root identifier
|
|
68
|
+
data-fs-badge-size={size} // state attribute
|
|
69
|
+
>
|
|
70
|
+
{children}
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
4. **Export** from `src/index.ts`
|
|
74
|
+
5. **Add styles** in `@faststore/ui` using the data attributes as selectors
|
|
75
|
+
6. **Write tests** in `test/{category}/{ComponentName}/`
|
|
76
|
+
|
|
77
|
+
> For the full implementation checklist (accessibility, props interface, composability guidelines), refer to the [Component Implementation Guidelines](../../AGENTS.md#-faststore-components-implementation-guidelines) in `AGENTS.md`.
|
|
78
|
+
|
|
79
|
+
### Data attribute naming convention
|
|
80
|
+
|
|
81
|
+
| Context | Pattern | Example |
|
|
82
|
+
| :--- | :--- | :--- |
|
|
83
|
+
| Root element | `data-fs-{component}` | `data-fs-badge` |
|
|
84
|
+
| Internal structure | `data-fs-{component}-{part}` | `data-fs-badge-wrapper` |
|
|
85
|
+
| State | `data-fs-{component}-{state}={value}` | `data-fs-button-variant="primary"` |
|
|
86
|
+
|
|
87
|
+
## How to test
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
pnpm test
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
For interactive visual testing, use Storybook. Run `pnpm dev` from `packages/storybook/` to launch it.
|
|
94
|
+
|
|
95
|
+
## How to publish
|
|
96
|
+
|
|
97
|
+
Versioning and publishing are managed at the monorepo root by Lerna. Do not publish this package independently. Refer to the [Contributing guidelines](../../CONTRIBUTING.MD) for the full release workflow.
|
|
98
|
+
|
|
99
|
+
## Documentation
|
|
100
|
+
|
|
101
|
+
- **Component reference:** [developers.vtex.com/docs/guides/faststore/components-index](https://developers.vtex.com/docs/guides/faststore/components-index)
|
|
102
|
+
- **Implementation guidelines:** [`AGENTS.md`](../../AGENTS.md#-faststore-components-implementation-guidelines)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "4.1.0-dev.
|
|
3
|
+
"version": "4.1.0-dev.4",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/es/index.mjs",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"publishConfig": {
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "7d9d73ad6c722cb82e0a6a914a0556bfee765df8"
|
|
60
60
|
}
|