Git Product home page Git Product logo

kaiju's Introduction

Cerener OSS Build Status

Kaiju is a drag and drop web editor for building pages composed of predefined react components. Kaiju's default plug-in allow users to build pages composed of react components from Terra UI, generate react components and preview the generated pages in the browser.

Kaiju is great for rapid prototyping and facilitating collaboration between engineers and designers.

kaiju demo

Local Installation

Requirements

To run the app, spin up a couple of docker containers with compose and navigate to localhost.

docker-compose up

Development Requirements

  • Node
  • Rails
  • Local Redis database

To develop the app, install dependencies and spin rails and node server and navigate to localhost:3000. Running npm install in the root kaiju directory will install npm and rails dependencies.

npm install
npm install foreman -g

nf start

Usage

If you haven't setup an IDP you'll be greeted with the mock identity provider. This looks shady, but it's just a pass through provided by omniauth. Any username/email is accepted. That said, please don't use this IDP in production.

After log-in the first step is to create a project. Each new project has a default workspace. The workspace is where you will be creating your new components. Drag a component from the left column to the workspace to drop the component. With this drag and drop system you can build out a tree of nested UI components with a layout as the root. The layers of the workspace will be displayed in the bottom left corner of the editor. The properties of the dropped components can be modified by editing the fields displayed in the right column.

Once you've created your page you can preview it by clicking on the "Eye" tool-bar button located at the bottom of the workspace. Or view the generated code by clicking the code tool-bar button.

Kaiju is an online editor and allows for sharing workspaces between collaborators. By default all workspaces and projects can be view by any logged in user but only the author of a workspace can edit. If the author of workspace or project chooses they can create a collaboration link. This link is active for 24 hours and will add anyone who accesses the link as a collaborator on the project/workspace, giving them privileges to edit.

The best way to give kaiju a try is by following our above docker instructions. You won't be able to leverage the sharing aspect since it's a local instance, but you'll be able to create projects and workspaces as well as generate the code and previews. A public instance will be coming out eventually.

History

Releases

License

Copyright 2018 Cerner Innovation, Inc

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

kaiju's People

Contributors

dependabot[bot] avatar mjhenkes avatar mndrsn avatar stephenesser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kaiju's Issues

Inability to add a Comment on an Item View List Item

Issue Description

I am trying to add a comment line as the last line in the item view of a list item and the control will not allow it.
image

Issue Type

  • New Feature
  • Enhancement
  • [?] Bug
  • Other

Expected Behavior

I would think it would be nice if this worked similarly to adding a comment to the item collection.

Current Behavior

When you click anything in the comment dropdown, it resets to the default and doesn't add anything in the workspace.

Steps to Reproduce

  1. create a list
  2. click on the item view within in
  3. go to the comment drop down
  4. pick something (like item view?) and nothing happens

Environment

  • Component Version: ?
  • Browser Name and Version: Chrome
  • Operating System and version (desktop or mobile): Mac desktop

Add hover titles to Cards and Tabs

Issue Description

Lengthly names on Cards and Tabs truncate and show an ellipses. A native title should be added to each of these items so the full text can be displayed when hovered.
image

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Hovering a Tab or Card should display the full text.

Current Behavior

Truncated text does not display on hover.

Component search does not auto focus the input

Issue Description

The first time the component search is opened within the editor the input field is not focused. In order to start searching a user must manually click into the input.

The input will receive focus if you open and close the dropdown. This is only an issue the first time the drop down is opened.

This issue originates within antd library. An issue has been logged: ant-design/ant-design#9568

In the meantime we should find a way to resolve this.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The input should auto focus the first time it is opened.

Current Behavior

The input is not focused when the input is first opened.

Steps to Reproduce

See this issue: ant-design/ant-design#9568

Canvas cannot expand to large breakpoints on smaller screens.

Issue Description

Each workspace can be adjusted to preset breakpoints but the iframe has a max width to prevent scrolling within the layout. On smaller screens this makes it difficult to set the workspace larger than the available space and edit responsive components.

