This summer I joined Google Summer of Code, with Elastic ([eui](https://github.com/elastic/eui/ "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](https://github.com/elastic/eui/pulls?q=is%3Apr+author%3Aanishagg17+created%3A2020-06-01..2020-08-30+)

Link to all my prs before the coding phase : [Link](https://github.com/elastic/eui/pulls?q=is%3Apr+author%3Aanishagg17+created%3A2020-02-01..2020-05-31)

## __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](https://github.com/elastic/eui/pull/3288) 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](https://github.com/elastic/eui/pull/3288)

Apart from this , I disccused several possibilities and design concepts for the playground within the [issue](https://github.com/elastic/eui/issues/3057) 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](https://github.com/elastic/eui/pull/3650 "Consolidated tabs for Examples-Guidelines-Playground")

Issue [#3649](https://github.com/elastic/eui/issues/3649)

![consolidated_tabs](//images.ctfassets.net/xuw76ex5b6kt/3u9AM7MlknR91MokNMiq19/30bc676c1b7d9f8324f6cb69d26f31eb/Screenshot_2020-06-29_at_3.38.29_PM.png)

---

##### __Integrating Playground Utility__


After I have got a fair intuition of how [react-view](https://react-view.netlify.app/) 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](https://github.com/elastic/eui/pull/3681 "Playground System for Live Documentation")

Live : [https://elastic.github.io/eui/#/navigation/button/playground](https://elastic.github.io/eui/#/navigation/button/playground)

![EuiButton_playground](//images.ctfassets.net/xuw76ex5b6kt/VyvlCoy7Kt6YjNUPfadrs/2214366e4c9a5611908827fb19a17a20/Screenshot_2020-08-19_at_8.16.21_PM.png)

---

##### __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](https://github.com/elastic/eui/blob/master/src-docs/src/services/playground/simulateFunction.js)

![Simulator_function_gif](//images.ctfassets.net/xuw76ex5b6kt/26xa0KE8XXZ7maT1mn7dwV/81e2a674e54217c2dd85517bb85b5258/Hnet.com-image__5_.gif)

---

##### __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](https://github.com/elastic/eui/blob/master/src-docs/src/services/playground/dummyFunction.js)

---

##### __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](https://github.com/elastic/eui/pull/3776)

My Pr : [#3757](https://github.com/elastic/eui/pull/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](https://github.com/elastic/eui/blob/master/src-docs/src/services/playground/iconValidator.js)

![Icon_validator_gif](//images.ctfassets.net/xuw76ex5b6kt/62Nk5Iur74dO1POiwLBg5U/b7552d4348c6be0e6c1c3a0bc00d543c/Hnet.com-image__4_.gif)

---

##### __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](https://github.com/elastic/eui/blob/master/src-docs/src/services/playground/createOptionalEnum.js)

![Optional_Enum](//images.ctfassets.net/xuw76ex5b6kt/3DElMWyKOO1FpAcSG0AaRQ/85f3af6e99559d82a299bd4d6d19dfb5/Screenshot_2020-08-19_at_8.49.28_PM.png)

---

### __End Note__


It was a fantastic summer full of coding, learning and the accompanying fun.
I am thankful to my mentors( [Greg Thompson](https://github.com/thompsongl) , [Chandler Prall](https://github.com/chandlerprall) and [Dave Snider](https://github.com/snide)
) and several other maintainers( [Caroline Horn](https://github.com/cchaos) , [Elizabet Oliveira](https://github.com/miukimiu) and [Michail Yasonik](https://github.com/myasonik) ) of the repository for their constant guidance and [Philipp Krenn](https://github.com/xeraa "Philipp Krenn") for providing such a supportive community.


 

Google-Summer-of-Code-March-3-2017

GSOC 2020 at Elastic

# Elastic - from ZERO to GSoC

Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. I got extremely thrilled and intrigued the day organizations list came out and I discovered elastic on the list. I made elastic my target goal and didn’t even bother to look for the rest of the organizations.


# < Contributing />
After discovering __elastic__ on the list and elastic/eui as a project in the idealist, I instantly started contributing to eui repository. The idea has introduced with a goal to integrate playground service to the components and enhancing user experience by providing flexibility.

When I cloned the project and checked the source code I wasn’t able to understand anything at all. Then I slowly started solving some backlog issues which helped me a lot to understand codebase and their internal working behind the scenes as well.

It took me 2 days to get my first major PR merged ( which was the removal of some redundant code ). After this PR I felt very confident and it increased my pace & quality of contributions. I was able to get around 50 PRs merged prior to GSOC ( which seemed impossible when I looked at the source code for the first time ).

My Contributions to elastic/eui prior to GSoC

![Contributions](//images.ctfassets.net/xuw76ex5b6kt/2hLJ5sAtH6Z05xeqFSCbaL/7f27fe0c9348884860ab91d4b648b4bb/Screenshot_2020-05-17_at_7.37.22_PM.png)

Some major contributions :

-  Upgrade react-router, TypeScript.
-  Create a text-diff utility.

Finally, it was the day when GSoC students and projects were about to be announced. I remember refreshing my inbox every 2 minutes and yes I received an email saying “ GSoC 2020: Congratulations, Your proposal [Playground / Toggle System for Live Documentation](https://summerofcode.withgoogle.com/projects/#5877792299810816 "Playground / Toggle System for Live Documentation") has been accepted! ”.

![GSoC_Email](//images.ctfassets.net/xuw76ex5b6kt/4HgqSD9mcEkZiBQ8xec7zX/2b29385c0febd4196e7d64dfa9e5e940/Screenshot_2020-06-06_at_1.15.10_AM.png)

# < Work To Do in Summer />


During this summer, I’m going to kick-off this summer with the most crucial thing on elastic/eui roadmap like —
-  Creating a whole new playground service to the components so that users can interact with the components.
-  Integrate Various toggles , range sliders to make more visual interactions.
-  Consolidate Guidelines with the Examples page using a tabbed interface.
-  Creating a whole new section for this playground service.

I’m super excited because I’ve been selected to work with elastic for Google Summer of Code 2020. It is both a thrill and an honor for me to be able to contribute to such a useful and widely used development tool as a GSoC student!


Blog

GSOC 2020 at Elastic

GSOC'20 preparation