pipe-components

This module provides a component library that can be used by react projects using the node module pipe-automater.

Usage no npm install needed!

<script type="module">
  import pipeComponents from 'https://cdn.skypack.dev/pipe-components';
</script>

README

pipe-components

This module provides a component library that can be used by react projects using the node module pipe-automater.

Get started

  1. Create an app with pipe-automater
  2. $ npm install pipe-components
  3. Install the extend script of pipe-scripts
  4. $ npm run extend and choose pipe-components setup
  5. Now you can import components in any .jsx file as following button example
import { Button } from 'pipe-components';
  1. To overwrite any style variables edit the /components/index.scss file

Get started without pipe-scripts

  1. Create an app with pipe-automater
  2. $ npm install pipe-components
  3. Import components in any .jsx file as following button example
import { Button } from 'pipe-components';
  1. Create an index.scss file with following content
/*
* Component stylesheet imports and default style variables to overwrite
*/

// Button
$button-color: $base-font-color;
$button-background-color: $c-primary;
$button-hover-background-color: lighten($button-background-color, 10%);
$button-active-background-color: $c-secondary;
$button-disabled-background-color: $c01-30;
$button-hover-active-background-color: lighten($button-active-background-color, 5%);
$button-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/Button/Button';

// ButtonBar
$button-bar-border-color: $c13;
$button-bar-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/ButtonBar/ButtonBar';

// Checkbox
$checkbox-color: $c01;
$checkbox-unchecked-color: $c01-80;
$checkbox-hover-unchecked-color: $c01;
$checkbox-checked-color: $c-primary;
$checkbox-hover-checked-color: lighten($checkbox-checked-color, 10%);
$checkbox-border-radius: $ui-border-radius;
@import '../../node_modules/pipe-components/src/components/Checkbox/Checkbox';

// Dropdown
$dropdown-width: 100%;
$dropdown-border-color: $c02;
$dropdown-border-radius: $ui-border-radius;
$dropdown-closed-hover-background-color: $c01-10;
$dropdown-closed-disabled-color: $c01-30;
$dropdown-closed-readonly-color: $c01-10;
$dropdown-item-background-color: $c04;
$dropdown-item-border-color: $c13;
$dropdown-hover-item-background-color: lighten($dropdown-item-background-color, 10%);
$dropdown-focus-item-background-color: $c-primary;
$dropdown-focus-item-color: $c01;
$dropdown-hover-focus-item-background-color: lighten($dropdown-focus-item-background-color, 10%);
$dropdown-disabled-item-background-color: $c10;
$dropdown-disabled-item-color: $c18;
$dropdown-scrollbar-background-color: $c13;
$dropwdown-scrollbar-thumb-color: $c20;
@import '../../node_modules/pipe-components/src/components/Dropdown/Dropdown';

// Grid
$grid-total-columns: 12;
@import '../../node_modules/pipe-components/src/components/Grid/Grid';

// Icon
$icomoon-font-path: 'assets/fonts/';
@import '../../node_modules/pipe-components/src/components/Icon/Icon';

// Input
$input-background-color: $c00;
$input-border-color: $c01-30;
$input-hover-background-color: $c01-10;
$input-hover-border-color: $c01-70;
$input-disabled-border-color: $c01-30;
$input-disabled-color: $c01-30;
$input-readonly-backround-color: $c01-10;
$input-readonly-border-color: $c00;
$input-focus-border-color: $c-primary;
@import '../../node_modules/pipe-components/src/components/Input/Input';

// Label
@import '../../node_modules/pipe-components/src/components/Label/Label';

// LoadingSpinner
$loading-spinner-background-color: $c21-60;
@import '../../node_modules/pipe-components/src/components/LoadingSpinner/LoadingSpinner';

// Modal
$modal-background-color: $c21-60;
$modal-color: $base-font-color;
$modal-primary-action-background-color: $c-primary;
$modal-secondary-action-background-color: $c-secondary;
@import '../../node_modules/pipe-components/src/components/Modal/Modal';

// MonospaceString
@import '../../node_modules/pipe-components/src/components/MonospaceString/MonospaceString';

// ProgressBar
@import '../../node_modules/pipe-components/src/components/ProgressBar/ProgressBar';

// CircularProgress
$circular-progress-background-color: $c01-80;
$circular-progress-color: $c-primary;
@import '../../node_modules/pipe-components/src/components/ProgressBar/CircularProgress/CircularProgress';

// LinearProgress
$linear-progess-bar-height: $ui-grid-step;
$linear-progess-background-color: $c01-80;
$linear-progess-color: $c-primary;
$linear-progess-sub-color: $c-secondary;
@import '../../node_modules/pipe-components/src/components/ProgressBar/LinearProgress/LinearProgress';

// SliderBar
$slider-bar-height: $ui-grid-step-x2;
$slider-bar-color: $c-primary;
$slider-bar-thumb-color: $c01-30;
$slider-bar-track-color: $c01-80;
$slider-bar-input-border-color: $c01-30;
$slider-bar-value-font-size: $default-font-size;
@import '../../node_modules/pipe-components/src/components/SliderBar/SliderBar';

// Snackbar
$snackbar-max-width: 50%;
$snackbar-background-color: $c-primary;
$snackbar-distance-bottom: 4*$ui-grid-step;
$snackbar-distance-left: 5*$ui-grid-step;
@import '../../node_modules/pipe-components/src/components/Snackbar/Snackbar';

// ToggleSwitch
$toggle-switch-background-color: $c01-80;
$toggle-switch-color: $c21;
$toggle-switch-active-color: $c-accent;
$toggle-switch-width: 7.5*$ui-grid-step;
$toggle-switch-height: 3.75*$ui-grid-step;
$toggle-switch-diameter: 2.5*$ui-grid-step;
$toggle-switch-distance-toggle-to-border: 0.625*$ui-grid-step;
@import '../../node_modules/pipe-components/src/components/ToggleSwitch/ToggleSwitch';