The component within the iFrame should be expanded to the requested breakpoint.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The workspace canvas should be set to any defined breakpoint.

Current Behavior

The workspace does not expand to large breakpoints.

Steps to Reproduce

  1. Open a workspace on a smaller screen.
  2. Set the canvas size in the action bar to huge.
  3. Observe the workspace does not grow larger than the available screen width.

Environment

  • Component Version:
  • Browser Name and Version:
  • Operating System and version (desktop or mobile):

Security Vulnerability in marked < 0.3.9

Issue Description

Got an email from Github with text:

Known moderate severity security vulnerability detected in marked < 0.3.9 defined in package-lock.json.
package-lock.json update suggested: marked ~> 0.3.9.

Issue Type

  • New Feature
  • Enhancement
  • [X ] Bug
  • Other

Allow Sidebar and layers to be resized.

The sidebar and editor panels in the workspace are currently a fixed width. When dealing with a deeply nested workspace it can be very hard to navigate the layers section of the sidebar with a fixed width.

Change loading overlay default message from loading... to Loading...

Issue Description

The default message for the loading overlay is "loading..." instead of "Loading..." the difference being the capital L. Since this is so close to what it should be, it might go unnoticed and coded to use the lower case l. This could lead to inconsistencies, especially in places that have multiple components loading.

screen shot 2018-03-29 at 12 47 10 pm
screen shot 2018-03-29 at 12 47 07 pm
screen shot 2018-03-29 at 12 50 03 pm

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Default to "Loading..."

Current Behavior

Default to "loading..."

Kaiju-Terra Icons

Each Icon component should display a preview of the Icon within the Component Search and within the editor's Component Search

The component search within the editor is case sensitive

Issue Description

The component search within the editor is case sensitive. This makes searching for elements difficult.

To resolve this a custom filter functions should be passed to the searchable select.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The search should be case insensitive.

Current Behavior

The search is case sensitive.

Steps to Reproduce

  1. Create a workspace and select the placeholder.
  2. From within the editor select the component select field
  3. Search for a component
  4. Observe the search is case sensitive.

Environment

  • All environments

Create a basic user guide

Enhancement Description

Create a basic user guide / documentation users can reference.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A guide is accessible under the help menu within Kaiju.

Uplift XMLHttpRequests to use axios

Enhancement Description

Kaiju currently uses superagent to manage client requests. Axios provides a community driven promise based API and allows creating a wrapper instance to preset headers. This would remove a lot of duplicated code as each request currently sets its' own headers. This change will also pave the road for a better managed error handling system.

Axios: https://github.com/axios/axios
Superagent: https://github.com/visionmedia/superagent

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

All client requests will use a common instance of axios with preset headers

Visual indication of user permissions

Issue Description

There is currently no indication to users whether they have read or write privileges when viewing a workspace.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

  • There should be a visual indication to a user if they have no write access

Current Behavior

  • There is no visual indication to a user if they have no write access

Steps to Reproduce

  1. Open a workspace you are not a collaborator on
  2. Observe there is no indication this workspace is read only
  3. Additionally any action taken on that workspace will trigger a hard refresh of the page to reset unauthorized data.

Environment

  • All environments

Open My Projects by default on the Launch Page.

Issue Description

Users have expressed a desire to default to "My Projects" on the launch page rather than the recent workspaces view.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

My Projects should be open by default on the launch page.

Current Behavior

Recent Workspaces is the default selection on the launch page.

Display a loading indicator while fetching a workspace component

Issue Description

There is currently no visual feedback a workspace iframe is loading. Larger workspaces can take a few seconds to load. During this time we should display visual feedback to indicate the workspace is loading.

Components should be lazy loaded to quickly display the loading indicator while the full component JSON is being fetched.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A loading indicator should display while the full component JSON is being fetched.

Current Behavior

There is no visual feedback a component is loading.

Steps to Reproduce

  1. Create a workspace with a lot of content
  2. Refresh the page, or tab between the large workspace and an empty workspace
  3. Observe the larger workspace displays as a blank white screen for a few seconds with no indication any content is loading.

