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 elementDescribedButton
to generate and wrap React Bootstap'sButton
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
Type / Name | Default | Example | Description |
---|---|---|---|
string description | undefined | Example description text | Description text to put inside Tooltip component |
string className | undefined | YourClassName | Additional class name to custom your styling of a Tooltip component. Use .YourClassName > .tooltip-inner to override background color and font color. Also customize border-top-color of your .YourClassName.tooltip.top > .tooltip-arrow element to avoid color itches. |
string placement | undefined | left | Position of a Tooltip over component it describes. Available options: top , bottom , left , right |
number delayHide | undefined | 3000 | Delay in milliseconds the Tooltip component will hide after describing component hovering finished. |
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 automaticJest
tests of given component__snapshots__
for storing snapshots created by__tests__/renders.js
filefunctions.test.js
for Unit tests of functions insidefunctions.ts
fileintegration.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 componentconfig.ts
for configuration data of given componentfunctions.ts
for logic functionsindex.tsx
for main component fileinterfaces.ts
for Type Script interfacesstyle.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:
License
To add