Skip to content

Commit e4ce111

Browse files
codercatdevAlex Patterson
andauthored
Remove blackcatui replace with skeleton v2 (CodingCatDev#489)
* initial move to skeleton * fix conversion issues * adjust config * remove eroneous console.log * popup still stuck * move custom theme * fix typography overrides --------- Co-authored-by: Alex Patterson <alex.patterson@fusionauth.io>
1 parent 17646f0 commit e4ce111

File tree

77 files changed

+758
-964
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+758
-964
lines changed

apps/codingcatdev/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@
1414
"format": "prettier --plugin-search-dir . --write ."
1515
},
1616
"devDependencies": {
17-
"@auth/sveltekit": "^0.3.7",
18-
"@codingcatdev/blackcatui": "^0.1.0",
1917
"@firebase/app-types": "~0.9.0",
2018
"@fontsource/shadows-into-light": "^5.0.13",
2119
"@playwright/test": "^1.38.1",
20+
"@skeletonlabs/skeleton": "2.3.0",
21+
"@skeletonlabs/tw-plugin": "0.2.2",
2222
"@steeze-ui/heroicons": "^2.2.3",
2323
"@steeze-ui/simple-icons": "^1.5.1",
2424
"@steeze-ui/svelte-icon": "^1.5.0",
2525
"@sveltejs/adapter-auto": "^2.1.0",
2626
"@sveltejs/adapter-vercel": "^3.0.3",
2727
"@sveltejs/kit": "^1.25.1",
2828
"@tailwindcss/forms": "^0.5.6",
29-
"@types/marked": "^5.0.2",
29+
"@tailwindcss/typography": "0.5.10",
30+
"@types/node": "^20.8.6",
3031
"@types/prismjs": "^1.26.1",
3132
"@types/video.js": "^7.3.53",
3233
"autoprefixer": "^10.4.16",
3334
"eslint": "^8.50.0",
3435
"eslint-config-prettier": "^9.0.0",
35-
"eslint-plugin-svelte3": "^4.0.0",
3636
"feed": "^4.2.2",
3737
"firebase-admin": "^11.11.0",
3838
"flexsearch": "^0.7.31",
Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
const tailwindcss = require('tailwindcss');
2-
const autoprefixer = require('autoprefixer');
3-
4-
const config = {
5-
plugins: [
6-
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
7-
tailwindcss(),
8-
//But others, like autoprefixer, need to run after,
9-
autoprefixer
10-
]
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
116
};
12-
13-
module.exports = config;

apps/codingcatdev/src/app.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en" data-theme="codingcatdev">
33
<head>
44
<meta charset="utf-8" />
@@ -89,7 +89,7 @@
8989

9090
%sveltekit.head%
9191
</head>
92-
<body data-sveltekit-preload-data="hover">
92+
<body data-sveltekit-preload-data="hover" data-theme="codingcatdev"">
9393
<div style="display: contents">%sveltekit.body%</div>
9494
</body>
9595
</html>

apps/codingcatdev/src/app.postcss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import './styles/theme.css';
2-
@import '@codingcatdev/blackcatui/dist/styles/all.css';
1+
@import './styles/tailwind.css';
32
@import './styles/app.css';
43
@import './styles/nav-list.css';
54
@import './styles/grid-card.css';
65
@import './styles/markdown.css';
7-
@import '@fontsource/shadows-into-light'
6+
@import './styles/typography.css';
7+
@import '@fontsource/shadows-into-light';
Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
11
import { browser } from '$app/environment';
22

3-
import { toastStore } from '@codingcatdev/blackcatui';
43
import { initializeApp, getApps, FirebaseError } from 'firebase/app';
5-
import { getAuth, setPersistence, browserSessionPersistence, signInWithEmailAndPassword, signInWithPopup, type AuthProvider, type Auth, createUserWithEmailAndPassword } from 'firebase/auth';
4+
import {
5+
getAuth,
6+
setPersistence,
7+
browserSessionPersistence,
8+
signInWithEmailAndPassword,
9+
signInWithPopup,
10+
type AuthProvider,
11+
type Auth,
12+
createUserWithEmailAndPassword
13+
} from 'firebase/auth';
614
import { getFirestore, collection, doc, addDoc, onSnapshot, Firestore } from 'firebase/firestore';
715
import { httpsCallable, getFunctions, type Functions } from 'firebase/functions';
8-
import { getAnalytics, type Analytics, logEvent, type AnalyticsCallOptions } from "firebase/analytics";
16+
import {
17+
getAnalytics,
18+
type Analytics,
19+
logEvent,
20+
type AnalyticsCallOptions
21+
} from 'firebase/analytics';
922

1023
import { env } from '$env/dynamic/public';
1124

@@ -25,16 +38,17 @@ let db: Firestore;
2538
let functions: Functions;
2639
let analytics: Analytics;
2740

28-
if (!app &&
41+
if (
42+
!app &&
2943
browser &&
3044
firebaseConfig.apiKey &&
3145
firebaseConfig.authDomain &&
3246
firebaseConfig.projectId &&
3347
firebaseConfig.storageBucket &&
3448
firebaseConfig.messagingSenderId &&
3549
firebaseConfig.appId &&
36-
firebaseConfig.measurementId) {
37-
50+
firebaseConfig.measurementId
51+
) {
3852
app = initializeApp(firebaseConfig);
3953

4054
auth = getAuth(app);
@@ -44,100 +58,82 @@ if (!app &&
4458
functions = getFunctions(app);
4559
analytics = getAnalytics(app);
4660
} else {
47-
console.debug('Skipping Firebase Initialization, check firebaseconfig.')
61+
console.debug('Skipping Firebase Initialization, check firebaseconfig.');
4862
}
4963

5064
/* AUTH */
5165

5266
const setCookie = (idToken: string) => {
5367
document.cookie = '__ccdlogin=' + idToken + ';max-age=3600';
54-
}
68+
};
5569

56-
export const ccdSignInWithEmailAndPassword = async ({ email, password }: { email: string, password: string }) => {
70+
export const ccdSignInWithEmailAndPassword = async ({
71+
email,
72+
password
73+
}: {
74+
email: string;
75+
password: string;
76+
}) => {
5777
const userResponse = await signInWithEmailAndPassword(auth, email, password);
5878
const idToken = await userResponse.user.getIdToken();
5979
setCookie(idToken);
60-
}
80+
};
6181

62-
export const ccdSignUpWithEmailAndPassword = async ({ email, password }: { email: string, password: string }) => {
82+
export const ccdSignUpWithEmailAndPassword = async ({
83+
email,
84+
password
85+
}: {
86+
email: string;
87+
password: string;
88+
}) => {
6389
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
6490
const idToken = await userCredential.user.getIdToken();
6591
setCookie(idToken);
66-
}
92+
};
6793

6894
export const ccdSignInWithPopUp = async (provider: AuthProvider) => {
69-
try {
70-
const result = await signInWithPopup(auth, provider)
71-
const idToken = await result.user.getIdToken()
72-
73-
if (!idToken)
74-
throw 'Missing id Token'
75-
setCookie(idToken);
76-
} catch (err) {
77-
if (err instanceof FirebaseError) {
78-
if (err.code === 'auth/account-exists-with-different-credential') {
79-
toastStore.trigger({
80-
message: 'Account Exists with Different Login Method. Please first login and then link within your Account page.',
81-
background: 'variant-filled-warning',
82-
})
83-
} else {
84-
toastStore.trigger({
85-
message: err.message,
86-
background: 'variant-filled-error'
87-
})
88-
}
89-
} else {
90-
console.error(err);
91-
}
92-
}
93-
}
95+
const result = await signInWithPopup(auth, provider);
96+
const idToken = await result.user.getIdToken();
97+
98+
if (!idToken) throw 'Missing id Token';
99+
setCookie(idToken);
100+
};
94101

95102
/* DB */
96103

97104
/* STRIPE */
98105
export const addSubscription = async (price: string, uid: string) => {
99-
const userDoc = doc(collection(db, 'stripe-customers'), uid)
100-
const docRef = await addDoc(collection(userDoc, 'checkout_sessions'), {
106+
const userDoc = doc(collection(db, 'stripe-customers'), uid);
107+
return await addDoc(collection(userDoc, 'checkout_sessions'), {
101108
price,
102109
success_url: window.location.href,
103-
cancel_url: window.location.href,
104-
})
105-
onSnapshot(docRef, (snap) => {
106-
const { error, url } = snap.data() as { error: Error, url: string };
107-
if (error) {
108-
toastStore.trigger({
109-
message: error.message,
110-
background: 'variant-filled-error'
111-
})
112-
}
113-
if (url) {
114-
// We have a Stripe Checkout URL, let's redirect.
115-
window.location.assign(url);
116-
}
110+
cancel_url: window.location.href
117111
});
118112
};
119113

120114
/* FUNCTIONS */
121115
export const openStripePortal = async () => {
122116
const functionRef = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink');
123-
const { data } = await functionRef({
124-
returnUrl: window.location.href,
125-
}) as { data: { url: string } };
117+
const { data } = (await functionRef({
118+
returnUrl: window.location.href
119+
})) as { data: { url: string } };
126120
window.location.assign(data.url);
127-
}
121+
};
128122

129123
/* Analytics */
130-
export const analyticsLogPageView = async (eventParams?: {
131-
page_title?: string;
132-
page_location?: string;
133-
page_path?: string;
134-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
135-
[key: string]: any;
136-
}, options?: AnalyticsCallOptions) => {
137-
124+
export const analyticsLogPageView = async (
125+
eventParams?: {
126+
page_title?: string;
127+
page_location?: string;
128+
page_path?: string;
129+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
130+
[key: string]: any;
131+
},
132+
options?: AnalyticsCallOptions
133+
) => {
138134
if (firebaseConfig.apiKey) {
139-
logEvent(analytics, "page_view", eventParams, options)
135+
logEvent(analytics, 'page_view', eventParams, options);
140136
} else {
141-
console.debug('Skipping Firebase Analytics, no key specified.')
137+
console.debug('Skipping Firebase Analytics, no key specified.');
142138
}
143-
}
139+
};

apps/codingcatdev/src/lib/components/content/Button.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
let count = 0;
33
</script>
44

5-
<button class="bcu-button variant-filled-primary" on:click={() => count++}>{count}</button>
5+
<button class="btn variant-filled-primary" on:click={() => count++}>{count}</button>

apps/codingcatdev/src/lib/components/content/CopyCodeInjector.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@
1919
copyButton.innerHTML = 'Copy';
2020
}, 1500);
2121
});
22-
copyButton.className =
23-
'copy absolute top-0 right-0 mt-2 mr-2 bcu-button variant-ringed-primary';
22+
copyButton.className = 'copy absolute top-0 right-0 mt-2 mr-2 btn variant-ringed-primary';
2423
copyButton.innerText = 'Copy';
2524
pre.appendChild(copyButton);
2625
}