Environment

  • All environments

In context edit toolbar

Issue Description

In the workspace provide quick actions to navigate to the parent from the selected element label.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Bold component names within attributes

Issue Description

The attributes output can be difficult to read.

To help distinguish content we should bold the component names, but not the sub components.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Component names should be bolded in the attributes output.

Current Behavior

The component names are not bolded in the attributes output.

Interactive Previews

Update code generation to allow users to build interactive previews. For starters we should focus on modal and popup disclosures.

User Pages

Issue Description

Create a profile page for users. Should contain the gravatar, name and links to their projects/workspaces.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Archive

Issue Description

Create a way to archive generated code/previews to be viewable even after non-passive react component changes.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Add ability to recover deleted projects

Issue Description

Deleted projects become listed as inactive but will remain in the database for 30 days. Add the ability to recover a deleted ( inactive ) project so users can recover data.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Deleted projects should be listed and recoverable in a trash folder on the launch page.

Current Behavior

Deleted projects are listed as inactive in the database but have no mechanism to be recovered.

Steps to Reproduce

  1. Delete a project

Environment

  • All environments

Upgrade to Webpack 4

Issue Description

Upgrade to the latest major version of Webpack.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Kaiju should be using Webpack 4.

Current Behavior

Kaiju is using Webpack 3.

Docker unable to build rails image

Issue Description

The guide and change log markdown files are in the root folder and cannot be added while building a docker image for the base rails server.

The markdown files should be moved into the rails folder so they are included in the docker image.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Customizing Demographics banner

Issue Description

I want to customize Demographics banner as per my requirements. Instead of Patient details, I wanted to display, Purchase Order details (e.g. Purchase Order Number, Vendor, Amount, Buyer etc). Refer the mock up below.
image

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Instead of displaying patient details, it should display the purchase order details as mentioned.

Current Behavior

I am not able to modify the patient details such as DOB.

Steps to Reproduce

Environment

  • Component Version:
  • Browser Name and Version:
  • Operating System and version (desktop or mobile):

Upgrade to the latest version of react_on_rails

Issue Description

Upgrade to the latest version of react_on_rails.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Kaiju should be on the latest version of react_on_rails.

Current Behavior

Kaiju is using version 10.

Migrate supported browsers into a .browserslistrc

Issue Description

Abstract the supported browser lists out of the autoprefixer plugin into a defined .browserslistrc

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The supported browsers should be defined and consumed from a .browserslistrc

Current Behavior

The supported browsers are hardcoded within the autoprefixer plugin.

Preview Frame

Issue Description

Display the generated preview in an iframe to offer up easy resizing (like the workspace) and the preview's author.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Disable collaboration check when viewing the change log

Issue Description

When the change log is viewed on a project the user is not a collaborator on the put to the server returns a 403 and never marks the change log as viewed for that user.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Viewing the change log should not require being a collaborator on the project.

Current Behavior

If the change log is viewed on a read-only project the gift icon will always reset to unread when the page is refreshed.

Steps to Reproduce

  1. Reset the change log
  2. Navigate to a read-only project
  3. Click What's new
  4. Refresh the page
  5. Observe the gift icon returns to unread

Environment

  • All environments

Easier kaiju.json creation

Issue Description

Make creating a kaiju.json file for react components easier.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Kaiju Plugin system

Issue Description

Allow Kaiju developers to create plugins offering new project types. Project types will offer a customizable set of components available in the workspace as well as custom code/preview generation.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Support Theme-able workspaces via the plugin.

Issue Description

Allow plugins to supply theme information that can then be applied to the workspace, code generation and preview generation.

This may imply adding the workspace as a plugin concern, though i'd like to avoid that as long as possible.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Upgrade to React 16

Issue Description

Upgrade to React 16.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Read-Only ActionBar

Issue Description

A read-only workspace currently displays actions a user cannot make. (Undo, Redo, Delete, Rename)

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The ActionBar should display only actions a user can make. Editable actions should be removed when in read-only view.

Current Behavior

The ActionBar displays all available actions, including edit actions.

Add a Read-Only sharing option

Issue Description

There has been some confusion about workspace permissions and sharing. This issues targets reworking the sharing UI and adding an option to share a Read-Only access link in an effort to make sharing more intuitive.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A user should be able to share a Read-Only and Write-Access link from the share feature.

Current Behavior

A user can only share an invitation link that grants write access.

Text within the component search truncates

Issue Description

Longer text within the component search truncates making it difficult to know what the item is.
image

The search dropdown should allow a horizontal scroll or hover text so users can see the full text.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A user should be able to view the full text display within the component search.

Current Behavior

Text within the component search truncates.

Redirect on unauthorized requests

Issue Description

There are a few circumstances that can cause a users page to be stale. Expired session, logging out, disconnected from the internet. To prevent unauthorized viewing / modifications we want to redirect to the login page anytime the server detects an unauthorized request.

Axios provides interceptors that can evaluate server responses and errors before they are passed into the original then() and catch() blocks

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A user should be redirected to the login page on any unauthorized request.

Current Behavior

Only a few requests handle redirecting to the login page when an error occurs.

Update the What's New section descriptions

Issue Description

The What's New change log currently follows the standard git commit pattern. "Added, Removed, Fixed, etc.." To be a little more clear we should add sections to help differentiate between Added Kaiju Enhancements and added project components.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The change log should have additional sections to help distinguish between application content and project specific content.

Current Behavior

The added and updated content are both grouped together.

Add resource links for components

Issue Description

Each component has official documentation available on the terra-ui site. Kaiju should provide a way to access these resources from the tooltip description provided in the component catalog.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Each component tooltip description should provide a resource link to the official component documentation.

Current Behavior

There is no direct way to access the official component documentation from Kaiju.

Add a keyboard shortcut for duplicating components

Issue Description

After gathering feedback from users it became noticeable the workflow to duplicate a child was a little awkward.

Duplicate requires clicking the component, navigating up to the parent, finding the child in the editor, and clicking duplicate. ( Or finding the child in the layers which can be difficult on larger workspaces )

To make this process a little easier we should add a keyboard shortcut to duplicate the currently selected item ( if that item can be duplicated ). ctrl+d is the proposed keyboardshortcut

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Pressing ctrl+d should duplicate the currently selected component.

Current Behavior

See summary above for existing steps to duplicate.

Upgrade to Webpack 3

Issue Description

Kaiju's Webpack version is a little behind on the times. Webpack has announced the upcoming release of Webpack 4 and Kaiju client is still on Wepack 2. The Node server is currently on Webpack 3 and doesn't need any changes.

This upgrade should only require bumping the version. According to the webpack release documentation 98% of users are able to upgrade without any changes.

Migrating from webpack 2 to 3, should involve no effort beyond running the upgrade commands in your terminal. We marked this as a Major change because of internal breaking changes that could affect some plugins.

https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Uplift Ant Design dependency to 3.0

Issue Description

Ant Design released a major version bump. This issue targets uplifting to the new version.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Kaiju should use antd 3.0

Current Behavior

Kaiju is using antd 2.0

Add support for themes

Issue Description

Add support for theming Kaiju.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

A user should be able to select from a list of themes.

Current Behavior

There is only a static theme.

Add a mechanism for traversing up the component tree within the workspace

Issue Description

Currently the only way to select a component with children is to either find the component within the layers tree or select a child component and use back arrow in the editor to travel up the component tree until you have reached the target component.

ezgif com-video-to-gif

The purpose of this enhancement is to find a solution that makes traversing upwards intuitive and easy. A possible solution needing user feedback is holding ctrl when clicking will navigate up one level for each click.

ezgif com-video-to-gif 1

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Traversing up the component tree should be easy.

Current Behavior

Traversing up the component tree requires a bit of complex knowledge to navigate efficiently.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.