Set up twrnc theming for React Native component library #111

brianacnguyen · 2024-11-13T23:55:09Z

Description

This PR introduces Themed twrnc to metamask-design-system. It includes updates to @metamask/design-system-twrnc-preset to provide twrnc settings, provider, and hooks to be used to achieve the themed tailwind-like capabilities. @metamask/design-system-twrnc-preset is also updated to be consumed by @metamask/design-system-react-native and @metamask/storybook-react-native with a simple example.

Related issues

Fixes: #19

Manual testing steps

Run yarn install in root
Run yarn storybook:ios in root
Press Cmd + Shift + A or navigate to Features > Toggle Appearance for theme switching

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-11-13.at.16.08.29.mp4

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

socket-security · 2024-11-13T23:56:05Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@vue/[email protected]	environment, eval	`0`	619 kB	yyx990803
npm/@vue/[email protected]	environment, eval	`0`	639 kB	yyx990803
npm/@vue/[email protected]	environment, eval, filesystem, unsafe	`0`	2.62 MB	yyx990803
npm/@vue/[email protected]	None	`0`	47.7 kB	yyx990803
npm/@vue/[email protected]	environment	`0`	86.5 kB	yyx990803
npm/[email protected]	None	`0`	152 kB	kilianvalkhof
npm/[email protected]	None	`+1`	2.39 MB	ljharb
npm/[email protected]	None	`+1`	56.7 kB	brentvatne
npm/[email protected]	environment, network Transitive: eval, unsafe	`+11`	60.1 MB	react-native-bot
npm/[email protected]	environment	`0`	240 kB	jaredhenderson

🚮 Removed packages: npm/@types/[email protected], npm/@vue/[email protected], npm/@vue/[email protected], npm/@vue/[email protected], npm/@vue/[email protected], npm/@vue/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

apps/storybook-react-native/.storybook/config.js

brianacnguyen · 2024-11-14T00:09:02Z

apps/storybook-react-native/app.json

-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
+    "userInterfaceStyle": "automatic"


For expo's theme switching capability

brianacnguyen · 2024-11-14T00:09:09Z

apps/storybook-react-native/app.json

-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }


Remove unneeded things

brianacnguyen · 2024-11-14T14:11:13Z

apps/storybook-react-native/package.json

    "expo": "~49.0.23",
    "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
    "react-native-reanimated": "3.3.0",


This is needed for dark mode

brianacnguyen · 2024-11-14T14:15:44Z

apps/storybook-react-native/src/Button.stories.tsx

    return (
-      <View>
+      <View style={tw`bg-primary-default p-3`}>
        <Button text="Sample Button" />


Adding this here to show the theme switching colors

brianacnguyen · 2024-11-14T14:19:29Z

packages/design-system-react-native/tsconfig.build.json

+    {
+      "path": "../design-system-twrnc-preset/tsconfig.build.json"
+    }
+  ],


@mcmire suggested to add this

brianacnguyen · 2024-11-14T14:29:13Z

packages/design-system-twrnc-preset/src/provider/Theme.hooks.ts

+export const useTailwind = () => {
+  const { tw } = useContext(ThemeContext);
+  return tw;
+};


Hook to be used instead of importing tw to get Themed tw

…stem into twrnc-package

brianacnguyen · 2024-11-14T15:20:12Z

packages/design-system-twrnc-preset/package.json

    "build:docs": "typedoc",
    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-twrnc-preset",
    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-twrnc-preset",
    "publish:preview": "yarn npm publish --tag preview",
    "since-latest-release": "../../scripts/since-latest-release.sh",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter -passWithNoTests",


temporary addition since tests will be added later #90

georgewrmarshall

Theming and Expo are working well! 🚀 I’ve left a few questions. This PR is quite large, and while I appreciate the comments, it would be helpful to provide even more. A self-review with additional context, especially on React Native specifics, would be valuable to break things down for future PRs since I'm less familiar with those areas.

I still think including the ThemeProvider within design-system-react-native could have simplified things by reducing complexity, dependencies, and overall overhead. That said, I’m on board with this approach to keep us aligned and moving forward.

Pulled the branch and confirmed theming in Expo and Storybook ✅

package.json

.depcheckrc.yml

apps/storybook-react-native/.eslintrc.js

packages/design-system-react-native/jest.config.js

packages/design-system-react-native/package.json

packages/design-system-twrnc-preset/src/Theme/Theme.providers.tsx

…design-system into twrnc-package

socket-security · 2024-11-15T17:55:52Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

…design-system into twrnc-package

brianacnguyen · 2024-11-15T18:15:42Z

@metamaskbot publish-preview

brianacnguyen · 2024-11-15T22:21:36Z

@SocketSecurity ignore-all

georgewrmarshall

LGTM

checked expo storybook themeing locally ✅
checked ignored socket security report is supply chain threats which is protected by lavamoat ✅

