Skip to content

Commit

Permalink
feat: bump versions and update snackbar impl
Browse files Browse the repository at this point in the history
  • Loading branch information
vighnesh153 committed Sep 15, 2024
1 parent 081d702 commit c875a3a
Show file tree
Hide file tree
Showing 37 changed files with 1,978 additions and 1,798 deletions.
26 changes: 14 additions & 12 deletions nodejs-tools/nodejs-apps/vighnesh153-astro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"sst:remove": "dotenv -e ../../.env.local -- sst remove --stage=dev"
},
"dependencies": {
"@nanostores/solid": "^0.4.2",
"@vighnesh153/cookie-store": "^1.0.0",
"@vighnesh153/drawing-app": "*",
"@vighnesh153/graphics-programming": "*",
Expand All @@ -30,7 +31,8 @@
"@vighnesh153/tools-platform-independent": "*",
"@vighnesh153/tsx-bundler": "*",
"astro-sst": "2.43.5",
"solid-js": "^1.8.21",
"nanostores": "^0.11.3",
"solid-js": "^1.8.22",
"svelte": "^4.2.19",
"vighnesh153-cookies": "^1.0.0"
},
Expand All @@ -40,33 +42,33 @@
"@astrojs/solid-js": "^4.4.1",
"@astrojs/svelte": "^5.7.0",
"@playform/compress": "^0.1.1",
"@playwright/test": "^1.46.1",
"@playwright/test": "^1.47.1",
"@solidjs/testing-library": "^0.8.9",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/user-event": "^14.5.2",
"@types/node": "*",
"@vighnesh153/fake-data": "*",
"@vighnesh153/tsconfig": "*",
"@vighnesh153/types": "^0.4.7",
"astro": "^4.14.5",
"astro": "^4.15.6",
"autoprefixer": "^10.4.20",
"browserslist": "^4.23.3",
"constructs": "10.3.0",
"cssnano": "^7.0.5",
"cssnano-preset-advanced": "^7.0.5",
"cssnano": "^7.0.6",
"cssnano-preset-advanced": "^7.0.6",
"csstype": "^3.1.3",
"eslint-config-vighnesh153": "*",
"jsdom": "^24.1.1",
"jsdom": "^25.0.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.41",
"postcss": "^8.4.47",
"postcss-custom-media": "^11.0.1",
"postcss-import": "^16.1.0",
"sass": "^1.77.8",
"sass": "^1.78.0",
"solid-devtools": "^0.30.1",
"sst": "^3.0.70",
"tailwindcss": "^3.4.10",
"typescript": "^5.5.4",
"vitest": "^2.0.5"
"sst": "^3.1.10",
"tailwindcss": "^3.4.11",
"typescript": "^5.6.2",
"vitest": "^2.1.1"
},
"browserslist": [
"defaults and supports es6-module",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type JSX, onMount } from 'solid-js';
import { classes } from '@/utils';
import { CopyIcon } from '@/icons/solid';
import { useSnackbar } from '../snackbar';
import { createSnackbar } from '@/stores/snackbar';

