Summer Refactor

[petersopko]

As discussed in multiple places here, we got to a point where our codebase deserves serious refactor. Except for making our life easier, this would be great help for newcomers, since some things became quite messy/chaotic over the months of remote/async development.

following up from discussion here:

• Folder structure #3068

When it comes to the folder structure, I prefer the way @kkukelka described his approach in the discussion:

I like to divide stuff in either context-specific or functionality-specific folders
e.g. for context-specific:

/payment
/payment/CheckoutComponent.vue
/payment/BillingComponent.vue

• Refactor: SearchBar - splitting into smaller components #3883
• Refactor: chain agnostic components #3299
• Refactor: deconstructing the /rmrk folder structure #3308
• Refactor: create service folder #3310
• Refactor: generic name for components + langDir #3309
• Refactor: Money component #3355
• Refactor: NFT storage #3379
• Refactor: ProfileDetail component #3579
• Refactor CSS #1348
• Refactor: Deprecate indexer state #3706
• Refactor: Carousel - Vue Composition API (Existing Design) #3774
• Redesign: Carousel #3865
• Refactor: Curated List - Vue Composition API #3772
• Refactor: landing page #3714
• Refactor: Deprecate indexer state #3706
• Refactor: Format balance #3868
• Refactor: SearchBar component #3360
• Refactor: Identity component #3747
• Refactor: Identity component - migrate to vue composition api #3749
• Refactor: Carousel - Move from rmrk folder #3773

[petersopko]

@kkukelka @roiLeo @vikiival I've moved the ideas from discussion about this into more actionable version, please feel free to add / modify whatever you find valuable

[vikiival]

So far short list

# Components we need

## Shared
- Auth
- Avatar
- Identity
- CollapseWrapper
- CommonTable
- LabeledText - (label, slot)

## Form
- DropUpload
- SubmitButton
- Collection Select
- Basic
  - Input
  - Switch
  - CheckBoxButton
  - NumberInput
  - Slider
- BalanceInput
  - Simple
  - Multicurrency
- AddressInput
  - Simple
  - Strict
  - WithHint
- AttributeTagInput

## View
- Money (with currency, decimal places)
- AccountBalance
- Titles (h1, h2, h3, h4, h5, h6)
- GalleryCard
- Percentage
- Image (rounded, square)


## Profile Specific
- Stats
  - Stats Column (label, slot)
- Web3 Social - sub.id, subscan, polkascan
- Sharing - donate, QR, link, share


## Lists
- GalleryCardList

## Search / Sort / Filter
- Pagination
- Buy Now
- SortDropdown
- Go to random
- ChangeLayout
- SearchInput

## Table
- Pagination (backend pagination)
- Cells
  - Type (BUY, SEND...)
  - Link (detail,) (just icon)
  - External
  - Money
  - Percentage
  - Identity?
  - Common - Just show it as text
  - RelativeDate - (9 months ago)
- WithDetail
  - list
  - gallery cards

## Charts

## Galery Item
- Navigation (through collection)
- Image
- ImageResize (fill, full-screen, grid)
- Emote?
- Title
- Description
- Attributes


### Carousel - Landing, Visited NFTs
- Image
- Title
- Money
- Creator
- current Owner

### Notification

## Chain Specific

### RMRK

### BSX

#### Offers

# Utils

[prachi00]

@vikiival dont we already have some of these components that is shared? like Identity

[vikiival]

@vikiival dont we already have some of these components that is shared? like Identity

Yes, we have component called Identity but it is doing too much logic. & has more than 200 lines of code.

Our focus it to have atomic (reusable) components

[vikiival]

Just found out there is a new version of Vue 2.7 that we can implement before full Vue3

Only blocking

• Update to Vue 2.7 buefy/buefy#3768

[prachi00]

Just found out there is a new version of Vue 2.7 that we can implement before full Vue3

Only blocking

• Update to Vue 2.7 buefy/buefy#3768

this is not a blocker then right? If not, we can follow this https://blog.vuejs.org/posts/vue-2-7-naruto.html
to upgrade to 2.7

[kkukelka]

Just found out there is a new version of Vue 2.7 that we can implement before full Vue3

Only blocking

• Update to Vue 2.7 buefy/buefy#3768

i've updated vue to 2.7.8 in here #3689
buefy seems to work nonetheless

[preschian]

some questions:

1. it's time to remove nuxt-property-decorator and use vue composition API instead?
2. do we need storybook to manage and preview our components?

[vikiival]

it's time to remove nuxt-property-decorator and use vue composition API instead?

Yup, best time is to write new components in composition api and also refactor some.

do we need storybook to manage and preview our components?

There was an alternative for Vue3. I don't know what was it's name

[preschian]

ok then, I will start with some components on the landing page #3714

[vikiival]

@preschian
https://github.com/histoire-dev/histoire

[preschian]

@preschian histoire-dev/histoire

looks cool, thanks, will try to experiment with it later 👍