Package UI updates (#4539)

* documentation update + design tokens generation

* ts config update

* formatting fix

* update tokens config format

* ignore JS files check

* Storybook version bump

* formatting fix

* dark theme toggle added

.github/pr-labeler.yml

@@ -15,3 +15,7 @@ rust:
 "@gitbutler/ui":
 - changed-files:
   - any-glob-to-any-file: packages/ui/**/*
+
+"@gitbutler/design-tokens":
+- changed-files:
+  - any-glob-to-any-file: packages/design-tokens/**/*

apps/desktop/src/styles.css

@@ -7,6 +7,10 @@
 }
 
 body {
+	height: 100vh;
+	width: 100vw;
+	overflow-y: hidden;
+
 	color: var(--clr-text-1);
 	background-color: var(--clr-bg-2);
 }

packages/ui/.storybook/main.ts

@@ -6,7 +6,8 @@ const config: StorybookConfig = {
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
 		'@chromatic-com/storybook',
-		'@storybook/addon-interactions'
+		'@storybook/addon-interactions',
+		'storybook-dark-mode'
 	],
 	framework: {
 		name: '@storybook/sveltekit',

packages/ui/.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/svelte';
 import '../src/styles/main.css';
+import './stories-styles.css';
 
 const preview: Preview = {
 	parameters: {
@@ -8,6 +9,9 @@ const preview: Preview = {
 				color: /(background|color)$/i,
 				date: /Date$/i
 			}
+		},
+		darkMode: {
+			stylePreview: true
 		}
 	}
 };

packages/ui/.storybook/stories-styles.css

