Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adds theming to support multiple instances of the platform #1242

Closed
wants to merge 10 commits into from

Conversation

thisislawatts
Copy link
Collaborator

@thisislawatts thisislawatts commented Oct 9, 2021

PR Checklist

  • - Latest master branch merged
  • - PR title descriptive (can be used in release notes)

PR Type

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Description

Eventually the community-platform service will be installed as multiple instances to help grow communities around fixing fashion and sustainable living. This PR represents a step towards that goal by moving the styling out of individual components to a higher level abstraction represented by the type PlatformTheme.

  • Adds a theme switcher to the DevSiteHeader component, which is mainly for demo purposes to demonstrate how the site can be themed for different instances.

For the reviewer:

  • 😬 Sorry for the many files being changed in this PR, a lot of this is small and repetitive changes so that components fetch their style from the Theme store rather than a hardcoded style file.

Screenshots/Videos

@thisislawatts thisislawatts changed the title wip: baby wake up brain drump wip: themeable instances Oct 9, 2021
@cypress
Copy link

cypress bot commented Oct 9, 2021



Test summary

26 30 0 14Flakiness 1


Run details

Project onearmy-community-platform
Status Failed
Commit 045d719
Started Dec 8, 2021 5:28 PM
Ended Dec 8, 2021 5:37 PM
Duration 09:18 💡
OS Linux Ubuntu - 20.04
Browser Multiple

View run in Cypress Dashboard ➡️


Failures

Run group: 2x-chrome (Linux, Chrome )
settings.spec.ts Failed
1 [Settings] > [Focus Workplace] > [Editing a new Profile]
howto/write.spec.ts Failed
1 [How To] > [Create a how-to] > [By Authenticated]
2 [How To] > [Create a how-to] > [Warning on leaving page]
3 [How To] > [Edit a how-to] > [By Authenticated]
4 [How To] > [Edit a how-to] > [By Owner]
howto/read.spec.ts Failed
1 [How To] > [List how-tos] > [By Everyone]
2 [How To] > [List how-tos] > [By Authenticated]
3 [How To] > [Filter with Tag] > [By Everyone]
4 [How To] > [Read a How-to] > [By Authenticated}
5 [How To] > [Read a How-to] > [By Owner]
This comment includes only the first 10 test failures. See all 15 failures in the Cypress Dashboard.
Run group: 2x-firefox (Linux, Firefox )
settings.spec.ts Failed
1 [Settings] > [Focus Workplace] > [Editing a new Profile]
howto/write.spec.ts Failed
1 [How To] > [Create a how-to] > [By Authenticated]
2 [How To] > [Create a how-to] > [Warning on leaving page]
3 [How To] > [Edit a how-to] > [By Authenticated]
4 [How To] > [Edit a how-to] > [By Owner]
howto/read.spec.ts Failed
1 [How To] > [List how-tos] > [By Everyone]
2 [How To] > [List how-tos] > [By Authenticated]
3 [How To] > [Filter with Tag] > [By Everyone]
4 [How To] > [Read a How-to] > [By Authenticated}
5 [How To] > [Read a How-to] > [By Owner]
This comment includes only the first 10 test failures. See all 15 failures in the Cypress Dashboard.

Flakiness

src/integration/sign-up.spec.ts Flakiness
1 [Sign-up - new user] > sign in as new user

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@@ -0,0 +1,41 @@
import React, { Component } from 'react'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lift primary application out of src/index into a standalone App so it can be wrapped in MobX observer method to ensure all children can be correctly re-rendered by MobX state changes.

