Dev to Main

.editorconfig

@@ -11,6 +11,10 @@ charset = utf-8
 trim_trailing_whitespace = false
 insert_final_newline = false
 
+[*.md]
+trim_trailing_whitespace = true
+
 [*.yaml]
 indent_size = 2
 indent_style = space
+

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: Test
+
+on:
+  push:
+    branches: [main, dev]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: |
+          npm install
+      - name: Run tests
+        run: |
+          npm run test

.gitignore

@@ -20,5 +20,3 @@ coverage
 *.sln
 *.sw?
 
-# Storybook static build directory
-dist-storybook

.pre-commit-config.yaml

@@ -4,27 +4,27 @@ repos:
       - id: type-check
         name: Try to type-check
         language: system
-        entry: pnpm run lint
+        entry: npm run type-check
         stages: [commit]
         pass_filenames: false
 
       - id: build
         name: Try to build
         language: system
-        entry: pnpm run build
+        entry: npm run build-only
         stages: [commit]
         pass_filenames: false
 
       - id: lint
         name: Try to lint
         language: system
-        entry: pnpm lint
+        entry: npm run lint
         stages: [commit]
         pass_filenames: false
 
       - id: format
         name: Try to format
         language: system
-        entry: pnpm format
+        entry: npm run format
         stages: [commit]
         pass_filenames: false

.storybook/main.ts

@@ -1,23 +1,17 @@
 import type { StorybookConfig } from '@storybook/vue3-vite';
 
 export const config: StorybookConfig = {
-	stories: [
-		'../src/docs/**/*.mdx',
-		'../src/**/**/__stories__/*.mdx',
-		'../src/**/**/__stories__/*.stories.ts',
-	],
+	stories: ['../md/**/*.mdx', '../src/**/**/__stories__/*.stories.ts'],
 	addons: [
+		'storybook-tailwind-dark-mode',
 		'@storybook/addon-controls',
 		'@storybook/addon-a11y',
 		'@storybook/addon-links',
 		'@storybook/addon-actions',
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
-		{
-			name: '@storybook/addon-styling',
-			options: {},
-		},
 	],
+	staticDirs: ['../src/assets'],
 	framework: {
 		name: '@storybook/vue3-vite',
 		options: {},
@@ -28,7 +22,9 @@ export const config: StorybookConfig = {
 	docs: {
 		autodocs: 'tag',
 	},
-	logLevel: 'warn',
+	core: {
+		disableTelemetry: true, // 👈 Disables telemetry
+	},
 };
 
 export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import theme from './theme';
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+	theme,
+});

.storybook/preview.ts

@@ -1,8 +1,16 @@
-import '../src/assets/index.css';
-
+import './storybook.scss';
+import '../src/assets/index.scss';
 import type { Preview } from '@storybook/vue3';
 
 const preview: Preview = {
+	globalTypes: {
+		darkMode: {
+			defaultValue: true,
+		},
+		className: {
+			defaultValue: 'dark',
+		},
+	},
 	parameters: {
 		actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {
@@ -27,11 +35,6 @@ const preview: Preview = {
 				},
 			],
 		},
-		themes: {
-			light: 'light',
-			dark: 'dark',
-		},
-		defaultTheme: 'light',
 	},
 };
 

.storybook/storybook.scss

@@ -0,0 +1,27 @@
+.css-1njl3fa {
+	border: none !important;
+	background-image: none !important;
+
+	div {
+		:first-child {
+			margin-left: 2px;
+		}
+
+		:last-child {
+			margin-right: 2px;
+		}
+
+		&:not(:first-child):not(:last-child) {
+			margin: 0 1px;
+		}
+	}
+
+	::before {
+		content: none;
+		border-radius: 8px;
+	}
+}
+
+[class^='css'] {
+	transform: none !important;
+}

.storybook/theme.ts

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+	base: 'light',
+	brandTitle: 'Design System',
+	brandUrl: 'https://mrksbnc.github.io/ds',
+});

CHANGELOG.md

@@ -33,7 +33,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - [x] Create `ClButton` component
 - [ ] Create `ClButtonGroup` component
 - [ ] Create `ClPillButton` component
-- [ ] Create `ClIconButton` component
+- [x] Create `ClIconButton` component
 - [ ] Create `ClLinkButton` component
 - [ ] Create `ClOutlineButton` component
 - [x] Create `ClLoadingSpinner` component

README.md

@@ -1,13 +1,12 @@
-# Vue Component Library
+# Design System
 
-![Version](https://img.shields.io/github/package-json/v/mrksbnc/complib) ![npm bundle size](https://img.shields.io/bundlephobia/min/@mrksbnc/complib) [![CodeQL](https://github.com/mrksbnc/complib/actions/workflows/codeql.yml/badge.svg?branch=main)](https://github.com/mrksbnc/complib/actions/workflows/codeql.yml) [![Storybook deployment](https://github.com/mrksbnc/complib/actions/workflows/deploy.yaml/badge.svg)](https://github.com/mrksbnc/complib/actions/workflows/deploy.yaml)
+![Version](https://img.shields.io/github/package-json/v/mrksbnc/complib)
 
 A reusable Component collection built with [Vite](https://vitejs.dev/) and [Vue 3](https://vuejs.org/). The components are using [TailwindCSS](https://tailwindcss.com/) for styling and the documentation is built with [Storybook](https://storybook.js.org/).
 
 ## Project setup
 
 As a prerequisite, you need to have node and npm installed on your machine. You can download and install them from [here](https://nodejs.org/en/).
-As a package manager, the project uses [npm](https://www.npmjs.com/). This is installed with node by default.
 
 ### Install dependencies
 
@@ -17,7 +16,7 @@ To install the dependencies, run the following command:
 npm install
 ```
 
-### Compiles and hot-reloads for development
+### Run documentation
 
 To start the development server, run the following command:
 
@@ -47,7 +46,7 @@ npm run build-storybook
 ```
 
 This will build the Storybook documentation and generate the static files in the `docs` folder.
-The directory is used by GitHub Pages to host the documentation.
+The directory is used by DstHub Pages to host the documentation.
 
 ### Run your unit tests
 

src/docs/1_GettingStarted.mdx → md/1_GettingStarted.mdx

@@ -1,4 +1,4 @@
-import Readme from '../../README.md?raw';
+import Readme from '../README.md?raw';
 import { Meta, Markdown } from '@storybook/blocks';
 
 <Meta title="1. Getting Started" />

src/docs/2_Changelog.mdx → md/2_Changelog.mdx

@@ -1,4 +1,4 @@
-import Changelog from '../../CHANGELOG.md?raw';
+import Changelog from '../CHANGELOG.md?raw';
 import { Meta, Markdown } from '@storybook/blocks';
 
 <Meta title="2. Changelog" />