dev: Hero component

packages/ui/src/components/Hero/Hero.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Hero } from './Hero';
+
+const meta = {
+  component: Hero,
+} satisfies Meta<typeof Hero>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {}
+};

packages/ui/src/components/Hero/Hero.tsx

@@ -0,0 +1,21 @@
+
+import { HeroProps, HeroProvider } from './data/HeroProvider';
+import { clsx, clmg } from '@do-ob/core';
+
+export function Hero(props: HeroProps) {
+
+  const { title, subtitle, className } = props;
+
+  return (
+    <HeroProvider {...props}>
+      <section
+        aria-label="Introduction"
+        className={clmg(clsx('flex w-full flex-col items-center justify-center', className))}>
+        <div>
+          <h1 className="text-center text-4xl font-bold">{title}</h1>
+          <p className="text-center text-lg">{subtitle}</p>
+        </div>
+      </section>
+    </HeroProvider>
+  );
+};

packages/ui/src/components/Hero/data/HeroProvider.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+
+/**
+ * Hero section props
+ */
+export interface HeroProps {
+  /**
+   * The title of the hero section
+   */
+  title?: string;
+  /**
+   * The subtitle of the hero section
+   */
+  subtitle?: string;
+
+  /**
+   * Custom class name
+   */
+  className?: string;
+}
+
+/**
+ * Hero context
+ */
+export const HeroContext = React.createContext<HeroProps>({});
+
+/**
+ * Hero provider
+ */
+export function HeroProvider({
+  children, ...props
+}: React.PropsWithChildren<HeroProps>) {
+  return (
+    <HeroContext.Provider value={props}>
+      {children}
+    </HeroContext.Provider>
+  );
+}

packages/ui/src/components/Navigation/NavigationExtended.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Navbar, NavbarContent, NavbarMenuToggle } from '@nextui-org/react';
+import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
 import type { NavigationProps } from './data/NavigationContext';
 import { NavigationPart_Brand } from './parts/NavigationPart_Brand';
@@ -10,6 +10,7 @@ import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
 import { NavigationProvider } from './data/NavigationProvider';
 import { twColors } from '@do-ob/ui/utility';
 import { NavigationPart_Menu } from './parts/NavigationPart_Menu';
