fiosoft-components v1.0.6

Fiosoft Components

Fiosoft Components je knihovna komponent určených pro projekty, které využívají React Native a NativeWind.

Instalace

Knihovnu můžete nainstalovat pomocí npm:

npm install fiosoft-components

Požadavky na konfiguraci

1. Nastavení NativeWind

Pro správnou funkčnost knihovny je nutné mít správně nakonfigurovaný NativeWind. Ujistěte se, že v tailwind.config.js máte přidán odkaz na soubory knihovny v sekci content:

content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./node_modules/fiosoft-components/src/**/*.{js,ts,jsx,tsx}",
],

2. Nastavení Tailwind CSS

Komponenty využívají proměnné element-background a text, které je potřeba nastavit ve vaší Tailwind konfiguraci. Přidejte následující do theme.extend.colors v tailwind.config.js:

theme: {
    extend: {
        colors: {
        text: "var(--text)",
        "element-background": "var(--element-background)",
        },
    },
},

3. Nastavení barev ikon

Knihovna umožňuje nastavit barvy ikon, které se používají v komponentách. Toto nastavení můžete provést pomocí funkce configureThemeColors. Například:

import { configureThemeColors } from "fiosoft-components/src";
import { DarkTheme, LightTheme } from "../themes/themeOptions";

configureThemeColors({
    monochrome: { light: LightTheme.colors.text, dark: DarkTheme.colors.text },
    secondary: {
    light: LightTheme.colors.textSecondary,
    dark: DarkTheme.colors.textSecondary,
    },
    colorful: {
    light: LightTheme.colors.primary,
    dark: DarkTheme.colors.primary,
    },
});

Použití

Jednotlivé komponenty lze importovat přímo z knihovny. Například:

import { Button, Input } from "fiosoft-components/src";

const MyComponent = () => (
<Button onPress={() => alert("Klik!")}>Klikni zde</Button>
);

Další informace

Podpora typů TypeScript: Knihovna obsahuje typy, které jsou automaticky rozpoznávány při správně nakonfigurovaném tsconfig.json.

Peer dependencies: Knihovna závisí na těchto balíčcích, které musíte mít ve svém projektu:

react

react-native

nativewind

Stylování pomocí Tailwind: Komponenty využívají Tailwind CSS pro styling. Pro maximální flexibilitu si můžete přidat vlastní třídy pomocí className.

Příklad proměnných v CSS: Pro správnou integraci můžete nastavit proměnné jako součást vašeho globálního stylu (např. v App.css):

:root { --text: #000000; --element-background: #ffffff; }

Závěr

Pokud máte jakékoli dotazy nebo narazíte na problém, neváhejte se ozvat! Knihovna je navržena tak, aby byla snadno integrovatelná a přizpůsobitelná vašim potřebám.