feat: simplify stackblitz repos

AmadeusITGroup · Feb 23, 2024 · a09bf05 · a09bf05
1 parent 6707b71
commit a09bf05
Show file tree

Hide file tree

Showing 25 changed files with 3,156 additions and 67 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -60,6 +60,9 @@ jobs:
       - name: check stackblitz svelte lockfile
         run: npm ci --dry-run
         working-directory: demo/src/lib/stackblitz/svelte
+      - name: check stackblitz svelte tailwind lockfile
+        run: npm ci --dry-run
+        working-directory: demo/src/lib/stackblitz/svelte-tailwind
       - run: npm run test:coverage
       - uses: codecov/codecov-action@v4
         with:

diff --git a/demo/src/lib/stackblitz/angular/angular.json b/demo/src/lib/stackblitz/angular/angular.json
@@ -22,6 +22,7 @@
 						"outputPath": "dist/demo",
 						"scripts": [],
 						"inlineStyleLanguage": "scss",
+						"styles": ["src/main.css"],
 						"tsConfig": "tsconfig.json",
 						"loader": {
 							".txt": "text",

diff --git a/demo/src/lib/stackblitz/angular/index.html b/demo/src/lib/stackblitz/angular/index.html
@@ -4,9 +4,14 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>AgnosUI angular stackblitz demo</title>
-		<!--	STYLE CONFIG -->
+		<link
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+			crossorigin="anonymous"
+		/>
 	</head>
-	<body style="margin: 1rem; min-height: 100vh!">
+	<body class="m-3 min-vh-100">
 		<ng-component id="root"></ng-component>
 	</body>
 </html>
diff --git a/demo/src/lib/stackblitz/angular/package-lock.json b/demo/src/lib/stackblitz/angular/package-lock.json
diff --git a/demo/src/lib/stackblitz/angular/package.json b/demo/src/lib/stackblitz/angular/package.json
@@ -8,6 +8,8 @@
 		"watch": "ng build --watch --configuration development"
 	},
 	"devDependencies": {
+		"@amadeus-it-group/tansu": "1.0.0",
+		"@floating-ui/dom": "^1.6.2",
 		"@angular-devkit/build-angular": "~17.2.0",
 		"@angular/animations": "~17.2.1",
 		"@angular/cli": "~17.2.0",

diff --git a/demo/src/lib/stackblitz/angular/src/main.css b/demo/src/lib/stackblitz/angular/src/main.css
@@ -0,0 +1 @@
+@import '@agnos-ui/style-bootstrap/css/agnosui.css';
diff --git a/demo/src/lib/stackblitz/index.ts b/demo/src/lib/stackblitz/index.ts
@@ -6,63 +6,6 @@ import type {AsyncFilesSet, SampleInfo} from '../layout/sample';
 type StackblitzProcessor = (project: Project, sample: SampleInfo, framework: Frameworks) => Promise<void>;
 
 const isBootstrapCondition = (sample: SampleInfo) => sample.style === 'bootstrap';
-const addTailwindConfig = (project: Project, framework: Frameworks) => {
-	const packageJson = JSON.parse(project.files['package.json']);
-	packageJson.devDependencies['autoprefixer'] = '^10.4.16';
-	packageJson.devDependencies['postcss'] = '^8.4.33';
-	packageJson.devDependencies['tailwindcss'] = '^3.4.1';
-	project.files['package.json'] = JSON.stringify(packageJson, null, '\t');
-	project.files['tailwind.config.js'] = `
-		module.exports = {
-			content: ['./src/**/*.{html,js,svelte,ts,tsx}'],
-			theme: {
-				extend: {},
-			},
-			plugins: [],
-		};`;
-	project.files['postcss.config.js'] = `
-		export default {
-			plugins: {
-				'tailwindcss/nesting': {},
-				tailwindcss: {},
-				autoprefixer: {},
-			},
-		};`;
-	project.files['main.css'] = `
-	@import 'tailwindcss/base';
-	@import 'tailwindcss/components';
-	@import 'tailwindcss/utilities';
-	`;
-	const tailwindCss = `<link rel="stylesheet" href="main.css" />`;
-	project.files['index.html'] = project.files['index.html'].replace('<!--	STYLE CONFIG -->', tailwindCss);
-};
-
-const addBootstrapConfig = (project: Project, framework: Frameworks) => {
-	const bootstrapLink = `<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-													integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>`;
-	project.files['index.html'] = project.files['index.html'].replace('<!--	STYLE CONFIG -->', bootstrapLink);
-	switch (framework) {
-		case 'angular': {
-			const angularJson = JSON.parse(project.files['angular.json']);
-			angularJson['projects']['demo']['architect']['build']['options']['styles'] = ['@agnos-ui/style-bootstrap/css/agnosui.css'];
-			project.files['angular.json'] = JSON.stringify(angularJson, null, '\t');
-			break;
-		}
-		case 'react': {
-			project.files['src/main.tsx'] = 'import "@agnos-ui/style-bootstrap/css/agnosui.css";\n' + project.files['src/main.tsx'];
-			break;
-		}
-		case 'svelte': {
-			project.files['src/main.ts'] = 'import "@agnos-ui/style-bootstrap/css/agnosui.css";\n' + project.files['src/main.ts'];
-			break;
-		}
-	}
-};
-
-const styleConfiguration: Record<SampleInfo['style'], (project: Project, framework: Frameworks) => void> = {
-	tailwind: addTailwindConfig,
-	bootstrap: addBootstrapConfig,
-};
 
 const addAsyncFiles =
 	(files: AsyncFilesSet, prefix = '', removePrefix?: string, condition: (sample: SampleInfo) => boolean = () => true): StackblitzProcessor =>
@@ -91,15 +34,21 @@ const frameworkCreateStackblitz: Record<Frameworks, StackblitzProcessor[]> = {
 	react: [
 		addAsyncFiles(import.meta.glob('./react/**', {as: 'raw', import: 'default'}) as any, '', './react/'),
 		async (project, sample) => {
-			project.files['src/main.tsx'] = `import {createRoot} from "react-dom/client";\nimport App from ${JSON.stringify(
+			project.files['src/main.tsx'] = `import {createRoot} from "react-dom/client";\nimport "./main.css";\nimport App from ${JSON.stringify(
 				`./${sample.files.react.entryPoint.replace(/\.tsx?$/, '')}`,
 			)};\nconst rootElement = document.getElementById('root');\nconst root = createRoot(rootElement);\nroot.render(<App />)`;
 		},
 	],
 	svelte: [
-		addAsyncFiles(import.meta.glob('./svelte/**', {as: 'raw', import: 'default'}) as any, '', './svelte/'),
+		addAsyncFiles(import.meta.glob('./svelte/**', {as: 'raw', import: 'default'}) as any, '', './svelte/', isBootstrapCondition),
+		addAsyncFiles(
+			import.meta.glob('./svelte-tailwind/**', {as: 'raw', import: 'default'}) as any,
+			'',
+			'./svelte-tailwind/',
+			(sample) => !isBootstrapCondition(sample),
+		),
 		async (project, sample) => {
-			project.files['src/main.ts'] = `import App from ${JSON.stringify(
+			project.files['src/main.ts'] = `import "./main.css";\nimport App from ${JSON.stringify(
 				`./${sample.files.svelte.entryPoint}`,
 			)};\nconst app = new App({target: document.getElementById('root')});\nexport default app;`;
 			project.template = 'node';
@@ -236,7 +185,6 @@ export const openInStackblitz = async (sample: SampleInfo, framework: Frameworks
 	for (const processor of processors) {
 		await processor(project, sample, framework);
 	}
-	styleConfiguration[sample.style](project, framework);
 	const openFile = [entryPoint, ...Object.keys(files).filter((file) => file != entryPoint)].map((file) => `src/${file}`).join(',');
 	stackblitz.openProject(project, {newWindow: true, openFile});
 };
diff --git a/demo/src/lib/stackblitz/react/index.html b/demo/src/lib/stackblitz/react/index.html
@@ -4,9 +4,14 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>AgnosUI react stackblitz demo</title>
-		<!--	STYLE CONFIG -->
+		<link
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+			crossorigin="anonymous"
+		/>
 	</head>
-	<body style="margin: 1rem; min-height: 100vh!">
+	<body class="m-3 min-vh-100">
 		<div id="root"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>

diff --git a/demo/src/lib/stackblitz/react/package-lock.json b/demo/src/lib/stackblitz/react/package-lock.json
diff --git a/demo/src/lib/stackblitz/react/package.json b/demo/src/lib/stackblitz/react/package.json
@@ -8,6 +8,8 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
+		"@amadeus-it-group/tansu": "1.0.0",
+		"@floating-ui/dom": "^1.6.2",
 		"@types/react": "^18.2.55",
 		"@types/react-dom": "^18.2.19",
 		"@vitejs/plugin-react": "^4.2.1",

diff --git a/demo/src/lib/stackblitz/react/src/main.css b/demo/src/lib/stackblitz/react/src/main.css
@@ -0,0 +1 @@
+@import '@agnos-ui/style-bootstrap/css/agnosui.css';
diff --git a/demo/src/lib/stackblitz/svelte-tailwind/index.html b/demo/src/lib/stackblitz/svelte-tailwind/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>AgnosUI svelte stackblitz demo</title>
+	</head>
+	<body class="m-4 min-h-dvh">
+		<div id="root"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>