+import { NavigationPart_MenuToggle } from './parts/NavigationPart_MenuToggle';
 
 export function NavigationExtended(props: NavigationProps) {
 
@@ -40,8 +41,8 @@ export function NavigationExtended(props: NavigationProps) {
           <div className="hidden max-w-64 p-2 md:block">
             <NavigationPart_Actions />
           </div>
-          <NavbarMenuToggle
-            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+          <NavigationPart_MenuToggle
+            isMenuOpen={isMenuOpen}
             className="md:hidden"
           />
         </NavbarContent>

packages/ui/src/components/Navigation/NavigationIsland.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Navbar, NavbarContent, NavbarMenuToggle } from '@nextui-org/react';
+import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
 
 import type { NavigationProps } from './data/NavigationContext';
@@ -11,6 +11,7 @@ import { NavigationPart_Links } from './parts/NavigationPart_Links';
 import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
 import { twColors } from '@do-ob/ui/utility';
 import { NavigationPart_Menu } from './parts/NavigationPart_Menu';
+import { NavigationPart_MenuToggle } from './parts/NavigationPart_MenuToggle';
 
 export function NavigationIsland(props: NavigationProps) {
 
@@ -43,9 +44,9 @@ export function NavigationIsland(props: NavigationProps) {
           <div className="hidden max-w-64 lg:block">
             <NavigationPart_Actions />
           </div>
-          <NavbarMenuToggle
-            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
-            className="lg:hidden"
+          <NavigationPart_MenuToggle
+            isMenuOpen={isMenuOpen}
+            className="md:hidden"
           />
         </NavbarContent>
 

packages/ui/src/components/Navigation/NavigationStandard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Navbar, NavbarContent, NavbarMenuToggle } from '@nextui-org/react';
+import { Navbar, NavbarContent } from '@nextui-org/react';
 import { clsx, clmg } from '@do-ob/core';
 import type { NavigationProps } from './data/NavigationContext';
 import { NavigationProvider } from './data/NavigationProvider';
@@ -10,6 +10,7 @@ import { NavigationPart_Links } from './parts/NavigationPart_Links';
 import { NavigationPart_Actions } from './parts/NavigationPart_Actions';
 import { twColors } from '@do-ob/ui/utility';
 import { NavigationPart_Menu } from './parts/NavigationPart_Menu';
+import { NavigationPart_MenuToggle } from './parts/NavigationPart_MenuToggle';
 
 export function NavigationStandard(props: NavigationProps) {
 
@@ -37,9 +38,9 @@ export function NavigationStandard(props: NavigationProps) {
           <div className="hidden max-w-64 lg:block">
             <NavigationPart_Actions />
           </div>
-          <NavbarMenuToggle
-            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
-            className="lg:hidden"
+          <NavigationPart_MenuToggle
+            isMenuOpen={isMenuOpen}
+            className="md:hidden"
           />
         </NavbarContent>
 

packages/ui/src/components/Navigation/parts/NavigationPart_MenuToggle.tsx

@@ -0,0 +1,14 @@
+import { NavbarMenuToggle } from "@nextui-org/react";
+
+export function NavigationPart_MenuToggle({
+  isMenuOpen = false,
+  className = '',
+}) {
+
+  return (
+    <NavbarMenuToggle
+      aria-label={isMenuOpen ? 'Close manu' : 'Open menu'}
+      className={className}
+    />
+  );
+}

packages/ui/src/locale.ts

@@ -0,0 +1,52 @@
+import { Locale, LocaleCode } from '@do-ob/ui/types';
+
+import {enUs} from './locale/en-us';
+
+const library: Record<LocaleCode, Locale> = {
+  'en-US': enUs,
+  'fr-FR': {},
+  'fr-CA': {},
+  'de-DE': {},
+  'en-GB': {},
+  'ja-JP': {},
+  'da-DK': {},
+  'nl-NL': {},
+  'fi-FI': {},
+  'it-IT': {},
+  'nb-NO': {},
+  'es-ES': {},
+  'sv-SE': {},
+  'pt-BR': {},
+  'zh-CN': {},
+  'zh-TW': {},
+  'ko-KR': {},
+  'bg-BG': {},
+  'hr-HR': {},
+  'cs-CZ': {},
+  'et-EE': {},
+  'hu-HU': {},
+  'lv-LV': {},
+  'lt-LT': {},
+  'pl-PL': {},
+  'ro-RO': {},
+  'ru-RU': {},
+  'sr-SP': {},
+  'sk-SK': {},
+  'sl-SI': {},
+  'tr-TR': {},
+  'uk-UA': {},
+  'ar-AE': {},
+  'ar-DZ': {},
+  'AR-EG': {},
+  'ar-SA': {},
+  'el-GR': {},
+  'he-IL': {},
+  'fa-AF': {},
+  'am-ET': {},
+  'hi-IN': {},
+  'th-TH': {}
+}
+
+export function localeLibrary(code: LocaleCode) {
+  return library[code]
+}

packages/ui/src/locale/en-us.ts

@@ -0,0 +1,7 @@
+import { Locale } from '@do-ob/ui/types';
+
+export const enUs: Locale = {
+  navigation_menu_open_aria_label: 'Open navigation menu',
+  navigation_menu_close_aria_label: 'Close navigation menu',
+  hero_aria_label: 'Hero section',
+};

packages/ui/src/types.ts

@@ -1,3 +1,5 @@
+export * from './types/locale';
+
 /**
  * Theme mode.
  */

packages/ui/src/types/locale.ts

@@ -0,0 +1,24 @@
+export type LocaleCode = 'fr-FR' | 'fr-CA' | 'de-DE' | 'en-US' | 'en-GB' | 'ja-JP' |
+  'da-DK' | 'nl-NL' | 'fi-FI' | 'it-IT' | 'nb-NO' | 'es-ES' | 
+  'sv-SE' | 'pt-BR' | 'zh-CN' | 'zh-TW' | 'ko-KR' | 'bg-BG' | 
+  'hr-HR' | 'cs-CZ' | 'et-EE' | 'hu-HU' | 'lv-LV' | 'lt-LT' | 
+  'pl-PL' | 'ro-RO' | 'ru-RU' | 'sr-SP' | 'sk-SK' | 'sl-SI' | 
+  'tr-TR' | 'uk-UA' | 'ar-AE' | 'ar-DZ' | 'AR-EG' | 'ar-SA' | 
+  'el-GR' | 'he-IL' | 'fa-AF' | 'am-ET' | 'hi-IN' | 'th-TH';
+
+export interface Locale {
+  /**
+   * The navigation menu open button aria label.
+   */
+  navigation_menu_open_aria_label?: string;
+
+  /**
+   * The navigation menu close button aria label.
+   */
+  navigation_menu_close_aria_label?: string;
+
+  /**
+   * Aria label for the Hero section.
+   */
+  hero_aria_label?: string;
+}