@@ -50,7 +50,6 @@
"resolutions": {
"__NOTE__": "2021-05-28 storybook clash: https://github.com/storybookjs/storybook/issues/6505",
"webpack": "4.44.2",
"styled-components": "^4",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question Not sure what/why with this line item; removing unless someone says no…

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that might have been related to storybook back when all package installs were hoisted to top-level, but as we now have nmHoistingLimits: workspaces I expect fine to remove

@@ -1,6 +1,6 @@
import { Component } from 'react'

import { Image, ImageProps } from 'rebass'
import { Image, ImageProps } from 'rebass/styled-components'
Copy link
Collaborator Author

@thisislawatts thisislawatts Oct 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: We have a mixture of styled-components and vanilla Rebass components which use: https://emotion.sh/

Rebass does allow you to specifically use styled-component compatible variants, so we are switching everywhere to use those instead. https://rebassjs.org/guides/styled-components

We can easily reverse this decision and switch towards Emotion dropping Styled Components but this needs to be consistent!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I remember at one time the lead frontend (Benj) had wanted to move to emotion, but as we had only just moved from material -> styled components seemed like one step too far. Would definitely be outside scope of the PR to make a switch so seems like a sensible option until such a time if we did decide (npm trends still has styled-components way more popular but I have no strong opinion on the matter otherwise)

@thisislawatts thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from 0f11f53 to 93a8daa Compare October 10, 2021 14:13
@davehakkens
Copy link
Contributor

wauw just saw this. Super nice! Good step towards replicating 💪

@thisislawatts thisislawatts changed the title wip: themeable instances feat: adds theming to power multiple instances Oct 14, 2021
@thisislawatts thisislawatts changed the title feat: adds theming to power multiple instances feat: adds theming to support multiple instances of the platform Oct 14, 2021
@thisislawatts thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch 2 times, most recently from 14183cf to 579afb0 Compare October 14, 2021 19:52
@thisislawatts thisislawatts marked this pull request as ready for review October 14, 2021 19:52
@thisislawatts thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from ab4f643 to 2c4a9dc Compare October 15, 2021 15:51
@thisislawatts thisislawatts added the Review allow-preview ✅ Has received manual check for malicious code and can be safely built for preview label Oct 15, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Oct 15, 2021

Visit the preview URL for this PR (updated for commit 258d3d4):

https://onearmy-next--pr1242-feat-adds-support-fo-t7edcyll.web.app

(expires Mon, 20 Dec 2021 15:19:32 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

@davehakkens
Copy link
Contributor

noticed a few missing things.

  1. The map module displays both the mobile and Desktop menu.

Screenshot 2021-10-15 at 22 31 12

  1. Most buttons are still yellow on :hover for instance here the "create an event"

Screenshot 2021-10-15 at 22 31 29

  1. When signing up the input fields have a grey background. However when you select another theme they loose their background color (this might happen on other places as well) Below you can see original with PP theme. If you select FF theme they loose background color

Screenshot 2021-10-15 at 22 32 04

Screenshot 2021-10-15 at 22 32 10

@thisislawatts
Copy link
Collaborator Author

thisislawatts commented Oct 18, 2021

Thanks for taking a look around @davehakkens

  1. Mobile vs Desktop menu. Will take a look. This was intermittment and I haven't yet been able to recreate locally. I will redeploy to staging and see how it looks.
  2. Good catch, the :hover state for buttons with the new temporary themes hadn't changed :) Updated now to a dark red to demonstrate for Fixing Fashion.
  3. The input backgrounds are currently coming from the theme's background definition, which for Precious Plastic is grey. Fixing Fashion instead used a flat white background, I've changed it in the attached screen grab to be magenta and better demonstrate the behaviour. Depending on what we decided the Fixing Fashion theme should be, we can decouple these items. If we kept the background as the grey then it would also not be an issue.

Screenshot 2021-10-18 at 18 05 08

@davehakkens
Copy link
Contributor

  1. You know you can use this url to test live? https://onearmy-next--pr1242-feat-adds-support-fo-ohyps25w.web.app
  2. nicee
  3. Got it. Could see it causing some conflict in the future if its connected to the background color. Decoupling makes sense. That said, for us now we could also easily keep the background consistent for ourselves.

@thisislawatts
Copy link
Collaborator Author

thisislawatts commented Nov 20, 2021

@davehakkens Updated to add a variant for use on Project Kamp ✨

Screenshot 2021-11-20 at 16 13 06

@thisislawatts thisislawatts force-pushed the feat/adds-support-for-multiple-themes branch from 258d3d4 to 920dd3b Compare December 7, 2021 18:09
@@ -0,0 +1 @@
<svg width="160" height="149" xmlns="http://www.w3.org/2000/svg"><g stroke="#F82F03" stroke-width="14.12" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></g></svg>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really like idea of having an unbranded theme! Although definitely voting unbranded => wacky design a la 00s myspace

// we have 2 different dev sites, only show this component when on one and provide select
const devSites = [
{ value: 'localhost', label: 'Dev' },
{ value: 'dev_site', label: 'Development' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this, was wondering why I hadn't seen it recently :S

@@ -71,4 +73,14 @@ export const HowToCard = (props: IProps) => (
</Flex>
)

function formatCountryToISOCode(str) {
if (str === 'united kingdom') return 'gb'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this to fix the issues seen in dev console or related to #1211?
In either way I don't seem harm in it, but am confused as to why there is such a short/explicit list of countries?

@@ -51,7 +51,7 @@ const beforeUnload = function(e) {
}

const ResearchForm = observer((props: IProps) => {
const store = useResearchStore()
const researchStore = useResearchStore()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice to be clear, thanks for this!

Copy link
Member

@chrismclarke chrismclarke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the huge amount of work that's gone into this, I can see how extracting as much of the hardcoded styles/text as you have really goes a long way to making the site re-usable for other sites.

A couple specific points of feedback:

  1. Having to inject the themeProvider into every component feels a bit awkward, particularly when there's added boilerplate of having to define injected props or pass via commonStores. I know this is the pattern already inherited from the mobx setup, but I'm wondering if there might be more elegant solutions possible using either a useContext hook or better yet a custom modified/adapted useTheme hook like in some of the examples here: https://styled-components.com/docs/advanced

I wouldn't go as far as to say it's worth refactoring anything at this stage, but might be worth testing so we can provide as an option for new components moving forward.

  1. Each of the current themes are pretty large in size, but contain mostly identical information. I'm expect this is mostly for the purpose of getting things to work quickly now and that they'll want freedom to diverge more in the future, but equally I think there's probably a lot of 'core' theming that's unlikely to change much and might worth separating out (e.g. spacing, font sizes etc.). Better yet splitting the theme across layout, typography, colors etc. might be useful. In either case I'd probably recommend we come up with a system that allows one theme to inherit from another (e.g. the core unbranded), and making changes on top instead of writing from scratch.

This again I'd recommend as a future task, as what's there currently is still really nice to have and a good base to work from.

  1. Given that this PR touches pretty much every component in the codebase and we have no form of automated visual regression testing, I'd strongly suggest/request we have a deep manual review like you've already started @davehakkens - aware that really we want to test everything (from main pages, hovering stuff, clicking buttons, seeing popups while uploading a howto etc.).

Otherwise from the code side I'm happy to approve, overall the changes are a really nice addition to have and unlock a lot of exciting things for the future!!! Thanks again!

Looking forward to getting this merged once we get design sign-off from @davehakkens and can get the tests to pass

@chrismclarke
Copy link
Member

chrismclarke commented Dec 9, 2021

As for the tests - I've just checked out and tried running locally. There's quite a lot of issues with some of the props inheritance (trying to use auxilary text type but typography is undefined and unable to access theme.typography.auxiliary) and mobx also unhappy about some of the nested structures (possibly related to https://github.com/styled-components/styled-components/issues/3117)

I think this is gonna take a deeper dive to untangle than I have time for right now, so I'll wait to hear back from @thisislawatts in case any of this is resolved in #1300 and if not we can perhaps troubleshoot on slack if useful

@thisislawatts
Copy link
Collaborator Author

Closing in favour of #1300, leaving this branch hanging around for a little longer for reference.

@mariojsnunes mariojsnunes deleted the feat/adds-support-for-multiple-themes branch July 1, 2024 06:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mod: Events 🎉 Mod: HowTo 📰 Mod: Maps 🗺 Mod: Research 🔬 Review allow-preview ✅ Has received manual check for malicious code and can be safely built for preview
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants