Typescript Usage

[andria-dev]

Closes #102. Closes #104. Closes #223. Closes #231. This PR was designed to fix issues where TypeScript would not recognize the types defined at dist/react.d.ts and dist/core.d.ts. It also adds a new TypeScript usage example that illustrates that this works.

// Not only does this work, it imports the type definitions with it!
import { CartProvider, useShoppingCart } from 'use-shopping-cart'
// And if you need some type definition stuff from the core while you're at it, that works too!
import {Product, CartActions, CartEntry } from 'use-shopping-cart/core'

// To make sure you keep getting intellisense for your type definitions when working with the USC hook,
// at least from my experience it is helpful to destructure your cart later like this:
const cart = useShoppingCart()
const { cartCount, cartDetails, clearCart } = cart
// or
cart.cartCount
cart.cartDetails
cart.clearCart()

I'm not 100% sure that this PR is done. I'm sure there are some things that need to be worked out. For now, I've tested these changes in the following situations: TypeScript usage example within the Yarn workspace, TypeScript usage example standalone with the package installed via yarn add file:///<path to tarball>, CRA example within the Yarn workspace, and against an existing NextJS example written in JS (I converted 1 file to TSX and it worked just fine).

Please drop any concerns about any changes I've made below (I might have forgotten some of the older changes I've made since it has been a while).

[andria-dev]

@dayhaysoos No problem 😄 I'm probably going to try to add in some type tests for the core.d.ts file to make sure that file is good to go. After that I'll probably do a quick scan of the documentation for anything needs to be updated 👍🏻

[andria-dev]

@dayhaysoos I've finished making the final touches on this PR. I made some changes and additions to the documentation to reflect the current state of use-shopping-cart to the best of my ability.

If the below changes sound good to you, I think this is ready to merge and potentially deploy (docs and library) 👍🏻

Code Changes

Modified numerous files. Added a type-tests/ folder with a TypeScript file for each export (i.e. core, react, utilities); these files can be viewed with TypeScript enabled in VSCode, compiled with a TypeScript compiler, or run with the VSCode Quokka.js plugin.

All tests are passing locally on my machine (test runner GitHub Action is broken, might need to remove or fix that).

• core/Entry.js: Added parseFloat to some logic in formatCurrencyString() because Number.toFixed() returns a string and NumberFormat.format() takes a number. Also moved the .toFixed(2) so that if zeroDecimalCurrency was true, it wouldn't be called.
• core/index.d.ts: Rewrote most of this file to make the action types match how Redux expects them to be. Also fixed createPersistedStore() type definition to be directly from redux-persist. And also fixed the return type of createShoppingCartStore.
• core/index.js: Replaced createPersistedStore(), a one-line function that just passed its argument to redux-persist's persistStore to be an export-from statement that aliases peristStore to createPersistedStore.
• package.json: Mostly just changes to files and exports. Wondering if we should move @stripe/stripe-js to a peer dependency so that it isn't included for people who aren't using Stripe but those who are can still install it. I also had an idea about doing just formatting for payment providers instead of importing and calling them too but that's a bigger change.
• react/index.d.ts: Had to create a CartActions interface here that matches the parameter types for each action's creator function but I was unsure what the return type should be for most. For redirectToCheckout and checkoutSingleItem, I could probably be more specific about what Stripe could return but I left it at Promise<any> for now.
• rollup.config.js: Fixed some issues with copyTypes and clearDist that were messing with the build output.

Documentation Changes

I've made several small tweaks to the wording of the documentation as well as updated the structure of the Usage section to be easier to navigate. I've also tried to make sure that there's a page for everything the library offers (besides a framework-less Getting Started section).

I've also added a payment-providers.md file that lists all of the payment providers that we may possibly be able to support and a link to their documentation as well as a little note about where to find the info about how their equivalent of line_items should be formatted. In the future that could be fleshed out to actually describe the format for checking out with that provider as I've already done with the Stripe section in that file.

New Sidebar Menu Structure

Here is the new sidebar menu structure for the documentation website.

• Welcome
  • Introduction
  • Getting started
  • Getting started (Client Only Mode)
  • Getting started (Serverless)
  • Getting Started with TypeScript
  • Discord
  • Contributors
• Usage
  • Components
  • CartProvider
  • DebugCart
  • Properties
  • cartDetails
  • cartCount
  • totalPrice
  • formattedTotalPrice
  • shouldDisplayCart
  • lastClicked
  • Actions
  • addItem()
  • removeItem()
  • incrementItem()
  • decrementItem()
  • setItemQuantity()
  • loadCart()
  • clearCart()
  • handleCartClick()
  • handleCartHover()
  • handleCloseCart()
  • storeLastClicked()
  • redirectToCheckout()
  • checkoutSingleItem()
  • Client-Side Helpers
  • formatCurrencyString()
  • filterCart()
  • Server-Side Helpers
  • validateCartItems
  • formatLineItems()

[ehowey]

This is amazing Andria!

I love the docs re-org makes more sense to me that way!

[andria-dev]

@dayhaysoos I think this PR is ready to squash and merge and then be deployed (docs and library).

[dayhaysoos]

Will do! @andria-dev This is incredible! Just to be clear, this would be a minor update for the library, yeah?

[andria-dev]

@dayhaysoos Minor version update works 👍🏻

[dayhaysoos]

@andria-dev just FYI the docs site is failing on Netlify for some reason although it works locally no prob. Saying that it can't find the module use-shopping-cart. Troubleshooting now