Extending & Improving Design System React

• Name: Ashwin S Shenoy
• Email: aswinshenoy65@gmail.com
• Github: @aswinshenoy
• Timezone: UTC +05:30 (Asia/Kolkata)
• Location: Kerala, India

Short Description

The Salesforce Design System React is a library of react-based components derived from Lightning Design System (SLDS). The project aims to extend the Design System React library with currently unported components from SLDS, implementing more functionality in currently available components, and improving the existing functionality of the components.

Deliverables

1. Components to be completed by First Evaluation
   • Progress Bar
   • Scoped Notification
   • Setup Assistant
   • Activity Timeline
2. Components to be completed by Second Evaluation
   • Welcome Mat
   • Visual Picker
   • Tree Grid
   • Files
3. Components to be completed by Final Evaluation
   • Chat
   • Expression

The Project

The project aims to extend and improve the Design System React [DSR] component Library, by porting different components from the Lightning Design System Library [SLDS]. The goal of the project is to help non-UI engineers implement highly interactive web applications with ease, by extending the variety of components that are available to them through the DSR library. Adding more variety of components will also help DSR to be useful for a wide range of applications, and make it a go-to react library,

Part of Project Already Done

For the last couple of months, I have been actively working on introducing the following components into the DSR library, and have raised pull-requests with the proposals for the components, and also been making necessary changes as per the discussions.

1. Activity Timeline
2. Progress Bar
3. Scoped Notification
4. Visual Picker

I am currently working to make suggested changes, adding more functionality and write tests for the above components, and expect them to be complete before the first evaluation of the project.

Components to be worked on

Through the project, my primary goal is to implement the following components into DSR, for some of which I have already worked on proposing the props.

• Setup Assistant
• Expression
• Tree Grid
• Chat
• FIles
• Welcome Mat

Most of these components are fairly complex and dynamic, and I expect they would have greatly useful various use-cases.

Implementation Plan

I will be implementing each component in a phased manner, wherein each phase I would be updating my pull requests and, continuously discussing and working on suggestions from mentors. In general, I would be implementing each component going through the following phases -

1. Initiating prop-proposal for the component and submitting it for review
2. Porting proposed components from SLDS to DSR, including adding their storybook stories examples. In case of components having complex or a number of variants, I will be doing one at a time.
3. Doing testing through Mocha, Jest, and Storybook.
4. Making changes according to review suggestions, and doing further feature enhancements.

I have also kept last week of the project as buffer time to complete any left-over goals due to cross-dependencies, and also to test and document the project modularly.

Related Work

During the last winter break, I had interned in a VR/AR-based company - GMetri Studio Pvt. Ltd., in Bangalore, India, as a Full-Stack Developer. During this internship, I worked on building an analytics panel for clients on the G-Metri Dashboard, using React and Ant Design components library. Through this, I had experienced the ease of making highly interactive and scalable web apps using React and various plug-and-play external libraries.

Why Design System React?

Design System React by Salesforce was one among the many libraries I referred to while interning. During that point of time, we arrived to chose Ant Design over SDSR, since it offered extensive components and functionality. On seeing this project on GSoC organization list instantly excited me and motivated me to contribute to it. I believe, through adding more components and functionality from SLDS, Design System React would be a go-to React UI components library.

Timeline

Week	Goals
May 7 - May 26	Community Bonding <li>Discuss the prop proposals already made, and finalize on them</li><li>Work on changes suggested on components already working on</li><li>Propose props for Setup Assistant, Expression, Tree Grid Components</li>
May 27 - June 2	<li>Write Tests for Scoped Notification, Progress Bar, Visual Picker Components<li>Implement Vertical Variant of Progress Bar<li>Implement Base Variant of Files Component<li>Work on extending the functionality of Activity Timeline Component under review
Jun 3 - Jun 9	<li>Implement Base Variant of Setup Assistant Component<li>Implement Base Variant of Welcome Mat Component
Jun 10 - Jun 17	<li>Extend Functionality of Setup Assistant by implementing step progress<li>Implement Splash and Info-only Variants of Welcome Mat Component
Jun 17 - Jun 23	<li>Extend Functionality of Setup Assistant by implementing hubs with expandable steps<li>Write Tests for Activity Timeline<li>Implement UI part of Tree Grid Component
Jun 24 - Jun 28	First Evaluation <li>Deliverables: Progress Bar, Scoped Notification, Setup Assistant, Activity Timeline Components. <li>Discuss and work on reviews and changes suggested by mentors
Jun 29 - Jul 07	<li>Implement interactivity part of Tree Grid Component<li>Write Tests for Welcome Mat, Setup Assistant, Files and Tree Grid Components<li>Implement basic functionality for Chat Component
Jul 08 - Jul 14	<li>Implement support for Chat attachments and events<li>Implement Base Variant of Expression Component
Jul 15 - Jul 21	Implement Custom Logic support in Expression Component
Jul 22 - Jul 26	Second Evaluation <li>Deliverables: Welcome Mat, Setup Assistant, Files, Tree Grid Components<li>Discuss and work on improvements and suggestions put forward by mentors
Jul 27 - Aug 04	Implement filters and formula support in Expression Component
Aug 05 - Aug 11	Write tests for Chat and Expression Components
Aug 12 - Aug 18	<li>Work on any pending functionality backlogs and suggestions made by mentors<li>Work on documentation, and reviewing the code
Aug 19 - Aug 26	Project Submission <li>Deliverables: Chat, Expression Components

About Me

