feat: alert

.github/workflows/chroma.yaml

@@ -0,0 +1,70 @@
+name: Build
+
+permissions:
+  pull-requests: write
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/**'
+  pull_request:
+    paths:
+      - 'packages/**'
+
+jobs:
+  chroma:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm run build
+
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: packages/celeste-vue
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Report chroma url
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          comment-tag: chroma
+          message: |
+            Chromatic preview: ${{ steps.chromatic.outputs.url }}

.gitignore

@@ -2,3 +2,5 @@ node_modules
 dist
 .eslintcache
 .DS_Store
+storybook-static
+*storybook.log

eslint.config.mjs

@@ -2,6 +2,7 @@ import youcan from '@youcan/lint';
 
 export default youcan(
   {
+    ignores: ['node_modules', 'dist'],
     type: 'lib',
     formatters: true,
     vue: true,

package.json

@@ -22,7 +22,8 @@
     "prepare": "pnpm simple-git-hooks",
     "build": "pnpm -r build",
     "bump": "bumpp package.json packages/*/package.json --commit \"chore: release v\" --push --tag",
-    "release": "pnpm run bump && pnpm run build && pnpm -r release"
+    "release": "pnpm run bump && pnpm run build && pnpm -r release",
+    "storybook": "pnpm --filter celeste-vue run storybook"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

packages/celeste-icons/assets/info.json

@@ -0,0 +1,10 @@
+{
+  "prefix": "celeste",
+  "name": "Celeste Icons",
+  "total": 3058,
+  "version": "0.1.3",
+  "author": "YouCan <[email protected]>",
+  "height": 24,
+  "category": "General",
+  "palette": false
+}

packages/celeste-icons/package.json

