search

learningequality / studio

Content curation tools for Kolibri
https://studio.learningequality.org/
MIT License
117 stars 163 forks source link

Remove Vuetify color used for the button hover state #4634

Open MisRob opened 3 months ago

MisRob commented 3 months ago

🌱 Are you new to the codebase? Welcome and please see the contributing guidelines.

Blocked by

Summary

After Kolibri Design System provides $darken_ utilities, let's use them to get rid of this Vuetify color https://github.com/learningequality/studio/blob/a4a3c8fc5a3b48758a405825d51b892d75afd8f4/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue#L107-L108 by applying the most appropriate $darken_ on the base red color color that the button has when it's not in hovered state.

shivam-daksh commented 3 months ago

Hey @MisRob, I would like to work on this.

MisRob commented 3 months ago

Hello @shivam-daksh, thanks! There is a related issue that needs to be resolved at first https://github.com/learningequality/kolibri-design-system/issues/726. Feel free to message us there if you'd like to give it a try. Note that even though it is beginner friendly, it's a bit more complex due to some experimentation you would need to do - more in the linked issue. Also I'd ask you to wait a day or two since it's in the proposal stage and I may need to do some tweaks to the issue. You could use that time to understand Kolibri Design System and the way we work with colors in our codebases.

shivam-daksh commented 3 months ago

Sure @MisRob, I would wait and understand the issue till then.

MisRob commented 3 months ago

Okay @shivam-daksh, let us know if you had any questions and if it still seems to be something you'd like to work on, just message me in https://github.com/learningequality/kolibri-design-system/issues/726 starting this Wednesday and I will assign :) I'd recommend you study Kolibri Design System (KDS) contributing guidelines, developers documentation, and try to set up your KDS development server and put something on the playground page. Also running KDS development in parallel with Kolibri or Studio is a useful skill to have.

shivam-daksh commented 3 months ago

Hey @MisRob, I'm having little trouble regarding managing multiple versions of Node in both projects simultaneously. As KDS and Studio both uses different versions of Node (i.e. Node@10 and Node@16 respectively), it is conflicting SOMETIMES when I open new fresh terminal.

What's really happening? When I'm in KDS project and I switch to Node@10 using volta or nvm and then either I'm opening new fresh terminal in the same project or in Studio. It doesn't reflects there. However, when I use same instance of terminal, then it works well. Any solutions to this if it is not concerning?

https://github.com/user-attachments/assets/b4029325-d42f-48a4-9411-a5030f5bcc14

MisRob commented 3 months ago

Hey @shivam-daksh, I am not certain if I can understand right. From the recording it seems you need to again nvm use/volta install from the newly opened terminal? I don't see any issue that should prevent you from doing this, or is there something troubling?

Typically, you don't even need to run KDS development server when running Studio development server - if you wish to see your KDS changes in Studio via yarn link, then running Studio will do :)

In some cases and if your CPU allows, it can be handy to run both KDS development server and Studio development server when you wish to preview a component in both environments - in that case you can do so from separate terminals.

Let me know if this helps or if there was something else.

shivam-daksh commented 3 months ago

Hi @MisRob, I got it. I've learned to experiment with KDS playgroud, gone through KDS Colors guide and able to run both projects by using yarn link simultaneously. What next I've to do?

MisRob commented 3 months ago

Hi @shivam-daksh, great! Please send a comment to https://github.com/learningequality/kolibri-design-system/issues/726, otherwise I can't assign you. Then you can start working. Let me know if the issue is clear and if you had any questions, ask there.

shivam-daksh commented 2 months ago

Hey @MisRob, since #726 has been solved. I would continue to work on this issue.

MisRob commented 2 months ago

Hi @shivam-daksh, assigned, thank you :) You can use yarn link to link Studio with KDS so you can access your work from https://github.com/learningequality/kolibri-design-system/pull/728.

shivam-daksh commented 2 months ago

Hi @MisRob, I'm having error while starting the studio. I've attached the video and logs:

https://github.com/user-attachments/assets/0c096587-b1b3-4a0d-a9bb-c3ff4871255f

MisRob commented 2 months ago

Hi @shivam-daksh, I assume you yarn linked Kolibri Design System (KDS) and Studio? If that's the case and it doesn't work with new 'color' dependency, you could also try to

  1. Unlink KDS and Studio - see yarn unlink docs
  2. Remove Studio's node_modules and also possibly clear yarn cache yarn cache clean
  3. Update kolibri-design-system package reference in Studio's package.json to https://github.com/learningequality/kolibri-design-system#8fd5d35b818d283a744a1e2c3e0c3d8debad0363
  4. Run Studio's yarn install

You could also try yarn install --force

shivam-daksh commented 2 months ago

Hi @MisRob, I've reinstalled both studio and kolibri-design-system at separate place. Still it's not working. I think, the issue is persisting because I'm running two node versions simultaneouly in both projects. I've tried both volta and nvm for managing versions. When I change the node version in studio and in KDS then either one of them work properly, other one start having error in runtime. Studio when I run yarn run devserver:hot :

image
MisRob commented 2 months ago

@shivam-daksh I'm sorry to hear about trouble. Let's see if we can do something about it.

When I change the node version in studio and in KDS then either one of them work properly, other one start having error in runtime.

I don't exactly understand - you don't need to run Studio dev server in parallel to KDS dev server, right? Or do you mean something else?

Also I don't understand "I've reinstalled both studio and kolibri-design-system at separate place" so would need some clarification.

shivam-daksh commented 2 months ago

Hi @MisRob, I'm sorry I wasn't clear before. The line "I've reinstalled both studio and kolibri-design-system at separate place" means that I've re-cloned the studio and KDS repositories in separate local directory. As you said it is not mandatory to run both studio and KDS simultaneously and what I've figured out till now is that when I run yarn run devserver after linking the KDS by running command yarn link kolibri-design-system then it shows me the given below error: image

However, when I unlink KDS using yarn unlink kolibri-design-system and run yarn run devsetup and yarn run devserver, it works fine. It seems like recent changes done in KDS is not reflecting into studio after linking locally. From the image below, you can clearly see that it is not able to find the darkenColors.js in /KDS/lib/styles path (which was contributed by me).

image
MisRob commented 2 months ago

@shivam-daksh Can you unlink and install the newest KDS release via package.json? https://github.com/learningequality/kolibri-design-system/releases/tag/v5.0.0-rc3. Then run yarn install. This should make the utilities you wrote available in Studio.

MisRob commented 2 months ago

@shivam-daksh ^ Let's just leave linking and KDS devserver etc. aside for now, and do these changes in Studio. If it still doesn't work, would you follow https://github.com/learningequality/studio/issues/4634#issuecomment-2309866439 step by step (except instead of the commit I originally referenced, you will install v5.0.0-rc3) and upload full logs of all the steps, including the commands you wrote and package.json and yarn.lock diffs). I would then try to reproduce. However I hope that installing the release without linking helps.

MisRob commented 2 months ago

@shivam-daksh Meanwhile I will see if someone on the team has an idea what's wrong with the yarn link method. Thanks for reporting.

MisRob commented 2 months ago

@shivam-daksh The issue may indeed be just something specific about the linking methods as I was just able to install KDS that has this change to Studio and see it running without trouble https://github.com/learningequality/studio/pull/4633/commits/ff3c26c1fafdf127a3b125396881a8409f6c1aca#diff-7ae45ad102eab3b6[…]70d7bc6507b6481575d519

MisRob commented 2 months ago

Hi @shivam-daksh, my colleague @AlexVelezLl jumped in to help and he was able to reproduce the issue with yarn link you saw. Re-posting his message with guidance on how to resolve it. Let us know if it helped!

It seems that yarn link doesnt bring the node_modules of the linked package, so if the linked package dependencies are not installed in the current package, we get this error https://github.com/yarnpkg/yarn/issues/2914. The solution is first install the updated package with yarn install and then we can link it.

MisRob commented 2 months ago

@shivam-daksh yesterday we also figured out that in Studio, you could simply yarn install the color package in the same version as is in KDS. But use it just as local way to resolve the issue and don't commit Studio's updated package.json and yarn.lock :) Hopefully some of these ways help.

shivam-daksh commented 2 months ago

Hi @MisRob, That was little overwhelming, it finally worked after manually adding node modules color and vue2-teleport in studio. Kindly review the PR 😄 .

MisRob commented 2 months ago

I'm sorry this was such a hassle @shivam-daksh and glad finally something helped. Some of the other contributors and also team members experienced that too so I was posting here as we were figuring it out gradually. We will review, thanks :)