amnesia-test v0.1.49

Described components

@ToDo: dodać obrazki (https://www.npmjs.com/package/react-tag-input):

• license
• sprawdzić build z travisa
• code style prettier
• maintainability i test coverage (code climate) - sprawdzić to

Described components are wrappers using React bootstap components. They wrap given html elements providing description by React Bootstrap's Tooltip component.

Package contains:

• DescribedComponent to wrap given html element
• DescribedButton to generate and wrap React Bootstap's Button component

Installation

Install dependency on your project

npm install amnesia-test

Import package to your component

import { DescribedComponent, DescrbedButton } from "amnesia-test";

Use it directly on your component

<DescribedComponent description="description text">
    <p>html element</p>
</DescribedComponent>

Because package does not contain Bootstrap's styling, don't forget to style Tooltip component. You may do it by defining Tooltip css class. Alternatively you may attach whole Bootstrap stylesheet onto head section of your html document

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

Usage

Workable examples are available on src/lib/examples/DescribedComponent and src/lib/examples/DescribedButton folders. You can import those examples directly to demo application (see below).

DescribedComponent

Simplest example

import React from 'react';
import { DescribedComponent } from 'amnesia-test';

const SimplestExample = () => (
    <DescribedComponent description="description text">
        <p>html element</p>
    </DescribedComponent>
);

export default SimplestExample;

Component API exposes given props

Contribution

Got ideas on how to make those components better? Open an issue under LINK TO PROVIDE

Development

Clone repo

git clone https://github.com/DimiMikadze/create-react-library.git

Install all dependencies

npm install

Start development server

npm start

Development server uses Demo app stored on src/demo/index.tsx. You have auto-reloading live preview of your development. You also can use any of examples stored on src/lib/examples/DescribedComponent or src/lib/examples/DescribedButton files. You'll find commented option how to preview BasicExample on src/demo/App.js file.

Folder structure

Package is based on create-react-library and implements it's concept of file structure.

Live demo files are stored on src/demo folder. You can manipulate components and their props on App.js file.

Developed components are stored on src/lib/components folder. Component's files should be encapsulated in one folder together:

• /__tests__ folder for automatic Jest tests of given component
  • __snapshots__ for storing snapshots created by __tests__/renders.js file
  • functions.test.js for Unit tests of functions inside functions.ts file
  • integration.test.js for integration tests of given component (cooperation with other components)
  • renders.js for rendering snapshots of component on different states
• /gfx folder for any images used by component
• config.ts for configuration data of given component
• functions.ts for logic functions
• index.tsx for main component file
• interfaces.ts for Type Script interfaces
• style.scss for component's style sheet

Note: Depending on component structure some files (i.e. config.ts, functions.ts or __tests__/integration.test.js) are not necessary on the package.

Example files are stored on src/lib/examples folder. Example components should be as simple as possible, returning only example container, some short description of an example, as well as Component formed to achieve given example's idea. Please attach as many valuable examples as possible.

src/lib.index.js is a gate for providing package components. If you add new one to the package please import it to this file and also make it available to package users by exporting it. Components not exported by this file are not visible for package end users.

Technologies

Components are written on TypeScript. However you may write new ones using Jsx or older versions of JS. Package is based on create-react-library which is a library based on ejected create-react-app tailored to writing new NPM modules. Package consumes Sass and Jest frontend test environment.

Testing

To fire up Jest test

npm run test

To fire up Jest tests with included Coverage report (stored under coverage/ folder and available as an html document under coverage/lcov-report/index.html file)

npm run test-with-coverage

Build library

npm run build

Produces production version of library under the build folder.

Publish library

npm publish

Thanks

To all authors of packages used to build this one and contributors. Special props goes to:

• create-react-library
• React bootstap

License

To add