ghost-design-system

Ghost Design System - React Components library

Demo

Available components:

• Atoms:
  • Badge (notification and indicator)
  • Colors
  • Icons
  • Layout
    • Row
    • Col
    • Collapsible section
  • Link
  • Modal
  • Portal
  • Pulsar
  • Tooltip
  • Typography
    • Text
    • Title
• Molecules:
  • Amount field
  • Banner
  • Button
  • Checkbox field
  • Datepicker field
  • File field
  • Percentage field
  • Popover
  • Rich Text field
  • Select field:
    • Single
    • Multi
    • Autocomplete (aka Dynamic Search)
    • Autocomplete creatable (aka Dynamic Search Creatable)
  • Switch field
  • Textarea field
  • Text field
  • Toaster
  • YearPicker field
• Organisms:
  • ActionBar
  • Datatable:
    • Generic Data Table
    • Editable Data Table (full editable)
    • Line editable Data Table (editon in popup form with data validation)
    • Line editable in place data table (edition of a line in place)
    • Static data table
    • Colunns
  • Filter
  • Form:
    • Form component
    • useForm hook
  • NavBar
  • SideBar
• Templates:
  • Portfolio

Usage

1. Run the command:

npm install ghost-design-system

2. Define the set of colors by copying the file: ~ghost-design-system/dist/assets/_colors.scss)

// Neutral pallet
$chalk: rgb(228, 228, 228);
$charcoal: rgb(51, 51, 51);
$pebble: rgb(117, 117, 117);
$silver: rgb(196, 196, 196);
$smoke: rgb(248, 248, 248);
$white: rgb(255, 255, 255);

// Additional pallet
$scooter: rgb(38, 186, 212);
$buttercup: rgb(244, 174, 38);
$cerulean: rgb(1, 82, 129);
$cinnabar: rgb(232, 61, 71);
$fern: rgb(92, 184, 92);
$sky: rgb(16, 156, 241);
$skyhigh: rgb(206 228 255);
$tangerine: rgb(229, 114, 0);

$error: rgb(255, 52, 24);

$primary: $scooter;
$secondary: $pebble;
$tertiary: $charcoal;

$fontfamily: 'Montserrat', sans-serif;

3. Create your index.scss file:

@import 'colors.scss';
@import '~ghost-design-system/dist/assets/_global.scss';
@import '~ghost-design-system/dist/assets/_general.scss'; // Optional

4. Load the required icon set, for example in your index.tsx :

import { loadIcons } from 'ghost-design-system';

loadIcons();

5. You should be ready to use any of the components of the library.

---

References

This react components library uses the following:

• @fortawesome
• @szhsin/react-menu
• classnames
• color-alpha
• color-rgba
• date-fns
• lodash
• numeral
• react-collapsed
• react-datepicker
• react-infinite-scroller
• react-intersection-observer
• react-number-format
• react-query
• react-select
• react-textarea-autosize
• suneditor
• tippyjs
• yup

Peer dependencies:

• react
• react-dom
• suneditor - for SCSS import
• tippyjs - for SCSS import

Dev dependencies:

• ESLint
• Jest
• Prettier
• Rollup
• SCSS
• Storybook
• Testing-library
• Typescript

---

To go further