@softwareone/spi-sv5-library 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,23 @@
-# create-svelte
+# SoftwareOne SPI Component Library for Svelte
+This library provides a set of reusable components to help you build modern web applications with Svelte 5 (Runes) and SvelteKit 2. Each component is designed to be easily customizable and integrate seamlessly with your Svelte projects.
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+## Installation
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+To install the library, use the following command:
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm install @softwareone/swo-spi-svelte5-library
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
+## Usage
 
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
+Import the components you need into your Svelte application:
 
-```bash
-npm run build
+```javascript
+import { Button, Modal, Spinner } from '@softwareone/swo-spi-svelte5-library';
 ```
 
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+# List of components
+- Button
+- Modal
+- Spinner

package/dist/Button/Button.svelte

@@ -165,5 +165,6 @@
         background: var(--brand-primary, #e0e5e8);
         color: var(--brand-white, #6b7180);
         cursor: not-allowed;
+        border: none;
     }
 </style>

package/dist/Modal/Modal.svelte

@@ -3,33 +3,30 @@
 	import ModalFooter from './ModalFooter.svelte';
 	import ModalHeader from './ModalHeader.svelte';
 
-	let { headerTitle, contentTitle, contentMessage, contentCodeMessage, cancelButton, okButton } =
-		$props();
+	interface ModalProps {
+		headerTitle?: string;
+		contentTitle?: string;
+		contentMessage?: string;
+		contentCodeMessage?: string;
+		cancelButton?: () => void;
+		okButton?: () => void;
+	}
+
+	let {
+		headerTitle,
+		contentTitle,
+		contentMessage,
+		contentCodeMessage,
+		cancelButton,
+		okButton
+	}: ModalProps = $props();
 
-	headerTitle = headerTitle || 'Modal title';
-	contentTitle = contentTitle || 'Error title';
-	contentMessage =
-		contentMessage ||
-		'The text displayed here serves as a placeholder for the error modal content.';
-	contentCodeMessage =
-		contentCodeMessage ||
-		`Placeholder error code:# Handle specific error: invalid value error_message = f"Error: Invalid value - {ve}" return {'error': error_message, 'error_code': 400}`;
-	cancelButton =
-		cancelButton ||
-		function () {
-			console.log('cancelButton');
-		};
-	okButton =
-		okButton ||
-		function () {
-			console.log('okButton');
-		};
 </script>
 
 <div class="modal">
-	<ModalHeader {headerTitle} />
+	<ModalHeader {headerTitle}/>
 	<ModalContent {contentTitle} {contentMessage} {contentCodeMessage} />
-	<ModalFooter {cancelButton} {okButton} />
+	<ModalFooter {cancelButton} {okButton}/>
 </div>
 
 <style>

package/dist/Modal/Modal.svelte.d.ts

@@ -1,10 +1,11 @@
-declare const Modal: import("svelte").Component<{
-    headerTitle: any;
-    contentTitle: any;
-    contentMessage: any;
-    contentCodeMessage: any;
-    cancelButton: any;
-    okButton: any;
-}, {}, "">;
+interface ModalProps {
+    headerTitle?: string;
+    contentTitle?: string;
+    contentMessage?: string;
+    contentCodeMessage?: string;
+    cancelButton?: () => void;
+    okButton?: () => void;
+}
+declare const Modal: import("svelte").Component<ModalProps, {}, "">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Modal/ModalContent.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { Copy, Check } from 'lucide-svelte'
 
-	let { contentTitle, contentMessage, contentCodeMessage } = $props();
+	interface ModalContentProps {
+		contentTitle?: string;
+		contentMessage?: string;
+		contentCodeMessage?: string;
+	}
+
+	let { contentTitle, contentMessage, contentCodeMessage }: ModalContentProps = $props();
 
 	let copyCodeContent = $state(contentCodeMessage);
 	let copyCodeState = $state(false);
@@ -10,6 +16,14 @@
 		navigator.clipboard.writeText(copyCodeContent);
 		copyCodeState = true;
 	}
+
+	contentTitle = contentTitle || 'Error title';
+	contentMessage =
+		contentMessage ||
+		'The text displayed here serves as a placeholder for the error modal content.';
+	contentCodeMessage =
+		contentCodeMessage ||
+		`Placeholder error code:# Handle specific error: invalid value error_message = f"Error: Invalid value - {ve}" return {'error': error_message, 'error_code': 400}`;
 </script>
 
 <div class="modal-content">

package/dist/Modal/ModalContent.svelte.d.ts

@@ -1,7 +1,8 @@
-declare const ModalContent: import("svelte").Component<{
-    contentTitle: any;
-    contentMessage: any;
-    contentCodeMessage: any;
-}, {}, "">;
+interface ModalContentProps {
+    contentTitle?: string;
+    contentMessage?: string;
+    contentCodeMessage?: string;
+}
+declare const ModalContent: import("svelte").Component<ModalContentProps, {}, "">;
 type ModalContent = ReturnType<typeof ModalContent>;
 export default ModalContent;

package/dist/Modal/ModalFooter.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+
+	interface ModalFooterProps {
+		cancelButton?: () => void;
+		okButton?: () => void;
+	}
 	
-	let { cancelButton, okButton } = $props();
+	let { cancelButton, okButton }: ModalFooterProps = $props();
 
 	cancelButton =
 		cancelButton ||

package/dist/Modal/ModalFooter.svelte.d.ts

@@ -1,6 +1,7 @@
-declare const ModalFooter: import("svelte").Component<{
-    cancelButton: any;
-    okButton: any;
-}, {}, "">;
+interface ModalFooterProps {
+    cancelButton?: () => void;
+    okButton?: () => void;
+}
+declare const ModalFooter: import("svelte").Component<ModalFooterProps, {}, "">;
 type ModalFooter = ReturnType<typeof ModalFooter>;
 export default ModalFooter;

package/dist/Modal/ModalHeader.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
-    import { OctagonAlert } from "lucide-svelte";
+    import { OctagonAlert } from 'lucide-svelte';
 
-    let { headerTitle } = $props();
+	interface ModalHeaderProps {
+		headerTitle?: string;
+	}
+
+    let { headerTitle }: ModalHeaderProps = $props();
+
+	headerTitle = headerTitle || 'Modal title';
 	
 </script>
 

package/dist/Modal/ModalHeader.svelte.d.ts

@@ -1,5 +1,6 @@
-declare const ModalHeader: import("svelte").Component<{
-    headerTitle: any;
-}, {}, "">;
+interface ModalHeaderProps {
+    headerTitle?: string;
+}
+declare const ModalHeader: import("svelte").Component<ModalHeaderProps, {}, "">;
 type ModalHeader = ReturnType<typeof ModalHeader>;
 export default ModalHeader;

package/dist/Spinner/Spinner.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	interface SpinnerProps {
+		size?: 'small' | 'medium' | 'large';
+	}
+
+	let { size }: SpinnerProps = $props();
+
+	size = size || 'large';
+
+	const sizes = {
+		small: {
+			pxsize: '16px',
+			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.2005 8C4.2005 10.0984 5.90159 11.7995 8 11.7995C10.0984 11.7995 11.7995 10.0984 11.7995 8C11.7995 5.90159 10.0984 4.2005 8 4.2005C5.90159 4.2005 4.2005 5.90159 4.2005 8Z" fill="#E0E5E8"/>
+  <path d="M8 13.8998C8 15.0597 8.95609 16.027 10.0763 15.7259C11.4189 15.365 12.6567 14.657 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.6567 1.34297 11.4189 0.634982 10.0763 0.274108C8.95609 -0.0269669 8 0.940313 8 2.10025C8 3.26019 9.00775 4.15735 9.99495 4.76635C10.244 4.91998 10.4764 5.10307 10.6867 5.31335C11.3992 6.02589 11.7995 6.99231 11.7995 8C11.7995 9.00769 11.3992 9.97411 10.6867 10.6867C10.4764 10.8969 10.244 11.08 9.99495 11.2336C9.00775 11.8427 8 12.7398 8 13.8998Z" fill="#472AFF"/>
+</svg>`
+		},
+		medium: {
+			pxsize: '33px',
+			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
+  <path d="M33 16.5C33 25.6127 25.6127 33 16.5 33C7.3873 33 0 25.6127 0 16.5C0 7.3873 7.3873 0 16.5 0C25.6127 0 33 7.3873 33 16.5ZM3.4924 16.5C3.4924 23.6839 9.3161 29.5076 16.5 29.5076C23.6839 29.5076 29.5076 23.6839 29.5076 16.5C29.5076 9.3161 23.6839 3.4924 16.5 3.4924C9.3161 3.4924 3.4924 9.3161 3.4924 16.5Z" fill="#E0E5E8"/>
+  <path d="M16.5 31.2538C16.5 32.2182 17.2841 33.0096 18.2431 32.9077C21.9784 32.511 25.4865 30.848 28.1673 28.1673C31.2616 25.0729 33 20.8761 33 16.5C33 12.1239 31.2616 7.92709 28.1673 4.83274C25.4865 2.15202 21.9784 0.488977 18.2431 0.0922724C17.2841 -0.00957781 16.5 0.781801 16.5 1.7462C16.5 2.7106 17.2853 3.48033 18.2411 3.6094C21.048 3.98847 23.6725 5.27693 25.6978 7.30224C28.1372 9.74164 29.5076 13.0502 29.5076 16.5C29.5076 19.9498 28.1372 23.2584 25.6978 25.6978C23.6725 27.7231 21.048 29.0115 18.2411 29.3906C17.2853 29.5197 16.5 30.2894 16.5 31.2538Z" fill="#472AFF"/>
+</svg>`
+		},
+		large: {
+			pxsize: '40px',
+			svg: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+  <path d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z" fill="#E0E5E8"/>
+  <path d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z" fill="#472AFF"/>
+</svg>`
+		}
+	};
+
+	let pxsize = $state(sizes[size].pxsize);
+	let svg = $state(sizes[size].svg);
+</script>
+
+<div class="spinner-container">
+	<div class="spinner" style="width: {pxsize}; height: {pxsize};">
+		{@html svg}
+	</div>
+</div>
+
+<style>
+	.spinner-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+
+	.spinner {
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/Spinner/Spinner.svelte.d.ts

@@ -0,0 +1,6 @@
+interface SpinnerProps {
+    size?: 'small' | 'medium' | 'large';
+}
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 import Button from "./Button/Button.svelte";
 import Modal from "./Modal/Modal.svelte";
-export { Button, Modal };
+import Spinner from "./Spinner/Spinner.svelte";
+export { Button, Modal, Spinner };

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
 import Button from "./Button/Button.svelte";
 import Modal from "./Modal/Modal.svelte";
-export { Button, Modal };
+import Spinner from "./Spinner/Spinner.svelte";
+export { Button, Modal, Spinner };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -45,6 +45,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-node": "^5.2.12",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",