feat(font): add constants with information about fonts characteristics

.gitignore

@@ -22,6 +22,7 @@ Thumbs.db
 
 # Yarn
 .yarn
+.yarn/**
 .pnp.*
 
 # Zed

src/App.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-import favicon from '$shared/assets/favicon.svg';
-import './app.css';
-import Page from './routes/Page.svelte';
-</script>
-
-<svelte:head>
-    <link rel="icon" href={favicon} />
-</svelte:head>
-
-<div id="app-root">
-    <Page />
-</div>
-
-<style>
-#app-root {
-    width: 100%;
-    height: 100vh;
-}
-</style>

src/app/App.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import Page from '$routes/Page.svelte';
+import Layout from './ui/Layout.svelte';
+</script>
+
+<Layout>
+    <Page />
+</Layout>

src/app/ui/Layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import favicon from '$shared/assets/favicon.svg';
+import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
+import { AppSidebar } from '$widgets/AppSidebar';
+
+let { children } = $props();
+</script>
+
+<svelte:head>
+    <link rel="icon" href={favicon} />
+</svelte:head>
+
+<div class="app">
+    <header></header>
+
+    <Sidebar.Provider>
+        <AppSidebar />
+        <main>
+            <Sidebar.Trigger />
+            {@render children?.()}
+        </main>
+    </Sidebar.Provider>
+
+    <footer></footer>
+</div>
+
+<style>
+#app-root {
+    width: 100%;
+    height: 100vh;
+}
+</style>

src/entities/Font/index.ts

@@ -1 +1,13 @@
 export type { FontCategory, FontProvider, FontSubset } from './model/font';
+export type {
+    FontshareApiModel,
+    FontshareDesigner,
+    FontshareFeature,
+    FontshareFont,
+    FontsharePublisher,
+    FontshareStyle,
+    FontshareStyleProperties,
+    FontshareTag,
+    FontshareWeight,
+} from './model/fontshare_fonts';
+export type { FontFiles, FontItem, FontVariant, GoogleFontsApiModel } from './model/google_fonts';

src/entities/Font/model/font.ts

@@ -1,14 +1,77 @@
+import type { Category } from '$shared/store/createFilterStore';
+
 /**
  * Font category
  */
 export type FontCategory = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
 
+export const FONT_CATEGORIES: Category[] = [
+    {
+        id: 'sans-serif',
+        name: 'Sans-serif',
+    },
+    {
+        id: 'serif',
+        name: 'Serif',
+    },
+    {
+        id: 'display',
+        name: 'Display',
+    },
+    {
+        id: 'handwriting',
+        name: 'Handwriting',
+    },
+    {
+        id: 'monospace',
+        name: 'Monospace',
+    },
+] as const;
+
 /**
  * Font provider
  */
 export type FontProvider = 'google' | 'fontshare';
 
+export const FONT_PROVIDERS: Category[] = [
+    {
+        id: 'google',
+        name: 'Google Fonts',
+    },
+    {
+        id: 'fontshare',
+        name: 'Fontshare',
+    },
+] as const;
+
 /**
  * Font subset
  */
 export type FontSubset = 'latin' | 'latin-ext' | 'cyrillic' | 'greek' | 'arabic' | 'devanagari';
+
+export const FONT_SUBSETS: Category[] = [
+    {
+        id: 'latin',
+        name: 'Latin',
+    },
+    {
+        id: 'latin-ext',
+        name: 'Latin Extended',
+    },
+    {
+        id: 'cyrillic',
+        name: 'Cyrillic',
+    },
+    {
+        id: 'greek',
+        name: 'Greek',
+    },
+    {
+        id: 'arabic',
+        name: 'Arabic',
+    },
+    {
+        id: 'devanagari',
+        name: 'Devanagari',
+    },
+] as const;

src/features/CategoryFilter/index.ts

@@ -0,0 +1,5 @@
+import { FONT_CATEGORIES } from './model/state';
+import { categoryFilterStore } from './store/categoryFilterStore';
+import CategoryFilter from './ui/CategoryFilter.svelte';
+
+export { CategoryFilter, categoryFilterStore, FONT_CATEGORIES };

src/main.ts

