This package has been deprecated

Author message:

Testing purposes package. No real value for community

amnesia-test

0.1.49 • Public • Published

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

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 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:

License

To add

Readme

Keywords

none

Package Sidebar

Install

npm i amnesia-test

Weekly Downloads

0

Version

0.1.49

License

SEE LICENSE IN aa.txt

Unpacked Size

88.4 kB

Total Files

15

Last publish

Collaborators

  • amnesia