I am Ashwin S Shenoy, an aspiring full-stack developer, with an eye for detailing the UI/UX. I’m currently a Fresher in Computer Science and Engineering at Amrita Vishwa Vidyapeetham, Amritapuri Campus. I am a FOSS enthusiast, and an active member of FOSS@Amrita, a vibrant open source community driven by students from our college.

Past Projects

Last December, I was a lead developer in a hackathon project - GitLit, a platform for connecting open-source developers and organizations. It works by connecting enthusiastic developers to the most exciting and relevant projects from other developers or organizations to them and forming new communities of like-minded and passionate developers. It was developed using Django and GitHub GraphQL API. <br> GitHub

During the January-March period, I was the core developer for building a club management system - amFOSS CMS, for our club based on Django and GraphQL. It features functionality such as gamification through rating, leaderboards, resource allocation and task management, attendance records, leave and progress reports etc. and extensively host member’s profile, portfolio, projects, blog and also keep account of achievements and events in the club. <br>GitHub | Deployment

• Technologies: Django, WordPress, React, React 360, GraphQL
• Languages: Python, JavaScript, C++, C

Communication

I shall be mostly active throughout the day and usually work 7+ hrs on an average after college with my club. During the GSoC period, I will be availing duty-leave from the college, work throughout the day and report at any time as per the convenience of the mentor.

I will maintain good relations with the mentor, and communicate efficiently. At the same time, I shall always be self-motivated and try to ideate solutions independently.

I shall be also locally maintaining micro-project having the new components so that some basic usability testing can be done.

Commitment

Once I start with the project, I will entirely devote my time towards the project, and I believe, I shall be able to put up about 40+ hours a week easily.

Apart from a period of two weeks (May 6 - 21) my semester exams which falls during the community bonding period, I will be able to devote my time for the project entirely.

I look forward to continuing contributions to the design system react library especially by adding more components. I perhaps also would be using it for my personal projects.

References

• SDSR Contribution Guidelines
• SDSR Codebase Overview
• SLDS Component Blueprints
• React Prototypes Documentation

Components currently working on

• [1] https://github.com/salesforce/design-system-react/pull/1858
• [2] https://github.com/salesforce/design-system-react/pull/1773
• [3] https://github.com/salesforce/design-system-react/pull/1785
• [4] https://github.com/salesforce/design-system-react/pull/1786

Prop Proposals

• [5] https://github.com/salesforce/design-system-react/issues/1872
• [6] https://github.com/salesforce/design-system-react/issues/1879
• [7] https://github.com/salesforce/design-system-react/issues/1876

Google Summer of Code 2019 - Work Product Report

Introduction

I am Ashwin Shenoy, a computer science and engineering sophomore from Amrita Vishwa Vidyapeetham, India. This document is a summary of my project - "Extending & Improving Design System React" with Salesforce's Open Source UI-library Lightning Design System, that I worked on as a Google Summer of Code 2019 student.

Extending & Improving Design System React

Google Summer of Code 2019 Project with Salesforce Design System React

• Student - Ashwin S Shenoy
• Mentors - Stephen James (@interactivellama), Kevin Parkerson (@kevinparkerson)

Synopsis

Design System React (short for Lightning Design System for React) is a react implementation of the Salesforce Lightning Design System, which an Open Source lightweight, high performance web component framework that powers thousands of apps. This project aims to extend and improve the DSR library, by implementing different design patterns from the SLDS as React components in DSR. The goal of this project is to help non-UI engineers implement highly interactive web applications with ease, by extending the variety of components that are available to them through the DSR library. Adding more variety of components will also help DSR to be useful for a wide range of applications, and make it a go-to React UI library.

Summary of Work

React Components Implemented

#	Component	Pull Request	Opened	Merged
1.	Progress Bar	#1773	Feb 28, 2019	Mar 1, 2019
2.	Scoped Notification	#1785	Mar 4, 2019	May 3, 2019
3.	Setup Assistant	#1964	May 3, 2019	Jun 1, 2019
4.	Visual Picker	#1786	May 13, 2019	Jun 13, 2019
5.	Welcome Mat	#1934	Apr 22, 2019	Jun 27, 2019
6.	Files	#1929	Apr 20, 2019	Jul 19, 2019
7.	Expression	#2150	Jul 6, 2019	Aug 21, 2019
8.	Tree Grid	#2181	Jul 17, 2019	Work in Progress
9.	Map	#2230	Aug 8, 2019	Submitted for Review
10.	Summary Detail	#2232	Aug 8, 2019	Submitted for Review
11.	Badges	#2247	Aug 22, 2019	Submitted for Review

Other Contributions

New Features

• Update prop size in Modal Component to support small size.
• Add support for adding Width Prop in Dropdown Menu Component
• Add support for adding heading in Checkbox & Radio Component

Maintenance

• Rename prop dismissable to disableClose in Modal Component
• Rename prop title to heading in Modal Component
• Add depreciation warning for label prop in Checkbox Component
• Depreciate label prop in Radio Component

Unfulfilled Deliverables

I had in my proposal had proposed to implement the following 2 components from SLDS in DSR, but I have excluded them from the project period as advised by my mentors due to its complexity & time-limitations.

1. Activity Component
2. Chat Component

I plan to continue contributing to DSR working on implementing these components.

Extra Deliverables

I worked on implementing the following components from SLDS to DSR, which were not originally in my proposal. These were simpler components which I worked on in free-time, or when code review was happening.

1. Map
2. Summary Details
3. Badges

Links

• Fork of DSR - contains the code I wrote for all components & patches I worked on during this period.