Light documentation to offload Components knowledge (#265)

* Development Documentation for Visual customizability

* properties.json

* add comment for toggle data feature

* update prt

* rebuild

DOCUMENTATION.md

@@ -0,0 +1,61 @@
+# Development Documentation
+
+Notes on how we've developed things in this project.
+
+## Visual customizability
+
+One of our most important features is the ability to customize the UI of the Components. We currently support 2 implementations of this:
+
+1. CSS Variable Fallbacks
+
+CSS variables are the simplest way for developers to add UI customizability to the Component's. When defining an aesthetic style (color, border, etc), simply write it as an CSS variable with a fallback:
+
+```
+main {
+  background-color: var(--component-background-color, blue);
+}
+```
+
+Leaving the variable undefined will allow it to be defined by the user like so:
+
+```
+<nylas-component style="--component-background-color: black" />
+```
+
+2. `theme` Property
+
+Some Components also have a theme property to let us define multiple default themes but still allow the user to create a custom theme.
+
+```
+<main class={theme ?? "a-default-theme"}>
+```
+
+```
+main.a-default-theme {
+  background-color: var(--component-background-color, blue);
+}
+```
+
+The user can redefine the style by replacing the theme property (and therefore removing the class name) and defining new values for the variables.
+
+```
+<nylas-component theme="custom" style="--component-background-color: black" />
+```
+
+## `properties.json`
+
+All Components have a `properties.json` file to help keep track of Component's properties for the Nylas Docs and Nylas Dashboard.
+
+When adding a new property, make sure to define the property's label (actual property name), title (name in written English), type, and default value. Most types have a number of options associated with them as well.
+
+Some properties can be flagged with `noPreview` to signify that this property is not to be edited or shown for certain cases
+
+```
+{
+  "label": "theme",
+  "title": "Theme",
+  "type": "string",
+  "options": ["theme-1", "theme-2", "theme-3", "theme-4", "theme-5"],
+  "value": "theme-1"
+},
+```

README.md

@@ -135,6 +135,8 @@ export default function App() {
 
 Please refer to our [Contributing Guidelines](CONTRIBUTING.md) for information about how to get involved. We welcome bug reports, questions, and pull requests.
 
+Please view our [development documentation](DOCUMENTATION.md) for information about how we've built our Components.
+
 ## License
 
 This project is licensed under the terms of the MIT open source license. Please refer to [LICENSE](LICENSE) for the full terms.

components/contact-list/src/ContactList.svelte

@@ -142,6 +142,7 @@
   let queryKey: string;
   $: queryKey = JSON.stringify(query);
 
+  // Gives ability to toggle between Nylas and custom contacts
   $: setHydratedContacts(), contacts, queryKey;
 
   async function setHydratedContacts() {

pull_request_template.md

@@ -1,14 +1,14 @@
 # Code changes
 
-- []
+- [ ]
 
 # Readiness checklist
 
-- [] Added changes to component `CHANGELOG.md`
-- [] New property added? make sure to update `component/src/properties.json`
-- [] Cypress tests passing?
-- [] New cypress tests added?
-- [] Included before/after screenshots, if the change is visual
+- [ ] Added changes to component `CHANGELOG.md`
+- [ ] New property added? make sure to update `component/src/properties.json`
+- [ ] Cypress tests passing?
+- [ ] New cypress tests added?
+- [ ] Included before/after screenshots, if the change is visual
 
 # License