Skip to content

Commit 45e332d

Browse files
Rumen Petrovrumenpetrov
Rumen Petrov
authored and
rumenpetrov
committed
Initial setup, flatten commit history
Add objectives Update Add Vite and Storybook setup, develop the initial page structure and add demo component Mark current components as WIP Add Chromatic Work on anatomy Initial CI setup for GH-pages deployment CI setup alternative approach CI permissions CI reduce permissions CI alternative setup Use relative path for logo in mdx file Move logo to assets Try logo import Clear out the use case and the scope, improve anatomy elements Add WIP working Update target branch name in CI script Document component contribution process Clean up the demo components Create LICENSE Create CONTRIBUTING.md Tweak contribution docs
1 parent 67ed5f3 commit 45e332d

31 files changed

+12431
-2
lines changed

‎.editorconfig

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# http://editorconfig.org
4+
5+
root = true
6+
7+
[*]
8+
9+
# Change these settings to your own preference
10+
indent_style = space
11+
indent_size = 2
12+
13+
# We recommend you to keep these unchanged
14+
end_of_line = lf
15+
charset = utf-8
16+
trim_trailing_whitespace = true
17+
insert_final_newline = true
18+
19+
# editorconfig-tools is unable to ignore longs strings or urls
20+
max_line_length = 80

‎.github/workflows/deploy-github-pages.yaml

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Simple workflow for deploying static content to GitHub Pages
2+
name: Deploy to GitHub Pages
3+
4+
on:
5+
# Runs on pushes targeting the default branch
6+
push:
7+
branches: ["main"]
8+
9+
# Allows you to run this workflow manually from the Actions tab
10+
workflow_dispatch:
11+
12+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20+
concurrency:
21+
group: "pages"
22+
cancel-in-progress: false
23+
24+
jobs:
25+
# Single deploy job since we're just deploying
26+
deploy:
27+
environment:
28+
name: github-pages
29+
url: ${{ steps.deployment.outputs.page_url }}
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v3
34+
- run: npm ci
35+
- run: npm run build-storybook
36+
- name: Setup Pages
37+
uses: actions/configure-pages@v3
38+
- name: Upload artifact
39+
uses: actions/upload-pages-artifact@v2
40+
with:
41+
path: "./storybook-static"
42+
- name: Deploy to GitHub Pages
43+
id: deployment
44+
uses: actions/deploy-pages@v2

‎.gitignore

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Storybook
27+
storybook-static

‎.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
docs/
2+
.github
3+
.storybook
4+
*.mdx
5+
*.test.ts

‎.storybook/main.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { StorybookConfig } from "@storybook/web-components-vite";
2+
3+
const config: StorybookConfig = {
4+
stories: [
5+
"../docs/**/*.mdx",
6+
"../src/**/*.mdx",
7+
"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
8+
],
9+
addons: [
10+
"@storybook/addon-links",
11+
"@storybook/addon-essentials",
12+
"@chromatic-com/storybook",
13+
],
14+
framework: {
15+
name: "@storybook/web-components-vite",
16+
options: {},
17+
},
18+
docs: {
19+
autodocs: "tag",
20+
},
21+
};
22+
export default config;

‎.storybook/preview.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { Preview } from "@storybook/web-components";
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
options: {
12+
// https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
13+
storySort: {
14+
method: 'alphabetical',
15+
order: ['Welcome', 'Foundations', ['Design principles', 'Design tokens'], 'Web', ['Get started', 'CSS variables', '*'], '*', 'Guides', 'Contribution'],
16+
},
17+
},
18+
},
19+
};
20+
21+
export default preview;

‎CONTRIBUTING.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Contribution
2+
3+
## Component contribution process
4+
https://rumenpetrov.github.io/waft-design-system/?path=/docs/contribution-component--docs

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Rumen Petrov
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+57-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,57 @@
1-
# waft-design-system
2-
[WIP] Simple design system example
1+
# Waft design system
2+
3+
> ⚠️ Warning: This project is meant primary for learning and currently is in work in progress state. Expect breaking changes.
4+
5+
All-purpose design system, meant to be used in small to medium, framework or non-framework projects, where using something simple and non-intrusive is valued more than customizability and high amount of options.
6+
Its primary targeted to developers building an application for learning a new technology or something which doesn't require flashy looks.
7+
Web is the main supported platform but the system allows easier extension with more platforms.
8+
9+
### Objectives
10+
* Phase MVP
11+
* [x] Define and setup initial structure and tooling
12+
* [x] Analyze and describe the use case and the scope of the design system which will be developed
13+
* [x] Target Audience
14+
* [x] Use Cases
15+
* [x] Define Supported Platforms
16+
* [x] Establish Design Principles
17+
* [x] Catalog Components
18+
* [x] Explain customization level and how styling could be done
19+
* [ ] Define anatomy elements and collect resources
20+
* [x] Core values/Principles
21+
* [ ] Define initial tokens
22+
* [ ] Define initial systems, if needed
23+
* [x] Define initial components
24+
* [x] Add some guides
25+
* [ ] Setup npm package and document how it should be used
26+
* [x] Auto deployment script
27+
* [x] Add docs for at least one process - component contribution
28+
* [ ] Develop at least one component from the MVP list by following a process
29+
30+
* Phase Next
31+
* [ ] Define and describe versioning
32+
* [ ] More Design principles - Adaptive/Responsive/Accessibility
33+
* [ ] Setup Chromatic with CI
34+
* [ ] Add metrics - e.g. accessibility threshold
35+
* [ ] Setup tests
36+
* [ ] Make it more engaging - colors, gradients, animations
37+
* [ ] Light/dark theme
38+
* [ ] SSR components support
39+
40+
#### Inspiration
41+
* https://design-system.service.gov.uk/
42+
* https://baklava.design/
43+
* https://material-web.dev/about/intro/
44+
* https://www.fast.design/
45+
* https://m3.material.io/
46+
* https://fluent2.microsoft.design/
47+
* https://polaris.shopify.com/
48+
* https://mailchimp.com/design/
49+
* https://carbondesignsystem.com/
50+
* https://nordhealth.design/
51+
* https://vaadin.com/design-system
52+
53+
#### Technology stack
54+
* [Lit](https://lit.dev/)
55+
* [ViteJS](https://vitejs.dev/)
56+
* [Storybook](https://storybook.js.org/)
57+
* [Chromatic](https://www.chromatic.com/)

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Lit + TS</title>
8+
<link rel="stylesheet" href="./src/index.css" />
9+
<script type="module" src="/src/components/my-element/my-element.ts"></script>
10+
</head>
11+
<body>
12+
<my-element>
13+
<h1>Vite + Lit</h1>
14+
</my-element>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)