mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
Merge pull request #56 from teaxyz/preloaders
preloaders: packages + featured packages
This commit is contained in:
Neil
GitHub
commit
21e12427ad
27 changed files with 200 additions and 78 deletions
|
|
@ -4,7 +4,7 @@
|
|||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,9 @@
|
|||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"prettier-plugin-tailwindcss": "^0.2.0",
|
||||
"svelte": "^3.49.0",
|
||||
"svelte-check": "^2.8.0",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
|
|
|
|||
|
|
@ -1,29 +1,33 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import type { Package } from '@tea/ui/types';
|
||||
import ImgLoader from '@tea/ui/ImgLoader/ImgLoader.svelte';
|
||||
export let pkg: Package;
|
||||
export let width: number;
|
||||
</script>
|
||||
|
||||
<figure class="w-full h-full relative">
|
||||
<img
|
||||
<figure class="featured-pkg relative h-full w-full" style={`width:${width}px`}>
|
||||
<ImgLoader
|
||||
class="featured-img"
|
||||
src={!pkg.thumb_image_url.includes('https://tea.xyz')
|
||||
? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
|
||||
: pkg.thumb_image_url}
|
||||
alt={pkg.name}
|
||||
/>
|
||||
|
||||
<article class="card-thumb-label">
|
||||
<i class="icon-tea-logo-iconasset-1">
|
||||
<!-- TODO: replace with icon.svg -->
|
||||
</i>
|
||||
<h3 class="text-3xl">{pkg.name}</h3>
|
||||
{#if pkg.maintainer}
|
||||
<h4 class="text-lg mt-2">• {pkg.maintainer}</h4>
|
||||
<h4 class="mt-2 text-lg">• {pkg.maintainer}</h4>
|
||||
{/if}
|
||||
</article>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
img {
|
||||
.featured-pkg :global(.featured-img) {
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { onDestroy, onMount } from 'svelte';
|
||||
import { watchResize } from 'svelte-watch-resize';
|
||||
import type { Package } from '@tea/ui/types';
|
||||
import Preloader from '@tea/ui/Preloader/Preloader.svelte';
|
||||
import FeaturedPackage from './FeaturedPackage.svelte';
|
||||
import {
|
||||
featuredPackages as featuredPackagesStore,
|
||||
|
|
@ -56,9 +57,9 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
|
||||
<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
|
||||
<!-- <Placeholder label="FeaturedPackages" /> -->
|
||||
<header class="bg-accent h-12 flex justify-between px-2 items-center">
|
||||
<header class="flex h-12 items-center justify-between bg-accent px-2">
|
||||
<p>FEATURED PACKAGES</p>
|
||||
<ul class="flex gap-2">
|
||||
{#each featuredPackages as pkg, i}
|
||||
|
|
@ -67,22 +68,26 @@
|
|||
pkgFocus = i;
|
||||
resetLoop();
|
||||
}}
|
||||
class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
|
||||
class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
|
||||
i === pkgFocus ? 'bg-purple-900' : ''
|
||||
}`}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
</header>
|
||||
<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
|
||||
<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
|
||||
{#each featuredPackages as pkg}
|
||||
<div class="h-full" style={`width:${width}px`}>
|
||||
<a href={`/packages/${pkg.slug}`}>
|
||||
<FeaturedPackage {pkg} />
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
|
||||
{#if featuredPackages.length}
|
||||
<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
|
||||
{#each featuredPackages as pkg}
|
||||
<div class="h-full" style={`width:${width}px`}>
|
||||
<a href={`/packages/${pkg.slug}`}>
|
||||
<FeaturedPackage {pkg} {width} />
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
{:else}
|
||||
<Preloader />
|
||||
{/if}
|
||||
</figure>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<header class="text-primary bg-black border border-gray p-4">GETTING STARTED WITH TEA</header>
|
||||
<section class="grid bg-black grid-cols-3">
|
||||
<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
|
||||
<section class="grid grid-cols-3 bg-black">
|
||||
<div class="border border-gray p-4">
|
||||
<ArticleCard
|
||||
content={{
|
||||
|
|
|
|||
|
|
@ -84,15 +84,15 @@
|
|||
{#each routes as route}
|
||||
<li class={route.active ? 'nav_button active' : 'nav_button'}>
|
||||
<a href={route.path}>
|
||||
<Button class="h-16 text-left pl-4 text-white" active={route.active}>{route.label}</Button>
|
||||
<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="nav_button">
|
||||
<Button class="h-16 text-left pl-4 text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
|
||||
<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
|
||||
</li>
|
||||
|
||||
<footer class="border border-x-0 border-gray w-full">
|
||||
<footer class="w-full border border-x-0 border-gray">
|
||||
<a href="/profile">
|
||||
<section class="flex">
|
||||
<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />
|
||||
|
|
|
|||
|
|
@ -17,26 +17,26 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class="border-gray border bg-black mt-4">
|
||||
<section class="mt-4 border border-gray bg-black">
|
||||
<header class="flex p-2">
|
||||
<figure class="w-1/3 grow-1">
|
||||
<figure class="grow-1 w-1/3">
|
||||
<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
|
||||
</figure>
|
||||
<article class="w-2/3 p-4">
|
||||
<h3 class="text-primary text-5xl">{pkg.full_name}</h3>
|
||||
<h3 class="text-5xl text-primary">{pkg.full_name}</h3>
|
||||
{#if pkg.maintainer}
|
||||
<h3>* {pkg.maintainer}</h3>
|
||||
{/if}
|
||||
<div class="mt-4">
|
||||
<StarRating maxRating={5} rating={packageRating} />
|
||||
</div>
|
||||
<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
|
||||
<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
|
||||
</article>
|
||||
</header>
|
||||
<footer class="flex text-white border-gray border-t h-20">
|
||||
<footer class="flex h-20 border-t border-gray text-white">
|
||||
<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
|
||||
<Button class="text-sm border-0 border-l-2 w-16" onClick={onCopy}>{copyButtonText}</Button>
|
||||
<Button class="text-sm border-0 border-l-2 w-56" onClick={() => console.log('cli')}
|
||||
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
|
||||
<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
|
||||
>OPEN IN TERMINAL</Button
|
||||
>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -24,21 +24,21 @@
|
|||
// ideally they should work like metro-ui to not have extreme height diff between columns
|
||||
</script>
|
||||
|
||||
<header class="text-primary bg-black border border-gray p-4">REVIEWS ({reviews.length})</header>
|
||||
<section class="flex flex-wrap bg-black flex-row font-machina">
|
||||
<div class="border-gray border-0 border-l-2 p-4 w-1/3">
|
||||
<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
|
||||
<section class="flex flex-row flex-wrap bg-black font-machina">
|
||||
<div class="w-1/3 border-0 border-l-2 border-gray p-4">
|
||||
{#each col1 as review}
|
||||
<ReviewCard {review} />
|
||||
<div class="mt-4" />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="border-gray border-0 border-l-2 p-4 w-1/3">
|
||||
<div class="w-1/3 border-0 border-l-2 border-gray p-4">
|
||||
{#each col2 as review}
|
||||
<ReviewCard {review} />
|
||||
<div class="mt-4" />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="border-gray border-0 p-4 border-x-2 w-1/3">
|
||||
<div class="w-1/3 border-0 border-x-2 border-gray p-4">
|
||||
{#each col3 as review}
|
||||
<ReviewCard {review} />
|
||||
<div class="mt-4" />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<header class="text-primary text-6xl font-machina uppercase mb-8">
|
||||
<header class="mb-8 font-machina text-6xl uppercase text-primary">
|
||||
<slot />
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export let label = '';
|
||||
</script>
|
||||
|
||||
<section class="p-8 bg-gray">
|
||||
<section class="bg-gray p-8">
|
||||
<header>{label}</header>
|
||||
<slot />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import type { Package } from '@tea/ui/types';
|
||||
import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
|
||||
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
|
||||
import Preloader from '@tea/ui/Preloader/Preloader.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let allPackages: Package[] = [];
|
||||
|
|
@ -74,8 +75,8 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<div class="bg-black border border-gray">
|
||||
<section class="flex justify-between items-center">
|
||||
<div class="border border-gray bg-black">
|
||||
<section class="flex items-center justify-between">
|
||||
<div>
|
||||
<SearchInput size="medium" {onSearch} />
|
||||
</div>
|
||||
|
|
@ -86,8 +87,16 @@
|
|||
</div>
|
||||
</section>
|
||||
<ul class="grid grid-cols-3">
|
||||
{#each packages as pkg}
|
||||
<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
|
||||
{/each}
|
||||
{#if packages.length}
|
||||
{#each packages as pkg}
|
||||
<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
|
||||
{/each}
|
||||
{:else}
|
||||
{#each Array(12) as _}
|
||||
<section class="h-50 border border-gray p-4">
|
||||
<Preloader />
|
||||
</section>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class="sorting-container font-machina bg-black text-white">
|
||||
<section class="sorting-container bg-black font-machina text-white">
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-title">SORT ORDER</div>
|
||||
<ul class="dropdown-content flex column">
|
||||
<ul class="dropdown-content column flex">
|
||||
{#each sortOptions as option}
|
||||
<li class="flex items-center">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -153,10 +153,12 @@ const packages: Package[] = [
|
|||
];
|
||||
|
||||
export async function getPackages(): Promise<Package[]> {
|
||||
await delay(2000);
|
||||
return packages;
|
||||
}
|
||||
|
||||
export async function getFeaturedPackages(): Promise<Package[]> {
|
||||
await delay(2000);
|
||||
return packages.slice(0, 4);
|
||||
}
|
||||
|
||||
|
|
@ -195,5 +197,10 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
|
|||
});
|
||||
}
|
||||
|
||||
await delay(2000);
|
||||
return reviews;
|
||||
}
|
||||
|
||||
function delay(ms: number) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ interface PackagesReview {
|
|||
}
|
||||
|
||||
function initPackagesReviewStore() {
|
||||
const { set, update, subscribe } = writable<PackagesReview>({});
|
||||
const { update, subscribe } = writable<PackagesReview>({});
|
||||
|
||||
let packagesReviews: PackagesReview = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,30 +3,31 @@
|
|||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
|
||||
import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
|
||||
// import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
|
||||
backLink.set('/packages');
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
|
||||
import { packages, featuredPackages, packagesReviewStore } from '$libs/stores';
|
||||
import { packages, featuredPackages } from '$libs/stores';
|
||||
|
||||
import type { Package, Review } from '@tea/ui/types';
|
||||
import type { Package } from '@tea/ui/types';
|
||||
|
||||
let pkg: Package;
|
||||
|
||||
let reviews: Review[];
|
||||
// let reviews: Review[];
|
||||
|
||||
const setPkg = (pkgs: Package[]) => {
|
||||
const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
|
||||
if (!pkg && foundPackage) {
|
||||
pkg = foundPackage;
|
||||
}
|
||||
if (!reviews && pkg) {
|
||||
packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
|
||||
reviews = updatedReviews;
|
||||
});
|
||||
}
|
||||
// TODO: uncomment when api is ready
|
||||
// if (!reviews && pkg) {
|
||||
// packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
|
||||
// reviews = updatedReviews;
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
packages.subscribe(setPkg);
|
||||
|
|
@ -38,7 +39,10 @@
|
|||
<section>
|
||||
<PackageBanner {pkg} />
|
||||
</section>
|
||||
<!--
|
||||
TODO: uncomment when api is ready
|
||||
<section class="mt-8">
|
||||
<PackageReviews reviews={reviews || []} />
|
||||
</section>
|
||||
-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,9 @@
|
|||
"eslint-plugin-storybook": "^0.6.7",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"prettier-plugin-tailwindcss": "^0.2.0",
|
||||
"storybook": "^7.0.0-alpha.51",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte-check": "^2.7.1",
|
||||
|
|
|
|||
|
|
@ -14,20 +14,20 @@
|
|||
</script>
|
||||
|
||||
<section class="border border-gray">
|
||||
<header class="bg-accent text-white p-2 uppercase">{content.title}</header>
|
||||
<header class="bg-accent p-2 uppercase text-white">{content.title}</header>
|
||||
<figure class="h-24">
|
||||
<img class="object-cover h-24 w-full" src={content.img_url} alt={content.title} />
|
||||
<img class="h-24 w-full object-cover" src={content.img_url} alt={content.title} />
|
||||
</figure>
|
||||
<article class="p-4">
|
||||
<p class="text-xs font-sono line-clamp-3">{content.copy}</p>
|
||||
<p class="font-sono text-xs line-clamp-3">{content.copy}</p>
|
||||
{#if content.link}
|
||||
<a href={content.link || '#'}>
|
||||
<button class="text-primary mt-2">{content.cta_label}</button>
|
||||
<button class="mt-2 text-primary">{content.cta_label}</button>
|
||||
</a>
|
||||
{:else if onClick}
|
||||
<button on:click={onClick} class="text-primary mt-2">{content.cta_label}</button>
|
||||
<button on:click={onClick} class="mt-2 text-primary">{content.cta_label}</button>
|
||||
{:else}
|
||||
<button disabled class="text-gray mt-2">{content.cta_label}</button>
|
||||
<button disabled class="mt-2 text-gray">{content.cta_label}</button>
|
||||
{/if}
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<button
|
||||
type="button font-sans"
|
||||
class={`p-2 font-machina text-gray w-full ${clazz} ${active ? 'active' : ''}`}
|
||||
class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
|
||||
on:click={() => onClick && onClick()}
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
28
packages/ui/src/ImgLoader/ImgLoader.stories.ts
Normal file
28
packages/ui/src/ImgLoader/ImgLoader.stories.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import ImgLoader from './ImgLoader.svelte';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
|
||||
|
||||
interface Props {
|
||||
alt: string;
|
||||
src: string;
|
||||
class: string;
|
||||
}
|
||||
export default {
|
||||
title: 'Example/ImgLoader',
|
||||
component: ImgLoader,
|
||||
tags: ['docsPage'],
|
||||
render: (props: Props) => ({
|
||||
Component: ImgLoader,
|
||||
props
|
||||
}),
|
||||
argTypes: {}
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||
export const Example = {
|
||||
args: {
|
||||
class: 'w-1/2',
|
||||
alt: 'sample',
|
||||
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg/2732px-%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg'
|
||||
}
|
||||
};
|
||||
24
packages/ui/src/ImgLoader/ImgLoader.svelte
Normal file
24
packages/ui/src/ImgLoader/ImgLoader.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import Preloader from '../Preloader/Preloader.svelte';
|
||||
export let src: string;
|
||||
export let alt = 'loading';
|
||||
export let style = '';
|
||||
|
||||
let clazz = '';
|
||||
export { clazz as class };
|
||||
|
||||
function preloadImage() {
|
||||
return new Promise(function (resolve) {
|
||||
let img = new Image();
|
||||
img.onload = resolve;
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await preloadImage()}
|
||||
<Preloader />
|
||||
{:then _}
|
||||
<img {style} class={clazz} {src} {alt} />
|
||||
{/await}
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
<script type="ts">
|
||||
import '../app.css';
|
||||
import type { Package } from '../types';
|
||||
import ImgLoader from '../ImgLoader/ImgLoader.svelte';
|
||||
export let pkg: Package;
|
||||
export let link: string;
|
||||
</script>
|
||||
|
||||
<section class="p-4 border border-gray">
|
||||
<section class="package-card border border-gray p-4">
|
||||
<figure>
|
||||
<img
|
||||
<ImgLoader
|
||||
class="pkg-image"
|
||||
src={!pkg.thumb_image_url.includes('https://tea.xyz')
|
||||
? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
|
||||
: pkg.thumb_image_url}
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
{/if}
|
||||
</article>
|
||||
</figure>
|
||||
<footer class="flex mt-4 justify-between items-center">
|
||||
<footer class="mt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<p>
|
||||
<span class="text-xs">V {pkg.version}</span>
|
||||
|
|
@ -49,9 +51,10 @@
|
|||
|
||||
figure {
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
img {
|
||||
.package-card :global(.pkg-image) {
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
14
packages/ui/src/Preloader/Preloader.stories.ts
Normal file
14
packages/ui/src/Preloader/Preloader.stories.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import Preloader from './Preloader.svelte';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
|
||||
export default {
|
||||
title: 'Example/Preloader',
|
||||
component: Preloader,
|
||||
tags: ['docsPage'],
|
||||
render: () => ({
|
||||
Component: Preloader
|
||||
})
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||
export const Example = {};
|
||||
9
packages/ui/src/Preloader/Preloader.svelte
Normal file
9
packages/ui/src/Preloader/Preloader.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script type="ts">
|
||||
import '../app.css';
|
||||
// TODO: add types of preloader here
|
||||
// export let type: EnumPreload = 'logo-pulse';
|
||||
</script>
|
||||
|
||||
<figure class="flex h-full w-full items-center justify-center bg-black bg-opacity-90 py-8">
|
||||
<i class="icon-tea-logo-iconasset-1 animate-pulse text-4xl text-gray" />
|
||||
</figure>
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
</script>
|
||||
|
||||
<section class="border border-gray p-4">
|
||||
<header class=" text-primary text-lg">{review.title}</header>
|
||||
<div class="flex mt-2 text-xs">
|
||||
<header class=" text-lg text-primary">{review.title}</header>
|
||||
<div class="mt-2 flex text-xs">
|
||||
<i class={`${getStarType()} text-primary`} />
|
||||
<span class="text-gray pl-2">{getStarLabel()}</span>
|
||||
<span class="pl-2 text-gray">{getStarLabel()}</span>
|
||||
</div>
|
||||
<p class="mt-2 text-sm">{review.comment}</p>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class={`flex py-2 items-center ${size}`}>
|
||||
<section class={`flex items-center py-2 ${size}`}>
|
||||
<div class="icon pl-4">
|
||||
<i class="icon-search-icon" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@ importers:
|
|||
lodash: ^4.17.21
|
||||
lorem-ipsum: ^2.0.8
|
||||
postcss: ^8.4.19
|
||||
prettier: ^2.6.2
|
||||
prettier: ^2.7.1
|
||||
prettier-plugin-svelte: ^2.7.0
|
||||
prettier-plugin-tailwindcss: ^0.2.0
|
||||
svelte: ^3.49.0
|
||||
svelte-check: ^2.8.0
|
||||
svelte-preprocess: ^4.10.7
|
||||
|
|
@ -59,6 +60,7 @@ importers:
|
|||
postcss: 8.4.19
|
||||
prettier: 2.7.1
|
||||
prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
|
||||
prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
|
||||
svelte: 3.53.1
|
||||
svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
|
||||
svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
|
||||
|
|
@ -89,8 +91,9 @@ importers:
|
|||
eslint-plugin-storybook: ^0.6.7
|
||||
eslint-plugin-svelte3: ^4.0.0
|
||||
postcss: ^8.4.19
|
||||
prettier: ^2.6.2
|
||||
prettier: ^2.7.1
|
||||
prettier-plugin-svelte: ^2.7.0
|
||||
prettier-plugin-tailwindcss: ^0.2.0
|
||||
storybook: ^7.0.0-alpha.51
|
||||
svelte: ^3.44.0
|
||||
svelte-check: ^2.7.1
|
||||
|
|
@ -122,6 +125,7 @@ importers:
|
|||
postcss: 8.4.19
|
||||
prettier: 2.7.1
|
||||
prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
|
||||
prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
|
||||
storybook: 7.0.0-alpha.51_typescript@4.9.3
|
||||
svelte: 3.53.1
|
||||
svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
|
||||
|
|
@ -1943,7 +1947,7 @@ packages:
|
|||
'@storybook/components': 7.0.0-alpha.51
|
||||
'@storybook/csf-plugin': 7.0.0-alpha.51
|
||||
'@storybook/csf-tools': 7.0.0-alpha.51
|
||||
'@storybook/mdx2-csf': 0.1.0-next.6
|
||||
'@storybook/mdx2-csf': 0.1.0-next.7
|
||||
'@storybook/node-logger': 7.0.0-alpha.51
|
||||
'@storybook/postinstall': 7.0.0-alpha.51
|
||||
'@storybook/preview-web': 7.0.0-alpha.51
|
||||
|
|
@ -2357,7 +2361,7 @@ packages:
|
|||
'@storybook/client-api': 7.0.0-alpha.51
|
||||
'@storybook/client-logger': 7.0.0-alpha.51
|
||||
'@storybook/core-common': 7.0.0-alpha.51_typescript@4.9.3
|
||||
'@storybook/mdx2-csf': 0.1.0-next.6
|
||||
'@storybook/mdx2-csf': 0.1.0-next.7
|
||||
'@storybook/node-logger': 7.0.0-alpha.51
|
||||
'@storybook/preview-web': 7.0.0-alpha.51
|
||||
'@storybook/source-loader': 7.0.0-alpha.51
|
||||
|
|
@ -2886,8 +2890,8 @@ packages:
|
|||
resolution: {integrity: sha512-SgjcpweoAWnKvbZ1uINCGcSU1BtNJP2xR0x9obNw+qp6pi0OsOo1iA1DTgB0gJM0vc3BgrKgCMlJ76v/wlRB+Q==}
|
||||
dev: true
|
||||
|
||||
/@storybook/mdx2-csf/0.1.0-next.6:
|
||||
resolution: {integrity: sha512-FDBPTDHG9BcI27Zp5kwkqjsv2A3s8aUahtKeHOsmTicOBS8uWqUZ3jmL7vg6N7SpiUUBAft9/vTQfttNLeHO7w==}
|
||||
/@storybook/mdx2-csf/0.1.0-next.7:
|
||||
resolution: {integrity: sha512-ahwV2A4aS/D79WWum8fmrFhhbC28/f4XlEKtNG1s0EkCVwCSU17bthEBRY5/Y3IBR5jfeN/oApizNQMLh7mqAA==}
|
||||
dependencies:
|
||||
loader-utils: 2.0.4
|
||||
dev: true
|
||||
|
|
@ -8496,6 +8500,15 @@ packages:
|
|||
svelte: 3.53.1
|
||||
dev: true
|
||||
|
||||
/prettier-plugin-tailwindcss/0.2.0_prettier@2.7.1:
|
||||
resolution: {integrity: sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==}
|
||||
engines: {node: '>=12.17.0'}
|
||||
peerDependencies:
|
||||
prettier: '>=2.2.0'
|
||||
dependencies:
|
||||
prettier: 2.7.1
|
||||
dev: true
|
||||
|
||||
/prettier/2.7.1:
|
||||
resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue