Make KDS contributor friendly

[MisRob]

Description

This is a sibling to Kolibri's PR learningequality/kolibri#11096 and part of larger efforts to make our issues better discoverable, documentation more friendly, and in the case of KDS also easier development process of components for contributors and any newcomers to this repository.

• Adds CONTRIBUTING.md and updates README.md to contain only necessary information and a copy of contributing guidelines for better discoverability. Both files now have the same structure as Kolibri's CONTRIBUTING and README (Studio to come).
• Moves most of the README's content into dev_docs folder and organizes it in to more files while focusing on
  • friendliness and clarity
  • information organized by focusing on necessary steps at first and providing links to more detailed guidelines later
• Adds a few new guidelines important for starting with KDS development as how to preview updates to components or register a new component
• Adds a playground page and guidelines on how to use it as the most simple way to preview components updates. Its purpose is to allow new developers start working with KDS easily and just within a few necessary steps without the need to go into detail about building documentation pages or connecting with other projects (that may still be relevant and guidelines are available too, but I think it's unnecessary for very first steps)
• Add contact links to the issue template chooser (same as in Kolibri)

Steps to test

I think it'd be best to imagine you don't know anything about KDS and read through

• README
• CONTRIBUTING
• dev_docs

Also please try out the new playground page.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change has been added to the changelog

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?

[marcellamaki]

Thanks so much @MisRob. I have not built the pages in my read through to do a manual QA of the docs build, but overall I think this looks great. I've done my best to put myself in the mindset of someone newer to KDS, but I would love input from some of our team members who use KDS a bit less to see if they have any suggestions.

Overall though, I think the clearer sections about contributing, how to get started, the links to the discussion, etc. are a great improvement! Unless someone has a really specific suggestions, I feel good about moving forward with this and then continuing to refine as we get feedback from community contributors.

[MisRob]

Thank you, @marcellamaki.

I would love input from some of our team members who use KDS a bit less

Ah yes, that's a good idea. I am thinking of @ozer550 :) Would you find time to read through the documentation and tried the playground? Doesn't need to be this week.

[ozer550]

Thank you, @marcellamaki.

I would love input from some of our team members who use KDS a bit less

Ah yes, that's a good idea. I am thinking of @ozer550 :) Would you find time to read through the documentation and tried the playground? Doesn't need to be this week.

Sure!

[MisRob]

@ozer550 Wonderful, thanks

[akolson]

Hi @MisRob! This really looks good, and certainly improves the developer experience as a whole. Like Marcella, I will also leave the approval of this PR to folks that have interfaced with KDS the least 🙂

[akolson]

Hi @marcellamaki just noting that you click on the Details link in the highlighted area to view a live preview of the changes made without the need to build the pages yourself. 🙂

[marcellamaki]

Hi @marcellamaki just noting that you click on the Details link in the highlighted area to view a live preview of the changes made without the need to build the pages yourself. 🙂

Wow Today I Learned!! Thank you, Samson 🎉

[ozer550]

I tried the walkthrough and it seems good to me! Just some errors encountered that might be worth mentioning:

 ERROR  ENOSPC: System limit for number of file watchers reached, watch '/home/ozer/workspace/LearningEquality/kolibri-design-system/docs/pages/buttons.vue'

  at FSWatcher.start (internal/fs/watchers.js:165:26)
  at Object.watch (fs.js:1258:11)
  at createFsWatchInstance (node_modules/@nuxt/builder/node_modules/chokidar/lib/nodefs-handler.js:119:15)
  at setFsWatchListener (node_modules/@nuxt/builder/node_modules/chokidar/lib/nodefs-handler.js:166:15)
  at NodeFsHandler._watchWithNodeFs (node_modules/@nuxt/builder/node_modules/chokidar/lib/nodefs-handler.js:331:14)
  at NodeFsHandler._handleFile (node_modules/@nuxt/builder/node_modules/chokidar/lib/nodefs-handler.js:395:23)
  at NodeFsHandler._addToNodeFs (node_modules/@nuxt/builder/node_modules/chokidar/lib/nodefs-handler.js:637:21)

WARN  Error from chokidar (/home/ozer/workspace/LearningEquality/kolibri-design-system/node_modules/vue/dist): Error: ENOSPC: System limit for number of file watchers reached, watch '/home/ozer/workspace/LearningEquality/kolibri-design-system/node_modules/vue/dist/vue.esm.browser.min.js'

Also I think if we could mention the major version for yarn it could be helpful.

The above error got resolved following this stack overflow post guided by @MisRob. Overall it looks good to me!

[MisRob]

Thank you, @ozer550. I will add those improvements before we merge.

Any blockers here, anyone?

[marcellamaki]

No blockers from my perspective!

[nucleogenesis]

I didn't read every line but overall the changes are fantastic and I really appreciate the dev_docs breakdown of everything for contributors. Thanks so much for all of your effort on this!

[MisRob]

All the feedback is addressed and from messages here and on Slack, it looks it's okay to merge. I'll bypass the need for approval as I'd like to reference some of the new sections in the docs easily for one of the contributors soon.