additions and improvements to preview app

paranext · Jun 11, 2024 · 2f2dd02 · 2f2dd02
1 parent 2299275
commit 2f2dd02
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 29 deletions.
diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -1,44 +1,56 @@
+import { useState } from 'react';
 import './app.component.css';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '..';
 import { ThemeProvider } from './theme-provider.component';
-import ThemeToggle from './theme-toggle.component';
+import { ThemeButton } from './theme-toggle.component';
 import Basics from './components/basics.component';
 import Compositions from './components/compositions.component';
 import Examples from './components/examples.component';
 import Playground from './components/playground.component';
+import { DirToggle, Direction } from './direction-toggle';
+import Guide from './components/guide.component';
 
 function App() {
+  const [direction, setDirection] = useState<Direction>('ltr');
+
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       {/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */}
       <div className="pr-twp pr-p-2 pr-font-sans">
-        <ThemeToggle className="pr-fixed pr-right-4 pr-top-4" />
+        <div className="pr-fixed pr-right-4 pr-top-4 pr-flex pr-gap-2">
+          <DirToggle direction={direction} setDirection={setDirection} />
+          <ThemeButton />
+        </div>
         <h1 className="pr-pb-4 pr-uppercase">platform-bible-react Preview</h1>
         <p>Edit lib/platform-bible-react/src/preview/components/... and save to see updates</p>
         <p>
           Styling variables are defined in styling.css, currently matching the Slate theme, whereas
           ui.shadcn.com uses the Zinc theme (with a deviating --ring 240 5% 64.9%)
         </p>
-        <Tabs defaultValue="Playground" className="pr-pt-4">
+        <Tabs defaultValue="Playground" className="pr-pt-4" dir={direction}>
           <TabsList>
             <TabsTrigger value="Basics">Basic Components</TabsTrigger>
             <TabsTrigger value="Compositions">Composition Components</TabsTrigger>
             <TabsTrigger value="Examples">Example Layouts</TabsTrigger>
             <TabsTrigger value="Playground">Playground</TabsTrigger>
+            <TabsTrigger value="Guide">Guide</TabsTrigger>
           </TabsList>
 
           <TabsContent value="Basics">
-            <Basics />
+            <Basics direction={direction} />
           </TabsContent>
           <TabsContent value="Compositions">
-            <Compositions />
+            <Compositions direction={direction} />
           </TabsContent>
           <TabsContent value="Examples">
-            <Examples />
+            <Examples direction={direction} />
           </TabsContent>
           <TabsContent value="Playground">
             <Playground />
           </TabsContent>
+          <TabsContent value="Guide">
+            <Guide direction={direction} setDirection={setDirection} />
+          </TabsContent>
         </Tabs>
       </div>
     </ThemeProvider>

diff --git a/lib/platform-bible-react/src/preview/components/basics.component.tsx b/lib/platform-bible-react/src/preview/components/basics.component.tsx
@@ -20,27 +20,63 @@ import {
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '../..';
+import { HasDirection } from '../direction-toggle';
 
-function Basics() {
+function Basics({ direction }: HasDirection) {
   return (
     <div>
-      <VerticalTabs>
+      <VerticalTabs defaultValue="Button" dir={direction}>
         <VerticalTabsList>
           <VerticalTabsTrigger value="Button">Button</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Input">Input</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Dropdown Menu">Dropdown Menu</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Tabs">Tabs</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Table">Table</VerticalTabsTrigger>
         </VerticalTabsList>
 
         <VerticalTabsContent value="Button">
+          Wrapped
           <div>
             {/* eslint-disable-next-line no-alert */}
             <Button onClick={() => alert('Hello World')}>Wrapped Button</Button>
+            <Button className="primary">primary</Button>
+            <Button className="secondary">secondary</Button>
+            <Button className="secondary">disabled</Button>
+            <Button className="video">video</Button>
+            <Button className="paratext">paratext</Button>
+            <Button className="paratext bright">paratext bright</Button>
           </div>
-          <div>
-            {/* eslint-disable-next-line no-alert */}
-            <ShadcnButton onClick={() => alert('Hello World')}>Shadcn Button</ShadcnButton>
-          </div>
+          Shadcn
+          <table>
+            <tbody>
+              <tr>
+                <td>variant</td>
+                <td>
+                  {/* eslint-disable-next-line no-alert */}
+                  <ShadcnButton onClick={() => alert('Hello World')}>Shadcn Button</ShadcnButton>
+                  <ShadcnButton variant="default">default</ShadcnButton>
+                  <ShadcnButton variant="destructive">destructive</ShadcnButton>
+                  <ShadcnButton variant="outline">outline</ShadcnButton>
+                  <ShadcnButton variant="secondary">secondary</ShadcnButton>
+                  <ShadcnButton variant="ghost">ghost</ShadcnButton>
+                  <ShadcnButton variant="link">link</ShadcnButton>
+                </td>
+              </tr>
+              <tr>
+                <td>size</td>
+                <td>
+                  <span className="pr-mx-2">default:</span>
+                  <ShadcnButton size="default">AAA</ShadcnButton>
+                  <span className="pr-mx-2">icon:</span>
+                  <ShadcnButton size="icon">AAA</ShadcnButton>
+                  <span className="pr-mx-2">sm:</span>
+                  <ShadcnButton size="sm">AAA</ShadcnButton>
+                  <span className="pr-mx-2">lg:</span>
+                  <ShadcnButton size="lg">AAA</ShadcnButton>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Input">
@@ -97,6 +133,7 @@ function Basics() {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Dropdown Menu">
+          <p>Note: the dropdown has a bad visibility in dark mode right now</p>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <ShadcnButton>Open</ShadcnButton>
@@ -115,7 +152,7 @@ function Basics() {
         </VerticalTabsContent>
 
         <VerticalTabsContent value="Tabs">
-          <Tabs defaultValue="2-youShouldNotSeeThis">
+          <Tabs defaultValue="2-youShouldNotSeeThis" dir={direction}>
             <TabsList>
               <TabsTrigger value="1">
                 <Button>non-text tab trigger</Button>
@@ -128,7 +165,7 @@ function Basics() {
             {/* intentionally left out 3 to see the effect */}
           </Tabs>
           <hr className="pr-my-4" />
-          <VerticalTabs defaultValue="2-youShouldNotSeeThis">
+          <VerticalTabs defaultValue="2-youShouldNotSeeThis" dir={direction}>
             <VerticalTabsList>
               <VerticalTabsTrigger value="1">
                 <Button>non-text tab trigger</Button>
@@ -138,11 +175,24 @@ function Basics() {
               <VerticalTabsTrigger value="4">Tab 4</VerticalTabsTrigger>
             </VerticalTabsList>
             <VerticalTabsContent value="1">Tab 1 Content</VerticalTabsContent>
-            <VerticalTabsContent value="2-youShouldNotSeeThis">Tab 2 Content</VerticalTabsContent>
+            <VerticalTabsContent value="2-youShouldNotSeeThis">
+              <div>
+                Tab 2 Content: Another set of vertical tabs without a default value
+                <VerticalTabs dir={direction}>
+                  <VerticalTabsList>
+                    <VerticalTabsTrigger value="1">Tab 2-1</VerticalTabsTrigger>
+                    <VerticalTabsTrigger value="2">Tab 2-2</VerticalTabsTrigger>
+                  </VerticalTabsList>
+                  <VerticalTabsContent value="1">Tab 2-1 Content</VerticalTabsContent>
+                  <VerticalTabsContent value="2">Tab 2-2 Content</VerticalTabsContent>
+                </VerticalTabs>
+              </div>
+            </VerticalTabsContent>
             <VerticalTabsContent value="3">Tab 3 Content</VerticalTabsContent>
             <VerticalTabsContent value="4">Tab 4 Content</VerticalTabsContent>
           </VerticalTabs>
         </VerticalTabsContent>
+        <VerticalTabsContent value="Table">TODO: add shadcn table here</VerticalTabsContent>
       </VerticalTabs>
     </div>
   );

diff --git a/lib/platform-bible-react/src/preview/components/compositions.component.tsx b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { ScriptureReference } from 'platform-bible-utils';
 import ThemeToggle from '@/preview/theme-toggle.component';
 import {
@@ -10,18 +10,19 @@ import {
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '../..';
+import { HasDirection } from '../direction-toggle';
 
 const defaultScrRef: ScriptureReference = {
   bookNum: 1,
   chapterNum: 1,
   verseNum: 1,
 };
 
-function Compositions() {
+function Compositions({ direction }: HasDirection) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
 
   return (
-    <VerticalTabs defaultValue="Book Chapter Control">
+    <VerticalTabs defaultValue="Book Chapter Control" dir={direction}>
       <VerticalTabsList>
         <VerticalTabsTrigger value="Search Bar">Search Bar</VerticalTabsTrigger>
         <VerticalTabsTrigger value="Book Chapter Control">Book Chapter Control</VerticalTabsTrigger>
@@ -34,9 +35,7 @@ function Compositions() {
 
       <VerticalTabsContent value="Book Chapter Control">
         <RefSelector scrRef={scrRef} handleSubmit={setScrRef} />
-        <div className="bcv-control-div">
-          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
-        </div>
+        <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
         <div>{JSON.stringify(scrRef)}</div>
       </VerticalTabsContent>
 

diff --git a/lib/platform-bible-react/src/preview/components/examples.component.tsx b/lib/platform-bible-react/src/preview/components/examples.component.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { ScriptureReference } from 'platform-bible-utils';
 import { Button } from '@/components/shadcn-ui/button';
 import {
@@ -8,18 +8,19 @@ import {
   VerticalTabsList,
   VerticalTabsTrigger,
 } from '../..';
+import { HasDirection } from '../direction-toggle';
 
 const defaultScrRef: ScriptureReference = {
   bookNum: 1,
   chapterNum: 1,
   verseNum: 1,
 };
 
-function Example() {
+function Examples({ direction }: HasDirection) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
 
   return (
-    <VerticalTabs defaultValue="Window">
+    <VerticalTabs defaultValue="Window" dir={direction}>
       <VerticalTabsList>
         <VerticalTabsTrigger value="Window">Window or Tab</VerticalTabsTrigger>
         <VerticalTabsTrigger value="Settings">Settings (n/a)</VerticalTabsTrigger>
@@ -31,7 +32,7 @@ function Example() {
             <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
           </div>
           <div className="pr-grow" />
-          <div className="bcv-control-div pr-flex pr-space-x-2">
+          <div className="bcv-control-div pr-flex pr-gap-2">
             <Button>&#x22ee;</Button>
             <Button>Help</Button>
             <Button>X</Button>
@@ -74,4 +75,4 @@ function Example() {
   );
 }
 
-export default Example;
+export default Examples;