0.5.5 • Published 8 months ago

@myrosch/ui v0.5.5

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

@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} />
0.5.5

8 months ago

0.5.4

9 months ago

0.5.3

9 months ago

0.5.0

10 months ago

0.5.2

9 months ago

0.5.1

9 months ago

0.4.0

10 months ago

0.3.0

10 months ago

0.2.1

10 months ago

0.3.2

10 months ago

0.2.3

10 months ago

0.3.1

10 months ago

0.2.2

10 months ago

0.2.5

10 months ago

0.2.4

10 months ago

0.2.0

10 months ago

0.1.2

11 months ago

0.1.1

11 months ago

0.1.0

11 months ago