[DSDK-176][FEAT][SMPL] Create Home skeleton #10

aussedatlo · 2024-01-23T16:30:19Z

📝 Description

Create Home skeleton from figma

❓ Context

JIRA or GitHub link: DSDK-176

✅ Checklist

Pull Requests must pass the CI and be code reviewed. Set as Draft if the PR is not ready.

npx changeset was attached.
Covered by automatic tests.
[ ] Impact of the changes:

🧐 Checklist for the PR Reviewers

The code aligns with the requirements described in the linked JIRA or GitHub issue.
The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
There are no undocumented trade-offs, technical debt, or maintainability issues.
The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
Any new dependencies have been justified and documented.

vercel · 2024-01-23T16:30:23Z

@aussedatlo is attempting to deploy a commit to the LedgerHQ Team on Vercel.

To accomplish this, @aussedatlo needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

apps/sample/src/providers/theme.tsx

apps/sample/public/nano-x.png

alexandremgo

Clean 👌

apps/sample/src/components/MainView/index.tsx

ofreyssinet-ledger · 2024-01-29T17:34:25Z

apps/sample/src/components/Menu/index.tsx

+  padding-left: ${({ theme }: { theme: DefaultTheme }) => theme.space[5]}px;
+`;
+
+const MenuTitle = styled(Box)`


[SHOULD] consider using a Text component instead, with variant and fontWeight props.
cf. https://react-ui-storybook.vercel.app/?path=/docs/asorted-typography-text--docs

apps/sample/src/components/Sidebar/index.tsx

ofreyssinet-ledger · 2024-01-29T17:39:11Z

apps/sample/src/pages/index.tsx

  color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c90};
+  display: flex;


[SHOULD] you can use a Flex component from react-ui for that. Applies to all other places where you used Box with display: flex

ofreyssinet-ledger

Seems good but I think that you should leverage much more of react-ui's potential by using components such as Text (with props like variant and fontWeight) and Flex. There are a bunch of examples in LLD and LLM if you want.

Using text variants specifically is important as it helps us to remain consistent with the design system which defines a set of variants which have their specific font size & family.
Before implementing any design, in case the variant & font weight are not clearly displayed in design files, it should be reported to the designer. Same for unorthodox spacing values which are not in the defined ranges.

jdabbech-ledger

[should] import from @ledgerhq/react-ui instead of @ledgerhq/react-ui/index

ofreyssinet-ledger · 2024-01-31T08:54:27Z

apps/sample/src/components/Menu/index.tsx

