@myrosch/ui v0.5.5
@myrosch/ui
@myrosch/ui est une bibliothèque de composants UI qui vous permet de créer des interfaces utilisateurs élégantes et cohérentes en utilisant un système de thèmes fourni par le RoschThemeProvider
. Le package inclut actuellement trois composants principaux : Input
, Text
, et Button
.
Installation
Vous pouvez installer le package via npm ou yarn :
npm install @myrosch/ui
ou
yarn add @myrosch/ui
Utilisation
Pour utiliser les composants @myrosch/ui dans votre projet, vous devez d'abord envelopper votre application avec le composant RoschTheme
pour fournir un thème à vos composants.
Exemple d'utilisation :
import React from 'react';
import { RoschTheme, RoschText } from '@myrosch/ui';
const theme = {
// Ajoutez votre configuration pour le thème ici
};
const colors = {
// Ajoutez votre palette de couleurs ici
}
const App = () => {
return (
<RoschTheme theme={theme} colors={colors}>
<div>
<RoschText>Bienvenue sur mon application</RoschText>
</div>
</RoschTheme>
);
};
export default App;
Thématisation
Le package @myrosch/ui utilise le composant RoschTheme pour permettre une personnalisation complète des composants via un thème global. Vous pouvez définir les styles globaux à appliquer sur tous les composants. un thème par defaut est fourni si aucun n'est fourni dans RoschTheme
{
name: "default-theme",
textSizes: {
xs: "0.75rem", // 12px
sm: "0.875rem", // 14px
md: "1rem", // 16px
lg: "1.25rem", // 20px
xl: "1.5rem", // 24px
xxl: "2rem", // 32px
},
defaultTextSize: "md",
spacings: {
xs: "0.25rem", // 4px
sm: "0.5rem", // 8px
md: "1rem", // 16px
lg: "1.5rem", // 24px
xl: "2rem", // 32px
xxl: "3rem", // 48px
},
defaultSpacing: "md",
radiusSizes: {
none: "0px",
sm: "0.125rem", // 2px
md: "0.25rem", // 4px
lg: "0.5rem", // 8px
xl: "1rem", // 16px
xxl: "1.5rem", // 24px
pills: "50rem", // Pour les éléments en forme de pilule
},
defaultRadiusSize: "md",
buttons: {
radius: "md",
paddingHorizontal: "xl",
paddingVertical: "md",
},
inputs: {
radius: "lg",
paddingHorizontal: "md",
paddingVertical: "md",
},
}
Palette de couleurs par défaut
La palette de couleurs est définie de manière centralisée pour garantir une cohérence dans l'apparence de vos composants.
const defaultThemeColor = {
buttons: {
primary: {
default: {
onColor: '#ffffff',
color: '#007bff',
},
disabled: {
onColor: '#e2e6ea',
color: '#6c757d',
},
},
secondary: {
default: {
onColor: '#ffffff',
color: '#6c757d',
},
disabled: {
onColor: '#e2e6ea',
color: '#adb5bd',
},
},
},
inputs: {
primary: {
default: {
onColor: '#ffffff',
color: '#007bff',
},
disabled: {
onColor: '#e9ecef',
color: '#6c757d',
},
},
},
texts: {
primary: {
default: {
color: '#007bff',
},
},
secondary: {
default: {
color: '#6c757d',
},
},
},
};
Composants disponible
RoschText
RoschText
est un composant React simple et stylisé pour afficher du texte avec des options de personnalisation. Il permet d'appliquer des styles tels que le gras, le soulignement, la majuscule, et plus encore, tout en offrant la possibilité de définir la couleur et la taille du texte.
Utilisation
Pour utiliser le composant RoschText, importez-le simplement depuis @rosch/ui :
import { RoschText } from '@rosch/ui';
Le composant RoschText vous permet d'afficher du texte avec diverses options de style en utilisant les propriétés disponibles. Voici un exemple d'utilisation de base :
<RoschText bold={true} fontSize="lg" colorType="primary">
Bold and large text with primary color
</RoschText>
RoschButton
RoschButton
est un composant React stylisé qui permet de créer des boutons personnalisés avec diverses options de style. Vous pouvez contrôler l'apparence du bouton, y compris sa couleur, sa taille, et son état (comme désactivé ou actif).
Utilisation
Pour utiliser le composant RoschButton
, importez-le simplement depuis @rosch/ui
:
import { RoschButton } from '@rosch/ui';
Le composant RoschButton
vous permet de créer des boutons avec différentes propriétés pour personnaliser leur apparence et leur comportement. Voici un exemple d'utilisation de base :
<RoschButton colorType="primary" size="md">
Click Me
</RoschButton>
RoschInput
RoschInput
est un composant React stylisé qui permet de créer des champs de saisie de texte avec diverses options de personnalisation. Vous pouvez contrôler l'apparence de l'input, ainsi que son comportement (comme la gestion des états actifs ou désactivés).
Utilisation
Pour utiliser le composant RoschInput
, importez-le simplement depuis @rosch/ui
:
import { RoschInput } from '@rosch/ui';
Le composant RoschInput
vous permet de créer des champs de saisie de texte avec différentes propriétés pour personnaliser leur apparence et leur comportement. Voici un exemple d'utilisation de base :
<RoschInput placeholder="Enter your text here" size="md" disabled={false} />
8 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago