nft-gallery
nft-gallery copied to clipboard
kodadot
Summer Refactor
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:
- https://github.com/kodadot/nft-gallery/discussions/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
- [x] #3883
- [ ] #3299
- [ ] #3308
- [ ] #3310
- [ ] #3309
- [ ] #3355
- [ ] #3379
- [ ] #3579
- [ ] #1348
- [ ] #3706
- [x] #3774
- [x] #3865
- [x] #3772
- [ ] #3714
- [ ] #3706
- [ ] #3868
- [x] #3360
- [x] #3747
- [x] #3749
- [x] #3773
@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
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
@vikiival dont we already have some of these components that is shared? like Identity
@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
Just found out there is a new version of Vue 2.7 that we can implement before full Vue3
Only blocking
- https://github.com/buefy/buefy/issues/3768
Just found out there is a new version of Vue 2.7 that we can implement before full Vue3
Only blocking
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
Just found out there is a new version of Vue 2.7 that we can implement before full Vue3
Only blocking
i've updated vue to 2.7.8 in here https://github.com/kodadot/nft-gallery/pull/3689 buefy seems to work nonetheless
some questions:
- it's time to remove
nuxt-property-decoratorand usevue composition APIinstead? - do we need storybook to manage and preview our components?
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
ok then, I will start with some components on the landing page https://github.com/kodadot/nft-gallery/issues/3714