Skip to content

Commit 22de59a

Browse files
committed
docs: add barebones architecture documentation
- Add comprehensive contributor documentation - Document 1st-gen vs 2nd-gen split and migration paths - Include component migration step-by-step guides - Add project planning and workstream documentation - Document release processes and testing strategies
1 parent 812c27c commit 22de59a

File tree

2,068 files changed

+3149
-272056
lines changed

Some content is hidden

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

2,068 files changed

+3149
-272056
lines changed
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!-- Generated breadcrumbs - DO NOT EDIT -->
2+
3+
[CONTRIBUTOR-DOCS](../README.md) / [Contributor guides](README.md) / Getting involved
4+
5+
<!-- Document title (editable) -->
6+
7+
# Getting involved
8+
9+
<!-- Generated TOC - DO NOT EDIT -->
10+
11+
<details open>
12+
<summary><strong>In this doc</strong></summary>
13+
14+
- [Welcome](#welcome)
15+
- [Community & support](#community--support)
16+
- [External contributors](#external-contributors)
17+
- [Internal contributors](#internal-contributors)
18+
- [How you can contribute](#how-you-can-contribute)
19+
- [Contributor license agreement](#contributor-license-agreement)
20+
- [Code of conduct](#code-of-conduct)
21+
- [Developing locally](#developing-locally)
22+
- [Thank you](#thank-you)
23+
24+
</details>
25+
26+
<!-- Document content (editable) -->
27+
28+
## Welcome
29+
30+
Welcome! We're excited you're interested in improving Spectrum Web Components. Whether you're reporting bugs, adding new features, writing documentation, or helping other users, your contributions make this project better for everyone.
31+
32+
Here you'll find a broad overview of how you can get involved. Please read through these guidelines to help keep the contribution process smooth and to ensure we're all on the same page.
33+
34+
## Community & support
35+
36+
A fantastic first step to contributing is filing an issue. This is where you can:
37+
38+
- Ask questions, file bugs, and troubleshoot with other users.
39+
- Propose new features and ideas or get feedback on your own through a linked pull request.
40+
- Additionally, you can check GitHub Discussions to stay up-to-date with any major announcements about the project.
41+
42+
### External contributors
43+
44+
**Adobe Employees, read Internal contributors section below.**
45+
If you need support or have a question about how something works, filing an issue is the best place to start. A team member will be in touch to either triage your issue or follow-up with you in the comments.
46+
47+
### Internal contributors
48+
49+
If you work for Adobe, our Slack channel #spectrum_web_components has some great workflows to get you started. Be sure to read the Welcome Canvas when you join.
50+
51+
---
52+
53+
## How you can contribute
54+
55+
There's a common misconception that you need to code in order to contribute. In reality, there are many different ways to help:
56+
57+
- Filing well-structured bug reports that show what's broken and how to reproduce it.
58+
- Suggesting new features that improve the current design system.
59+
- Improving our documentation to make it clearer for the next person.
60+
- Reviewing pull requests from other community members and sharing feedback.
61+
- Helping other users on GitHub Discussions.
62+
- Advocating for the project on social media or at meetups.
63+
64+
Of course, contributing code is also welcome, from fixing a bug to building a brand-new component. All types of contributions help keep Spectrum Web Components thriving.
65+
66+
---
67+
68+
## Contributor license agreement
69+
70+
We require all external contributors to sign our [Contributor License Agreement](https://opensource.adobe.com/cla.html) (CLA). If you haven't signed it before making your first contribution, please do so—otherwise, we can't merge your changes.
71+
72+
---
73+
74+
## Code of conduct
75+
76+
Spectrum Web Components abides by the [Adobe Code of Conduct](../../CODE_OF_CONDUCT.md). By participating, you agree to treat all community members kindly and respectfully. We're committed to fostering a welcoming, inclusive environment.
77+
Should any behavior fall short of these expectations, please report it to <Grp-opensourceoffice@adobe.com>.
78+
79+
---
80+
81+
## Developing locally
82+
83+
Read the steps outlined in the [README.md](../README.md) to get your environment set up.
84+
85+
If you encounter hurdles, feel free to ask for help in your pull request or in the community forum.
86+
87+
---
88+
89+
## Thank you
90+
91+
We appreciate everyone who invests time, energy, and expertise into Spectrum Web Components. Your contributions—big or small—help this library evolve to serve a broader audience and remain at a high standard of quality.
92+
93+
If you have any suggestions for improving these guidelines, feel free to open a pull request or bring it up in our community discussions. We're always eager to make the contribution experience better.
94+
95+
Happy contributing!
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!-- Generated breadcrumbs - DO NOT EDIT -->
2+
3+
[CONTRIBUTOR-DOCS](../README.md) / [Contributor guides](README.md) / Using the issue tracker
4+
5+
<!-- Document title (editable) -->
6+
7+
# Using the issue tracker
8+
9+
<!-- Generated TOC - DO NOT EDIT -->
10+
11+
<details open>
12+
<summary><strong>In this doc</strong></summary>
13+
14+
- [Before creating a new issue](#before-creating-a-new-issue)
15+
- [Filing a bug report](#filing-a-bug-report)
16+
- [Classifying issue severity](#classifying-issue-severity)
17+
- [Requesting a feature or a new component](#requesting-a-feature-or-a-new-component)
18+
19+
</details>
20+
21+
<!-- Document content (editable) -->
22+
23+
We use GitHub Issues for two purposes:
24+
25+
1. Bug Reports
26+
2. Feature Requests (after initial discussion)
27+
28+
If you're having a usage issue or need support, do not open an issue. Instead, reference the Community & Support section. This helps us keep issues focused on actual bugs and actionable tasks.
29+
30+
## Before creating a new issue
31+
32+
1. Check the [Open Issues](https://github.com/adobe/spectrum-web-components/issues) to see if the problem has already been reported.
33+
- TIP: Apply the component label to make your search process more straightforward.
34+
2. If it has and the issue is still open, add a comment to the existing issue instead of opening a new one.
35+
3. Check if you can reproduce the problem in the latest version of Spectrum Web Components by forking a code example in [Stackblitz](https://stackblitz.com/orgs/custom/SWC-Team/collections/spectrum-web-components).
36+
4. If there are no related open issues and it is reproducible in isolation, then open a [Bug Report](https://github.com/adobe/spectrum-web-components/issues/new?template=bug_report.yaml).
37+
38+
## Filing a bug report
39+
40+
When you file a bug, please use the `Bug Report` template provided in GitHub. Include the following information:
41+
42+
- A concise summary of the problem.
43+
- Relevant components involved in the issue.
44+
- Issue Severity based on our classifications defined below.
45+
- What you expected vs. what actually happened, along with any errors logged in the console.
46+
- Steps to reproduce the issue, preferably in an isolated environment, so that we can narrow down where the bug is originating from, preferably by forking an example from our [Stackblitz project](https://stackblitz.com/orgs/custom/SWC-Team/collections/spectrum-web-components). Be detailed if you write out the steps!
47+
- Relevant environment details (OS, browser, library version).
48+
49+
Clear bug reports speed up the triage process, help us replicate the issue, and keep the project robust.
50+
51+
## Classifying issue severity
52+
53+
Providing the correct issue severity classification helps us adequately assess and prioritize your issue. We reserve the right to adjust the severity of your bug during triage.
54+
Below is our issue severity classification criteria:
55+
56+
| Severity level | Description | Examples |
57+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
58+
| 🔥 SEV 1 | A critical design or functionality issue that breaks the design system, causes significant usability problems, or exposes critical security vulnerabilities. This issue impacts all users and/or essential workflows, making users unable to complete any tasks. Requires immediate attention. | Broken navigation system, complete unresponsiveness on all devices, components not rendering, inaccessible primary actions, security vulnerabilities.<br><br>Accessibility: The end user is not able to complete core tasks or activities (e.g., key navigational elements not accessible via keyboard, missing or incorrect form labels that prevent screen reader users from completing forms or actions, critical color contrast issues that prevent users from reading or interacting with essential content). |
59+
| 🔴 SEV 2 | A significant problem affecting the design, usability, or functionality of the system or components for a subset of users. This issue causes major disruptions and prevent users from completing tasks or workflows.<br><br>Accessibility: Does not conform with WCAG 2.1 Level AA criteria and blocks core user tasks (no known workaround). | Content that is out of view or unreachable by customers, critical buttons or links not functioning, or actions that cannot be submitted. Unintentional breaking changes causing disruptions in production environments.<br><br>Accessibility: Issue with a component or controller with widespread use and blocks core user tasks (no known workaround). |
60+
| 🟠 SEV 3 | A design or functionality issue that causes noticeable errors or minor usability problems for users which either cause confusion or degrade the user experience, but do not prevent task completion.<br><br>Accessibility: Does not conform with WCAG 2.1 Level AA criteria and is either non-blocking for core user tasks or blocking for non-core user tasks. | Misleading labels, inconsistent component behavior, unexpected interactions, decreases in system performance.<br><br>Accessibility: Workarounds are available and discoverable for the end user to complete core user tasks, or the end user is not able to complete non-core user tasks (e.g., inadequate ARIA labels, improper focus management, insufficient color contrast for non-critical elements). |
61+
| 🟡 SEV 4 | A minor design flaw that affects user experience, but doesn't have a serious impact on overall usability or functionality. This issue does not prevent users from completing tasks.<br><br>Accessibility: Does not conform with WCAG 2.1 Level AA criteria but has lower user impact. | Minor visual inconsistencies, non-critical content misalignment, or minor layout issues.<br><br>Accessibility: A WCAG violation is present in areas not frequently visited by end users, or it has a lower impact on overall accessibility and usability. |
62+
| 🟢 SEV 5 | A low-level design inconsistency or minor issue that slightly affects usability or aesthetics, with minimal impact on users. | Slight color deviations, minor typographical errors, or small spacing inconsistencies that do not impact functionality. |
63+
64+
## Requesting a feature or a new component
65+
66+
Is there something you wish the project did differently? Have a new component in mind? We love hearing new ideas and are eager to collaborate!
67+
68+
- Start with a discussion: Share your idea in Discussions to gather feedback and see if it aligns with project goals.
69+
- Open a feature request issue: After some positive initial conversation, open an issue using the `Feature Request` or `New Component` template with details and potential use cases.
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!-- Generated breadcrumbs - DO NOT EDIT -->
2+
3+
[CONTRIBUTOR-DOCS](../README.md) / [Contributor guides](README.md) / Working in the SWC repo
4+
5+
<!-- Document title (editable) -->
6+
7+
# Working in the SWC repo
8+
9+
<!-- Generated TOC - DO NOT EDIT -->
10+
11+
<details open>
12+
<summary><strong>In this doc</strong></summary>
13+
14+
- [About this guide](#about-this-guide)
15+
- [Getting started](#getting-started)
16+
- [Prerequisites](#prerequisites)
17+
- [Installation](#installation)
18+
- [Repository structure](#repository-structure)
19+
- [Development workflow](#development-workflow)
20+
- [Developing](#developing)
21+
- [Testing](#testing)
22+
- [Linting](#linting)
23+
- [Building](#building)
24+
- [Command reference](#command-reference)
25+
26+
</details>
27+
28+
<!-- Document content (editable) -->
29+
30+
## About this guide
31+
32+
This guide covers the essential information you need to work effectively in the Spectrum Web Components (SWC) repository.
33+
34+
## Getting started
35+
36+
### Prerequisites
37+
38+
Before you begin, ensure you have the following installed:
39+
40+
- **Node.js**: Version 20.10.0 or higher (check with `node --version`)
41+
- **Yarn**: Version 4.6.0 or higher (check with `yarn --version`)
42+
- **Git**: For version control (check with `git --version`)
43+
44+
### Installation
45+
46+
1. Clone the repository:
47+
48+
```bash
49+
git clone https://github.com/adobe/spectrum-web-components.git
50+
```
51+
52+
2. Install dependencies:
53+
54+
```bash
55+
cd spectrum-web-components
56+
yarn install
57+
```
58+
59+
## Repository structure
60+
61+
SWC is currently in transition from its first generation (**1st-gen**) to its second generation (**2nd-gen**).
62+
63+
> This transition is motivated by some important strategic goals. For more information, see [Objectives and Strategy](../03_project-planning/01_objectives-and-strategy.md).
64+
65+
Instead of creating a separate branch or repo for 2nd-gen, we are working on the 1st-gen and 2nd-gen projects side-by-side in this repository, with some core functionality being shared between 1st- and 2nd-gen components. This strategy makes it easier for us to continue actively improving and supporting 1st-gen even as we devote much of our attention to defining and building 2nd-gen.
66+
67+
Reflecting the side-by-side strategy, the repository is organized into two top-level workspaces:
68+
69+
- **`1st-gen/`** contains all of the 1st-gen packages, tooling, and supporting materials.
70+
71+
Most of what lives here will be left behind in the transition to 2nd-gen; the core component functionality we'll carry forward is gradually being moved into the `2nd-gen` workspace.
72+
73+
While we'll continue doing work in `1st-gen` as needed to accomplish our goals, we expect this work to decrease steadily toward none.
74+
75+
- **`2nd-gen/`** is a new workspace that we're building from the ground up to serve as a clean foundation for our future work. It includes:
76+
- A Core library (`packages/core/`), which contains the functionality shared between 1st- and 2nd-gen
77+
78+
- The 2nd-gen SWC library (`packages/swc/`).
79+
80+
During this transition, depending on what you're trying to accomplish, you may end up working in `1st-gen`, `2nd-gen`, or both. If you have any questions, [please ask](./01_getting-involved.md#community--support)—we're happy to help.
81+
82+
## Development workflow
83+
84+
The project's top-level `package.json` file defines [several commands](#command-reference) that can be run from the repository root, covering the most important parts of the development workflow.
85+
86+
> By default, each command is run in both the 1st-gen and 2nd-gen workspaces, but you can add a `:1st-gen` or `:2nd-gen` suffix to any command to run it for only one workspace.
87+
88+
### Developing
89+
90+
We use Storybook to interact with and test components as we develop them, as well as to document components and demonstrate usage patterns for our customers. There are separate Storybooks for 1st- and 2nd-gen.
91+
92+
**To start Storybook:**
93+
94+
```bash
95+
yarn start
96+
```
97+
98+
This command launches Storybook for both 1st- and 2nd-gen and opens a browser tab for each.
99+
100+
### Testing
101+
102+
**To run all tests:**
103+
104+
```bash
105+
yarn test
106+
```
107+
108+
### Linting
109+
110+
The linter runs before each commit, but you can also run it manually.
111+
112+
**To check for linting issues:**
113+
114+
```bash
115+
yarn lint
116+
```
117+
118+
### Building
119+
120+
You should rarely need to trigger build explicitly, but you can do so as necessary.
121+
122+
**To build all packages:**
123+
124+
```bash
125+
yarn build
126+
```
127+
128+
## Command reference
129+
130+
Here are the most frequently used commands available from the repository root:
131+
132+
| Command | Description |
133+
| -------------------- | -------------------------------------------- |
134+
| `yarn start` | Start Storybook for both 1st-gen and 2nd-gen |
135+
| `yarn start:1st-gen` | Start Storybook for 1st-gen only |
136+
| `yarn start:2nd-gen` | Start Storybook for 2nd-gen only |
137+
| `yarn test` | Run tests for both 1st-gen and 2nd-gen |
138+
| `yarn test:1st-gen` | Run tests for 1st-gen only |
139+
| `yarn test:2nd-gen` | Run tests for 2nd-gen only |
140+
| `yarn lint` | Check for linting issues (staged files) |
141+
| `yarn lint:1st-gen` | Check for linting issues in 1st-gen only |
142+
| `yarn lint:2nd-gen` | Check for linting issues in 2nd-gen only |
143+
| `yarn build` | Build all packages (2nd-gen then 1st-gen) |
144+
| `yarn build:1st-gen` | Build 1st-gen packages only |
145+
| `yarn build:2nd-gen` | Build 2nd-gen packages only |
146+
147+
For more specific workflows and advanced topics, refer to the other contributor guides.

0 commit comments

Comments
 (0)