From 33d89fb796ba68579ad95acddeef473c8cd5519b Mon Sep 17 00:00:00 2001
From: Nida Ghuman <nidaqg@gmail.com>
Date: Wed, 29 Jan 2025 17:33:18 -0500
Subject: [PATCH] Update example app for Tech challenges (#4192)

Update examples/playbook-rails-react-example to work better with tech
challenges.
---
 .../app/assets/stylesheets/application.scss                 | 5 +++++
 .../rails-react-example/app/javascript/components/App.tsx   | 2 ++
 examples/rails-react-example/app/views/pages/index.html.erb | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/examples/rails-react-example/app/assets/stylesheets/application.scss b/examples/rails-react-example/app/assets/stylesheets/application.scss
index eed2a2ac70..2bfe5c83a6 100644
--- a/examples/rails-react-example/app/assets/stylesheets/application.scss
+++ b/examples/rails-react-example/app/assets/stylesheets/application.scss
@@ -30,3 +30,8 @@ $extrabold:     700;
 
 @import "reset";
 @import "playbook";
+
+// To use Playbook tokens, you must import the relevant files as shown below
+// To view all available tokens, visit https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/tokens
+// To see the tokens visually, see our docs here: https://playbook.powerapp.cloud/visual_guidelines
+@import "tokens/spacing";
\ No newline at end of file
diff --git a/examples/rails-react-example/app/javascript/components/App.tsx b/examples/rails-react-example/app/javascript/components/App.tsx
index 6708849604..68313fa694 100644
--- a/examples/rails-react-example/app/javascript/components/App.tsx
+++ b/examples/rails-react-example/app/javascript/components/App.tsx
@@ -4,6 +4,8 @@ import { CircleIconButton, Title } from "playbook-ui"
 
 import WebpackerReact from 'webpacker-react'
 
+// This is the main component that will be rendered in the Rails view if you choose to use React
+// This example showcases how to import and use Playbook components
 const App = () => {
   return (
     <div>
diff --git a/examples/rails-react-example/app/views/pages/index.html.erb b/examples/rails-react-example/app/views/pages/index.html.erb
index 1933f155e1..da4bb44511 100644
--- a/examples/rails-react-example/app/views/pages/index.html.erb
+++ b/examples/rails-react-example/app/views/pages/index.html.erb
@@ -1,3 +1,9 @@
+<%# If choosing to use React components in Rails views, the following `react_component` helper is already set up. %>
+<%# Please use the components/App.tsx file to create your React components.%>
 <%= react_component("App") %>
 
+
+<%# If you want to use the Rails components only, you can use the following example: %>
+<%# Line 3 above can be deleted if choosing to use Rails components only. %>
+
 <%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>
\ No newline at end of file