@candy.thieves/ui-kit-lumos

v0.0.52

Published

11 days ago

🎨 **Component library for **Lumos app** — a unified design system and interface elements.**

0High
0Medium
0Low

candy.thieves

Lumos UI-kit

🎨 Component library for Lumos app — a unified design system and interface elements.

📖 Description:
UI Kit is a centralized library of reusable components created to ensure interface consistency across the Lumos app ecosystem.

The project is built on React and TypeScript, using Storybook for component documentation and visual testing. Build is optimized with Vite.

👥 Team:

Team-lead - Vladislav Kravchenko

Front-end:

Vikastgn - Viktoriya Stognieva (Main)
Intrstng - Andrei Babich
hoakiin - Ekaterina Olesik
VladSkij - Vladislav Skalskij
tymanskaya - Ekaterina Tymanskaya

🔄 Deploy

UI-kit Storybook deploy link

🔗 Related Projects

UI-kit Lumos npm-package — a UI component library (UI-kit) for the Lumos application

UI-kit Lumos repository — UI-kit library repository for the Lumos application

Lumos app repository — main application using the UI-kit

Lumos app deploy link — deployment link for the application using the UI-kit

Figma Design — mockups and design system

📋 Instructions for Integrating UI-kit with the app

📦 UI-kit library installation

npm install @candy.thieves/ui-kit-lumos@latest
# or
yarn add @candy.thieves/ui-kit-lumos@latest
# or
pnpm add @candy.thieves/ui-kit-lumos@latest

⚙️ Basic Setup

🌐 Global Style import for React app (Vite, CRA)

🎨 Add the styles to main.tsx:

// my-vite-app/src/main.tsx

import '@candy.thieves/ui-kit-lumos/dist/index.css'

💻 Using Components

// my-vite-app/src/components/MyComponent.tsx

import { Button } from '@candy.thieves/ui-kit-lumos'
import { Typography } from '@candy.thieves/ui-kit-lumos'

export const MyComponent = () => {
  return (
    <div>
      <Typography variant={'h2'} color={'green'}>
        How to use UI-kit components
      </Typography>

      <Button variant="primary" fullWidth onClick={() => console.log('clicked')}>
        Click me!
      </Button>
    </div>
  )
}

🌐 Global Style import for Next.js (App Router)

🎨 Add the styles to your root layout file:

// my-next-app/app/layout.tsx

import '@candy.thieves/ui-kit-lumos/dist/index.css'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Next.js App',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

💻 Using Components

// my-next-app/components/MyComponent.tsx

'use client'

import { Button, Typography } from '@candy.thieves/ui-kit-lumos'

export const MyComponent = () => {
  return (
    <div>
      <Typography variant={'h2'} color={'green'}>
        How to use UI-kit components
      </Typography>

      <Button variant="primary" fullWidth onClick={() => console.log('clicked')}>
        Click me!
      </Button>
    </div>
  )
}

🚀 Getting started locally with the UI-kit library

Follow these steps to run the application locally:

Clone the repository:

git clone https://github.com/candysthieves/lumos-ui-kit.git

Navigate to the project directory:
```
cd lumos-ui-kit
```
Switch to the develop branch:
```
git checkout develop
```
Install dependencies:
```
pnpm install
```
If you have problems with running the script, use the following command in the CLI:
```
pnpm install --legacy-peer-deps
```
Launch the StoryBook local development server to visually test components:
```
pnpm run storybook
```
Access the application:
Open your browser and navigate to the link provided in the CLI.*

⚙️Available Scripts

dev: 💻 Starts a local Vite development server for quick debugging of the application.
```
pnpm run dev
```
build: 📦 Checks the TypeScript, then it builds an optimised production build of the project.
```
pnpm run build
```
type:check: 🔷 Checks TypeScript types without generating files; for validation purposes only.
```
pnpm run type:check
```
stylelint:check: 🎨 Checks SCSS files for stylelint errors.
```
pnpm run stylelint:check
```
stylelint:fix: 🔧 Automatically fixes SCSS stylelint errors.
```
pnpm run stylelint:fix
```
format: ✅ Checks and automatically formats code with Prettier.
```
pnpm run format
```
lint: 🔍 Runs ESLint to check for code quality issues and automatically fixes ESLint errors.
```
pnpm run lint
```
preview: 👀 Starts a local server to preview the production build.
```
pnpm run preview
```
storybook: ✨ Starts a local server to preview the production build.
```
pnpm run storybook
```
build-storybook: 🌐 Starts a local server to preview the production build.
```
pnpm run build-storybook
```
prepare: ⚙️A lifecycle script that Husky uses to set up Git hooks. This is automatically run after npm install.
```
pnpm run build-storybook
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme