ecmc-design-core 0.0.1

package/README.md

@@ -0,0 +1,55 @@
+# ecmc-design-core
+
+Atoms and molecules for the ECMC design system built with Svelte 5.
+
+## Overview
+
+This is an opinionated component library providing foundational UI components (atoms) and compound components (molecules) for building consistent user interfaces. The library is built with Svelte 5 and includes TypeScript support and Storybook integration.
+
+## Development
+
+Start the development server:
+
+```sh
+bun dev
+# or
+npm run dev
+```
+
+View components in Storybook:
+
+```sh
+bun storybook
+# or
+npm run storybook
+```
+
+The Storybook interface will be available at `http://localhost:6006`.
+
+## Building
+
+To build the preview app:
+
+```sh
+bun build
+# or
+npm run build
+```
+
+## Scripts
+
+- `dev` - Start development server
+- `build` - Build the library for production
+- `storybook` - Launch Storybook development server
+- `build-storybook` - Build Storybook for deployment
+- `lint` - Run linting checks
+- `format` - Format code with Prettier
+- `check` - Run Svelte type checking
+
+## License
+
+MIT
+
+## Author
+
+Arad Fadaei - [fadaei.dev](https://www.fadaei.dev)

package/dist/atoms/button/Button.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Centered from '../container/sub/centered.container.svelte';
+	import Text from '../text/Text.svelte';
+	import { cn } from '../../utils/cn.js';
+	import { buttonVariantClasses, defaultProps } from './constants.js';
+	import type { ButtonProps } from './types.js';
+
+	let { children, onclick, variant = defaultProps.variant! }: ButtonProps = $props();
+
+	let computedClasses = $derived(cn(buttonVariantClasses[variant]));
+</script>
+
+<button class={computedClasses} disabled={variant === 'disabled'} {onclick}>
+	<Centered padding="xsm">
+		<Text>
+			{@render children?.()}
+		</Text>
+	</Centered>
+</button>
+
+<style>
+	button {
+		border: none;
+		border-radius: var(--rounding-size-1);
+		cursor: pointer;
+	}
+
+	.button--primary {
+		background-color: var(--primary-600);
+		color: var(--neutral-100);
+	}
+
+	.button--primary:hover {
+		background-color: var(--primary-700);
+	}
+
+	.button--primary:active {
+		background-color: var(--primary-900);
+	}
+
+	.button--secondary {
+		background-color: var(--neutral-400);
+		color: var(--neutral-100);
+	}
+
+	.button--secondary:hover {
+		background-color: var(--neutral-500);
+		color: var(--neutral-100);
+	}
+
+	.button--secondary:active {
+		background-color: var(--neutral-600);
+	}
+
+	.button--disabled {
+		background-color: var(--neutral-300);
+		color: var(--neutral-600);
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+</style>

package/dist/atoms/button/Button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/atoms/button/constants.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps } from './types.js';
+export declare const defaultProps: Partial<ButtonProps>;
+export declare const buttonVariantClasses: {
+    readonly primary: "button--primary";
+    readonly secondary: "button--secondary";
+    readonly disabled: "button--disabled";
+};

package/dist/atoms/button/constants.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+    variant: 'primary'
+};
+export const buttonVariantClasses = {
+    primary: 'button--primary',
+    secondary: 'button--secondary',
+    disabled: 'button--disabled'
+};

package/dist/atoms/button/types.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+
+/**
+ * Props for the Button component
+ *
+ * @example
+ * ```svelte
+ * <Button variant="primary" onclick={handleClick}>
+ *   Click Me
+ * </Button>
+ * ```
+ */
+export interface ButtonProps {
+	/**
+	 * The content to be rendered inside the button
+	 */
+	children?: Snippet;
+
+	/**
+	 * Visual variant that determines the button's appearance
+	 * - `primary`: Main action button with prominent styling
+	 * - `secondary`: Alternative action with less emphasis
+	 * - `disabled`: Non-interactive state
+	 *
+	 * @default 'primary'
+	 */
+	variant?: 'primary' | 'secondary' | 'disabled';
+
+	/**
+	 * Click handler for button interactions
+	 *
+	 * @param event - The native mouse click event
+	 */
+	onclick?: (event: MouseEvent) => void;
+}

