GSOC 2020 at Elastic

This summer I joined Google Summer of Code, with Elastic (eui). The remainder of this post will try and summarise my work for the last 3-4 months.

Code edits

Link to all my prs during the coding phase : Link

Link to all my prs before the coding phase : Link

Background

The Elastic UI Framework is a collection of React UI components for building user interfaces. It also offers HTML version for non-React users. It contains numerous useful components that are used to build interfaces at Elastic. My objective this summer was to add Playground/Toggle service for as many components as I could. I had a conservative aim of using react-live at the very start but during the community-bonding period I discussed several other alternatives with my mentors and decided to move on with react-view.

Community Bonding

During the community bonding period , I worked upon building useEuiTextDiff hook, this was not a part of GSoC idea but was a significant contribution of mine. It is a hook based on text-diff which generates a set of changes between two strings.

Pr : #3288

Apart from this , I disccused several possibilities and design concepts for the playground within the issue thread.

Coding Begins

Consolidating Tabs

To begin with, I started working on the consolidating the Guidelines View within the Examples Tab. This was a step towards bringing Playground setup locate more closely to the component Examples page, although an easy task just requires some knowledge of react-router.

Pr #3650

Issue #3649

Integrating Playground Utility

After I have got a fair intuition of how react-view module works, I started implementing ideas into my fork.

Within first 3-4 days, I focused on replacing the default knobs/toggles provided by the react-view component and replaced them with those provided by the EUI itself. This was pretty easy.

During the next days on I worked upon automating the process of extracting the propTypes from the components so as to satisfy the requirements for the react-view hook. I used several switch cases to render out the required output

Then , I started working on layout and design patterns accordingly by targeting EuiButton component. This setup structured a standard for setting up future playgrounds.

Later , I worked upon extracting code snippet form the code rendered by react-view , it involved use of regex to get remove unnecessary code and html-format to indent the final code.

Pr #3681

Live : https://elastic.github.io/eui/#/navigation/button/playground

Creating a simulator function

There were several components that had a functional prop for which user should be able to observe the working of component when a functional-prop is provided to the component, so EuiSwitch was utilised along with certain modifications in the state of prop.

Code

Creating a dummy function

This is very much related to the above mentioned simulator function, the soul purpose of this util was to add a functional code to a prop of rendered component when the simulator is turned on .

It requrired some research of @babel/types and custom-prop-type (react-view),

Code

Transpilling several dependencies

This was the most challenging part as I didn't had any great experience with WebPack and Babel. Although, I wasn't able to fix it completely and finally my mentor came up with the fix.

Problem

Need for transpilling the modules was requrired as Eui supports IE11 which unlike modern browsers doesn't support Es6 syntax and since several imported dependencies were entirely written in Es6, a configuration was required to convert the code to Es5 syntax for which babel alongsied webpack was utilised.

Pr : #3776

My Pr : #3757 (Didn't fixed the problem but suggested major changes required)

Creating an Icon validator

This utilty was created for props which use IconType Enum because of a large variety of icons were available and a select knob wasn't much appealing hence such a prop was designed to act as a string and working can be described as "when the input string matches any of the IconType the value is passed down to the component and desired ouput and code is rendered".

Code

Creating an optional enum

There were several props that didn't had any default value and were controlled via EuiSelect component. To indicate no option is selected for the prop, I used a hack I made none as the defaultValue for prop as default value is not included in the code rendered by react-view and besides this it was really useful when one needs to deselect an option for a specific prop.

Code

End Note

It was a fantastic summer full of coding, learning and the accompanying fun. I am thankful to my mentors( Greg Thompson , Chandler Prall and Dave Snider ) and several other maintainers( Caroline Horn , Elizabet Oliveira and Michail Yasonik ) of the repository for their constant guidance and Philipp Krenn for providing such a supportive community.