Skip to content

Commit 46aee02

Browse files
rumenpetrovrumenpetrov
committed
Flatten commit history, initial setup
1 parent 67ed5f3 commit 46aee02

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)