apps/codingcatdev/src/lib/search/Search.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script lang="ts">
22
import { Icon } from '@steeze-ui/svelte-icon';
33
import { MagnifyingGlass } from '@steeze-ui/heroicons';
4-
import { modalStore, type ModalSettings } from '@codingcatdev/blackcatui';
4+
import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
5+
const modalStore = getModalStore();
56
import SearchModal from '$lib/search/SearchModal.svelte';
67
import { query } from './stores.js';
78
@@ -35,7 +36,7 @@
3536
/>
3637

3738
<button
38-
class="bcu-button p-2 px-4 space-x-4 variant-soft hover:variant-soft-primary flex align-middle"
39+
class="btn p-2 px-4 space-x-4 variant-soft hover:variant-soft-primary flex align-middle"
3940
on:mousedown|preventDefault={() => showSearch()}
4041
on:touchend|preventDefault={() => showSearch()}
4142
>

apps/codingcatdev/src/lib/search/SearchModal.svelte

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
1111
import { query, recent } from './stores';
1212
import SearchResults from './SearchResults.svelte';
1313
import SearchWorker from './search-worker?worker';
14-
import { modalStore } from '@codingcatdev/blackcatui';
14+
import { getModalStore } from '@skeletonlabs/skeleton';
15+
const modalStore = getModalStore();
1516
1617
/** @type {HTMLElement} */
1718
let modal;
@@ -79,7 +80,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
7980
}
8081
</script>
8182

82-
<div class="bcu-card p-2 md:p-8 flex flex-col gap-2 md:gap-8 w-full h-full md:w-[80%] md:h-[80%]">
83+
<div class="card p-2 md:p-8 flex flex-col gap-2 md:gap-8 w-full h-full md:w-[80%] md:h-[80%]">
8384
<div class="flex gap-2">
8485
<!-- svelte-ignore a11y-autofocus -->
8586
<input
@@ -99,7 +100,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
99100
spellcheck="false"
100101
class="input p-2"
101102
/>
102-
<button class="bcu-button variant-ringed" on:click={() => modalStore.close()}>
103+
<button class="btn variant-ringed" on:click={() => modalStore.close()}>
103104
<Icon src={XMark} theme="solid" class="w-6 h-6" />
104105
</button>
105106
</div>

apps/codingcatdev/src/lib/search/SearchResultList.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
<ul>
5050
{#each results as result (result.href)}
51-
<li class="bcu-card variant-ghost px-2">
51+
<li class="card variant-ghost px-2">
5252
<a
5353
class="!no-underline !text-token"
5454
data-sveltekit-preload-data

0 commit comments

Comments
 (0)