+  variant: "paragraph",
+  fontWeight: "semiBold",
+})`
+  margin-left: ${({ theme }: { theme: DefaultTheme }) => theme.space[5]}px;


FYI spacing also works nicely with styled system: you can add a prop marginLeft: 5 or ml: 5.

ml: 5 looks cleaner and more concise than ${({ theme }: { theme: DefaultTheme }) => theme.space[5]}px. I'll edit all the spacing to use styled-system 👍

ofreyssinet-ledger · 2024-01-31T09:09:38Z

apps/sample/src/components/Device/index.tsx

+  padding: ${({ theme }: { theme: DefaultTheme }) => theme.space[6]}px;
+  background: ${({ theme }: { theme: DefaultTheme }) =>
+    theme.colors.neutral.c30};
+  border-radius: 8px;


[ASK] can border-radius: 8px be instead derived from theme.radii[2] ?

ofreyssinet-ledger · 2024-01-31T09:10:07Z

apps/sample/src/components/MainView/index.tsx

+  cursor: pointer;
+  align-items: center;
+  opacity: 0.7;
+  padding: 8px;


[SHOULD] padding to be taken from theme.space

ofreyssinet-ledger

nice ! thanks for figuring out the fonts setup !

jdabbech-ledger reviewed Jan 24, 2024

View reviewed changes

apps/sample/src/providers/theme.tsx Outdated Show resolved Hide resolved

jdabbech-ledger reviewed Jan 24, 2024

View reviewed changes

apps/sample/public/nano-x.png Outdated Show resolved Hide resolved

jdabbech-ledger approved these changes Jan 26, 2024

View reviewed changes

valpinkman approved these changes Jan 26, 2024

View reviewed changes

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from 166e61e to 9b850b6 Compare January 26, 2024 14:32

jiyuzhuang assigned aussedatlo Jan 29, 2024

aussedatlo changed the base branch from develop to feature/DSDK-175-ui-library January 29, 2024 11:04

alexandremgo approved these changes Jan 29, 2024

View reviewed changes

ofreyssinet-ledger reviewed Jan 29, 2024

View reviewed changes

apps/sample/src/components/MainView/index.tsx Outdated Show resolved Hide resolved

ofreyssinet-ledger reviewed Jan 29, 2024

View reviewed changes

apps/sample/src/components/Sidebar/index.tsx Outdated Show resolved Hide resolved

ofreyssinet-ledger reviewed Jan 29, 2024

View reviewed changes

apps/sample/src/components/Sidebar/index.tsx Outdated Show resolved Hide resolved

ofreyssinet-ledger reviewed Jan 29, 2024

View reviewed changes

ofreyssinet-ledger requested changes Jan 29, 2024

View reviewed changes

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from 9b850b6 to f8b8b30 Compare January 30, 2024 15:49

aussedatlo force-pushed the feature/DSDK-175-ui-library branch from e3b201c to 9aff145 Compare January 30, 2024 16:01

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from f8b8b30 to 6c110d5 Compare January 30, 2024 16:02

aussedatlo force-pushed the feature/DSDK-175-ui-library branch 3 times, most recently from 3b24209 to aa845e1 Compare January 30, 2024 16:33

aussedatlo changed the base branch from feature/DSDK-175-ui-library to develop January 30, 2024 16:38

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from 6c110d5 to f3dd1d9 Compare January 30, 2024 16:39

jdabbech-ledger reviewed Jan 30, 2024

View reviewed changes

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from f3dd1d9 to e96a60d Compare January 30, 2024 17:09

ofreyssinet-ledger reviewed Jan 31, 2024

View reviewed changes

ofreyssinet-ledger approved these changes Jan 31, 2024

View reviewed changes

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from e96a60d to fa2efbb Compare January 31, 2024 09:30

mbertin-ledger approved these changes Jan 31, 2024

View reviewed changes

aussedatlo added 4 commits January 31, 2024 14:32

feature(sample): create Home page

3c7e0a5

feature(sample): add Ledger fonts

e538675

feature(sample): replace custom provider with style provider

8bb5ef3

feature(sample): use local font instead of nextjs font

d101129

aussedatlo force-pushed the feature/DSDK-176-home-skeleton branch from fa2efbb to d101129 Compare January 31, 2024 13:33

aussedatlo merged commit 1d326d1 into develop Jan 31, 2024
2 of 3 checks passed

aussedatlo changed the title ~~[DSDK-176] [SAMPLE-APP] Create Home skeleton~~ [DSDK-176][FEAT][SMPL] Create Home skeleton Jan 31, 2024

valpinkman deleted the feature/DSDK-176-home-skeleton branch April 17, 2024 16:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DSDK-176][FEAT][SMPL] Create Home skeleton #10

[DSDK-176][FEAT][SMPL] Create Home skeleton #10

aussedatlo commented Jan 23, 2024 •

edited by jira bot

Loading

vercel bot commented Jan 23, 2024

alexandremgo left a comment

ofreyssinet-ledger Jan 29, 2024

ofreyssinet-ledger Jan 29, 2024

ofreyssinet-ledger left a comment •

edited

Loading

jdabbech-ledger left a comment

ofreyssinet-ledger Jan 31, 2024

aussedatlo Jan 31, 2024

ofreyssinet-ledger Jan 31, 2024

ofreyssinet-ledger Jan 31, 2024

ofreyssinet-ledger Jan 31, 2024

ofreyssinet-ledger left a comment

		color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c90};
		display: flex;

[DSDK-176][FEAT][SMPL] Create Home skeleton #10

[DSDK-176][FEAT][SMPL] Create Home skeleton #10

Conversation

aussedatlo commented Jan 23, 2024 • edited by jira bot Loading

📝 Description

❓ Context

✅ Checklist

[ ] Impact of the changes:

🧐 Checklist for the PR Reviewers

vercel bot commented Jan 23, 2024

alexandremgo left a comment

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 29, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 29, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger left a comment • edited Loading

Choose a reason for hiding this comment

jdabbech-ledger left a comment

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 31, 2024

Choose a reason for hiding this comment

aussedatlo Jan 31, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 31, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 31, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger Jan 31, 2024

Choose a reason for hiding this comment

ofreyssinet-ledger left a comment

Choose a reason for hiding this comment

aussedatlo commented Jan 23, 2024 •

edited by jira bot

Loading

ofreyssinet-ledger left a comment •

edited

Loading