[PLAY-1414] ViteJS Update

.github/workflows/github-actions-alpha-version.yml

@@ -68,7 +68,7 @@ jobs:
           npm publish --registry https://registry.npmjs.org playbook-ui-${{ env.new_npm_alpha_version }}.tgz --tag alpha
       - name: Version Up, Distribute and Publish (RubyGems)
         run: |
-          gem build playbook_ui.gemspec
+          bin/build_gem
           gem build lib/playbook_ui_docs.gemspec
           rm -rf dist/playbook-doc.js dist/playbook-rails.js dist/app  dist/pb_doc_helper.rb dist/menu.yml
           echo "${{ env.new_ruby_alpha_version }}"

Dockerfile

@@ -15,7 +15,6 @@ RUN --mount=type=cache,id=playbook-apt-cache,target=/var/cache/apt,sharing=locke
 RUN /pd_build/ruby_support/finalize.sh
 
 ENV BUNDLE_TO /usr/local/rvm/gems
-ENV NODE_OPTIONS "--openssl-legacy-provider --max-old-space-size=8192"
 ENV NVM_VERSION v0.33.8
 ENV NODE_VERSION v20.11.0
 ENV NPM_VERSION 6.14.10
@@ -76,9 +75,11 @@ COPY --from=rubydeps --link $BUNDLE_TO $BUNDLE_TO
 COPY --link --chown=9999:9999 playbook /home/app/src/playbook
 COPY --link --chown=9999:9999 playbook-website /home/app/src/playbook-website
 RUN --mount=id=playbook-yarncache,type=cache,target=/home/app/.cache/yarn,uid=9999,gid=9999,sharing=locked \
-    cd playbook; NODE_OPTIONS=$NODE_OPTIONS yarn release
+    cd playbook; NODE_ENV=production; yarn release
 RUN --mount=id=playbook-yarncache,type=cache,target=/home/app/.cache/yarn,uid=9999,gid=9999,sharing=locked \
-    cd playbook-website; NODE_OPTIONS=$NODE_OPTIONS yarn release
+    cd playbook-website; NODE_ENV=production; yarn release
+RUN --mount=id=playbook-yarncache,type=cache,target=/home/app/.cache/yarn,uid=9999,gid=9999,sharing=locked \
+    cd playbook-website; node /home/app/src/playbook-website/scripts/react-docgen.mjs --all-kits
 
 FROM base AS prod
 COPY --from=rubydeps --link $BUNDLE_TO $BUNDLE_TO

Procfile

@@ -1,3 +1,4 @@
+setup: cd playbook-website && node scripts/global-props.mjs
 website: cd playbook-website && ./bin/rails server -p 3000
-website-watcher: cd playbook-website && yarn watch
+website-watcher: cd playbook-website && bin/vite dev
 library-watcher: cd playbook && yarn watch

package.json

@@ -19,8 +19,8 @@
     "@typescript-eslint/parser": "4.33.0",
     "babel-eslint": "10.1.0",
     "eslint": "7.1.0",
-    "eslint-plugin-jsx-control-statements": "^3.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-jsx-control-statements": "2.2.1",
     "foreman": "3.0.1",
     "husky": "6.0.0",
     "lint-staged": "10.5.4"

playbook-website/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["react-docgen"]
+}

playbook-website/.gitignore

@@ -23,10 +23,16 @@ public/assets
 # Ignore master key for decrypting credentials and more.
 config/master.key
 
-public/packs
-public/packs-test
 node_modules
 yarn-error.log
 yarn-debug.log*
 .yarn-integrity
-.npmrc
+.npmrc
+
+# Vite Ruby
+/public/vite*
+/public/cache*
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+

playbook-website/Gemfile

@@ -10,7 +10,7 @@ gem "playbook_ui", path: "../playbook"
 gem "rails", "~> 7.0.8"
 gem "turbo-rails", "~> 1.4.0"
 gem "puma", "~> 6.3"
-gem "webpacker", "5.4.4"
+gem "vite_rails"
 # Make Compatible with Ruby 3.1.0 Upgrade
 gem "psych", "< 4"
 gem "bootsnap", ">= 1.1.0", require: false

playbook-website/Gemfile.lock

@@ -114,6 +114,7 @@ GEM
     crass (1.0.6)
     date (3.3.4)
     debug_inspector (1.1.0)
+    dry-cli (1.0.0)
     erubi (1.12.0)
     execjs (2.9.1)
     faker (3.2.0)
@@ -262,6 +263,13 @@ GEM
     view_component (2.55.0)
       activesupport (>= 5.0.0, < 8.0)
       method_source (~> 1.0)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.5.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -317,8 +325,8 @@ DEPENDENCIES
   sentry-ruby
   turbo-rails (~> 1.4.0)
   tzinfo-data
+  vite_rails
   web-console
-  webpacker (= 5.4.4)
   will_paginate
 
 RUBY VERSION

playbook-website/app/components/hp_solutions_component.html.erb

@@ -130,7 +130,7 @@
 								}) do %>
 									<%= pb_rails("image", props: {
 										alt: "React logo",
-										url: asset_pack_path("hp-react-solutions.svg")
+										url: vite_asset_path("images/hp-react-solutions.svg")
 									}) %>
 								<% end %>
 							<% end %>
@@ -166,7 +166,7 @@
 								}) do %>
 									<%= pb_rails("image", props: {
 										alt: "Rails logo",
-										url: asset_pack_path("hp-rails-solutions.svg")
+										url: vite_asset_path("images/hp-rails-solutions.svg")
 									}) %>
 								<% end %>
 							<% end %>
@@ -202,7 +202,7 @@
 								}) do %>
 									<%= pb_rails("image", props: {
 										alt: "swift logo",
-										url: asset_pack_path("hp-swift-solutions.svg")
+										url: vite_asset_path("images/hp-swift-solutions.svg")
 									}) %>
 								<% end %>
 							<% end %>
@@ -238,7 +238,7 @@
 								}) do %>
 									<%= pb_rails("image", props: {
 										alt: "HTML-CSS logo",
-										url: asset_pack_path("hp-htmlcss-solutions.svg")
+										url: vite_asset_path("images/hp-htmlcss-solutions.svg")
 									}) %>
 								<% end %>
 							<% end %>
@@ -275,4 +275,4 @@
 	<% end %>
 <% end %>
 
-<%= javascript_pack_tag 'imageComparsionSlider' %>
+<%= vite_javascript_tag 'imageComparsionSlider' %>

playbook-website/app/components/lg_hp_social_proof_component.html.erb

