@weareconceptstudio/cs-admin v0.5.0

cs-admin

Installation

npm install @weareconceptstudio/cs-admin

At a Glance

// in app.js
import React from 'react';
import { render } from 'react-dom';
import { Admin, Resource, Pages } from '@weareconceptstudio/cs-admin';

// Ico moon
import './icons/style.css';

// Components
import PostForm from './PostForm';
import * as PagesViews from './Pages';

// Admin Prefix
const adminPrefix = '/admin'

// Menu items
const menu = [
    main:[
        {
             title:'General',
             children:[
                {
					title: 'Media Library',
					path: '/',
					icon: 'media-library',
					key: 'media-library',
				},
                {
					title: 'Pages',
					icon: 'pages',
					path: `${adminPrefix}pages/home`,
					key: 'pages',
				},
                  {
					title: 'Posts',
					icon: 'posts',
					path: `${adminPrefix}posts`,
					key: 'pages',
				},
             ]
        }
    ],
    collapsed:{
        pages:{
            title:'Pages',
            children:[
                {
					title: 'Home',
					path: `${adminPrefix}pages/home`,
				},
            ]
        }
    }
]

render(
	<Admin
		siteName={'Cs admin'}
		menu={menu}
		apiPrefix={'http://127.0.0.1:8000/api/admin/'}
		adminPrefix={adminPrefix}
		languages={[
			{
				id: 'en',
				name: 'English',
			},
		]}>
        <Pages
			path={'pages/:slug'}
			name={'pages'}
			views={PagesViews}
		/>
		<Resource
			title='Posts'
			path='posts/*'
			name='posts'
			form={PostForm}
			columns={[
				{
					title: 'id',
					dataIndex: 'id',
					key: 'id',
				},
				{
					title: 'Name',
					dataIndex: 'name',
					key: 'name',
				},
			]}
		/>
	</Admin>,
	document.getElementById('root')
);

// Form
import React, { useRef } from 'react';
import {
	FormContainer,
	InputField,
	CustomCollapse,
	Container,
	MediaPicker,
	imageTypes,
} from 'cs-admin';

const Form = ({ action, current, onFinish }) => {
	const formRef = useRef();

	return (
		<FormContainer
			ref={formRef}
			title={`Post ${action}`}
			initialValues={current}
			onFinish={onFinish}
			hasLayout={true}
			hasMeta={true}>
			<CustomCollapse
				title={'General information'}
				type={'form-block'}>
				<Container row>
					<div className='col-lg-8'>
						<InputField
							label={'Name'}
							name={'name'}
						/>
						<InputField
							type={'textarea'}
							label={'Description'}
							name={'description'}
						/>
					</div>
					<div className='col-lg-4'>
						<MediaPicker
							label={'Image'}
							name={'image'}
							acceptTypes={imageTypes}
							multiple={false}
						/>
					</div>
				</Container>
			</CustomCollapse>
		</FormContainer>
	);
};

export default Form;