Crumble

Bibliothèque de composant UI (React), réutilisable, permettant la création des différents produits Slippers, de façon unifiés.

🎨 À propos

• Storybook

📦 Installation

yarn add @oclock/crumble

⛏ Utilisation

import { Button } from '@oclock/crumble';

const App = (props) => (
  <Button
    type="button"
    variant="primary"
    onClick={(event) => console.log('Clicked')}
  >
    Click me
  </Button>
);

Également, n'oubliez pas d'importer le fichier de style

import '@oclock/crumble/dist/css/styles.css';

⌨️ Développement

1. yarn install
2. yarn run dev

Bonus, extensions VSCode

• ESLint
• stylelint

Utiliser Crumble localement, dans un autre projet React.

Si vous souhaitez tester vos modifications locales sur une application React, mais que l'utilisation des symlink, avec les soucis qu'on leur connait (résolution de module, notamment) empêche une expérience de développement optimale ? YALC est l'outil qu'il vous faut.

Installation

$ npm i yalc -g

Utilisation

$ # Build and publish on YALC workflow
$ cd Crumble
$ yarn build:all && yalc publish

$ # Now it's ready to install in your project
$ cd ../your-react-project
$ yalc add @oclock/crumble --yarn

$ # If you do some changes into your package
$ cd ../Crumble
$ yarn build:all && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack update

:warning: yalc crée un yalc.lock et met également à jour le package.json dans le projet où on utilise notre module, localement. Il faut faire attention de ne pas commit ces changements.

📍 Build

• Build le code JSX : yarn build:js
• Build le bundle CSS : yarn build:css

🤝 Contribution

Se baser sur CONTRIBUTING.md.