package/dist/atoms/container/Container.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { ContainerProps } from './types.js';
+	import { defaultProps, paddingClasses } from './constants.js';
+
+	// Props with defaults
+	let {
+		children,
+		padding = defaultProps.padding!,
+		fill = defaultProps.fill!,
+		metrics = $bindable(),
+		bg = defaultProps.bg!,
+		...restProps
+	}: ContainerProps = $props();
+
+	let computedClasses = $derived(
+		cn(paddingClasses[padding], fill ? 'container--fill' : '', bg ? 'container--bg' : '')
+	);
+
+	// Container element reference
+	let containerElement: HTMLDivElement;
+
+	// Update metrics when element changes or on resize/scroll
+	function updateMetrics() {
+		if (!containerElement) return;
+
+		const rect = containerElement.getBoundingClientRect();
+
+		// Create a new metrics object to trigger reactivity
+		metrics = {
+			width: rect.width,
+			height: rect.height,
+			top: rect.top,
+			left: rect.left,
+			offsetTop: containerElement.offsetTop,
+			offsetLeft: containerElement.offsetLeft,
+			scrollWidth: containerElement.scrollWidth,
+			scrollHeight: containerElement.scrollHeight,
+			scrollTop: containerElement.scrollTop,
+			scrollLeft: containerElement.scrollLeft,
+			clientWidth: containerElement.clientWidth,
+			clientHeight: containerElement.clientHeight
+		};
+	}
+
+	// Initialize metrics when element is bound
+	$effect(() => {
+		if (containerElement) {
+			updateMetrics();
+
+			// Create ResizeObserver to track size changes
+			const resizeObserver = new ResizeObserver(() => {
+				updateMetrics();
+			});
+
+			resizeObserver.observe(containerElement);
+			containerElement.addEventListener('scroll', updateMetrics);
+
+			// Cleanup function
+			return () => {
+				resizeObserver.disconnect();
+				containerElement.removeEventListener('scroll', updateMetrics);
+			};
+		}
+		return () => {}; // Explicit return for when containerElement is not available
+	});
+</script>
+
+<div bind:this={containerElement} class={computedClasses} {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.container--padding-none {
+		padding: var(--spacing-none);
+	}
+
+	.container--padding-xsm {
+		padding: var(--spacing-xsm);
+	}
+
+	.container--padding-sm {
+		padding: var(--spacing-sm);
+	}
+
+	.container--padding-md {
+		padding: var(--spacing-md);
+	}
+
+	.container--padding-lg {
+		padding: var(--spacing-lg);
+	}
+
+	.container--padding-xl {
+		padding: var(--spacing-xl);
+	}
+
+	.container--fill {
+		height: 100%;
+		width: 100%;
+	}
+
+	.container--bg {
+		background-color: light-dark(var(--neutral-200), var(--neutral-800));
+	}
+</style>

package/dist/atoms/container/Container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContainerProps } from './types.js';
+declare const Container: import("svelte").Component<ContainerProps, {}, "metrics">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/atoms/container/constants.d.ts

@@ -0,0 +1,16 @@
+import type { ContainerProps } from './types.js';
+/**
+ * Default props for the container atom
+ */
+export declare const defaultProps: Partial<ContainerProps>;
+/**
+ * CSS class mappings for padding variants
+ */
+export declare const paddingClasses: {
+    readonly none: "container--padding-none";
+    readonly xsm: "container--padding-xsm";
+    readonly sm: "container--padding-sm";
+    readonly md: "container--padding-md";
+    readonly lg: "container--padding-lg";
+    readonly xl: "container--padding-xl";
+};

package/dist/atoms/container/constants.js

@@ -0,0 +1,19 @@
+/**
+ * Default props for the container atom
+ */
+export const defaultProps = {
+    padding: 'md',
+    fill: false,
+    bg: false
+};
+/**
+ * CSS class mappings for padding variants
+ */
+export const paddingClasses = {
+    none: 'container--padding-none',
+    xsm: 'container--padding-xsm',
+    sm: 'container--padding-sm',
+    md: 'container--padding-md',
+    lg: 'container--padding-lg',
+    xl: 'container--padding-xl'
+};

package/dist/atoms/container/sub/box.container.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Container from '../Container.svelte';
+	import type { InternalBoxProps } from '../types.js';
+
+	let {
+		children,
+		variant,
+		gap = 'md',
+		align = 'stretch',
+		justify = 'flex-start',
+		wrap = false,
+		metrics = $bindable(),
+		...containerProps
+	}: InternalBoxProps = $props();
+
+	let flexWrap = $derived(wrap ? 'wrap' : 'nowrap');
+	let flexDirection = $derived(variant === 'vertical' ? 'column' : 'row');
+</script>
+
+<Container bind:metrics {...containerProps}>
+	<div
+		class="box"
+		style="gap: var(--spacing-{gap}); align-items: {align}; justify-content: {justify}; flex-wrap: {flexWrap}; flex-direction: {flexDirection};"
+	>
+		{@render children?.()}
+	</div>
+</Container>
+
+<style>
+	.box {
+		display: flex;
+	}
+</style>

package/dist/atoms/container/sub/box.container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InternalBoxProps } from '../types.js';
+declare const Box: import("svelte").Component<InternalBoxProps, {}, "metrics">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/atoms/container/sub/centered.container.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Container from '../Container.svelte';
+	import type { CenteredProps } from '../types.js';
+
+	let {
+		children,
+		horizontal = true,
+		vertical = true,
+		metrics = $bindable(),
+		...containerProps
+	}: CenteredProps = $props();
+
+	let justifyContent = $derived(horizontal ? 'center' : 'flex-start');
+	let alignItems = $derived(vertical ? 'center' : 'stretch');
+</script>
+
+<Container bind:metrics {...containerProps}>
+	<div class="centered" style="justify-content: {justifyContent}; align-items: {alignItems};">
+		{@render children?.()}
+	</div>
+</Container>
+
+<style>
+	.centered {
+		display: flex;
+		height: 100%;
+	}
+</style>

package/dist/atoms/container/sub/centered.container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CenteredProps } from '../types.js';
+declare const Centered: import("svelte").Component<CenteredProps, {}, "metrics">;
+type Centered = ReturnType<typeof Centered>;
+export default Centered;

package/dist/atoms/container/sub/gridbox.container.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Container from '../Container.svelte';
+	import type { GridBoxProps } from '../types.js';
+
+	let {
+		children,
+		columns = 2,
+		gap = 'md',
+		autoFlow = 'row',
+		metrics = $bindable(),
+		...containerProps
+	}: GridBoxProps = $props();
+
+	let gridTemplateColumns = $derived(
+		typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns
+	);
+</script>
+
+<Container bind:metrics {...containerProps}>
+	<div
+		class="gridbox"
+		style="grid-template-columns: {gridTemplateColumns}; gap: var(--spacing-{gap}); grid-auto-flow: {autoFlow};"
+	>
+		{@render children?.()}
+	</div>
+</Container>
+
+<style>
+	.gridbox {
+		display: grid;
+	}
+</style>

package/dist/atoms/container/sub/gridbox.container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GridBoxProps } from '../types.js';
+declare const Gridbox: import("svelte").Component<GridBoxProps, {}, "metrics">;
+type Gridbox = ReturnType<typeof Gridbox>;
+export default Gridbox;

package/dist/atoms/container/sub/hbox.container.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Box from './box.container.svelte';
+	import type { BoxProps } from '../types.js';
+
+	let { metrics = $bindable(), ...props }: BoxProps = $props();
+</script>
+
+<Box variant="horizontal" bind:metrics {...props}>
+	{@render props.children?.()}
+</Box>

package/dist/atoms/container/sub/hbox.container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BoxProps } from '../types.js';
+declare const Hbox: import("svelte").Component<BoxProps, {}, "metrics">;
+type Hbox = ReturnType<typeof Hbox>;
+export default Hbox;

package/dist/atoms/container/sub/vbox.container.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import Box from './box.container.svelte';
+	import type { BoxProps } from '../types.js';
+
+	let { metrics = $bindable(), ...props }: BoxProps = $props();
+</script>
+
+<Box variant="vertical" bind:metrics {...props}>
+	{@render props.children?.()}
+</Box>

package/dist/atoms/container/sub/vbox.container.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BoxProps } from '../types.js';
+declare const Vbox: import("svelte").Component<BoxProps, {}, "metrics">;
+type Vbox = ReturnType<typeof Vbox>;
+export default Vbox;