export type HtmlCodeViewerProps = {
code: string;
Expand All @@ -10,17 +10,18 @@ export type HtmlCodeViewerProps = {
};

export function CodeViewer({ code, fileName }: HtmlCodeViewerProps): JSX.Element {
const { createSnackbar } = useSnackbar();

// const lineCount = code.split('\n').length;
const lineCount = 200;

onMount(() => {
createSnackbar({ type: 'success', message: 'Copied to Clipboard!', autoDismissTimeMillis: 5 ** 5 });
createSnackbar({ type: 'info', message: 'Copied to Clipboard!', autoDismissTimeMillis: 5 ** 5 });
createSnackbar({ type: 'error', message: 'Copied to Clipboard!', autoDismissTimeMillis: 5 ** 5 });
createSnackbar({ type: 'warn', message: 'Copied to Clipboard!', autoDismissTimeMillis: 5 ** 5 });
});
const onCopyClick = async () => {
try {
navigator.clipboard.writeText(code);
createSnackbar({ type: 'success', message: 'Copied to Clipboard!', manualDismissible: true });
} catch (e) {
console.error(e);
createSnackbar({ type: 'error', message: 'Error occurred while copying to clip board.' });
}
};

// TODO: convert code to html with syntax highlighting
return (
Expand All @@ -32,7 +33,7 @@ export function CodeViewer({ code, fileName }: HtmlCodeViewerProps): JSX.Element
>
<div class="w-full px-4 py-2 flex justify-between items-center border-b border-b-text4">
<p>{fileName}</p>
<button class="py-1 px-4 flex items-center gap-2 border border-1 rounded-lg">
<button class="py-1 px-4 flex items-center gap-2 border border-1 rounded-lg" onClick={onCopyClick}>
<CopyIcon class="fill-text w-4" /> Copy
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,36 +1,19 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import { createSignal, onCleanup, onMount, type JSX } from 'solid-js';

import { not } from '@vighnesh153/tools-platform-independent';
import { createSignal, onMount, type JSX, Show } from 'solid-js';

import type { SnackbarProps } from '@/stores/snackbar';
import { classes } from '@/utils';
import { InfoIcon, CheckIcon, WarnIcon } from '@/icons/solid';
import type { SnackbarProps } from './SnackbarUtils';
import { InfoIcon, CheckIcon, WarnIcon, CloseIcon } from '@/icons/solid';

export function Snackbar(props: SnackbarProps): JSX.Element {
const config = mapping[props.type];

const [timerPercent, setTimerPercent] = createSignal(100);
const [width, setWidth] = createSignal('100%');

onMount(() => {
if (not(props.autoDismissible)) {
return;
}

const start = Date.now();

const interval = setInterval(() => {
const elapsedTime = Date.now() - start;

if (elapsedTime > 0) {
setTimerPercent(100 * (1 - elapsedTime / props.autoDismissTimeMillis!));
}
if (elapsedTime > props.autoDismissTimeMillis!) {
clearInterval(interval);
}
}, 60);

onCleanup(() => clearInterval(interval));
// animating the progress bar
setTimeout(() => {
setWidth('0%');
}, 1);
});

return (
Expand All @@ -57,9 +40,23 @@ export function Snackbar(props: SnackbarProps): JSX.Element {
`)}
>
<div class="mt-1">{config.icon()}</div>
<p>{props.message}</p>
<p class="flex-grow">{props.message}</p>
<Show when={props.manualDismissible}>
<button onClick={() => props.dismiss()}>
<CloseIcon class="mt-1 w-4 h-4" />
</button>
</Show>
</div>
<div class="h-2" style={{ 'background-color': config.timerProgressColor, width: `${timerPercent()}%` }} />
<Show when={props.autoDismissible}>
<div
class="h-2"
style={{
'background-color': config.timerProgressColor,
width: width(),
transition: `width ${props.autoDismissTimeMillis}ms linear`,
}}
/>
</Show>
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { type JSX } from 'solid-js';
import { useSnackbar } from './SnackbarUtils';
import { For, type JSX } from 'solid-js';
import { useStore } from '@nanostores/solid';
import { snackbarList } from '@/stores/snackbar';
import { Snackbar } from './Snackbar';

export function SnackbarHost(): JSX.Element {
const { snackbarList } = useSnackbar();
const $snackbarList = useStore(snackbarList);

return (
<div class="fixed top-10 right-10">
{snackbarList().map((snackbar) => (
<Snackbar {...snackbar} />
))}
<div class="fixed top-10 right-10 z-snackbar">
<For each={$snackbarList()}>{(snackbar) => <Snackbar {...snackbar} />}</For>
</div>
);
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export * from './SnackbarHost';
export { SnackbarProvider, useSnackbar } from './SnackbarUtils';
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import '@/styles/base.scss';
import { SnackbarHost } from '@/components/solid';
export interface Props {
title: string;
Expand Down Expand Up @@ -34,6 +35,7 @@ const { title, description } = Astro.props;
<meta name="generator" content={Astro.generator} />
</head>
<body>
<SnackbarHost client:load />
<slot />
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import EmailAddressAside from '@/components/EmailAddressAside.astro';
import Footer from '@/components/Footer.astro';
import { hashTags, type NavItem } from '@/utils';
import { SnackbarHost, SnackbarProvider } from '@/components/solid';
interface Props {
title?: string;
Expand All @@ -34,17 +33,14 @@ const { title = defaultTitle, description = defaultDescription, navItems, showFo
<main id={hashTags.main} class="px-8 pb-8">
{/* pt-[0.05px] prevents collapsing margins in child components */}
<div class="mx-auto max-w-[1400px] px-4 pt-[0.05px] sm:px-20">
<SnackbarProvider client:only="solid-js">
<SnackbarHost client:only="solid-js" />
<slot />
</SnackbarProvider>
<slot />
</div>
{
showFooter ? (
<Footer>
<slot name="custom-source-code" slot="custom-source-code" />
</Footer>
) : null
}
</main>
{
showFooter ? (
<Footer>
<slot name="custom-source-code" slot="custom-source-code" />
</Footer>
) : null
}
</BaseLayout>
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ fun formatXml(
} catch (e: Exception) {
UnknownErrorResponse(e)
}`}
client:load
/>
</div>
</ContentLayout>
Expand Down
49 changes: 49 additions & 0 deletions nodejs-tools/nodejs-apps/vighnesh153-astro/src/stores/snackbar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { atom, type ReadableAtom } from 'nanostores';

export type SnackbarPropsApi = {
type: 'success' | 'error' | 'info' | 'warn';
message: string;

manualDismissible?: boolean;
autoDismissible?: boolean;
autoDismissTimeMillis?: number;
};

export type SnackbarProps = SnackbarPropsApi & {
id: string;
dismiss: () => void;
};

export const mutableSnackbarList = atom<SnackbarProps[]>([]);
export const snackbarList: ReadableAtom<SnackbarProps[]> = mutableSnackbarList;

function removeSnackbar(id: string): void {
mutableSnackbarList.set(snackbarList.get().filter((snackbar) => snackbar.id !== id));
}

export function createSnackbar({
type,
message,
manualDismissible = false,
autoDismissible = true,
autoDismissTimeMillis = 5000,
}: SnackbarPropsApi) {
const id = Math.random().toString(16).slice(2);

if (autoDismissible) {
setTimeout(() => removeSnackbar(id), autoDismissTimeMillis);
}

mutableSnackbarList.set([
...snackbarList.get(),
{
id,
dismiss: () => removeSnackbar(id),
type,
message,
manualDismissible,
autoDismissible,
autoDismissTimeMillis,
},
]);
}
Loading

0 comments on commit c875a3a

Please sign in to comment.