brianacnguyen added 2 commits November 13, 2024 14:13

Implemented themed twrnc

9ec0a61

Draft for twrnc implementation

db2ea35

brianacnguyen requested a review from a team as a code owner November 13, 2024 23:55

brianacnguyen marked this pull request as draft November 13, 2024 23:55

georgewrmarshall reviewed Nov 14, 2024

View reviewed changes

apps/storybook-react-native/.storybook/config.js Outdated Show resolved Hide resolved

Updated dependencies

540a7e7

brianacnguyen commented Nov 14, 2024

View reviewed changes

apps/storybook-react-native/app.json

},

"web": {

"favicon": "./assets/favicon.png"

}

Copy link

Contributor Author

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

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

Remove unneeded things

brianacnguyen commented Nov 14, 2024

View reviewed changes

Updated twrnc dep

8530131

brianacnguyen commented Nov 14, 2024

View reviewed changes

brianacnguyen added 2 commits November 14, 2024 06:53

Cleaned up Theme namings

a73166e

Updated yarn setup script to include build

6dfe1f9

brianacnguyen self-assigned this Nov 14, 2024

brianacnguyen added the team-design-system label Nov 14, 2024

brianacnguyen marked this pull request as ready for review November 14, 2024 15:03

brianacnguyen changed the title ~~Twrnc package - draft~~ Set up twrnc theming for React Native component library Nov 14, 2024

brianacnguyen added 3 commits November 14, 2024 07:05

Merge branch 'main' of https://github.com/MetaMask/metamask-design-sy…

2e8640b

…stem into twrnc-package

Updated dependencies and imports

bf3e039

Added temp -passWithNoTests

b76a8fd

brianacnguyen commented Nov 14, 2024

View reviewed changes

brianacnguyen added 6 commits November 14, 2024 07:24

Updated temp yarn constraints update

a44b8da

Added withThemeProvider test

c1e7e47

Updated test configs

227faf3

Updated tests

252c10d

Updated more tests

cc4f406

Updated tests

101216f

brianacnguyen added 7 commits November 14, 2024 10:59

Updated withThemeProvider ref

11eba66

Added props test to withthemeprovider

d17bdcf

Updated withThemeProvider tests

73051b4

Updated missed changes

595edfc

Updated twrnc-dependencies

b9e985f

Updated twrnc in depcheck

aebe56e

Merge branch 'main' into twrnc-package

7501cc2

georgewrmarshall reviewed Nov 15, 2024

View reviewed changes

brianacnguyen added 2 commits November 15, 2024 09:54

Moved stories file to ds-rn

640a871

Merge branch 'twrnc-package' of https://github.com/MetaMask/metamask-…

307dfaf

…design-system into twrnc-package

brianacnguyen added 3 commits November 15, 2024 09:57

Merge branch 'main' into twrnc-package

bb830ff

Moving twrnc-preset under peerdependencies

1a4d78b

Merge branch 'twrnc-package' of https://github.com/MetaMask/metamask-…

bfdc92d

…design-system into twrnc-package

brianacnguyen added 5 commits November 15, 2024 11:41

Updated dependencies

86ededd

Updated yarn lock

9008d75

Updated dependencies again

37e4def

Removed unneccessary jest config updates

8ddd59b

Updated depcheck

d61740b

georgewrmarshall approved these changes Nov 15, 2024

View reviewed changes

brianacnguyen merged commit f120ff2 into main Nov 15, 2024
26 checks passed

brianacnguyen deleted the twrnc-package branch November 15, 2024 22:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set up twrnc theming for React Native component library #111

Set up twrnc theming for React Native component library #111

brianacnguyen commented Nov 13, 2024 •

edited

Loading

socket-security bot commented Nov 13, 2024 •

edited

Loading

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

brianacnguyen Nov 14, 2024

georgewrmarshall left a comment •

edited

Loading

socket-security bot commented Nov 15, 2024 •

edited

Loading

brianacnguyen commented Nov 15, 2024

brianacnguyen commented Nov 15, 2024

georgewrmarshall left a comment •

edited

Loading

Set up twrnc theming for React Native component library #111

Set up twrnc theming for React Native component library #111

Conversation

brianacnguyen commented Nov 13, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

socket-security bot commented Nov 13, 2024 • edited Loading

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

brianacnguyen Nov 14, 2024

Choose a reason for hiding this comment

georgewrmarshall left a comment • edited Loading

Choose a reason for hiding this comment

socket-security bot commented Nov 15, 2024 • edited Loading

Next steps

brianacnguyen commented Nov 15, 2024

brianacnguyen commented Nov 15, 2024

georgewrmarshall left a comment • edited Loading

Choose a reason for hiding this comment

brianacnguyen commented Nov 13, 2024 •

edited

Loading

socket-security bot commented Nov 13, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading

socket-security bot commented Nov 15, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading