README

@dulliag/components

Topics

Installation
This package contains
How to build

Installation

Install the npm-package using npm i @dulliag/components
Import required files in your index.(js|jsx|ts|tsx) and index.html which is located in your public folder

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
  />
</head>

import '@dulliag/components/style/master.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'popper.js/dist/popper.min.js';
import 'jquery/dist/jquery.min.js';

Make sure you have react-router-dom(npm i react-routerdom) (and npm i @types/react-router-dom -D if you're using Typescript) installed for using the Breadcrumb, Navbar and Footer.

Like this

import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Navbar, Breadcrumb, Footer } from '@dulliag/components';

<Router>
  <Navbar />
  <Breadcrumb />
  {/* Website content goes here... */}
  <Footer />
</Router>;

CookieDisclaimer

import { CookieDisclaimerProps, CookieDisclaimer } from '@dulliag/components';

<CookieDisclaimer cookieName="cookies" />;

Breadcrumb

import { BreadcrumbProps, Breadcrumb } from '@dulliag/components';

<Breadcrumb defaultPathName="DulliAG" />;

Toast

import {
  Toast,
  ToastList,
  ToastContext,
  useToastContext,
  ToastContextProvider,
} from '@dulliag/components';

<ToastContextProvider>{/* children */}</ToastContextProvider>;

How to use...

If no type-value is given the default type is set to success. You don't need to give an value for close and action

import React, { FC, useState } from 'react';
import {
  CookieDisclaimer,
  ToastContextProvider,
  useToastContext,
  Navbar,
  Breadcrumb,
  Footer,
} from '@dulliag/components';

<ToastContextProvider>
  <CookieDisclaimer />
  <Navbar links={...} />
  <Breadcrumb />
  <TestSection />
  <Footer props={...} />
</ToastContextProvider>

const TestSection: FC = () => {
  const addToast = useToastContext();
  const [name, setName] = useState<string>("");

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // {
    //   type: "success" || "info" || "error",
    //   text: "This some text!",
    //   close: "ALERT",
    //   action: () => alert("You have clicked the button!")
    // }
    addToast({
      type: "error",
      text: `Welcome ${name}`,
    });
  }

  return <form onSubmit={handleSubmit}>
    <input placeholder="Enter your name..." onChange={(e) => setName(e.target.value)}>
    <button type="submit">Fire toast</button>
  </form>
}

Navbar

import { NavbarLink, NavbarProps, Navbar } from '@dulliag/components';

<Navbar
  brand="DulliAG"
  badge="Beta"
  links={NavbarLink[]}
/>;

Footer

import { FooterLink, FooterAd, FooterAuthor, FooterProps, Footer } from '@dulliag/components';

<Footer
  links={FooterLink[]}
  partner={FooterLink[]}
  other={FooterLink[]}
  ad={FooterAd}
  author={FooterAuthor}
  version={string}
/>;

Spinner

import { SpinnerProps, Spinner } from '@dulliag/components';

<Spinner small={true} large={false} />;

How to build

Create a new build using npm run prepare

If the build was successful we proceed with the following steps...

Increase the version using the command npm version [major|minor|patch]
Make sure you are logged in npm login
After this publish this package by using the npm publish --access public command

Usage no npm install needed!