New variant method API

[MiiZZo]

Related #34 #35

Motivation

variant provides an API that allows us to render different components based on $store value, but $store value type is limited to string, and it's not convenient to use this API with different $store types.
Imagine we have $user store and isAdmin boolean property and we want to render different components based on this property. With the current API, we need to write something like that:

const $user = createStore({ isAdmin: false });

const Profile = variant({
  source: $user.map((user) => {
    if (!user) {
      return 'isNotAuth';
    }
    
    if (user.isAdmin) {
      return 'isAdmin';
    }
    
    return 'isNotAdmin';
  })),
  cases: {
    isAdmin: AdminProfile,
    isNotAdmin: UserProfile,
    isNotAuth: SignIn,
  },
});

const $products = createStore([]);

const ProductsList = variant({
  source: $products.map((products) => products.length > 0 ? 'notEmpty' : 'empty'),
  cases: {
    empty: CreateYourFirstProject,
    notEmpty: ProductsListView,
  },
});

We may notice that this is inconvenient and the code looks strange. To solve this problem, we need to extend variant API so that developers can define the required component based on any type of $store value.

New API usage example

When our $store contains a value with a type different from string, we can pass an array to cases property. Each case has view field and filter method that takes $store value and returns a boolean value. variant returned view component will render that component that first match filter from up to down.

const $user = createStore({ isAdmin: false });

const Profile = variant({
  source: $user,
  cases: [
    // Pass as many cases as you want.
    { view: SignUp, filter: (user) => user === null },
    { view: UserComponent, filter: (user) => !user.isAdmin },
    { view: AdminComponent, filter: (user) => user.isAdmin }, 
  ],
});

const $products = createStore([]);

const ProductsList = variant({
  source: $products,
  cases: [
    { view: CreateYourFirstProject, filter: (products) => products.length === 0 },
    { view: ProductsListView, filter: (products) =>  products.length > 0 }, 
  ],
});

Tasks:

• Implement new API.
• Add types test coverage.
• Add test coverage. ⚠

Changelogs:

1. Impemented new API.
2. Added NonEmptyArray type in types.ts
3. Added types test coverage.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.