Roadmap

2019 Roadmap for Vue-Nuggets

Issues ☠️

Accept issues from the community and self-identify issues and fix them quickly! 🏃 All issues are tracked here - https://github.com/Shreerang/Vue-Nuggets/issues

Enhancements 🚧

Accept enhancement requests from the community and self-identify enhancements and work on them! 👨‍💻 All enhancements are tracked here - https://github.com/Shreerang/Vue-Nuggets/issues

New components 💡

Keep identifying new components in the e-commerce sphere! Following are the planned components for 2019.

1. Layout switcher

2. Image carousel

3. Modals

4. Infinite Scroll

5. 🚨Accordion for PDP

   I have started working on this component. This component will be truly dynamic, so as to even create an accordion with different content structure in each fold.

   ⌛The component is built and available for testing in the Nuggets Demo Code base. A live demo 🍿is available here

6. 🚨Shop our brands for multi brand sites

   I started working on the Shop Our Brands component and like Footer realized that it is just an implementation of the Grid component. I will include this in the examples. A separate component is not required.

7. 🚨Footer

   I started working on the Footer as a component but then soon realized that it is mostly a Grid always. Be it a single line footer or a multi-column footer, it can be very easily implemented using the Grid component. The footer seen on the demo site is created using the Grid component and I will include more examples of footers on the demo site.

8. Single fixed column and single scrollable column (Use cases: PDP for Desktop or Bag page or Order Details)

9. 👨‍💻Credit card detection

   I have started developing the credit card component. Some of the things I have planned on including.

   1. Credit Card Field
      • Credit card known patterns!

      • Card Type	Length	IIN Ranges	Spacing Patterns
        Visa (incl. VPay)	13-19	4	#### #### #### #### (4-4-4-4) Pattern not known for 13-15 and 17-19 digit cards.
        Visa Electron	16	4026, 417500, 4405, 4508, 4844, 4913, 4917	#### #### #### #### (4-4-4-4)
        American Express	15	34, 37	#### ###### ##### (4-6-5)
        China UnionPay	16-19	62	#### #### #### #### (4-4-4-4) ###### ############# (6-13) Pattern not known for 17-18 digit cards.
        MasterCard	16	51‑55, 222100‑272099	#### #### #### #### (4-4-4-4)
        Maestro	12-19	500000‑509999, 560000‑589999, 600000‑699999	#### #### ##### (4-4-5) #### ###### ##### (4-6-5) #### #### #### #### (4-4-4-4) #### #### #### #### ### (4-4-4-4-3) Pattern not known for 12, 14, 17, and 18 digit cards.
        Diners Club Carte Blanche	14	300‑305	#### ###### #### (4-6-4)
        Diners Club International	14	300‑305, 309, 36, 38‑39	#### ###### #### (4-6-4)
        Diners Club United States & Canada	16	54, 55	#### #### #### #### (4-4-4-4)
        Discover	16	6011, 622126‑622925, 644‑649, 65	#### #### #### #### (4-4-4-4)
        JCB	16	3528‑3589	#### #### #### #### (4-4-4-4)
        UATP	15	1	#### ##### ###### (4-5-6)
        Dankort	16	5019	#### #### #### #### (4-4-4-4)
        InterPayment	16-19	636	#### #### #### #### (4-4-4-4) Pattern not known for 17-19 digit cards.

      • Determine the maxLength of the field based on the credit card type
      • Based on the credit card number show the icon of the payment provider.
      • I am currently including a regex for Visa, Discover, Amex, Diner's, MasterCard and JCB. However, I want to make this component truly global and configurable. So what are the other credit card companies that need to be covered? 🤔
      • There also needs to be provision for a custom credit card like a Store Card (e.g. Amazon, Gap Brands, Macy's, William-Sonoma, etc.) number regex and also a icon for that. Is there a regex to identify these store credit cards? I have posted a question on StackOverflow asking the same.
   2. CVV Field
      • Determine the length of the filed based on the type of card.
      • If a custom brand credit card is an option then they sometimes do not have a CVV field at all.
      • Determine the name of the field as either CVV, CID, CVC, CVN, CVP and so on based on the card type.

      • Brand	Name	Size
        Visa	CVV	3
        Mastercard	CVC	3
        American Express	CID	4
        Diners Club	CVV	3
        Discover	CID	3
        JCB	CVV	3
        UnionPay	CVN	3
        Maestro	CVC	3
        Mir	CVP	3
        Elo	CVE	3
        Hiper	CVC	3
        Hipercard	CVC	4

   3. Name on card filed
      • This field will be optional. A lot of sites don't ask for this! Some do. 🤷
   4. Masking the inputs
      • I want to have all of the 4 credit card input fields to be masked. Users are less prone to making a mistake filling in the information based on this article

10. Checkout with PayPal button (https://developer.paypal.com/docs/checkout/)

Unit Testing 🔬

Bring unit test coverage to as close as 100%

NPM Package 📦

Publish the library as a NPM package. Currently don't know how 😢

Library is now available as a NPM Package

Incorporate Storybook 📖

This is currently work in progress. Storybook components can be viewed here. The Vue integration for Storybook does not seem to be great, at least with their current version. Props are not working as expected. Addons are not working as expected. Have filed a Github issue with Storybook

Create demo page(s) 🎆

Demo [Github Repo][(https://github.com/Shreerang/Vue-Nuggets-Demo) is now in place.

All demos are currently hosted on the Heroku site. I also wish to include more real time demos like:

1. Search/ Browse page
2. PDP page
3. Quantity Selector with inline warnings
4. ...

Get some level of adoption 💝

It would be great, if somebody uses these components in production 🥇Create a "used-by" section. Hope to see it fill up 🤞😄

Get possible sponsor(s)/ Set up Kofi ☕️

Working on this library is taking up time. Should I set up at least a Kofi, if not Patreon? 🤔

Set up my Ko-fi page ☕️❤️