This commit implements the "Progress bar" component which is needed for wallet screen development.
Additionally, this commit adds a new test helper method "render-with-theme-provider" to test components in different themes.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit adds the "on-press" prop to the "collectible" component which is required for navigating to other screens, such as the details screen when we will start building the wallet.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit implements the "Account Avatar" component which is needed for wallet screen development.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit implements the "gradient cover" component which is needed for wallet screen development, and upgrades the "react-native-linear-gradient" library to "v2.8.0".
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
* Small refactor & add customization color to `info-count` component
* Fix notification mark in group chats for no mentions, also notification alignment styles in the component
* Code style: `change > 0` for `pos?`
* Simplifies community banner and adds style property
* Add animation for communities banner card
* Moves value-in-range to `utils.number` and removes `bounded-val`
* Moves animated values to view namespace
* Make `community.banner` component themeable
This commit upgrades Shadow CLJS from 2.11.16 (released on Feb/21) to latest
2.25.0 (Jul/23), so ~1.5 years worth of upgrades. By upgrading shadow we
can finally use the latest major Clojure version 1.11.x.
Why upgrade shadow?
- Shadow CLJS controls the ClojureScript version we can use. In order to use the
latest major Clojure version we must upgrade Shadow CLJS.
- Shadow CLJS releases new versions very frequently, and if you take a look at
its changelog https://github.com/thheller/shadow-cljs/blob/master/CHANGELOG.md, you'll see
it had tons and tons of bug fixes over the years. I hope some of them help
improve the DX for certain contributors who recently reported issues with
it.
- Clojure 1.11 brings new features, bug fixes and even performance improvements
(although I think the performance mostly impacts Clojure on the JVM). See the
changelog https://github.com/clojure/clojure/blob/master/changes.md#changes-to-clojure-in-version-1110
Things that can be beneficial to us, or are interesting nonetheless:
- New :as-alias to be used in require, which is like :as but does not require
the namespace to load. This means namespaced keywords using :as-alias can't
cause circular dependency errors. This feature would very useful if we used
namespaced keywords, but we don't, so...
https://github.com/clojure/clojure/blob/master/changes.md#22-as-alias-in-require
- New macros run-test and run-test-var to run single test with fixtures and
report.
- New iteration function, useful for processing paginated data.
https://www.abhinavomprakash.com/posts/clojure-iteration/
- New update-keys function: applies a function to every key in a map.
- New update-vals function: applies a function to every value in a map.
Examples for update-vals and update-keys. They should perform better than the
common reduce-kv approach since they use a transient data structure.
(let [m {:a 1 :b 2}]
(update-vals m inc)) ; => {:a 2, :b 3}
(let [m {:a 1 :b 2}]
(update-keys m name)) ; => {"a" 1, "b" 2}
Why change namespaces within __tests__ directories?
Any namespace with the word --tests-- throws an error, like the one below. I
didn't bother investigating why, so I changed the guidelines to reflect the new
convention. It's probably related to the double dashes in the name.
Namespace quo2.components.dividers.--tests--.divider-label-component-spec has a
segment starting with an invalid JavaScript identifier at line 1
This is a continuation of https://github.com/status-im/status-mobile/pull/16500 (Lint
& fix some shadowed core Clojure(Script) vars).
Notes: As a reminder, the goal is to eventually disallow shadowing core Clojure
vars entirely, but to get there and avoid rebase hell and regressions, we need
to do in smaller steps, especially because we can't safely automate the process
of unshadowing vars.
We are already down from ~500 shadowed core vars to 350 in total.
Why is this PR is using names such as "s", "v" or "sym"? Names such as s or v
are the so called idiomatic names, and are listed in the Clojure Style Guide
https://guide.clojure.style/#idiomatic-names. I used them whenever I felt
appropriate. For the var cljs.core/symbol I opted to use sym, even though the
symbol in question is not necessarily a Clojure symbol, I think the alias
conveys the meaning well enough
(https://www.clojure.org/guides/learn/syntax#_symbols_and_idents).
New vars linted:
- comparator
- identity
- str
- symbol
- val
Outstanding shadowed vars include type, name, hash, comp.
This commit refactors the "Toast" component to use theme context for consistency across the codebase.
Each toast will have its theme provider, which will help the children to use the context properly without interfering with other toast's context.
The following components are refactored to use with-theme / theme-context as it is used in the "Toast":
- "text" component
- "user-avatar" component
- "icon" component
- "circle-timer" component
This commit also updates the icon keyword used in the ":toasts/upsert" event dispatch to respect icon guidelines.
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
* chore: refactor button and add use for community colors
* chore: update color in button to work with community color
* chore: correct uses of button across app
This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme.
Changes done:
In Bottom Sheet:
- Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma)
- Fix the Icon colour for danger in light mode
- Updated Quo2 Preview to provide an option for the bottom sheet theme
In Action Drawer:
- Refactor the Action Drawer component to consume theme context
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Rewrite the shadows foundation API:
- Fix (implementation & usages): theme changes were not causing shadows to be
reevaluated.
- Optimization: define all possible shadow values at compile time. Good to
reduce cycles on garbage collection since recreating the shadow map all the
time is unnecessary and also to save cycles on computing colors since calls to
colors/alpha are not memoized.
- API redesign: unify access to Design System shadows in a single function.
None of the actual shadow values changed.
Fixes https://github.com/status-im/status-mobile/issues/16526
API rationale
=============
The quo2.foundations.shadows namespace reflects what's in the Design System >
Foundations > Shadows https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?type=design&node-id=624-965&mode=design&t=CvIotdjbHKHcHjpd-0).
Figma users see these shadows in other components as "Shadow/Normal/Light/03".
Notice the shadow's weight is shown as a number (not the semantic name in Figma,
e.g. "intense", "strong"):
So to make things as easy as possible, I opted for exposing a single public
function named "get", which receives arguments in order of frequency of usage
and which expects shadow weights as numbers so that devs don't need to mentally
translate 1 to "soft", or 3 to "intense".
Re-implements the component Community List according to guidelines
and, most importantly, fixes a bunch of issues and tries to achieve 100%
compatibility with Figma.
The new implementation is trying to mirror Figma properties as much as possible.
Fixes https://github.com/status-im/status-mobile/issues/16447
Changelog:
- Refactor to guidelines.
- Fix: original implementation in money/format-amounts had a bug caught by new
unit tests ("1000000" was formatted incorrectly).
- Fix: Community permission tag correct background when theme is overridden and
when blur is enabled.
- Fix: Notification dot uses correct colors for dark mode and blur variants.
- Fix: Community stats background when blur is enabled.
- Fix: Community stats icon color when blur is enabled.
- Add: The component's Quo preview screen is smarter and will only show form
fields (aka descriptors) that are relevant for each component type (engage,
discover or share).
- Add: replace hardcoded community statistics with an implementation that
actually accepts real numbers and which are correctly formatted.
- Add: New Quo descriptor type number.
- Add: Component uses correct shadows according to foundations/shadows.
- Community channels may not have an emoji, and in such cases, it should fall
back to a single letter. The component was recently updated in Figma after
this concern was brought up to designers.
- The default (fallback) color to be used in the list of community channels
should be the community color, not a default "primary-50" as was before. It's
a subtle change because the colors are rendered at 10% transparency.
- Rewrote the channel-avatar component to follow guidelines.
Fixes:
- https://github.com/status-im/status-mobile/issues/16332
- https://github.com/status-im/status-mobile/issues/16327
It's well known that shadowing core Clojure vars can lead to unexpected bugs. In
fact, it's a common source of bugs in other languages too. In the status-mobile
repository there are, in total, 562 shadowed vars, ~500 are core vars. Excluding
the "old code" we still have 285 offenders.
In status-mobile I've already seen two bugs caused by shadowed vars, both with
the shadowed var "name". But probably other problems happened in the past, and
others will happen in the future if we don't do something about this. This PR is
also my response to my frustration trying to review PRs and checking for
shadowed vars, humans were not meant for that!
In this commit we are enabling ":shadowed-var" to lint certain (not all) core
vars as errors (not warnings). In future PRs we can gradually unshadow more
vars. For the record, name is shadowed 40 times in the new code and 130 in
total, and type is shadowed 93 times in the new code and 124 in total!
What about non-core vars, should we allow shadowing? There are ~70 non-core
shadowed vars. In my opinion, we should also lint and disallow shadowing
non-core vars, since it may cause the same kind of bugs of shadowing core vars.
But this decision can be left for another moment/issue, after we have fixed the
most prominent problem of shadowing core vars.
Which vars are unshadowed in this PR? I fixed 62 errors and unshadowed
cljs.core/iter, cljs.core/time, cljs.core/count, cljs.core/key,
clojure.core/key.
Resources:
- [clj-kondo linter: shadowed-var](https://github.com/clj-kondo/clj-kondo/blob/master/doc/linters.md#shadowed-var)
* Refactor: Remove use of f-component
* Fix documentation drawer styles
* Refactor: move title styles to style ns
* Fix StaticSafeAreaInsets not being defined on component tests
* Fix bottom sheet height on Android
* Makes `divider-label` styles more lenient
* Small refactor to `list-items.channel` component
* Fix styles for `channel-list-component`
- Refactor `channel-list-component`
- Add some missing `:style` keys in `status-im2.contexts.communities.overview.view`
- Fix a warning related to using a `deref` in a `lazy-seq`
* Changes icon keyword namespace from `:main-icons` to `:i`
