Skip to content

Commit 504bb36

Browse files
author
Sebastian BURGIN-FIX (ext)
committed
Initial commit
0 parents  commit 504bb36

70 files changed

Lines changed: 9784 additions & 0 deletions

Some content is hidden

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

‎.github/workflows/release.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v*'
7+
8+
permissions:
9+
contents: read
10+
packages: write
11+
12+
jobs:
13+
build-and-publish:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- uses: actions/checkout@v4
17+
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: 22
21+
registry-url: https://npm.pkg.github.com
22+
scope: '@codebar-ag'
23+
24+
- run: npm ci
25+
26+
- name: Typecheck + lint
27+
run: |
28+
npm run typecheck
29+
npm run lint
30+
31+
- name: Build library
32+
run: npm run build
33+
34+
- name: Build Storybook
35+
run: npm run build-storybook
36+
37+
- name: Install Playwright Chromium
38+
run: npx playwright install --with-deps chromium
39+
40+
- name: Component tests (Playwright)
41+
run: npm run test:ci
42+
43+
- name: Publish to GitHub Packages
44+
run: npm publish
45+
env:
46+
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/test.yml‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: Test
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
8+
permissions:
9+
contents: read
10+
packages: read
11+
12+
jobs:
13+
test:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- uses: actions/checkout@v4
17+
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: 22
21+
cache: npm
22+
23+
- run: npm ci
24+
25+
- name: Lint
26+
run: npm run lint
27+
28+
- name: Typecheck
29+
run: npm run typecheck
30+
31+
- name: Build library
32+
run: npm run build
33+
34+
- name: Build Storybook
35+
run: npm run build-storybook
36+
37+
- name: Install Playwright Chromium
38+
run: npx playwright install --with-deps chromium
39+
40+
- name: Component tests (Playwright)
41+
run: npm run test:ci
42+
43+
- name: Upload Playwright report
44+
uses: actions/upload-artifact@v4
45+
if: ${{ !cancelled() }}
46+
with:
47+
name: playwright-report
48+
path: playwright-report
49+
retention-days: 7

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
dist
3+
storybook-static
4+
test-results
5+
playwright-report
6+
*.log
7+
.DS_Store

‎.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@codebar-ag:registry=https://npm.pkg.github.com
2+
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

‎.storybook/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { StorybookConfig } from '@storybook/vue3-vite';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.stories.@(ts|js)'],
5+
addons: [],
6+
framework: {
7+
name: '@storybook/vue3-vite',
8+
options: {},
9+
},
10+
// Tailwind v4 runs through its Vite plugin so atom utility classes resolve
11+
// inside Storybook exactly as they do in a consuming app.
12+
async viteFinal(cfg) {
13+
const { default: tailwindcss } = await import('@tailwindcss/vite');
14+
cfg.plugins = cfg.plugins ?? [];
15+
cfg.plugins.push(tailwindcss());
16+
return cfg;
17+
},
18+
};
19+
20+
export default config;

‎.storybook/preview.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Preview } from '@storybook/vue3-vite';
2+
import './storybook.css';
3+
4+
const preview: Preview = {
5+
parameters: {
6+
layout: 'centered',
7+
controls: { expanded: true },
8+
},
9+
};
10+
11+
export default preview;

‎.storybook/storybook.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* Storybook canvas styling — mirrors a consuming app: tokens first, then
2+
Tailwind, then `@source` so the atom SFC classes get generated. */
3+
@import "../src/tokens.css";
4+
@import "tailwindcss";
5+
@source "../src";
6+
7+
:root {
8+
color-scheme: light;
9+
}
10+
11+
body {
12+
background-color: var(--color-bg);
13+
color: var(--color-ink);
14+
font-family: var(--font-mono);
15+
-webkit-font-smoothing: antialiased;
16+
}

‎LICENSE.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) codebar Solutions AG
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‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# @codebar-ag/flows
2+
3+
Shared **Vue 3 + Tailwind v4** design-system atoms and design tokens for codebar-ag
4+
applications, documented in **Storybook**. One source of truth so every app looks
5+
identical.
6+
7+
> **Atoms only.** This package ships the basic building blocks (button, card,
8+
> table, badge, form fields, dropdown, icon, list-row, metric, alert…) and the
9+
> design tokens. Composite, domain-specific "organisms" (billing panels, instance
10+
> rows, …) live in each consuming app — but they must be assembled **only** from
11+
> these atoms, never from raw HTML elements.
12+
13+
## Install
14+
15+
The package is published to **GitHub Packages**. Add an `.npmrc` to the consuming app:
16+
17+
```
18+
@codebar-ag:registry=https://npm.pkg.github.com
19+
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
20+
```
21+
22+
```bash
23+
npm install @codebar-ag/flows
24+
```
25+
26+
## Use
27+
28+
**1. Tokens + Tailwind** — in your app's `app.css`:
29+
30+
```css
31+
@import "@codebar-ag/flows/tokens.css"; /* @theme: colors, type scale, radius */
32+
@import "tailwindcss";
33+
@source "../../node_modules/@codebar-ag/flows/dist"; /* scan atoms for classes */
34+
```
35+
36+
The `@source` line is required: Tailwind must scan the compiled atoms so their
37+
utility classes are generated in your app's stylesheet.
38+
39+
**2. Register the atoms** — in your Vue entry:
40+
41+
```ts
42+
import { Flows } from '@codebar-ag/flows';
43+
createApp(...).use(Flows); // global <Button>, <Card>, <Icon>, …
44+
```
45+
46+
Or import individually:
47+
48+
```ts
49+
import { Button, Card, useToast } from '@codebar-ag/flows';
50+
```
51+
52+
**3. Toasts** — mount `<Toaster />` once near the root, then `push()` from anywhere:
53+
54+
```ts
55+
import { pushToast } from '@codebar-ag/flows';
56+
pushToast({ message: 'Saved.', type: 'success' });
57+
```
58+
59+
## Develop
60+
61+
```bash
62+
npm install
63+
npm run dev # Storybook on :6006 (the styleguide)
64+
npm run build # library build → dist/ (ESM + types + tokens.css)
65+
npm run build-storybook # static styleguide → storybook-static/
66+
npm run typecheck # vue-tsc
67+
npm run lint
68+
```
69+
70+
## License
71+
72+
MIT © codebar Solutions AG

‎eslint.config.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import vue from 'eslint-plugin-vue';
2+
import ts from 'typescript-eslint';
3+
4+
export default ts.config(
5+
{ ignores: ['dist/**', 'storybook-static/**', 'node_modules/**'] },
6+
...ts.configs.recommended,
7+
...vue.configs['flat/recommended'],
8+
{
9+
// .vue templates are parsed by vue-eslint-parser; hand the <script lang="ts">
10+
// blocks to the TypeScript parser.
11+
files: ['**/*.vue'],
12+
languageOptions: {
13+
parserOptions: { parser: ts.parser },
14+
},
15+
},
16+
{
17+
rules: {
18+
// Atoms are intentionally single-word (Button, Card, Icon…).
19+
'vue/multi-word-component-names': 'off',
20+
},
21+
},
22+
);

0 commit comments

Comments
 (0)