@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/teleport/index.ts

@@ -0,0 +1,2 @@
+export * from './teleport.component';
+export * from './teleport.service';

package/src/teleport/readme.md

@@ -0,0 +1,91 @@
+# Mo Kit
+
+Mo Kit is a collection of web components built using Lit Element and RxJS. This project aims to provide a set of reusable components that can enhance the user experience and simplify development in web applications.
+
+## Components
+
+### Mo-Teleport
+
+The `mo-teleport` component allows you to dynamically move elements in the DOM without losing their state. It provides a convenient way to teleport elements from one location to another within your web application. With `mo-teleport`, you can easily create smooth transitions and animations when elements need to be moved around.
+
+#### Usage
+
+```html
+<mo-teleport to="destination">
+  <!-- Elements to be teleported -->
+</mo-teleport>
+```
+
+- The `to` attribute specifies the destination where the elements will be teleported. It can be an element ID or a CSS selector.
+
+### Mo-Animate
+
+The `mo-animate` component provides a simple yet powerful way to add animations to your web application. It leverages the power of RxJS to create smooth and interactive animations that can bring your UI to life. With `mo-animate`, you can easily define animations based on events or time intervals.
+
+#### Usage
+
+```html
+<mo-animate
+  @start="${handleAnimationStart}"
+  @end="${handleAnimationEnd}"
+  .duration="${300}"
+  .easing="${'ease-out'}"
+>
+  <!-- Elements to be animated -->
+</mo-animate>
+```
+
+- The `start` and `end` events allow you to listen for animation start and end events respectively.
+- The `duration` attribute specifies the duration of the animation in milliseconds.
+- The `easing` attribute defines the easing function to be used for the animation.
+
+## Getting Started
+
+To use Mo Kit in your project, follow these steps:
+
+1. Install the package using your preferred package manager:
+
+   ```bash
+   npm install mo-kit
+   ```
+
+2. Import the components you want to use in your JavaScript or TypeScript file:
+
+   ```javascript
+   import { MoTeleport, MoAnimate } from "mo-kit";
+   ```
+
+3. Use the components in your HTML templates:
+
+   ```html
+   <mo-teleport to="#destination">
+     <!-- Elements to be teleported -->
+   </mo-teleport>
+
+   <mo-animate
+     @start="${handleAnimationStart}"
+     @end="${handleAnimationEnd}"
+     .duration="${300}"
+     .easing="${'ease-out'}"
+   >
+     <!-- Elements to be animated -->
+   </mo-animate>
+   ```
+
+4. Customize the components and explore their various options according to your specific needs. Refer to the documentation for detailed information on available properties, events, and methods.
+
+## Contributing
+
+Contributions to Mo Kit are welcome! If you would like to contribute, please follow the guidelines outlined in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+
+## License
+
+Mo Kit is released under the [MIT License](LICENSE).
+
+## Acknowledgments
+
+Mo Kit is built on top of the amazing Lit Element and RxJS libraries. We would like to express our gratitude to the respective development teams for their hard work and dedication.
+
+## Contact
+
+For any questions, suggestions, or feedback, please reach out to the project maintainers at [mo-kit@example.com](mailto:mo-kit@example.com).

package/src/teleport/teleport.component.ts

@@ -0,0 +1,132 @@
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { filter, fromEvent, merge, of, takeUntil, tap, throwIfEmpty } from 'rxjs'
+import { FINDING_MORTIES, FINDING_MORTIES_EVENT, HERE_RICKY, HERE_RICKY_EVENT } from '..'
+import {
+	HereMorty,
+	HereMortyEvent,
+	WhereAreYouRicky,
+	WhereAreYouRickyEvent,
+	default as teleport,
+	default as teleportationService,
+} from './teleport.service'
+import { watchElementRect } from './watcher'
+import { $LitElement } from '@mixins/index'
+@customElement('schmancy-teleport')
+export class SchmancyTeleportation extends $LitElement(css``) {
+	/**
+	 * @attr {string} uuid - The component tag to teleport
+	 * @readonly
+	 */
+	@property({ type: Number, reflect: true }) uuid = Math.floor(Math.random() * Date.now())
+
+	/**
+	 * @attr {string} id - The component tag to teleport
+	 * @required
+	 */
+	@property({ type: String }) id!: string
+
+	@property({ type: Number }) delay = 0
+
+	debugging = import.meta.env.DEV ? true : false
+
+	get _slottedChildren() {
+		const slot = this.shadowRoot.querySelector('slot')
+		return slot.assignedElements({ flatten: true })
+	}
+
+	connectedCallback(): void {
+		if (this.id === undefined) throw new Error('id is required')
+		super.connectedCallback()
+		merge(
+			fromEvent<FINDING_MORTIES_EVENT>(window, FINDING_MORTIES).pipe(
+				tap({
+					next: () => {
+						this.dispatchEvent(
+							new CustomEvent<HERE_RICKY_EVENT['detail']>(HERE_RICKY, {
+								detail: {
+									component: this,
+								},
+								bubbles: true,
+								composed: true,
+							}),
+						)
+					},
+				}),
+			),
+			fromEvent<WhereAreYouRickyEvent>(window, WhereAreYouRicky).pipe(
+				tap({
+					next: e => {
+						if (e.detail.id === this.id && this.uuid && e.detail.callerID !== this.uuid) {
+							this.dispatchEvent(
+								new CustomEvent<HereMortyEvent['detail']>(HereMorty, {
+									detail: {
+										component: this,
+									},
+									bubbles: true,
+									composed: true,
+								}),
+							)
+						}
+					},
+				}),
+			),
+		)
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe()
+	}
+
+	async firstUpdated() {
+		of(teleportationService.activeTeleportations.get(this.id))
+			.pipe(
+				filter(a => !!a),
+				takeUntil(this.disconnecting),
+				throwIfEmpty(),
+			)
+			.subscribe({
+				next: domRect => {
+					console.count('teleport')
+					this.style.setProperty('visibility', 'hidden')
+					// teleport.flipRequests.next({ from: component, to: this, stagger: 0 })
+					watchElementRect(this)
+						.pipe(takeUntil(this.disconnecting))
+						.subscribe({
+							next: e => {
+								teleportationService.activeTeleportations.set(this.id, e)
+								teleport.flipRequests.next({
+									from: {
+										rect: domRect,
+									},
+									to: {
+										rect: e,
+										element: this._slottedChildren[0] as HTMLElement,
+									},
+									host: this,
+								})
+							},
+						})
+				},
+				error: () => {
+					this.style.setProperty('visibility', 'visible')
+					watchElementRect(this)
+						.pipe(takeUntil(this.disconnecting))
+						.subscribe({
+							next: e => {
+								teleportationService.activeTeleportations.set(this.id, e)
+							},
+						})
+				},
+				complete: () => {},
+			})
+	}
+
+	render() {
+		return html`<slot></slot>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-teleport': SchmancyTeleportation
+	}
+}

package/src/teleport/teleport.service.ts

@@ -0,0 +1,139 @@
+import { bufferTime, concatMap, filter, fromEvent, map, of, Subject, take, tap, timeout, zip } from 'rxjs'
+import { SchmancyTeleportation } from './teleport.component'
+
+export type WhereAreYouRickyEvent = CustomEvent<{
+	id: string
+	callerID: number
+}>
+
+export const WhereAreYouRicky = 'whereAreYouRicky'
+
+export type HereMortyEvent = CustomEvent<{
+	component: SchmancyTeleportation
+}>
+
+export type FLIP_REQUEST = {
+	from: {
+		rect: DOMRect
+		element?: HTMLElement
+	}
+	to: {
+		rect: DOMRect
+		element: HTMLElement
+	}
+	stagger?: number
+	host: HTMLElement
+}
+export const HereMorty = 'hereMorty'
+
+class Teleportation {
+	activeTeleportations = new Map<string, DOMRect>()
+	flipRequests = new Subject<FLIP_REQUEST>()
+
+	constructor() {
+		this.flipRequests
+			.pipe(
+				bufferTime(1),
+				map(requests =>
+					requests.map(({ from, to, host }, i) => ({
+						from,
+						to,
+						host,
+						i,
+					})),
+				),
+				concatMap(requests => zip(requests.map(request => of(this.flip(request))))),
+			)
+			.subscribe()
+	}
+
+	find = (component: SchmancyTeleportation) => {
+		return zip([
+			fromEvent<HereMortyEvent>(window, HereMorty).pipe(
+				filter(
+					e =>
+						!!e.detail.component.uuid &&
+						!!component.id &&
+						e.detail.component.id === component.id &&
+						e.detail.component.uuid !== component.uuid,
+				),
+				map(e => e.detail.component),
+				take(1),
+			),
+			of(component).pipe(
+				tap(() => {
+					window.dispatchEvent(
+						new CustomEvent<WhereAreYouRickyEvent['detail']>(WhereAreYouRicky, {
+							detail: {
+								id: component.id,
+								callerID: component.uuid,
+							},
+						}),
+					)
+				}),
+			),
+		]).pipe(
+			map(([component]) => component),
+			timeout(0),
+		)
+	}
+
+	flip = (request: {
+		from: {
+			rect: DOMRect
+		}
+		to: {
+			element: HTMLElement
+			rect: DOMRect
+		}
+		host: HTMLElement
+		i: number
+	}) => {
+		const { from, to } = request
+
+		// Prepare the element for animation
+		const originalZIndex = to.element.style.zIndex
+		to.element.style.transformOrigin = 'top left'
+		to.element.style.setProperty('visibility', 'visible')
+		to.element.style.zIndex = '1000'
+
+		// "onBegin" logic goes here (since Web Animations doesn't have onBegin).
+		// If you had more logic, place it here:
+
+		// Calculate starting and ending transforms
+		const startX = from.rect.left - to.rect.left
+		const startY = from.rect.top - to.rect.top
+		const startScaleX = from.rect.width / to.rect.width
+		const startScaleY = from.rect.height / to.rect.height
+
+		// Create keyframes
+		const keyframes: Keyframe[] = [
+			{
+				transform: `translate(${startX}px, ${startY}px) scale(${startScaleX}, ${startScaleY})`,
+			},
+			{
+				transform: 'translate(0, 0) scale(1, 1)',
+			},
+		]
+
+		// Use native Web Animations API
+		const animation = to.element.animate(keyframes, {
+			duration: 250,
+			delay: 10, // if desired
+			// Approximate 'inOutQuad' via a cubic-bezier easing.
+			// You can adjust these values to taste, or use a standard one:
+			easing: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+			// or simply 'ease-in-out'
+		})
+
+		// "onComplete" logic goes here
+		animation.onfinish = () => {
+			to.element.style.zIndex = originalZIndex
+			to.element.style.transformOrigin = ''
+			// If you have additional cleanup, place it here
+		}
+	}
+}
+
+export const teleport = new Teleportation()
+export default teleport

package/src/teleport/watcher.ts

@@ -0,0 +1,20 @@
+import { Observable, interval } from 'rxjs'
+import { distinctUntilChanged, map, take } from 'rxjs/operators'
+
+// Function to monitor element's bounding client rect
+export function watchElementRect(element: Element): Observable<DOMRectReadOnly> {
+	return interval(50).pipe(
+		// startWith(true),
+		map(() => element.getBoundingClientRect()),
+		distinctUntilChanged(
+			(prev, curr) =>
+				prev.width === curr.width &&
+				prev.height === curr.height &&
+				prev.top === curr.top &&
+				prev.right === curr.right &&
+				prev.bottom === curr.bottom &&
+				prev.left === curr.left,
+		),
+		take(1),
+	)
+}

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea';

package/src/textarea/textarea.scss

@@ -0,0 +1,54 @@
+:host {
+	border: unset !important;
+	line-height: unset !important;
+	background: unset !important;
+	padding: unset !important;
+	font-size: unset !important;
+	box-shadow: unset !important;
+	width: -webkit-fill-available;
+	display: block;
+}
+
+:host([fillHeight]) {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+:host:focus {
+	box-shadow: unset !important;
+}
+
+textarea:focus-visible {
+	outline: none !important;
+}
+
+textarea {
+	/* Inherit typographic styles */
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	color: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	text-decoration: inherit;
+	text-indent: inherit;
+	text-shadow: inherit;
+	text-overflow: inherit;
+	text-rendering: inherit;
+	text-size-adjust: inherit;
+	text-align-last: inherit;
+	overflow-y: auto; /* Ensure content is scrollable if it exceeds the visible area */
+}
+
+@keyframes onAutoFillStart {
+	from {
+	}
+	to {
+	}
+}
+
+textarea:-webkit-autofill {
+	animation-name: onAutoFillStart;
+}