🔧 libs/ui build error

[roiLeo]

-related with #8251

Who made TheImage component? name is misleading & component import is bad.

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	d31503f
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6564b2d9d3f6d10008f2f4b8
😎 Deploy Preview	https://deploy-preview-8267--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request contains code modifications for primarily three files: ImageMedia.vue, NeoAvatar.vue, and TheImage.vue located in libs/ui/src/components. The changes mainly revolve around importing additional utilities from 'vue' such as 'defineProps', 'withDefaults', and 'computed' into these files. This could be a step towards enhancing the functional components within the Vue ecosystem of this project. Also, in ImageMedia.vue, 'consola' has been imported which is generally used for debugging, suggesting some debugging activity or enhanced logging could be expected in the future. Consequently, these changes are focused on improving the codebase usability and modularity.

[vikiival]

Maybe rollback CODEOWNERS?

[roiLeo]

Maybe rollback CODEOWNERS?

why?

[preschian]

Maybe rollback CODEOWNERS?

why?

maybe assign it to internal dev?

[codeclimate]

Code Climate has analyzed commit d791e8c and detected 0 issues on this pull request.

View more on Code Climate.

[preschian]

anyway, can we capture the error on ci with some commands?
maybe put pnpm -F brick story:build on ci

[roiLeo]

anyway, can we capture the error on ci with some commands? maybe put pnpm -F brick story:build on ci

https://github.com/kodadot/nft-gallery/blob/main/.github/workflows/build.libs-ui.yml
or #4464

[shashkovdanil]

It's my component. Yes, I noticed that the absence of imports breaks historie, is there any way to customize the linter to avoid such problems in the future? We don't need to do explicit imports in the main project, but in ui kit we do, because of this problem. These two projects are in one repository, which is differently configured. I would like to solve such a problem in a centralized way

[shashkovdanil]

@roiLeo btw this PR will not fix this issue. This issue is due to the fact that we use the $t function in our code in libs/ui, for example here {{ $t('lewd.explicit') }}, which causes the error

[roiLeo]

is there any way to customize the linter to avoid such problems in the future?

move project outside repo

We don't need to do explicit imports in the main project, but in ui kit we do, because of this problem.

can be fixed if we migrate to Vue histoire to Nuxt histoire

I would like to solve such a problem in a centralized way

Let us know how you would proceed before starting anything

[roiLeo]

$t('lewd.explicit')

same as #8124 (comment) we don't need i18n in UI package, This MediaItem should be in kodadot components instead

[shashkovdanil]

Let us know how you would proceed before starting anything

I agree with you about separating repo with its own build process, also setting up linter there as well to avoid these problems

[shashkovdanil]

This MediaItem should be in kodadot components instead

Well we have to have this in UI kit:

but MediaItem should be in main repo? Did I get that right?

[shashkovdanil]

About the naming of this component, this is a common Image component, I named it along the lines of TheButton. What are some other options for naming the common component of the image?

[roiLeo]

About the naming of this component, this is a common Image component, I named it along the lines of TheButton. What are some other options for naming the common component of the image?

I don't think it's a good idea to prefix with The*, if it's common then it should be Common* like CommonPrimaryButton, CommonInvertedButton etc.. we can use Nuxt auto import feature for better naming (/components/common/*)

[shashkovdanil]

What about BaseImage? This is actually a component that should replace the default html tag . This component is not a UI component because it does not have any styles

[roiLeo]

What about BaseImage? This is actually a component that should replace the default html tag . This component is not a UI component because it does not have any styles

What will be the use case of this BaseImage component? one single component for all images?

[shashkovdanil]

Use instead of the tag in the UI kit, i.e. it's just a wrapper over img into which you can additionally pass a component like NuxtImg

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.2% Duplication