@@ -19,7 +19,7 @@
         }) do %>
             <%= pb_rails("background", props: {
                 background_color: "dark",
-                image_url: asset_pack_path("media/images/hp-social-proof-background.png"),
+                image_url: vite_asset_path("images/hp-social-proof-background.png"),
                 border_radius: "lg",
                 background_repeat: "no-repeat",
                 background_position: "center right",

playbook-website/app/components/md_hp_social_proof_component.html.erb

@@ -20,7 +20,7 @@
         }) do %>
             <%= pb_rails("background", props: {
                 background_color: "dark",
-                image_url: asset_pack_path("media/images/hp-social-proof-background.png"),
+                image_url: vite_asset_path("images/hp-social-proof-background.png"),
                 border_radius: "lg",
                 background_repeat: "no-repeat",
                 background_position: "center right",

playbook-website/app/components/playbook/pb_docs/kit_example.rb

@@ -48,8 +48,47 @@ def tsx_source
         read_kit_file("", "_#{example_key}.tsx")
       end
 
+      def available_props
+        target_kit_path = ::Playbook.kit_path(kit, "", "_#{example_key}.tsx")
+        if File.exist?(cached_kit_target)
+          puts "AvailableProps: Using cached JSON for #{target_kit_path}"
+          return cached_kit_json
+        end
+
+        exec_in_fork do
+          `node scripts/react-docgen.mjs #{target_kit_path}`
+        end
+      end
+
     private
 
+      def exec_in_fork
+        read, write = IO.pipe
+
+        pid = fork do
+          read.close
+          result = yield
+          write.write(result)
+          write.close
+          exit!(0)
+        end
+
+        write.close
+        result = read.read
+        read.close
+        Process.wait(pid)
+
+        result
+      end
+
+      def cached_kit_json
+        File.read(cached_kit_target)
+      end
+
+      def cached_kit_target
+        Rails.root.join("public", "cache", "playbook", "_#{example_key}.json")
+      end
+
       def sanitize_code(stringified_code)
         stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
                                            .gsub('"../../"', '"playbook-ui"')

playbook-website/app/controllers/pages_controller.rb

@@ -5,6 +5,8 @@
 require "will_paginate/array"
 
 class PagesController < ApplicationController
+  include ::ViteRails::TagHelpers
+
   before_action :set_js, only: %i[visual_guidelines]
   before_action :set_kit, only: %i[kit_show_rails kit_show_react kit_show_swift]
   before_action :ensure_kit_type_exists, only: %i[kit_show_rails kit_show_react kit_show_swift]
@@ -19,7 +21,7 @@ def application_beta
     @kit = params[:name]
     @params = params
     @examples = pb_doc_kit_examples(@kit, @type)
-    @css = view_context.asset_pack_url("application.css")
+    @css = view_context.vite_asset_path("site_styles/main.scss")
 
     # first example from each kit
     examples = @examples.map do |example|

playbook-website/app/helpers/application_helper.rb

@@ -3,8 +3,7 @@
 require "pb_doc_helper"
 
 module ApplicationHelper
-  include ::Webpacker::React::Helpers
-  include ::Webpacker::Helper
+  include ::ViteRails::TagHelpers
   include ::Playbook::PbFormsHelper
   include ::Playbook::PbKitHelper
   include ::PlaybookWebsite::Markdown::Helper

playbook-website/app/javascript/components/AvailableProps/index.tsx

@@ -3,32 +3,26 @@ import { Card, Nav, SectionSeparator, NavItem } from 'playbook-ui'
 import GlobalProps from './globalProps'
 import KitProps from './kitProps'
 
-const reactDocgen = require('react-docgen')
-
-const AvailableProps = ({ source, darkMode }) => {
-  const globalProps = ['aria', 'className', 'data', 'dark', 'id']
-  let showKitPropsTable = true, filteredProps = []
-
-  try {
-    const documentation = reactDocgen.parse(source)[0]
-    filteredProps = Object.entries(documentation.props).filter(([key, value]) => !globalProps.includes(key))
-  } catch (e) {
-    showKitPropsTable = false
-  }
+type AvailablePropsType = {
+  availableProps: any,
+  darkMode: boolean
+}
 
-  const [showKitTab, setShowKitTab] = useState(showKitPropsTable)
+const AvailableProps = ({ availableProps, darkMode }: AvailablePropsType) => {
+  const props = JSON.parse(availableProps)
+  const [showKitTab, setShowKitTab] = useState(true)
 
   return (
     <>
       <Card padding="none" dark={darkMode}>
         <Card.Body padding="sm">
           <Nav orientation="horizontal" variant="subtle" dark={darkMode}>
-            {showKitPropsTable && <NavItem text="Kit Props" active={showKitTab} onClick={() => setShowKitTab(true)} cursor="pointer" dark={darkMode}/>}
-            <NavItem text="Global Props" active={!showKitTab || !showKitPropsTable} onClick={() => setShowKitTab(false)} cursor="pointer" dark={darkMode} />
+            <NavItem text="Kit Props" active={showKitTab} onClick={() => setShowKitTab(true)} cursor="pointer" dark={darkMode}/>
+            <NavItem text="Global Props" active={!showKitTab} onClick={() => setShowKitTab(false)} cursor="pointer" dark={darkMode} />
           </Nav>
         </Card.Body>
         <SectionSeparator  dark={darkMode} />
-        {showKitTab && <KitProps kitPropsValues={filteredProps} darkMode={darkMode} />}
+        {showKitTab && <KitProps kitPropsValues={props} darkMode={darkMode} />}
         {!showKitTab && <GlobalProps darkMode={darkMode}/>}
       </Card>
     </>

playbook-website/app/javascript/components/AvailableProps/kitProps.tsx

@@ -1,7 +1,39 @@
 import React from 'react'
 import { Body, Card, Table, Title } from 'playbook-ui'
 
-const KitProps = ({ kitPropsValues, darkMode }) => {
+type KitPropsType = {
+  kitPropsValues: {[key: string]: any},
+  darkMode: boolean
+}
+
+const KitProps = ({ kitPropsValues, darkMode }: KitPropsType) => {
+  const getTypeName = (typeName: string) => {
+    if (typeName.indexOf('{') !== -1) {
+      return 'object'
+    }
+    if (typeName.indexOf('|') !== -1) {
+      return 'union'
+    }
+    if (typeName.indexOf('=>') !== -1) {
+      return 'function'
+    }
+    return typeName
+  }
+
+  const getTypeValue = (val: any) => {
+    const type = val.type
+    if (type.value) {
+      if (type.value.length > 2) {
+        return type.value.map((item: any) => item.value).join(' | ')
+      } else {
+        return val.type.value[1].value
+      }
+    } else {
+      if (type.name === 'string') return ''
+      return val.type.name
+    }
+  }
+
   return (
     <>
       <Card.Body
@@ -22,7 +54,7 @@ const KitProps = ({ kitPropsValues, darkMode }) => {
             </tr>
           </thead>
           <tbody>
-            {kitPropsValues.map(([propName, propsValue]) => (
+            {Object.entries(kitPropsValues).map(([propName, propsValue]) => (
               <>
                 <tr>
                   <td>
@@ -45,16 +77,13 @@ const KitProps = ({ kitPropsValues, darkMode }) => {
                           className="kearning"
                           dark={darkMode}
                       >
-                        {
-                          propsValue.flowType.name === 'signature' ? propsValue.flowType.type : propsValue.flowType.name
-                        }
+                        {getTypeName(propsValue.type.name)}
                       </Body>
                     </Card>
                   </td>
                   <td>
                     {
-                      // eslint-disable-next-line jsx-control-statements/jsx-use-if-tag
-                      propsValue.flowType.raw ? (
+                      propsValue.type.name ? (
                         <Card
                             background={darkMode ? 'dark' : 'light'}
                             borderNone
@@ -68,7 +97,7 @@ const KitProps = ({ kitPropsValues, darkMode }) => {
                               className="kearning"
                               dark={darkMode}
                           >
-                            {propsValue.flowType.name === 'union' && propsValue.flowType.raw}
+                           {getTypeValue(propsValue)}
                           </Body>
                         </Card>
                         ) : null

playbook-website/app/javascript/components/Error/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Caption, Icon, Title } from 'playbook-ui';
+import styles from './styles.module.scss';
+
+const Error = () => {
+  return (
+    <div className={styles.error}>
+      <Icon className={styles.icon} icon="warning" size="3x" />
+      <Title text="404" size={1} />
+      <Caption>Page not found</Caption>
+    </div>
+  );
+}
+
+export default Error;