From f0a9626d20fdc3c047a269ab8a88e48ec9de41e0 Mon Sep 17 00:00:00 2001 From: Sebastian-ubs Date: Tue, 11 Jun 2024 11:49:56 +0200 Subject: [PATCH] additions and improvements to preview app --- .../src/preview/app.component.tsx | 24 ++- .../preview/components/basics.component.tsx | 66 ++++++- .../components/compositions.component.tsx | 11 +- .../preview/components/examples.component.tsx | 11 +- .../preview/components/guide.component.tsx | 167 ++++++++++++++++++ .../src/preview/direction-toggle.tsx | 25 +++ .../src/preview/theme-toggle.component.tsx | 26 ++- 7 files changed, 301 insertions(+), 29 deletions(-) create mode 100644 lib/platform-bible-react/src/preview/components/guide.component.tsx create mode 100644 lib/platform-bible-react/src/preview/direction-toggle.tsx diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx index 0c80748d47..caaf806dd8 100644 --- 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('ltr'); + return ( {/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */}
- +
+ + +

platform-bible-react Preview

Edit lib/platform-bible-react/src/preview/components/... and save to see updates

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%)

- + Basic Components Composition Components Example Layouts Playground + Guide - + - + - + + + +
diff --git a/lib/platform-bible-react/src/preview/components/basics.component.tsx b/lib/platform-bible-react/src/preview/components/basics.component.tsx index 232909c105..35c256d6cd 100644 --- a/lib/platform-bible-react/src/preview/components/basics.component.tsx +++ b/lib/platform-bible-react/src/preview/components/basics.component.tsx @@ -30,6 +30,7 @@ import { VerticalTabsList, VerticalTabsTrigger, } from '../..'; +import { HasDirection } from '../direction-toggle'; const invoices = [ { @@ -52,10 +53,10 @@ const invoices = [ }, ]; -function Basics() { +function Basics({ direction }: HasDirection) { return (
- + Button Input @@ -65,14 +66,48 @@ function Basics() { + Wrapped
{/* eslint-disable-next-line no-alert */} + + + + + +
-
- {/* eslint-disable-next-line no-alert */} - alert('Hello World')}>Shadcn Button -
+ Shadcn + + + + + + + + + + + +
variant + {/* eslint-disable-next-line no-alert */} + alert('Hello World')}>Shadcn Button + default + destructive + outline + secondary + ghost + link +
size + default: + AAA + icon: + AAA + sm: + AAA + lg: + AAA +
@@ -129,6 +164,7 @@ function Basics() { +

Note: the dropdown has a bad visibility in dark mode right now

Open @@ -147,7 +183,7 @@ function Basics() { - + @@ -160,7 +196,7 @@ function Basics() { {/* intentionally left out 3 to see the effect */}
- + @@ -170,7 +206,19 @@ function Basics() { Tab 4 Tab 1 Content - Tab 2 Content + +
+ Tab 2 Content: Another set of vertical tabs without a default value + + + Tab 2-1 + Tab 2-2 + + Tab 2-1 Content + Tab 2-2 Content + +
+ Tab 3 Content Tab 4 Content diff --git a/lib/platform-bible-react/src/preview/components/compositions.component.tsx b/lib/platform-bible-react/src/preview/components/compositions.component.tsx index fe463ea5da..8f300d5f14 100644 --- 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,6 +10,7 @@ import { VerticalTabsList, VerticalTabsTrigger, } from '../..'; +import { HasDirection } from '../direction-toggle'; const defaultScrRef: ScriptureReference = { bookNum: 1, @@ -17,11 +18,11 @@ const defaultScrRef: ScriptureReference = { verseNum: 1, }; -function Compositions() { +function Compositions({ direction }: HasDirection) { const [scrRef, setScrRef] = useState(defaultScrRef); return ( - + Search Bar Book Chapter Control @@ -34,9 +35,7 @@ function Compositions() { -
- -
+
{JSON.stringify(scrRef)}
 diff --git a/lib/platform-bible-react/src/preview/components/examples.component.tsx b/lib/platform-bible-react/src/preview/components/examples.component.tsx index 5ac305dc16..c324694e39 100644 --- 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,6 +8,7 @@ import { VerticalTabsList, VerticalTabsTrigger, } from '../..'; +import { HasDirection } from '../direction-toggle'; const defaultScrRef: ScriptureReference = { bookNum: 1, @@ -15,11 +16,11 @@ const defaultScrRef: ScriptureReference = { verseNum: 1, }; -function Example() { +function Examples({ direction }: HasDirection) { const [scrRef, setScrRef] = useState(defaultScrRef); return ( - + Window or Tab Settings (n/a) @@ -31,7 +32,7 @@ function Example() {
-
+
@@ -74,4 +75,4 @@ function Example() { ); } -export default Example; +export default Examples; diff --git a/lib/platform-bible-react/src/preview/components/guide.component.tsx b/lib/platform-bible-react/src/preview/components/guide.component.tsx new file mode 100644 index 0000000000..721b303dad --- /dev/null +++ b/lib/platform-bible-react/src/preview/components/guide.component.tsx @@ -0,0 +1,167 @@ +import { + VerticalTabs, + VerticalTabsContent, + VerticalTabsList, + VerticalTabsTrigger, +} from '@/components/shadcn-ui/tabs-vertical'; + +import { Dispatch, SetStateAction } from 'react'; +import { History } from 'lucide-react'; +import { Button } from '@/components/shadcn-ui/button'; +import { Input } from '@/components/shadcn-ui/input'; +import { DirToggle, Direction, HasDirection } from '../direction-toggle'; +import { ThemeButton } from '../theme-toggle.component'; + +function Guide({ + direction, + setDirection, +}: HasDirection & { setDirection: Dispatch> }) { + return ( +
+

This section allows you too look up and learn about some concepts

+ + + Direction + Theming + + + +

+ Direction is passed to the tabs using dir='ltr' or{' '} + dir='rtl' +

+

+ You can easily try out your component / layout using the direction toggle in the upper + right corner. +

+
+ Try it: change direction to + +
+ +
+

+ One of the things to keep in mind is to use logical margin/padding definitions instead + of 'left' or 'right'. See{' '} + + https://tailwindcss.com/docs/margin#using-logical-properties + +

+ + + + + + + + + + + + + + + + + + + +
Bad example: +
+ + + +
+
Bad example: +
+ + + +
+
Good example: +
+ + + +
+
Good example: +
+ + + +
+
+

Another bad example

+
+
+ + +
+
+
+
+ + +
+
+ + +

By default we are sticking to use the existing shadcn styles.

+

+ The components we install from shadcn already come with these styles. That means have a + look which properties the shadcn components expect (so that they will set their style + themselves) and use them accordingly. +

+
+ Try it: change theme to + +
+

+ Shadcn already provides theming, defining the current theme values in{' '} + styling.css. You can easily test if your component adheres to the concept + (and so can be themed) by using the dark mode toggle (upper right corner). +

+ + + + + + + + + + + +
+ Bad example
manual styles, unable to be themed
+ 		+ +
+ Good example +
theme-able by using the default styles
+ 		+ +
+ + +
+ ); +} +export default Guide; diff --git a/lib/platform-bible-react/src/preview/direction-toggle.tsx b/lib/platform-bible-react/src/preview/direction-toggle.tsx new file mode 100644 index 0000000000..457b016fdf --- /dev/null +++ b/lib/platform-bible-react/src/preview/direction-toggle.tsx @@ -0,0 +1,25 @@ +import React, { Dispatch, SetStateAction } from 'react'; +import { Button, ButtonProps } from '..'; + +export type Direction = 'rtl' | 'ltr'; +export type HasDirection = { direction: Direction }; + +export const DirToggle = React.forwardRef< + HTMLButtonElement, + ButtonProps & { direction: Direction; setDirection: Dispatch> } +>(({ className, direction, setDirection, ...props }) => { + const oppositeDirection = direction === 'rtl' ? 'ltr' : 'rtl'; + return ( + // eslint-disable-next-line no-alert + + ); +}); diff --git a/lib/platform-bible-react/src/preview/theme-toggle.component.tsx b/lib/platform-bible-react/src/preview/theme-toggle.component.tsx index 9ca607b736..5acd552d96 100644 --- a/lib/platform-bible-react/src/preview/theme-toggle.component.tsx +++ b/lib/platform-bible-react/src/preview/theme-toggle.component.tsx @@ -3,7 +3,8 @@ import React, { ComponentPropsWithoutRef } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { Moon, Sun } from 'lucide-react'; -import { Button } from '../components/shadcn-ui/button'; +import { Button } from '..'; +import { Button as ShadcnButton } from '../components/shadcn-ui/button'; import { DropdownMenu, DropdownMenuContent, @@ -25,11 +26,12 @@ const ThemeToggle = React.forwardRef<
- + {/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */} @@ -43,4 +45,22 @@ const ThemeToggle = React.forwardRef< ); }); +export const ThemeButton = React.forwardRef< + React.ElementRef, + ThemeToggleProps +>(({ className }, ref) => { + const { theme, setTheme } = useTheme(); + return ( +
+ +
+ ); +}); + export default ThemeToggle;