@@ -1,5 +1,6 @@
+import App from '$app/App.svelte';
 import { mount } from 'svelte';
-import App from './App.svelte';
+import '$app/styles/app.css';
 
 mount(App, {
     target: document.getElementById('app')!,

src/routes/Page.svelte

@@ -1,10 +1,7 @@
 <script>
-import CategoryFilter from '$features/CategoryFilter/ui/CategoryFilter.svelte';
-import Button from '$shared/shadcn/ui/button/button.svelte';
 </script>
 
 <h1>Welcome to Svelte + Vite</h1>
 <p>
     Visit <a href="https://svelte.dev/docs">svelte.dev/docs</a> to read the documentation
 </p>
-<CategoryFilter />

src/shared/shadcn/ui/sidebar/sidebar-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Input } from '$shared/shadcn/input/index.js';
+import { Input } from '$shared/shadcn/ui/input/index.js';
 import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { ComponentProps } from 'svelte';
 

src/shared/shadcn/ui/sidebar/sidebar-menu-button.svelte

@@ -29,7 +29,7 @@ export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariant
 </script>
 
 <script lang="ts">
-import * as Tooltip from '$shared/shadcn/tooltip/index.js';
+import * as Tooltip from '$shared/shadcn/ui/tooltip/index.js';
 import {
     cn,
     type WithElementRef,

src/shared/shadcn/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Skeleton } from '$shared/shadcn/skeleton/index.js';
+import { Skeleton } from '$shared/shadcn/ui/skeleton/index.js';
 import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 

src/shared/shadcn/ui/sidebar/sidebar-provider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import * as Tooltip from '$shared/shadcn/tooltip/index.js';
+import * as Tooltip from '$shared/shadcn/ui/tooltip/index.js';
 import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import {

src/shared/shadcn/ui/sidebar/sidebar-separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Separator } from '$shared/shadcn/separator/index.js';
+import { Separator } from '$shared/shadcn/ui/separator/index.js';
 import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { ComponentProps } from 'svelte';
 

src/shared/shadcn/ui/sidebar/sidebar-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Button } from '$shared/shadcn/button/index.js';
+import { Button } from '$shared/shadcn/ui/button/index.js';
 import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
 import type { ComponentProps } from 'svelte';

src/shared/shadcn/ui/sidebar/sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import * as Sheet from '$shared/shadcn/sheet/index.js';
+import * as Sheet from '$shared/shadcn/ui/sheet/index.js';
 import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import { SIDEBAR_WIDTH_MOBILE } from './constants.js';

src/widgets/AppSidebar/index.ts

@@ -0,0 +1,3 @@
+import AppSidebar from './ui/AppSidebar.svelte';
+
+export { AppSidebar };

src/widgets/AppSidebar/ui/AppSidebar.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { CategoryFilter } from '$features/CategoryFilter';
+import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
+</script>
+
+<Sidebar.Root>
+    <Sidebar.Content>
+        <CategoryFilter />
+    </Sidebar.Content>
+</Sidebar.Root>

svelte.config.js

@@ -1,8 +1,6 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
-    // Consult https://svelte.dev/docs/kit/integrations
-    // for more information about preprocessors
     preprocess: vitePreprocess(),
 
     compilerOptions: {

tsconfig.json

@@ -24,11 +24,12 @@
     "baseUrl": ".",
     "paths": {
       "$lib/*": ["./src/lib/*"],
+      "$app/*": ["./src/app/*"],
+      "$widgets/*": ["./src/widgets/*"],
       "$shared/*": ["./src/shared/*"],
       "$entities/*": ["./src/entities/*"],
       "$features/*": ["./src/features/*"],
-      "$routes/*": ["./src/routes/*"],
-      "$services/*": ["./src/services/*"]
+      "$routes/*": ["./src/routes/*"]
     }
   },
   "include": [

vite.config.ts

@@ -7,11 +7,12 @@ export default defineConfig({
     resolve: {
         alias: {
             $lib: '/src/lib',
+            $app: '/src/app',
             $shared: '/src/shared',
             $entities: '/src/entities',
             $features: '/src/features',
             $routes: '/src/routes',
-            $services: '/src/services',
+            $widgets: '/src/widgets',
         },
     },
     build: {