@doggoapp/doggo-ts-admin

doggo-ts-admin

UI for DogGO admin panels

• Purpose of this package is to reduce manuel work of DogGO admin panels.

Install

npm install --save @doggoapp/doggo-ts-admin
yarn add @doggoapp/doggo-ts-admin

Publish

npm publish
yarn publish

after publish increase last version e.g. 
1.0.21 >> 1.0.22

then

commit to master branch

Usage

// for styled components, you should import these file in the top level component.
import '@doggoapp/doggo-ts-admin/dist/index.css'
import '@coreui/icons/css/coreui-icons.min.css'
import 'flag-icon-css/css/flag-icon.min.css'
import 'font-awesome/css/font-awesome.min.css'
import 'simple-line-icons/css/simple-line-icons.css'
import 'react-table/react-table.css'
import '@coreui/coreui/dist/css/coreui.css'
import '@coreui/coreui/dist/css/bootstrap.css' // you have to import css file if you want to use styled components

Variables

import React, { Component } from 'react'

import { DogList, NeighboorhoodList } from 'doggo-ts-admin'
import 'doggo-ts-admin/dist/index.css'

class Example extends Component {
  render() {
    return (
      <React.Fragment>
        <ul>
          {DogList.map(({ label, value }) => (
            <li>
              {label} - {value}
            </li>
          ))}
        </ul>
      </React.Fragment>
    )
  }
}

Inputs

import {
  DogList,
  DogGOInput,
  DogGOSelect,
  DogGORadioCheckbox,
  NeighboorhoodForm,
  DogGOEmailInput,
  DogGOPhoneInput,
  DogGODateTime,
  DogGORateInput,
  DogGOBase64PhotoInput,
  DogGOButton,
  MyReactTable,
  DogGOPhotoInput
} from 'doggo-ts-admin'

Those components can be used with react-hook-form. An example exist on example sub folder.

Example usage of DogGOInput

<DogGOInput
  label='FullName'
  type='text'
  placeholder='please enter a number'
  reference={register({ required: true })}
  name='name'
  underline='please enter a name'
  error={errors.name}
/>

Example usage of DogGOPhotoInput

<DogGOPhotoInput
  label='file'
  name='photoInput'
  underline='Max Photo Size: 1 MB'
  error={errors.photoInput}
  control={control}
  invalidValueText={'This field is required'}
  multiple
  walker={{
    email: '[e-mail]',
    firstName: 'Süleyman Barış',
    lastName: 'Eser'
  }}
  isWalkerPhoto
  rules={{ required: true }}
  maxSize={1}
/>

Types and Enums

import { * as Types } from 'doggo-ts-admin/dist/types'
import { * as Enums } from 'doggo-ts-admin/dist/enums'

const Note: Types.NoteType = {
  noteId: "xxxxxxxxxxxxxx",
  ...
}

MyReactTable

<MyReactTable
  ref={formTest}
  data={values}
  columns={columns}
  freezeWhenExpanded={false}
/>

Work With Local Active Project

First, go to root directory in npm package and run link command.

npm link

This created a local link in the path /usr/lib/node_modules/@doggoapp folder.

Second part is adding local npm as a global dependencies for your current project.

npm link @doggoapp/doggo-ts-admin

Now you can use npm package locally. Do not forget run "yarn start" in npm package for hot reloading.

example usage

import { PromocodeStatusEnum } from '@doggoapp/doggo-ts-admin'

License

MIT © DogGO