@3birds/midori-ui 0.0.13 → 0.0.15

package/dist/alert.d.ts

@@ -0,0 +1,6 @@
+import type { AlertState, AlertType } from './types';
+export declare const alert: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<AlertState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    trigger: (message: string, type?: AlertType, duration?: number) => void;
+    close: () => void;
+};

package/dist/alert.js

@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+const initialState = {
+    show: false,
+    message: '',
+    type: 'info',
+    duration: 3000
+};
+const { subscribe, set } = writable(initialState);
+export const alert = {
+    subscribe,
+    trigger: (message, type = 'info', duration = 3000) => {
+        set({ show: true, message, type, duration });
+    },
+    close: () => set(initialState)
+};

package/dist/assets/magnify-white.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>magnify</title>
+    <path
+      fill="#e0f1e8"
+      d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+    />
+  </svg>

package/dist/assets/magnify.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>magnify</title>
     <path
-      fill="#e0f1e8"
+      fill="currentColor"
       d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
     />
   </svg>

package/dist/assets/menu-white.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>menu</title>
+    <path fill="#e0f1e8" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+  </svg>

package/dist/assets/menu.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>menu</title>
-    <path fill="#e0f1e8" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+    <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
   </svg>

package/dist/auth.d.ts

@@ -0,0 +1,7 @@
+export declare function signIn(email: string, password: string): Promise<boolean>;
+export declare function signUp(email: string, password: string): Promise<boolean>;
+export declare function resetPassword(email: string): Promise<boolean>;
+export declare function signOut(): Promise<void>;
+export declare function toSigninErrorMessage(code: string): string;
+export declare function toSignupErrorMessage(code: string): string;
+export declare function toResetPasswordErrorMessage(code: string): string;

package/dist/auth.js

@@ -0,0 +1,72 @@
+import { signInWithEmailAndPassword, createUserWithEmailAndPassword, sendPasswordResetEmail, signOut as firebaseSignOut } from 'firebase/auth';
+import { auth } from './firebase';
+import { alert } from './alert';
+export async function signIn(email, password) {
+    try {
+        await signInWithEmailAndPassword(auth, email, password);
+        return true;
+    }
+    catch (e) {
+        alert.trigger(toSigninErrorMessage(e.code), 'error', 10000);
+        return false;
+    }
+}
+export async function signUp(email, password) {
+    try {
+        await createUserWithEmailAndPassword(auth, email, password);
+        return true;
+    }
+    catch (e) {
+        alert.trigger(toSignupErrorMessage(e.code), 'error', 10000);
+        return false;
+    }
+}
+export async function resetPassword(email) {
+    try {
+        await sendPasswordResetEmail(auth, email);
+        return true;
+    }
+    catch (e) {
+        alert.trigger(toResetPasswordErrorMessage(e.code), 'error', 10000);
+        return false;
+    }
+}
+export async function signOut() {
+    await firebaseSignOut(auth);
+}
+export function toSigninErrorMessage(code) {
+    switch (code) {
+        case 'auth/invalid-email':
+            return 'メールアドレスの形式が正しくありません。';
+        case 'auth/invalid-credential':
+            return 'メールアドレスまたはパスワードが正しくありません。';
+        case 'auth/user-disabled':
+            return 'このアカウントは無効化されています。';
+        case 'auth/too-many-requests':
+            return '試行回数が多すぎます。しばらく時間をおいてから再度お試しください。';
+        default:
+            return 'ログインに失敗しました。時間をおいて再度お試しください。';
+    }
+}
+export function toSignupErrorMessage(code) {
+    switch (code) {
+        case 'auth/email-already-in-use':
+            return 'このメールアドレスは既に登録されています。';
+        case 'auth/invalid-email':
+            return 'メールアドレスの形式が正しくありません。';
+        case 'auth/weak-password':
+            return 'パスワードが弱すぎます。英字と数字を含む6文字以上で設定してください。';
+        default:
+            return '登録に失敗しました。時間をおいて再度お試しください。';
+    }
+}
+export function toResetPasswordErrorMessage(code) {
+    switch (code) {
+        case 'auth/invalid-email':
+            return 'メールアドレスの形式が正しくありません。';
+        case 'auth/too-many-requests':
+            return '試行回数が多すぎます。しばらく時間をおいてから再度お試しください。';
+        default:
+            return 'パスワード再設定メールを送信できませんでした。時間をおいて再度お試しください。';
+    }
+}

package/dist/auth.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type User } from 'firebase/auth';
+export declare const authState: {
+    user: User | null;
+    loading: boolean;
+};

package/dist/auth.svelte.js

@@ -0,0 +1,19 @@
+import { browser } from '$app/environment';
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from './firebase';
+let user = $state(null);
+let loading = $state(true);
+if (browser) {
+    onAuthStateChanged(auth, (firebaseUser) => {
+        user = firebaseUser;
+        loading = false;
+    });
+}
+export const authState = {
+    get user() {
+        return user;
+    },
+    get loading() {
+        return loading;
+    }
+};