@@ -0,0 +1,14 @@
+.sbdocs {
+	hr {
+		margin: 50px 0 30px;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		border-bottom: none;
+	}
+}

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gitbutler/ui",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "GitButler Component Library",
 	"keywords": [
 		"components",
@@ -17,6 +17,7 @@
 		"package:svelte": "svelte-kit sync && svelte-package",
 		"package:styles": "postcss ./src/styles/main.css -o ./dist/styles/main.css && pnpm run copy-fonts",
 		"copy-fonts": "postcss ./src/styles/fonts.css -o ./dist/fonts.css && cpy './src/styles/fonts/**/*.woff2' './dist/fonts' --parents",
+		"build:design-tokens": "npx co build",
 		"prepublishOnly": "pnpm run package",
 		"prepare": "svelte-kit sync",
 		"storybook": "storybook dev --no-open -p 6006",
@@ -24,15 +25,19 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^1.6.1",
+		"@cobalt-ui/cli": "^1.8.0",
+		"@cobalt-ui/plugin-css": "^1.7.3",
+		"@cobalt-ui/plugin-js": "^1.4.3",
 		"@csstools/postcss-bundler": "^1.0.15",
 		"@csstools/postcss-minify": "^1.1.5",
 		"@storybook/addon-docs": "^8.2.6",
-		"@storybook/addon-essentials": "^8.1.10",
-		"@storybook/addon-interactions": "^8.1.10",
-		"@storybook/addon-links": "^8.1.10",
-		"@storybook/blocks": "^8.1.10",
-		"@storybook/svelte": "^8.1.10",
-		"@storybook/sveltekit": "^8.1.10",
+		"@storybook/addon-essentials": "^8.2.6",
+		"@storybook/addon-interactions": "^8.2.6",
+		"@storybook/addon-links": "^8.2.6",
+		"@storybook/blocks": "^8.2.6",
+		"@storybook/svelte": "^8.2.6",
+		"@storybook/sveltekit": "^8.2.6",
+		"@storybook/theming": "^8.2.6",
 		"@sveltejs/adapter-static": "catalog:svelte",
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.2",
@@ -45,7 +50,8 @@
 		"postcss-nesting": "^12.1.5",
 		"postcss-pxtorem": "^6.1.0",
 		"rimraf": "^6.0.1",
-		"storybook": "^8.1.10",
+		"storybook": "^8.2.6",
+		"storybook-dark-mode": "^4.0.2",
 		"svelte": "catalog:svelte",
 		"svelte-check": "catalog:svelte",
 		"vite": "catalog:"

packages/ui/src/stories/CommitLines/DemoCommitLines.stories.ts

@@ -3,6 +3,7 @@ import type { Author, CommitData } from '$lib/CommitLines/types';
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 const meta = {
+	title: 'Commit Lines/ Variants',
 	component: DemoCommitLines
 } satisfies Meta<DemoCommitLines>;
 

packages/ui/src/stories/CommitLines/DemoStaticCommitLines.stories.ts

@@ -2,6 +2,7 @@ import DemoStaticCommitLines from './DemoStaticCommitLines.svelte';
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 const meta = {
+	title: 'Commit Lines/ Line group variants',
 	component: DemoStaticCommitLines
 } satisfies Meta<DemoStaticCommitLines>;
 

packages/ui/src/stories/a_introduction.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="About/Introduction" />
+
+# 🤖 Welcome to GitButler UI
+
+Welcome to the GitButler UI Storybook. This is a collection of components that are used to build the GitButler UI. Here you can see all the components that are available and how they can be used.
+
+---
+
+## 📚 How to install
+
+Because the GitButler UI is a part of a monorepo, you can use the components by simply add the package to your package.json file.
+
+```bash
+"@gitbutler/ui": "workspace:*",
+```
+
+Then you also need to import the package styles in your project.
+The package styles separated into two parts:
+
+```bash
+import '@gitbutler/ui/fonts.css';
+import '@gitbutler/ui/main.css';
+```
+
+this styles separation is needed to avoid conflicts with fonts you already have in your project. But if you want to use the default UI fonts — import the `fontd.css` file.
+
+---
+
+## 📦 Packing styles
+
+In order to pack the styles, we use PostCSS. The PostCSS configuration is located in the `postcss.config.js` file.
+
+```js
+const config = {
+	plugins: [
+		pxToRem({
+			rootValue: 16,
+			unitPrecision: 5,
+			propList: ['*'],
+			selectorBlackList: [],
+			replace: true,
+			mediaQuery: false,
+			minPixelValue: 0
+		}),
+		autoprefixer(),
+		postcssNesting(),
+		postcssBundler(),
+		postcssMinify()
+	]
+};
+```

packages/ui/src/stories/b_design-tokens.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="About/Design Tokens" />
+
+# 🎨 Design Tokens
+
+For all basic styles like colors, typography, and spacing, radius, and shadows, we use design tokens. This is a collection of variables that are used in the components. This allows us to change the styles of the components in one place.
+
+[The "Core" Figma file](https://www.figma.com/design/Jir22AjzvPokdbMbe8yt5k/%F0%9F%92%8E-Core?node-id=0-1&t=BvUKbga6mKnt6vo8-1) is the source of truth for the design tokens.
+
+<iframe
+	style={{
+		border: '1px solid rgba(0, 0, 0, 0.1)'
+	}}
+	width="100%"
+	height="600"
+	src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FJir22AjzvPokdbMbe8yt5k%2F%25F0%259F%2592%258E-Core%3Fnode-id%3D0-1%26t%3DBvUKbga6mKnt6vo8-1"
+	allowFullScreen
+></iframe>
+
+---
+
+## Generate design tokens
+
+The first step here is to grab design tokens from Figma. To do this, you need to use the [TokensBrücke](https://www.figma.com/community/plugin/1254538877056388290/tokensbrucke) plugin. This plugin will generate a JSON file with all the design tokens.
+
+<a href="https://www.figma.com/community/plugin/1254538877056388290/tokensbrucke" target="_blank">
+	<img
+		src="https://img.shields.io/badge/Download%20TokensBr%C3%BCcke%20plugin-FF7262?style=for-the-badge&logo=figma&logoColor=white"
+		alt="Install TokensBrücke plugin"
+	/>
+</a>
+
+The second step is to convert the JSON file to a CSS file.
+
+You can generate a CSS file within this repository. Just replace the root file `design-tokens.json` with the new one and run the `build:design-tokens` command. The command will generate a new `design-tokens.css` file in the `packages/ui/src/styles/core` folder.
+
+In order to convert the JSON file to a CSS file, we use the [Cobalt UI CLI](https://cobalt-ui.pages.dev/guides/getting-started).
+
+<a href="https://cobalt-ui.pages.dev/guides/getting-started" target="_blank">
+	<img
+		src="https://img.shields.io/badge/Download%20Cobalt%20UI%20CLI-4D40E9?style=for-the-badge&logo=&logoColor=white"
+		alt="Get Cobalt UI"
+	/>
+</a>

packages/ui/src/stories/c_colors.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="About/Colors" />
+
+# 🎨 Colors

packages/ui/src/stories/introduction.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="About/Introduction" />
-
-# 🤖 Welcome to GitButler UI
-
-<img src="https://i.imgflip.com/39lzga.jpg" alt="" />

packages/ui/src/styles/core/reset.css

@@ -15,11 +15,7 @@
 
 	body {
 		font-family: 'Inter', sans-serif;
-		font-size: 13px;
 		line-height: inherit;
-		height: 100vh;
-		width: 100vw;
-		overflow-y: hidden;
 		padding: 0;
 		margin: 0;
 		line-height: inherit;
@@ -48,7 +44,6 @@
 	h5,
 	h6 {
 		font-size: inherit;
-		font-weight: inherit;
 	}
 
 	a {

packages/ui/tokens.config.js

@@ -0,0 +1,26 @@
+import pluginCSS from '@cobalt-ui/plugin-css';
+
+function pxToRem(token) {
+	if (token.$type === 'dimension' && token.$value.slice(-2) === 'px') {
+		return token.$value.slice(0, -2) / 16 + 'rem';
+	}
+}
+
+export default {
+	tokens: './design-tokens.json',
+	outDir: './src/styles/core',
+	plugins: [
+		pluginCSS({
+			filename: 'design-tokens.css',
+			modeSelectors: [
+				{
+					mode: 'dark',
+					selectors: [':root.dark']
+				}
+			],
+			p3: false,
+			colorFormat: 'hex',
+			transform: pxToRem
+		})
+	]
+};

packages/ui/tsconfig.json

@@ -4,7 +4,7 @@
 		"target": "es6",
 		"lib": ["dom", "dom.iterable", "ES2021"],
 		"allowJs": true,
-		"checkJs": true,
+		"checkJs": false,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
@@ -12,6 +12,19 @@
 		"sourceMap": true,
 		"strict": true,
 		"experimentalDecorators": true
-		// 		"types": ["vitest/importMeta"]
-	}
+	},
+	"include": [
+		"./svelte-kit/ambient.d.ts",
+		"./svelte-kit/non-ambient.d.ts",
+		"./svelte-kit/types/**/$types.d.ts",
+		"vite.config.js",
+		"vite.config.ts",
+		"tokens.config.js",
+		"src/**/*.js",
+		"src/**/*.ts",
+		"src/**/*.svelte",
+		"tests/**/*.js",
+		"tests/**/*.ts",
+		"tests/**/*.svelte"
+	]
 }