public-ui · deleonio · Dec 19, 2023 · Dec 19, 2023
diff --git a/lerna.json b/lerna.json
@@ -16,7 +16,10 @@
 		"packages/components",
 		"packages/create-kolibri",
 		"packages/designer",
+		"packages/samples/angular",
 		"packages/samples/react",
+		"packages/samples/ssr",
+		"packages/samples/vite",
 		"packages/schema",
 		"packages/themes",
 		"packages/themes/bmf",

diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
@@ -267,16 +267,18 @@ if (process.env.NODE_ENV === 'production') {
 
 export const config: Config = {
 	// buildEs5: true,
-	// extras: {
-	//   cssVarsShim: true,
-	//   dynamicImportShim: true,
-	//   shadowDomShim: true,
-	//   safari10: true,
-	//   scriptDataOpts: true,
-	//   appendChildSlotFix: false,
-	//   cloneNodeFix: false,
-	//   slotChildNodesFix: true,
-	// },
+	// https://stenciljs.com/docs/config-extras
+	extras: {
+		// appendChildSlotFix: true,
+		// cloneNodeFix: true,
+		enableImportInjection: true,
+		// initializeNextTick: true,
+		// lifecycleDOMEvents: true,
+		// scopedSlotTextContentFix: true,
+		// scriptDataOpts: true,
+		// slotChildNodesFix: true,
+		// tagNameTransform: true,
+	},
 	// enableCache: true,
 	invisiblePrehydration: true,
 	hashFileNames: false,

diff --git a/packages/samples/angular/package.json b/packages/samples/angular/package.json
@@ -1,8 +1,7 @@
 {
-	"name": "angular-17",
-	"version": "0.0.0",
-	"description": "description",
-	"license": "UNLICENSED",
+	"name": "@public-ui/sample-angular",
+	"version": "2.0.1",
+	"private": true,
 	"scripts": {
 		"clean": "git clean -f -d -X",
 		"clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",

diff --git a/packages/samples/ssr/package.json b/packages/samples/ssr/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/sample-ssr",
-	"version": "1.0.0",
+	"version": "2.0.1",
 	"private": true,
 	"scripts": {
 		"lint": "tsc --noemit",

diff --git a/packages/samples/vite/.editorconfig b/packages/samples/vite/.editorconfig
@@ -0,0 +1,17 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+max_line_length = 160
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+indent_style = space
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/packages/samples/vite/.eslintignore b/packages/samples/vite/.eslintignore
@@ -0,0 +1 @@
+**/assets/**
diff --git a/packages/samples/vite/.eslintrc.js b/packages/samples/vite/.eslintrc.js
@@ -0,0 +1,27 @@
+const config = require('@leanup/stack/.eslintrc');
+
+config.overrides = config.overrides || [];
+config.overrides.push({
+	extends: ['plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
+	files: ['**/*.tsx'],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	rules: {
+		'react/no-unused-state': 'error',
+	},
+});
+
+config.plugins = config.plugins || [];
+config.plugins.push('react');
+config.plugins.push('jsx-a11y');
+
+config.settings = {
+	react: {
+		version: 'detect',
+	},
+};
+
+module.exports = config;
diff --git a/packages/samples/vite/.gitignore b/packages/samples/vite/.gitignore
@@ -0,0 +1,56 @@
+# Next
+.next
+
+# GraphQL
+src/__generated__
+
+# IDE's
+.idea
+.project
+*.sublime-*
+*.code-*
+
+
+# Node.js
+node_modules
+npm-debug.log
+
+
+# Build and test tools
+*.zip
+dist/*
+
+# Cache
+.sass-cache
+.cache
+
+
+# Operating system
+.DS_Store
+Thumbs.db
+
+
+# Other
+/.husky
+/.reports
+.env
+.eslintcache
+*~
+*.log
+*.tgz
+
+assets/bundes/
+assets/codicons/
+assets/fontawesome-free/
+assets/icofont/
+assets/kreon/
+assets/material-icons/
+assets/material-symbols/
+assets/noto-sans/
+assets/roboto/
+assets/tabler-icons/
+assets/kolibri.ico
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/packages/samples/vite/.prettierignore b/packages/samples/vite/.prettierignore
@@ -0,0 +1,4 @@
+**/assets/**
+*.feature
+*.sass
+*.scss
diff --git a/packages/samples/vite/.ts-prunerc.js b/packages/samples/vite/.ts-prunerc.js
@@ -0,0 +1,4 @@
+// https://github.com/nadeesha/ts-prune
+https: module.exports = {
+	ignore: 'node_modules',
+};
diff --git a/packages/samples/vite/favicon.ico b/packages/samples/vite/favicon.ico
diff --git a/packages/samples/vite/index.html b/packages/samples/vite/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de" dir="ltr">
+	<head>
+		<title>Vite React-App | KoliBri</title>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="/node_modules/@public-ui/themes/assets/codicons/codicon.css" />
+		<!-- <script type="module" src="/node_modules/@public-ui/components/dist/kolibri/kolibri.esm.js"></script> -->
+		<meta name="robots" content="noindex" />
+		<meta name="kolibri" content="dev-mode=true" />
+	</head>
+
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/packages/samples/vite/package.json b/packages/samples/vite/package.json
@@ -0,0 +1,35 @@
+{
+	"name": "@public-ui/sample-vite",
+	"version": "2.0.1",
+	"private": true,
+	"scripts": {
+		"build": "tsc && vite build",
+		"dev": "vite",
+		"preview": "vite preview",
+		"start": "npm run dev",
+		"test": "playwright test -c playwright-ct.config.ts --ui",
+		"update": "ncu -t minor -u && pnpm i"
+	},
+	"type": "module",
+	"dependencies": {
+		"@public-ui/components": "2.0.1",
+		"@public-ui/react": "2.0.1",
+		"@public-ui/themes": "2.0.1",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"devDependencies": {
+		"@leanup/stack": "1.3.48",
+		"@playwright/experimental-ct-react": "1.40.1",
+		"@types/node": "20.10.5",
+		"@types/react": "18.2.45",
+		"@types/react-dom": "18.2.18",
+		"@unocss/preset-mini": "0.58.0",
+		"@vitejs/plugin-react": "4.2.1",
+		"npm-check-updates": "16.14.12",
+		"prettier": "3.1.1",
+		"typescript": "5.3.3",
+		"unocss": "0.58.0",
+		"vite": "5.0.10"
+	}
+}
diff --git a/packages/samples/vite/playwright-ct.config.ts b/packages/samples/vite/playwright-ct.config.ts
@@ -0,0 +1,46 @@
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './',
+  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+  snapshotDir: './__snapshots__',
+  /* Maximum time one test can run for. */
+  timeout: 10 * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    /* Port to use for Playwright component endpoint. */
+    ctPort: 3100,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});
diff --git a/packages/samples/vite/playwright/index.html b/packages/samples/vite/playwright/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<script type="module" src="/node_modules/@public-ui/components/dist/kolibri/kolibri.esm.js"></script>
+	<title>Testing Page</title>
+</head>
+
+<body>
+	<div id="root"></div>
+	<script type="module" src="./index.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/samples/vite/playwright/index.tsx b/packages/samples/vite/playwright/index.tsx
@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';
diff --git a/packages/samples/vite/prettier.config.js b/packages/samples/vite/prettier.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	...require('@leanup/stack/prettier.config'),
+	printWidth: 160,
+	singleQuote: true,
+	useTabs: true,
+};
diff --git a/packages/samples/vite/public/.htaccess b/packages/samples/vite/public/.htaccess
@@ -0,0 +1,3 @@
+RewriteEngine On
+RewriteCond %{HTTPS} !=on
+RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
diff --git a/packages/samples/vite/public/index.html b/packages/samples/vite/public/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+	<head>
+		<title>KoliBri | Public UI</title>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
+		<link rel="stylesheet" href="assets/codicons/codicon.css" />
+		<link rel="stylesheet" href="main.css" />
+		<meta name="robots" content="noindex" />
+		<meta name="kolibri" content="dev-mode=true" />
+	</head>
+	<body>
+		<div id="app"></div>
+		<script async src="main.js"></script>
+		<noscript>This website requires that you enable JavaScript.</noscript>
+	</body>
+</html>
diff --git a/packages/samples/vite/public/robots.txt b/packages/samples/vite/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/packages/samples/vite/src/App.css b/packages/samples/vite/src/App.css
@@ -0,0 +1,14 @@
+.App {
+	text-align: center;
+}
+
+.App-header {
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
+}
diff --git a/packages/samples/vite/src/App.tsx b/packages/samples/vite/src/App.tsx
@@ -0,0 +1,47 @@
+import './App.css';
+import { KolButton } from '@public-ui/react';
+import { StatusBadgeWithKol } from './components/StatusBadgeWithKol';
+import { StatusBadgeWithoutKol } from './components/StatusBadgeWithoutKol';
+
+function App() {
+	return (
+		<div className="App">
+			<header className="App-header">
+				<p>Hello Vite + React + KoliBri!</p>
+				<KolButton
+					_label="Primary"
+					_on={{
+						onClick: () => {
+							console.log('Clicked primary');
+						},
+					}}
+					_variant="primary"
+				/>
+				<KolButton
+					_label="Secondary"
+					_on={{
+						onClick: () => {
+							console.log('Clicked secondary');
+						},
+					}}
+					_variant="secondary"
+				/>
+				<KolButton
+					_hideLabel
+					_label="Danger"
+					_icons="codicon codicon-trash"
+					_on={{
+						onClick: () => {
+							console.log('Clicked danger');
+						},
+					}}
+					_variant="danger"
+				/>
+				<StatusBadgeWithKol />
+				<StatusBadgeWithoutKol />
+			</header>
+		</div>
+	);
+}
+
+export default App;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Import styles, initialize component theme here.
		// import '../src/common.css';