Skip to content

Commit 9ccd740

Browse files
rubencarvalhorubencarvalho
committed
feat: scaffold 2nd-gen workspace with components and tooling
- Create 2nd-gen workspace with separate package.json - Add @spectrum-web-components/core package with shared base classes - Implement 2nd-gen components: asset, alert-banner, divider, progress-circle, status-light, report-abuse-button - Add @adobe/swc aggregator package - Configure Vite-based Storybook for Spectrum 2 - Set up Vitest and Playwright testing infrastructure - Add TypeScript path mappings for cross-generation imports
1 parent 3f59630 commit 9ccd740

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+15667
-0
lines changed

‎2nd-gen/.eslintrc.json‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
"node": true
6+
},
7+
"extends": [
8+
"eslint:recommended",
9+
"plugin:@typescript-eslint/recommended",
10+
"plugin:prettier/recommended",
11+
"plugin:lit-a11y/recommended"
12+
],
13+
"ignorePatterns": ["**/dist/**"],
14+
"overrides": [
15+
{
16+
"extends": ["plugin:jsonc/recommended-with-jsonc"],
17+
"files": ["*.json"],
18+
"parser": "jsonc-eslint-parser",
19+
"rules": {
20+
"jsonc/sort-keys": ["warn"],
21+
"notice/notice": "off"
22+
}
23+
},
24+
{
25+
"extends": ["plugin:jsonc/recommended-with-jsonc"],
26+
"files": ["package.json"],
27+
"parser": "jsonc-eslint-parser",
28+
"rules": {
29+
"jsonc/sort-keys": [
30+
"warn",
31+
{
32+
"hasProperties": ["type"],
33+
"order": [
34+
"$schema",
35+
"name",
36+
"version",
37+
"private",
38+
"description",
39+
"license",
40+
"author",
41+
"maintainers",
42+
"contributors",
43+
"homepage",
44+
"repository",
45+
"bugs",
46+
"type",
47+
"exports",
48+
"main",
49+
"module",
50+
"browser",
51+
"man",
52+
"preferGlobal",
53+
"bin",
54+
"files",
55+
"directories",
56+
"scripts",
57+
"config",
58+
"sideEffects",
59+
"types",
60+
"typings",
61+
"workspaces",
62+
"resolutions",
63+
"dependencies",
64+
"bundleDependencies",
65+
"bundledDependencies",
66+
"peerDependencies",
67+
"peerDependenciesMeta",
68+
"optionalDependencies",
69+
"devDependencies",
70+
"keywords",
71+
"engines",
72+
"engineStrict",
73+
"os",
74+
"cpu",
75+
"publishConfig"
76+
],
77+
"pathPattern": "^$" // Top-level properties
78+
},
79+
{
80+
/*
81+
* This rule excludes export conditions from alphabetical sorting.
82+
* Since node.js processes export conditions in order and chooses the
83+
* first match, they need to be ordered logically, not alphabetically.
84+
*/
85+
"order": { "type": "asc" },
86+
"pathPattern": "^(?!exports\\[).*" // All properties except export conditions
87+
}
88+
]
89+
}
90+
},
91+
{
92+
"files": ["scripts/*"],
93+
"rules": {
94+
"no-console": ["off"]
95+
}
96+
},
97+
{
98+
"files": ["react/**/*.ts"],
99+
"rules": {
100+
"@typescript-eslint/no-explicit-any": "off"
101+
}
102+
}
103+
],
104+
"parser": "@typescript-eslint/parser",
105+
"parserOptions": {
106+
"ecmaVersion": "latest",
107+
"sourceType": "module"
108+
},
109+
"plugins": [
110+
"@typescript-eslint",
111+
"notice",
112+
"@spectrum-web-components",
113+
"import",
114+
"simple-import-sort"
115+
],
116+
"rules": {
117+
"@spectrum-web-components/prevent-argument-names": [
118+
"error",
119+
["e", "ev", "evt", "err"]
120+
],
121+
"curly": ["error", "all"],
122+
"import/extensions": [
123+
"error",
124+
"ignorePackages",
125+
{
126+
"js": "always",
127+
"ts": "never"
128+
}
129+
],
130+
"import/prefer-default-export": "off",
131+
"lit-a11y/click-events-have-key-events": ["error"],
132+
"no-console": [
133+
"error",
134+
{
135+
"allow": ["warn", "error"]
136+
}
137+
],
138+
"no-debugger": 2,
139+
"simple-import-sort/imports": [
140+
"error",
141+
{
142+
"groups": [
143+
[
144+
"^lit",
145+
"^@lit",
146+
"^(?!@adobe/swc|@spectrum-web-components)@?\\w"
147+
],
148+
["^@adobe/swc", "^@spectrum-web-components"],
149+
["^\\u0000"],
150+
["^\\."],
151+
["^.+\\.(css|scss|sass|less|styl)$"]
152+
]
153+
}
154+
]
155+
}
156+
}

