https://github.com/guillotinaweb/guillotina_react

A Management interface for Guillotina
https://github.com/guillotinaweb/guillotina_react

asyncio guillotina hooks python react

Last synced: 7 days ago
JSON representation

A Management interface for Guillotina

• Host: GitHub
• URL: https://github.com/guillotinaweb/guillotina_react
• Owner: guillotinaweb
• License: mit
• Created: 2019-12-07T16:05:35.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T07:29:32.000Z (7 months ago)
• Last Synced: 2024-05-02T06:07:23.394Z (6 months ago)
• Topics: asyncio, guillotina, hooks, python, react
• Language: TypeScript
• Homepage:
• Size: 3.4 MB
• Stars: 6
• Watchers: 8
• Forks: 4
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🔌 Guillotina Management Interface

It's build around the idea of a framework to roll you own GMI.

Provides an interface to access all Guillotina content depending on user permissions and allowing you to apply actions like create/modify/remove content, UI interactions like displaying flash messages, etc.

All this with the flexibility to build it your way, adding your own content with your forms, your icons, etc. It's build around the idea to act as a framework,

layer that could be extended from outside.

## Prerequisites

- React +16.12.0

## Status

Alpha version. The app is usable, but still needs some love.

## Roll your own guillotina

### With create react app

```bash

npx create-react-app gmi_demo

cd gmi_demo

yarn add @guillotinaweb/react-gmi

```

App.js

```jsx

import React from 'react'

import { Layout } from '@guillotinaweb/react-gmi'

import { Auth } from '@guillotinaweb/react-gmi'

import { Guillotina } from '@guillotinaweb/react-gmi'

import { Login } from '@guillotinaweb/react-gmi'

import { getClient } from '@guillotinaweb/react-gmi'

import { ClientProvider } from '@guillotinaweb/react-gmi'

import { useState } from 'react'

import '@guillotinaweb/react-gmi/dist/css/style.css'

// guillotina url

let url = 'http://localhost:8080'

const schema = '/'

const auth = new Auth(url)

const client = getClient(url, schema, auth)

function App() {

  const [isLogged, setLogged] = useState(auth.isLogged)

  const onLogin = () => {

    setLogged(true)

  }

  

  const onLogout = () => {

    setLogged(false);

  };

  auth.onLogout = onLogout

  return (

    

      

        {isLogged && }

        {!isLogged && (

          


            


               

            

          

        )}

      

    

  )

}


export default App

```

### To add icons:

Add the icons to the default public/index.html header

```diff

+ 

```

- Copy guillotina logo to your public

```bash

curl https://raw.githubusercontent.com/guillotinaweb/guillotina_react/master/public/logo.svg > public/logo.svg

```

## Docs?

- [Howto Extend Guillotina React form outside?](docs/extend.md)

- [Narrative Docs](docs/api.md)

- [Getting Started - Step by Step](docs/tutorial/tutorial.md)

## Develop

```

run a local guillotina

yarn

yarn start

```

## Screenshots

![](screenshots/screen2.png)

![](screenshots/screen1.png)

![](screenshots/screen3.png)

## Sponsors

This project is sponsored by Vinissimus Wine Shop and Iskra