@@ -10,45 +10,65 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./icons.json": {
+      "default": "./dist/icons.json"
+    },
+    "./info.json": {
+      "default": "./dist/info.json"
     },
     "./package.json": {
       "default": "./package.json"
     },
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/esm/*.js",
-      "require": "./dist/*.js"
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/esm/index.js",
+      "require": "./dist/vue/index.js"
     },
-    "./*.js": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/esm/*.js",
-      "require": "./dist/*.js"
+    "./vue/*": {
+      "types": "./dist/vue/*.d.ts",
+      "import": "./dist/vue/esm/*.js",
+      "require": "./dist/vue/*.js"
     },
-    "./esm/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/esm/*.js"
+    "./vue/*.js": {
+      "types": "./dist/vue/*.d.ts",
+      "import": "./dist/vue/esm/*.js",
+      "require": "./dist/vue/*.js"
     },
-    "./esm/*.js": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/esm/*.js"
+    "./vue/esm/*": {
+      "types": "./dist/vue/*.d.ts",
+      "import": "./dist/vue/esm/*.js"
+    },
+    "./vue/esm/*.js": {
+      "types": "./dist/vue/*.d.ts",
+      "import": "./dist/vue/esm/*.js"
     }
   },
   "main": "dist/index.js",
   "engines": {
     "node": ">=20.10.0"
   },
   "scripts": {
-    "build": "tsx scripts/build.ts",
+    "generate-iconify": "tsx scripts/generate-iconify",
+    "generate-vue": "tsx scripts/generate-vue.ts",
+    "build": "rimraf dist && pnpm generate-iconify && pnpm generate-vue && tsup",
     "release": "pnpm publish --access public"
   },
+  "dependencies": {
+    "@iconify/types": "^2.0.0"
+  },
   "devDependencies": {
+    "@iconify/tools": "^4.1.1",
+    "@iconify/utils": "^2.2.1",
     "@svgr/core": "^8.1.0",
+    "@types/fs-extra": "^11.0.4",
     "@vue/compiler-dom": "^3.5.13",
     "camelcase": "^8.0.0",
     "rimraf": "^6.0.1",
     "svgo": "^3.3.2",
+    "tsup": "^8.3.5",
     "tsx": "^4.19.2"
   }
 }

packages/celeste-icons/scripts/generate-iconify.ts

@@ -0,0 +1,76 @@
+import { promises as fs } from 'node:fs';
+import { resolve } from 'node:path';
+import { stdout } from 'node:process';
+import {
+  cleanupSVG,
+  deOptimisePaths,
+  importDirectory,
+  isEmptyColor,
+  parseColors,
+  runSVGO,
+} from '@iconify/tools';
+import info from '../assets/info.json' assert {type: 'json'};
+import pkg from '../package.json' assert {type: 'json'};
+
+(async () => {
+  info.version = pkg.version;
+  info.author = pkg.author as any;
+
+  const source = 'icons';
+  const prefix = info.prefix;
+
+  const iconSet = await importDirectory(source, {
+    prefix,
+  });
+
+  await iconSet.forEach(async (name, type) => {
+    if (type !== 'icon') {
+      return;
+    }
+
+    const svg = iconSet.toSVG(name)!;
+
+    await cleanupSVG(svg);
+    await parseColors(svg, {
+      defaultColor: 'currentColor',
+      callback: (attr, colorStr, color) => {
+        if (!color) {
+          throw new Error(`Invalid color: "${colorStr}" in attribute ${attr}`);
+        }
+
+        if (isEmptyColor(color)) {
+          return color;
+        }
+
+        return 'currentColor';
+      },
+    });
+
+    await runSVGO(svg);
+
+    await deOptimisePaths(svg);
+
+    iconSet.fromSVG(name, svg);
+  });
+
+  const iconSetContent = iconSet.export(true);
+
+  await fs.writeFile(
+    resolve('assets', 'icons.json'),
+    JSON.stringify(iconSetContent, null, '\t'),
+    'utf8',
+  );
+
+  const count = Object.keys(iconSet.entries).length;
+
+  stdout.write(`Found ${count} icons`);
+
+  info.total = count;
+  info.height = iconSetContent.height || 20;
+
+  await fs.writeFile(
+    resolve('assets', 'info.json'),
+    JSON.stringify(info, null, 2),
+    'utf-8',
+  );
+})();

packages/celeste-icons/scripts/build.ts → packages/celeste-icons/scripts/generate-vue.ts

@@ -97,64 +97,22 @@ async function buildIcons(pkg: string, format: string) {
   await ensureWrite(`${outDir}/index.d.ts`, exportAll(icons, 'esm', false));
 }
 
-async function buildExports() {
-  const pkg = {} as { [key: string]: any };
-
-  // to appease Vite's optimizeDeps feature which requires a root-level import
-  pkg[`.`] = {
-    import: `./index.esm.js`,
-    require: `./index.js`,
-  };
-
-  // for those that want to read the version from package.json
-  pkg[`./package.json`] = { default: './package.json' };
-
-  pkg[`.`] = {
-    types: `./dist/index.d.ts`,
-    import: `./dist/esm/index.js`,
-    require: `./dist/index.js`,
-  };
-  pkg[`./*`] = {
-    types: `./dist/*.d.ts`,
-    import: `./dist/esm/*.js`,
-    require: `./dist/*.js`,
-  };
-  pkg[`./*.js`] = {
-    types: `./dist/*.d.ts`,
-    import: `./dist/esm/*.js`,
-    require: `./dist/*.js`,
-  };
-
-  pkg[`./esm/*`] = {
-    types: `./dist/*.d.ts`,
-    import: `./dist/esm/*.js`,
-  };
-  pkg[`./esm/*.js`] = {
-    types: `./dist/*.d.ts`,
-    import: `./dist/esm/*.js`,
-  };
-
-  return pkg;
-}
-
 async function main() {
   const packageJson = JSON.parse(await fs.readFile(`./package.json`, 'utf8'));
 
   console.log(`Building icons...`);
 
   await Promise.all([
-    rimraf(`./dist/*`, {
+    rimraf(`./dist/vue/*`, {
       preserveRoot: true,
     }),
   ]);
 
   await Promise.all([
-    await buildIcons('dist', 'cjs'),
-    await buildIcons('dist', 'esm'),
+    await buildIcons('dist/vue', 'cjs'),
+    await buildIcons('dist/vue', 'esm'),
   ]);
 
-  packageJson.exports = await buildExports();
-
   await ensureWriteJson(`./package.json`, packageJson);
 
   return console.log(`Finished building icons.`);

packages/celeste-icons/src/index.ts

@@ -0,0 +1,18 @@
+import type { IconifyChars, IconifyInfo, IconifyJSON, IconifyMetaData } from '@iconify/types';
+import rawicons from '../assets/icons.json';
+import rawinfo from '../assets/info.json';
+
+const chars: IconifyChars = {};
+const metadata: IconifyMetaData = {};
+
+const info = <unknown>rawinfo as IconifyInfo;
+const icons = rawicons as IconifyJSON;
+
+export {
+  chars,
+  icons,
+  info,
+  metadata,
+};
+
+export { IconifyChars, IconifyInfo, IconifyJSON, IconifyMetaData };

packages/celeste-icons/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  dts: true,
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  sourcemap: true,
+  target: 'esnext',
+  outDir: 'dist',
+  publicDir: 'assets',
+  minify: true,
+});

packages/celeste-tokens/src/generate.ts

@@ -9,8 +9,6 @@ const dist = `${resolve(import.meta.dirname, '..', 'dist')}/`;
 
 register(StyleDictionary);
 
-// TODO: use a custom fonts cdn
-
 const fonts = readFileSync(
   resolve(import.meta.dirname, 'stubs/fonts.css'),
   'utf-8',