‎2nd-gen/README.md‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Spectrum Web Components - Second Generation
2+
3+
This folder contains the second generation of Spectrum Web Components.
4+
5+
## Architecture Overview
6+
7+
The 2nd generation follows a dual-package architecture:
8+
9+
- **`packages/core/`** - Abstract base classes providing common functionality
10+
- **`packages/swc/`** - Concrete component implementations with styling and stories
11+
12+
## Components
13+
14+
The following components are available in the barebones milestone:
15+
16+
- ...
17+
18+
## Tooling Stack
19+
20+
### Build System
21+
22+
- **Vite**
23+
- **TypeScript**
24+
25+
### Development & Testing
26+
27+
- **Storybook v9** - Component development with Web Components + Vite framework
28+
- **Vitest** - Fast testing with browser mode and Playwright integration
29+
- **Playwright** - End-to-end testing and accessibility validation
30+
31+
### Code Quality
32+
33+
- **ESLint** - Code linting with TypeScript support
34+
- **Prettier** - Code formatting
35+
- **Accessibility** - Built-in a11y testing with axe-core
36+
37+
## Getting Started
38+
39+
### Installation
40+
41+
```bash
42+
# Install dependencies
43+
yarn install
44+
45+
# Build packages
46+
yarn build
47+
```
48+
49+
### Development
50+
51+
```bash
52+
# Start Storybook for component development
53+
yarn storybook
54+
55+
# Run tests
56+
yarn test
57+
58+
# Build all packages
59+
yarn build
60+
```
61+
62+
### Project Structure
63+
64+
```
65+
2nd-gen/
66+
├── packages/
67+
│ ├── base/ # Abstract base classes
68+
│ │ └── components/
69+
│ │ ├── alert/
70+
│ │ ├── badge/
71+
│ │ ├── button/
72+
│ │ ├── divider/
73+
│ │ ├── progress-bar/
74+
│ │ └── slider/
75+
│ └── swc/ # Concrete implementations
76+
│ ├── .storybook/ # Storybook configuration
77+
│ └── components/
78+
│ ├── alert/
79+
│ │ ├── Alert.ts
80+
│ │ ├── styles.css.js
81+
│ │ ├── stories/
82+
│ │ ├── test/
83+
│ │ └── README.md
84+
│ └── ... (other components)
85+
├── vitest.config.js # Test configuration
86+
├── playwright.config.js # E2E test configuration
87+
└── tsconfig.json # TypeScript configuration
88+
```
89+
90+
## Component Development
91+
92+
### Creating a New Component
93+
94+
1. **Base Class**: Create base class in `packages/core/components/`
95+
2. **Implementation**: Create concrete rendering implementation in `packages/swc/components/`
96+
3. **Styles**: TBD (WIP)
97+
4. **Stories**: Create Storybook stories (CSF) for development and documentation
98+
5. **Tests**: Add Vitest tests for functionality and accessibility
99+
100+
### Component Structure
101+
102+
Each component follows this structure:
103+
104+
```
105+
component-name/
106+
├── index.ts # Main export
107+
├── ComponentName.ts # Implementation
108+
├── styles.css.js # Styling
109+
├── stories/
110+
│ └── ComponentName.stories.ts
111+
├── test/
112+
│ └── ComponentName.test.ts
113+
└── README.md # Component documentation
114+
```
115+
116+
## Testing Strategy
117+
118+
WIP
119+
120+
## Build Outputs
121+
122+
WIP
123+
124+
Each package produces:
125+
126+
- **ESM modules** targeting ES2022
127+
- **TypeScript declarations** (.d.ts files)
128+
- **Source maps** for debugging
129+
- **Tree-shakable exports** for optimal bundle sizes
130+
131+
## Design Principles
132+
133+
## Migration from 1st Generation
134+
135+
The 2nd generation is designed to coexist with the 1st generation during the transition period. Components can be migrated incrementally as needed.
136+
137+
## Contributing
138+
139+
WIP
140+
141+
### Code Standards
142+
143+
WIP, example ideas below:
144+
145+
- Follow existing component patterns
146+
- Include comprehensive tests
147+
- Document public APIs
148+
- Use semantic commit messages
149+
150+
## Future Roadmap
151+
152+
The barebones milestone establishes the foundation. Future iterations will add:
153+
154+
- Additional components
155+
- Advanced accessibility features
156+
- Enhanced developer tooling
157+
- Visual regression testing
158+
- React wrapper generation
159+
- ...

‎2nd-gen/package.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@spectrum-web-components/2nd-gen",
3+
"version": "0.0.1",
4+
"private": true,
5+
"description": "Second generation Spectrum Web Components with modern tooling and architecture",
6+
"license": "Apache-2.0",
7+
"author": "Adobe",
8+
"homepage": "https://opensource.adobe.com/spectrum-web-components/",
9+
"repository": {
10+
"directory": "2nd-gen",
11+
"type": "git",
12+
"url": "https://github.com/adobe/spectrum-web-components.git"
13+
},
14+
"bugs": {
15+
"url": "https://github.com/adobe/spectrum-web-components/issues"
16+
},
17+
"type": "module",
18+
"scripts": {
19+
"build": "yarn workspaces foreach --from '{@spectrum-web-components/core,@adobe/swc}' --recursive run build",
20+
"clean": "yarn workspaces foreach --from '{@spectrum-web-components/core,@adobe/swc}' --recursive run clean",
21+
"lint": "eslint . --ext .ts,.js,.json",
22+
"start": "yarn workspace @spectrum-web-components/core dev & yarn workspace @adobe/swc analyze:watch & yarn workspace @adobe/swc storybook",
23+
"storybook:build": "yarn workspace @adobe/swc storybook:build",
24+
"test": "yarn workspace @adobe/swc test"
25+
},
26+
"workspaces": [
27+
"packages/*"
28+
],
29+
"devDependencies": {
30+
"eslint": "8.57.1",
31+
"eslint-plugin-simple-import-sort": "12.1.1"
32+
},
33+
"keywords": [
34+
"design-system",
35+
"spectrum",
36+
"adobe",
37+
"adobe-spectrum",
38+
"web components",
39+
"web-components",
40+
"lit-element",
41+
"lit-html",
42+
"2nd-gen"
43+
],
44+
"engines": {
45+
"node": ">=20",
46+
"yarn": ">=4.6.0"
47+
},
48+
"packageManager": "[email protected]"
49+
}

0 commit comments

Comments
 (0)