package/dist/components/Alert.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { alert } from '../alert';
+	import { alertSvg, checkCircleSvg, closeCircleSvg, informationSvg } from '@3birds/midori-ui';
+
+	let dialog: HTMLDialogElement | undefined;
+
+	let color: string = $derived.by(() => {
+		switch ($alert.type) {
+			case 'success':
+				return 'alert-success';
+			case 'info':
+				return 'alert-info';
+			case 'warning':
+				return 'alert-warning';
+			case 'error':
+				return 'alert-error';
+			default:
+				return '';
+		}
+	});
+
+	let icon: string = $derived.by(() => {
+		switch ($alert.type) {
+			case 'success':
+				return checkCircleSvg;
+			case 'info':
+				return informationSvg;
+			case 'warning':
+				return alertSvg;
+			case 'error':
+				return closeCircleSvg;
+			default:
+				return '';
+		}
+	});
+
+	$effect(() => {
+		if ($alert.show) {
+			dialog?.showModal();
+
+			setInterval(() => dialog?.close(), $alert.duration);
+		} else {
+			dialog?.close();
+		}
+	});
+
+	function handleClose() {
+		alert.close();
+	}
+</script>
+
+<dialog bind:this={dialog} onclose={handleClose} onclick={alert.close} class="modal">
+	<div class="fixed top-4 modal-box alert rounded-3xl {color} right-4 left-4" role="alert">
+		<img src={icon} alt="アラート" class="size-6" />
+		{$alert.message}
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>

package/dist/components/Alert.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Alert: import("svelte").Component<Record<string, never>, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Input.svelte

@@ -60,3 +60,15 @@
 		<p class="label ml-auto whitespace-pre-wrap">{option}</p>
 	{/if}
 </fieldset>
+
+<style>
+	input[type='date'] {
+		position: relative;
+	}
+	input[type='date']::-webkit-calendar-picker-indicator {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+	}
+</style>

package/dist/firebase.d.ts

@@ -0,0 +1 @@
+export declare const auth: import("@firebase/auth").Auth;

package/dist/firebase.js

@@ -0,0 +1,13 @@
+import { initializeApp, getApps, getApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { PUBLIC_FIREBASE_API_KEY, PUBLIC_FIREBASE_AUTH_DOMAIN, PUBLIC_FIREBASE_PROJECT_ID, PUBLIC_FIREBASE_STORAGE_BUCKET, PUBLIC_FIREBASE_MESSAGING_SENDER_ID, PUBLIC_FIREBASE_APP_ID } from '$env/static/public';
+const firebaseConfig = {
+    apiKey: PUBLIC_FIREBASE_API_KEY,
+    authDomain: PUBLIC_FIREBASE_AUTH_DOMAIN,
+    projectId: PUBLIC_FIREBASE_PROJECT_ID,
+    storageBucket: PUBLIC_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+    appId: PUBLIC_FIREBASE_APP_ID
+};
+const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
+export const auth = getAuth(app);

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as Btn } from './components/Btn.svelte';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as Alert } from './components/Alert.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';
@@ -26,10 +27,16 @@ export { default as keySvg } from './assets/key.svg';
 export { default as loginSvg } from './assets/login.svg';
 export { default as logoutSvg } from './assets/logout.svg';
 export { default as magnifySvg } from './assets/magnify.svg';
+export { default as magnifyWhiteSvg } from './assets/magnify-white.svg';
 export { default as mapOutlineSvg } from './assets/map-outline.svg';
 export { default as menuSvg } from './assets/menu.svg';
+export { default as menuWhiteSvg } from './assets/menu-white.svg';
 export { default as messageStarOutlineSvg } from './assets/message-star-outline.svg';
 export { default as pencilSvg } from './assets/pencil.svg';
 export { default as refreshSvg } from './assets/refresh.svg';
 export { default as shapeOutlineSvg } from './assets/shape-outline.svg';
 export { default as StarSvg } from './assets/star.svg';
+export { alert } from './alert';
+export { authState } from './auth.svelte';
+export * as firebase from './auth';
+export { auth } from './firebase';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Btn } from './components/Btn.svelte';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as Alert } from './components/Alert.svelte';
 export { default as accountSvg } from './assets/account.svg';
 export { default as alertSvg } from './assets/alert.svg';
 export { default as calendarMonthSvg } from './assets/calendar-month.svg';
@@ -27,10 +28,16 @@ export { default as keySvg } from './assets/key.svg';
 export { default as loginSvg } from './assets/login.svg';
 export { default as logoutSvg } from './assets/logout.svg';
 export { default as magnifySvg } from './assets/magnify.svg';
+export { default as magnifyWhiteSvg } from './assets/magnify-white.svg';
 export { default as mapOutlineSvg } from './assets/map-outline.svg';
 export { default as menuSvg } from './assets/menu.svg';
+export { default as menuWhiteSvg } from './assets/menu-white.svg';
 export { default as messageStarOutlineSvg } from './assets/message-star-outline.svg';
 export { default as pencilSvg } from './assets/pencil.svg';
 export { default as refreshSvg } from './assets/refresh.svg';
 export { default as shapeOutlineSvg } from './assets/shape-outline.svg';
 export { default as StarSvg } from './assets/star.svg';
+export { alert } from './alert';
+export { authState } from './auth.svelte';
+export * as firebase from './auth';
+export { auth } from './firebase';

package/dist/types/index.d.ts

@@ -1,2 +1,9 @@
 export type BtnType = 'button' | 'submit';
 export type InputType = 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal' | 'password' | 'datetime-local' | 'date';
+export type AlertType = 'info' | 'success' | 'error' | 'warning';
+export interface AlertState {
+    show: boolean;
+    message: string;
+    type: AlertType;
+    duration: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3birds/midori-ui",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -49,5 +49,8 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.60.1",
 		"vite": "^8.0.16"
+	},
+	"dependencies": {
+		"firebase": "^12.19.0"
 	}
 }