rocket ui

? Déprécié

Cette bibliothèque a été obsolète. Les composants ont été recwitten en utilisant les dernières versions Materi-UI et React et peuvent être trouvées ici: Rocket-UI

Pour la documentation et des exemples significatifs, consultez la documentation GitBook

---

Rocket-UI (déprécié)

Bit Collection

Un ensemble de composants de réaction réutilisables et composables construits sur le noyau d'interface utilisateur du matériau pour développer des interfaces d'applications Web rapides et conviviales.

? ‍ Vérifiez le guide de migration de Bit Legacy to Bit Harmony Version.

? Installation

NPMRC est le fichier de configuration NPM et pour utiliser notre bibliothèque, vous devez configurer ce fichier.

‼ Sautez cette étape si le projet est généré avec notre générateur de fusées WebApp. Le fichier .npmrc est déjà configuré

Courir

npm config set @totalsoft_oss:registry https://node.bit.cloud

Cette commande ajoutera une entrée dans votre fichier .npmrc racine. S'il n'existe pas, il en créera un.

- Installation d'un composant

Accédez à la page principale du composant, puis sélectionnez la commande pour le gestionnaire de package que vous utilisez. Vous pouvez également choisir la version que vous souhaitez installer.

Exécutez la commande dans votre terminal et vous serez prêt à l'utiliser!

npm i @totalsoft_oss/rocket-ui.components.data-display.typography

- Installez tous les composants avec un seul package

Si vous voulez avoir tous les composants de votre projet dans un seul package. Accédez au composant Core dans Bit Cloud.

Installez le package core en exécutant

npm i @totalsoft_oss/rocket-ui.core

Usage

    import React from 'react'
    import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
    /* example using core package
    import { Typography } from '@totalsoft_oss/rocket-ui.core'
    */

    const App = ( ) => {
        return (
            < Typography variant = 'body2' emphasis = 'bold' >
                "Text"
            </ Typography >
        )
    } 

? Structure des composants

Chaque composant est dans une section appropriée à son objectif. Par exemple, tous les composants liés aux boutons résident dans le dossier buttons . Tous les composants ont la même structure de fichiers. Nous implémentons et appliquons cette structure en créant notre propre générateur de composants, une fonctionnalité fournie par bit. Comme vous le verrez, tous les composants et ceux qui seront créés à l'aide du modèle rocket-generator auront la structure suivante

• Fichier d'entrée index.js .
• MyComponent.js Fichier principal.
• MyComponent.test.js Fichier de test.
• MyComponent.docs.mdx Docs Fichier pour le composant.
• Folder de compositions de compositions .
  • MyComponent.composition.js Compositions pour simuler le composant dans différents états et contextes.

? Guide de contribution

Nous utilisons Bit pour la gestion et la contribution des composants. Le bit est un outil open source pour composer un logiciel basé sur les composants.

- Installer le bit

Est recommandé d'utiliser l'invite de commande au lieu de PowerShell en raison de certains problèmes de compatibilité.

npm i -g @teambit/bvm

bvm install

Si une erreur se produit lors de l'installation, veuillez vérifier la section de dépannage.

- Démarrer le serveur local

Une fois le bit installé avec succès, vous pouvez cloner le référentiel et utiliser les fonctionnalités bit au maximum.?

Pour commencer tout de suite, exécutez bit start et ouvrez LocalHost: 3000. Cela peut prendre un certain temps pour construire la première fois que vous exécutez cette commande car il construit toute l'interface utilisateur pour votre environnement de développement. Lorsque le serveur local est opérationnel, vous verriez tous les composants et vous pouvez interagir avec eux.

bit start

- Modifier les composants existants

Après avoir modifié / fixé le composant en fonction de vos besoins, vous devez exécuter bit test pour vous assurer que tous les tests passent et en ajouter plus si vos modifications nécessitent.

bit test

De plus, si une nouvelle fonctionnalité est ajoutée, en plus des tests, un exemple avec la nouvelle fonctionnalité doit également être ajouté. Les fichiers d'exemples sont dans chaque répertoire de composants dans le répertoire compositions .

Après avoir modifié le composant, vous devez exécuter bit status pour vérifier les problèmes liés aux bits, puis bit compile afin d'avoir les dernières modifications de votre interface utilisateur.

bit status

bit compile

- Ajouter un nouveau composant

Pour créer un nouveau composant, vous devez utiliser notre propre générateur de composants, rocket-generator , qui fournit un modèle utile pour implémenter un nouveau composant.

bit create rocket-generator components/buttons/my-component

- Demande de traction ouverte

Lorsque votre modification / fonctionnalité / correction est terminée et que vous souhaitez marquer quels composants sont publiés, leur prochaine version et une option de message Changelog - Soft.

bit tag -m " my message " --soft

Après avoir exécuté la commande ci-dessus, vous devriez voir le fichier bitmap modifié et après cela, vous pouvez créer votre demande de traction.

Vous pouvez en savoir plus sur Bit et d'autres fonctionnalites qu'il fournit ici.

Licence

Rocket-UI est autorisé sous la licence du MIT. @Totalsoft