@clawlima/react-header-global

Header Global for ReactJs

Usage no npm install needed!

<script type="module">
  import clawlimaReactHeaderGlobal from 'https://cdn.skypack.dev/@clawlima/react-header-global';
</script>

README

react-header-global

NPM JavaScript Style Guide

Install

npm install @clawlima/react-header-global@latest

Usage

import ReactHeaderGlobal from '@claudineiarneckedelima/react-header-global'
import '@clawlima/react-header-global/dist/index.css'

<ReactHeaderGlobal />

Links de Ambiente

O código suporta o referenciamento dos links pertencentes aos módulos contidos no caixa de diálogo de apps e também ao ícone de profile, o qual leva ao sistema do identity server 4.

Para passar esses links de forma customizada, adiciona-se ao componente ReactHeaderGlobal os atributos linkSeletorModulos, o qual espera-se um objeto composto pelas url's em suas respectivas posições na ordem mostrada na caixa de diálogo do apps, e o atributo identityServerLogin que como o nome sugere, é o link que referencia ao sistema do identity server 4.

Como exemplo, o componente ReactHeaderGlobal fica assim:

const linksSeletorModulos = [
    {url: "https://teste"},
    {url: "https://teste1"},
    {url: "https://teste2"},
    {url: "https://teste3"},
  ]
  const perfilLink = "https://identity-server-url/account/login"

  return <ReactHeaderGlobal linkSeletorModulos={linksSeletorModulos} identityServerLogin={perfilLink}/>

Interface

title?: string
  governmentBar?: boolean
  bgColor?: string
  logoImg?: {
    src?: string
    title?: string
    alt?: string
    url?: string
  }
  iconColor?: string
  color?: string
  subBar?: {
    title?: string
    bgColor?: string
    btn: { name: string; url: string; sel?: boolean }[]
  }
  linkSeletorModulos?: {
    img?: string
    text?: string
    url?: string
  }[]
  identityServerLogin?: string

Fonts

:root {
  --color-var-000: #000;
  --color-var-100: #fff;
  --color-var-200: #6c9de7;
  --color-var-300: #66bacd;
  --color-var-400: #407ad6;
  --color-var-500: #508ce5;
  --color-var-600: #1b52b2;
  --color-var-700: #e2e9f5;

  --font-family: 'Raleway';
}

Create Module

npm install -g create-react-library
npx create-react-library

Development

To install module

npm i ../

To compile

npm run compile

To Test

npm start

To Npm Publish

npm publish --access public

If Necessary

Edit the package.json file for your package and include a publishConfig entry.

npm adduser
> Username: XXX
> Password: XXX
> Email: PUBLIC-EMAIL-ADDRESS XXX

License

MIT © claudineiarneckedelima