ss-tools/specs/013-unify-frontend-css/quickstart.md

Quickstart: Frontend Development

Prerequisites

• Node.js 18+
• npm

Setup

1. Navigate to the frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

Running the Development Server

npm run dev

The application will be available at http://localhost:5173.

Using Standard UI Components

Import components from $lib/ui:

<script>
  import { Button, Input } from '$lib/ui';
</script>

<Input label="Username" bind:value={username} />
<Button variant="primary" onclick={submit}>Submit</Button>

Using Internationalization

Import the t store from $lib/i18n:

<script>
  import { t } from '$lib/i18n';
</script>

<h1>{$t.dashboard.title}</h1>
<button>{$t.common.save}</button>

Adding New Translations

1. Open frontend/src/lib/i18n/locales/ru.json and add the new key-value pair.
2. Open frontend/src/lib/i18n/locales/en.json and add the corresponding English translation.

Adding New Components

1. Create a new .svelte file in frontend/src/lib/ui/.
2. Define props and styles using Tailwind CSS.
3. Export the component in frontend/src/lib/ui/index.ts.