Add radix-icons package

x0k · x0k · commit e6a37ab84a93 · 2024-11-01T04:49:11.000+03:00
diff --git a/.changeset/neat-parents-nail.md b/.changeset/neat-parents-nail.md
@@ -0,0 +1,5 @@
+---
+"@sjsf/radix-icons": minor
+---
+
+Add radix-icons package
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,8 +13,6 @@
     "@sjsf/ajv8-validator": "workspace:*",
     "@sjsf/daisyui-theme": "workspace:*",
     "@sjsf/flowbite-theme": "workspace:*",
-    "@sjsf/flowbite-icons": "workspace:*",
-    "@sjsf/lucide-icons": "workspace:*",
     "@sjsf/form": "workspace:*",
     "@sjsf/skeleton-theme": "workspace:*",
     "@sjsf/shadcn-theme": "workspace:*",
diff --git a/apps/docs/src/content/docs/guides/labels-and-icons.mdx b/apps/docs/src/content/docs/guides/labels-and-icons.mdx
@@ -105,3 +105,32 @@ Usage:
 >
   Playground
 </LinkButton>
+
+### Radic icons
+
+Installation:
+
+<Npm pkg="@sjsf/radix-icons" />
+
+Usage:
+
+```svelte
+<script lang="ts">
+  import { useForm } from '@sjsf/form';
+  import { icons } from '@sjsf/radix-icons';
+
+  const form = useForm({
+    icons
+  })
+</script>
+```
+
+<LinkButton
+  href="https://x0k.github.io/svelte-jsonschema-form/playground/?sample=Arrays&theme=skeleton&icons=radix&vevent=0&vafter=0"
+  variant="secondary"
+  icon="external"
+  iconPlacement="end"
+  target="_blank"
+>
+  Playground
+</LinkButton>
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -20,7 +20,8 @@
     "@sjsf/flowbite-icons": "workspace:*",
     "@sjsf/skeleton-theme": "workspace:*",
     "@sjsf/lucide-icons": "workspace:*",
-    "@sjsf/shadcn-theme": "workspace:*"
+    "@sjsf/shadcn-theme": "workspace:*",
+    "@sjsf/radix-icons": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "catalog:",
diff --git a/apps/playground/src/icons.ts b/apps/playground/src/icons.ts
@@ -1,13 +1,20 @@
-import { icons as flowbite } from "@sjsf/flowbite-icons";
 import { icons as lucide } from "@sjsf/lucide-icons";
+
+import { icons as flowbite } from "@sjsf/flowbite-icons";
 import flowbiteIconsStyles from "@sjsf/flowbite-icons/styles.css?inline";
+
+import { icons as radix } from '@sjsf/radix-icons';
+
 export const icons = {
   none: {},
   flowbite,
   lucide,
+  radix,
 };
+
 export const iconsStyles = {
   none: "",
   flowbite: flowbiteIconsStyles,
   lucide: "",
+  radix: "",
 } satisfies Record<keyof typeof icons, string>;
diff --git a/mkfile b/mkfile
@@ -95,6 +95,16 @@ luci/:
     pnpm run dev
   popd
 
+radi/:
+  pushd packages/radix-icons
+  c:
+    pnpm run check
+  b:
+    pnpm run build
+  d:
+    pnpm run dev
+  popd
+
 shad/:
   pushd packages/shadcn-theme
   c:
diff --git a/packages/radix-icons/.gitignore b/packages/radix-icons/.gitignore
@@ -0,0 +1,22 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/packages/radix-icons/.npmrc b/packages/radix-icons/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/radix-icons/.prettierignore b/packages/radix-icons/.prettierignore
@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/packages/radix-icons/.prettierrc b/packages/radix-icons/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/packages/radix-icons/README.md b/packages/radix-icons/README.md
@@ -0,0 +1,29 @@
+# @sjsf/radix-icons
+
+The [svelte-radix](https://github.com/shinokada/svelte-radix) based icons set for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
+
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/guides/labels-and-icons/#radix-icons)
+- [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
+
+## Installation
+
+```shell
+npm install @sjsf/form @sjsf/radix-icons
+```
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { useForm } from '@sjsf/form';
+  import { icons } from '@sjsf/radix-icons';
+
+  const form = useForm({
+    icons
+  })
+</script>
+```
+
+## License
+
+MIT
diff --git a/packages/radix-icons/eslint.config.js b/packages/radix-icons/eslint.config.js
@@ -0,0 +1,32 @@
+import eslint from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+	eslint.configs.recommended,
+	...tseslint.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: tseslint.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);
diff --git a/packages/radix-icons/package.json b/packages/radix-icons/package.json
@@ -0,0 +1,75 @@
+{
+	"name": "@sjsf/radix-icons",
+	"version": "0.0.1",
+	"description": "The svelte-radix based icons set for svelte-jsonschema-form",
+	"license": "MIT",
+	"keywords": [
+		"icons",
+		"radix",
+		"form"
+	],
+	"type": "module",
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"publishConfig": {
+		"provenance": true
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/x0k/svelte-jsonschema-form.git",
+		"directory": "packages/radix-icons"
+	},
+	"bugs": "https://github.com/x0k/svelte-jsonschema-form/issues",
+	"homepage": "https://x0k.github.io/svelte-jsonschema-form/",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "svelte-package && publint",
+		"preview": "vite preview",
+		"test": "pnpm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"@sjsf/form": "workspace:^1.2.0",
+		"svelte": "^5.0.0",
+		"svelte-radix": "^2.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "catalog:",
+		"@sjsf/form": "workspace:*",
+		"@sveltejs/adapter-static": "catalog:",
+		"@sveltejs/kit": "catalog:",
+		"@sveltejs/package": "catalog:",
+		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"@types/eslint": "catalog:",
+		"eslint": "catalog:",
+		"eslint-config-prettier": "catalog:",
+		"eslint-plugin-svelte": "catalog:",
+		"globals": "catalog:",
+		"postcss": "catalog:",
+		"prettier": "catalog:",
+		"prettier-plugin-svelte": "catalog:",
+		"svelte": "catalog:",
+		"svelte-check": "catalog:",
+		"svelte-radix": "^2.0.1",
+		"testing": "workspace:*",
+		"typescript-eslint": "catalog:",
+		"vite": "catalog:",
+		"vitest": "catalog:"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts"
+}
diff --git a/packages/radix-icons/playwright.config.ts b/packages/radix-icons/playwright.config.ts
@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
diff --git a/packages/radix-icons/src/app.d.ts b/packages/radix-icons/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/packages/radix-icons/src/app.html b/packages/radix-icons/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/radix-icons/src/index.test.ts b/packages/radix-icons/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
diff --git a/packages/radix-icons/src/lib/index.ts b/packages/radix-icons/src/lib/index.ts
@@ -0,0 +1,13 @@
+import { asSnippet, type Icons } from '@sjsf/form';
+import ArrowUp from 'svelte-radix/ArrowUp.svelte';
+import ArrowDown from 'svelte-radix/ArrowDown.svelte';
+import Trash from 'svelte-radix/Trash.svelte';
+import Copy from 'svelte-radix/Copy.svelte';
+
+export const icons: Icons = {
+	'move-array-item-up': asSnippet(ArrowUp, { size: '20' }),
+	'move-array-item-down': asSnippet(ArrowDown, { size: '20' }),
+	'remove-array-item': asSnippet(Trash, { size: '20' }),
+	'copy-array-item': asSnippet(Copy, { size: '20' }),
+	'remove-object-property': asSnippet(Trash, { size: '20' })
+};
diff --git a/packages/radix-icons/src/routes/+page.svelte b/packages/radix-icons/src/routes/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AllIcons } from 'testing/demo'
+
+	import { icons } from '../lib';
+</script>
+
+<AllIcons {icons} />
diff --git a/packages/radix-icons/static/favicon.png b/packages/radix-icons/static/favicon.png
diff --git a/packages/radix-icons/svelte.config.js b/packages/radix-icons/svelte.config.js
@@ -0,0 +1,20 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter({
+			strict: false
+		})
+	}
+};
+
+export default config;
diff --git a/packages/radix-icons/tests/test.ts b/packages/radix-icons/tests/test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});
diff --git a/packages/radix-icons/tsconfig.json b/packages/radix-icons/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"module": "Preserve",
+		"moduleResolution": "Bundler"
+	}
+}
diff --git a/packages/radix-icons/vite.config.ts b/packages/radix-icons/vite.config.ts
@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@sjsf/radix-icons": minor
 +---
++
 +Add radix-icons package