@robust-ui/use-global-context v1.3.0

• Robust
  • Project Stats
• Installation
  • Usage
  • Features
  • Contributing
  • License
• Interfaces
  • Interface: DevData
    • Table of contents
    • Properties
  • Interface: DevTools
    • Table of contents
    • Properties
  • Interface: GlobalContextValues
    • Table of contents
    • Properties
  • Interface: ToolConfig
    • Table of contents
    • Properties
  • Interface: notification
    • Table of contents
    • Properties
  • Interface: userContext
    • Table of contents
    • Properties
• @robust-ui/use-global-context
  • Table of contents
    • Interfaces
    • Variables
    • Functions
  • Variables
    • GlobalContext
  • Functions
    • useGlobalContext

@robust-ui/use-global-context / Exports

Robust

Robust is a system for generating React components with real-time CSS injection. It is programmed in TypeScript, providing type safety and enhanced developer experience.

Project Stats

Installation

You can install Robust using either npm or pnpm. To do this, run one of the following commands:

Using npm:

npm install @robust-ui/core

Using pnpm:

pnpm install @robust-ui/core

using yarn:

yarn add @robust-ui/core

Alternatively, you can also download Robust from the GitHub repository and manually install the dependencies. The prepare script defined in the package.json file will automatically build all the files within the packages folder.

Usage

To use Robust, you need to make use of the Main component from the @robust-ui/nextjs-components repository. Note that the functionality has only been tested with Next.js and may not work in other React environments.

Here's an example of how to use Robust in a Next.js application:

import { Main, Header, Text, Icon, Flex } from "@robust-ui/nextjs-components";
import { SideMenu } from "@/components/drawer";
import type { AppProps } from "next/app";
import React from "react";

export default function App({ Component, pageProps }: AppProps) {
  const [open, setOpen] = React.useState(false);

  return (
    <Main color="white" fontFamily="Fira Code">
      <Header backgroundColor="gunMetal">
        <Flex>
          <Text fontWeight="700" fontSize="1.5rem">
            Nahuel
          </Text>
        </Flex>
        <Icon type="menu" onClick={() => setOpen(!open)} />
      </Header>
      <SideMenu open={open} setOpen={setOpen} />
      <Component {...pageProps} />
    </Main>
  );
}

In the above example, we import the necessary components from Robust and use them to create a basic application structure. The Main component sets the color and font family for the components. The Header component represents the application header, including a title and a menu icon that toggles the open state. The SideMenu component displays a side drawer with links and language options. Finally, we render the Component with the pageProps.

Please note that this usage example is specific to Next.js, and the functionality may not be tested or supported in other React environments. Make sure to customize the components and their properties based on your specific requirements.

Features

Robust includes the following features:

• Automatic responsiveness: The components are designed to adapt to different screen sizes and orientations.
• Quick language switching: Easily switch between different languages using the language options provided.
• Dark mode: The system supports a dark mode theme that can be enabled or disabled.
• Global states: Robust provides mechanisms for managing global states and sharing data between components.
• Real-time CSS injection: The system injects CSS in real time, allowing for dynamic styling and theming.
• TypeScript support: Robust is programmed in TypeScript, providing type safety and enhanced developer experience.
• Customizable components: The components can be customized using various properties to suit your specific requirements.
• Easy to use: Robust is designed to be easy to use and integrate with existing React applications.
• Extensible: The system can be extended with additional components and functionality as needed.
• Well-documented: The codebase is well-documented, making it easy to understand and contribute to.
• Active development: Robust is actively developed and maintained, with regular updates and improvements.

Contributing

Contributions to Robust are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.

License

Robust is released under the MIT License.

Interfaces

@robust-ui/use-global-context / Exports / DevData

Interface: DevData

Interface representing the development data.

Table of contents

Properties

• commands
• cssReset
• currentBreakpoint
• currentGlobalLanguage
• eventLogs
• globalState
• isBrowser
• isDarkModeActive
• isProviderActive
• isServer
• mediaBreakpoints
• pathname
• selectors
• theme

Properties

commands

• commands: Record\<string, string | CommandFunction>

Defined in

types.ts:102

cssReset

• cssReset: string

Defined in

types.ts:113

currentBreakpoint

• currentBreakpoint: unknown

Defined in

types.ts:106

currentGlobalLanguage

• currentGlobalLanguage: "es-AR" | "es-ES" | "es-MX" | "pt-BR" | "pt-PT" | "zh-CN" | "zh-HK" | "zh-TW" | "en-GB" | "en-US" | "en" | "zh" | "ja" | "ko" | "ru" | "fr" | "de" | "pt" | "es" | "nl" | "it" | "tr" | "da" | "pl" | "cs" | "th" | "sv" | "hu" | "fi" | "vi" | "nb" | "el" | "bg" | "sk" | "he" | "ro" | "hr" | "uk" | "id" | "ms" | "hi" | "fil" | "ar" | "bn" | "fa" | "gu" | "ka" | "km" | "mr" | "mn" | "ne" | "pa" | "si" | "sw" | "ta" | "te" | "ur" | "uz" | "zu" | "lv" | "lt" | "sr" | "sl" | "et" | "is" | "ms_MY"

Defined in

types.ts:104

eventLogs

• Optional eventLogs: EventLogEntry[]

Defined in

types.ts:109

globalState

• globalState: Record\<string, unknown>

Defined in

types.ts:105

isBrowser

• isBrowser: false | HTMLElement

Defined in

types.ts:108

isDarkModeActive

• isDarkModeActive: boolean

Defined in

types.ts:110

isProviderActive

• isProviderActive: boolean

Defined in

types.ts:111

isServer

• isServer: boolean

Defined in

types.ts:112

mediaBreakpoints

• mediaBreakpoints: Record\<string, number>

Defined in

types.ts:103

pathname

• pathname: string

Defined in

types.ts:120

selectors

• selectors: Record\<string, unknown>

Defined in

types.ts:107

theme

• theme: Record\<string, { [key: string | number]: unknown; }>

Defined in

types.ts:114

@robust-ui/use-global-context / Exports / DevTools

Interface: DevTools

Represents a set of developer tools for managing the application state and behavior.

Table of contents

Properties

• changeLanguage
• getAppState
• removeNotificationState
• resetAppState
• resetNotificationState
• setAppState
• setNotificationState
• toggleDarkMode

Properties

changeLanguage

• changeLanguage: (language: "es-AR" | "es-ES" | "es-MX" | "pt-BR" | "pt-PT" | "zh-CN" | "zh-HK" | "zh-TW" | "en-GB" | "en-US" | "en" | "zh" | "ja" | "ko" | "ru" | "fr" | "de" | "pt" | "es" | "nl" | "it" | "tr" | "da" | "pl" | "cs" | "th" | "sv" | "hu" | "fi" | "vi" | "nb" | "el" | "bg" | "sk" | "he" | "ro" | "hr" | "uk" | "id" | "ms" | "hi" | "fil" | "ar" | "bn" | "fa" | "gu" | "ka" | "km" | "mr" | "mn" | "ne" | "pa" | "si" | "sw" | "ta" | "te" | "ur" | "uz" | "zu" | "lv" | "lt" | "sr" | "sl" | "et" | "is" | "ms_MY") => void

Changes the language of the application.

Param

The new language to set.

Type declaration

▸ (language): void

Changes the language of the application.

Parameters

Returns

void

Defined in

types.ts:67

getAppState

• getAppState: (isDev: boolean) => unknown

Retrieves the value of a specific key from the application state.

Param

Indicates whether the operation is performed in a development environment.

Type declaration

▸ (isDev): unknown

Retrieves the value of a specific key from the application state.

Parameters

Returns

unknown

The value associated with the specified key.

Defined in

types.ts:55

removeNotificationState

• removeNotificationState: (notificationId: string) => void

Removes a specific notification from the notification state.

Param

The ID of the notification to remove.

Type declaration

▸ (notificationId): void

Removes a specific notification from the notification state.

Parameters

Returns

void

Defined in

types.ts:90

resetAppState

• resetAppState: (isDev: boolean) => void

Resets the application state.

Param

Indicates whether the operation is performed in a development environment.

Type declaration

▸ (isDev): void

Resets the application state.

Parameters

Returns

void

Defined in

types.ts:61

resetNotificationState

• resetNotificationState: () => void

Resets the notification state of the application.

Type declaration

▸ (): void

Resets the notification state of the application.

Returns

void

Defined in

types.ts:84

setAppState

• setAppState: (key: string, value: unknown, isDev: boolean) => void

Sets the value of a specific key in the application state.

Param

The key of the state value to set.

Param

The value to set for the specified key.

Param

Indicates whether the operation is performed in a development environment.

Type declaration

▸ (key, value, isDev): void

Sets the value of a specific key in the application state.

Parameters

Returns

void

Defined in

types.ts:48

setNotificationState

• setNotificationState: (notification: notification) => void

Sets the notification state of the application.

Param

The notification object to set.

Type declaration

▸ (notification): void

Sets the notification state of the application.

Parameters

Returns

void

Defined in

types.ts:79

toggleDarkMode

• toggleDarkMode: (isDarkModeActive: boolean) => void

Toggles the dark mode of the application.

Param

Indicates whether the dark mode should be activated or deactivated.

Type declaration

▸ (isDarkModeActive): void

Toggles the dark mode of the application.

Parameters

Returns

void

Defined in

types.ts:73

@robust-ui/use-global-context / Exports / GlobalContextValues

Interface: GlobalContextValues

Represents the values of the global context.

Table of contents

Properties

• devData
• devTools
• notifications
• userContext

Properties

devData

• devData: DevData

Defined in

types.ts:160

devTools

• devTools: DevTools

Defined in

types.ts:159

notifications

• notifications: Record\<string, unknown>

Defined in

types.ts:157

userContext

• userContext: userContext

Defined in

types.ts:158

@robust-ui/use-global-context / Exports / ToolConfig

Interface: ToolConfig

Represents the configuration options for a tool.

Table of contents

Properties

• enableFeatureX
• enableFeatureY
• language
• maxRetryAttempts

Properties

enableFeatureX

• Optional enableFeatureX: boolean

Defined in

types.ts:33

enableFeatureY

• Optional enableFeatureY: boolean

Defined in

types.ts:34

language

• Optional language: string

Defined in

types.ts:32

maxRetryAttempts

• Optional maxRetryAttempts: number

Defined in

types.ts:35

@robust-ui/use-global-context / Exports / notification

Interface: notification

Represents a notification.

Table of contents

Properties

• altColor
• colorScheme
• colorSchemeRaw
• description
• duration
• id
• isClosable
• label
• onClose
• opacityColorScheme
• status
• variant

Properties

altColor

• Optional altColor: PartialOrNestedPartial\<boolean>

Defined in

types.ts:147

colorScheme

• Optional colorScheme: PartialOrNestedPartial\<"inherit" | "transparent" | "current" | "currentColor" | "black" | "white" | "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "rose" | "orange" | "teal" | "cyan" | "blueGray" | "redGray" | "gunMetal" | "frenchMauve" | "dracula" | "brightPink" | "raisinBlack" | "steelPink" | "mulberry" | "whiteAlpha50" | "whiteAlpha100" | "whiteAlpha200" | "whiteAlpha300" | "whiteAlpha400" | "whiteAlpha500" | "whiteAlpha600" | "whiteAlpha700" | "whiteAlpha800" | "whiteAlpha900" | "blackAlpha50" | "blackAlpha100" | "blackAlpha200" | "blackAlpha300" | "blackAlpha400" | "blackAlpha500" | "blackAlpha600" | "blackAlpha700" | "blackAlpha800" | "blackAlpha900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "redGray50" | "redGray100" | "redGray200" | "redGray300" | "redGray400" | "redGray500" | "redGray600" | "redGray700" | "redGray800" | "redGray900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "mulberry50" | "mulberry100" | "mulberry200" | "mulberry300" | "mulberry400" | "mulberry500" | "mulberry600" | "mulberry700" | "mulberry800" | "mulberry900">

Defined in

types.ts:138

colorSchemeRaw

• Optional colorSchemeRaw: PartialOrNestedPartial\<string>

Defined in

types.ts:143

description

• Optional description: PartialOrNestedPartial\<string>

Defined in

types.ts:146

duration

• Optional duration: number

Defined in

types.ts:149

id

• Optional id: string

Defined in

types.ts:150

isClosable

• Optional isClosable: PartialOrNestedPartial\<boolean>

Defined in

types.ts:144

label

• Optional label: PartialOrNestedPartial\<string>

Defined in

types.ts:148

onClose

• Optional onClose: PartialOrNestedPartial\<() => void>

Defined in

types.ts:145

opacityColorScheme

• Optional opacityColorScheme: PartialOrNestedPartial\<number>

Defined in

types.ts:142

status

• Optional status: PartialOrNestedPartial\<"default" | "info" | "warning" | "error" | "success">

Defined in

types.ts:139

variant

• Optional variant: PartialOrNestedPartial\<"ghost" | "solid" | "outline" | "link">

Defined in

types.ts:137

@robust-ui/use-global-context / Exports / userContext

Interface: userContext

Represents the user context.

Table of contents

Properties

• getAppState
• globalState
• resetAppState
• setAppState

Properties

getAppState

• getAppState: (isDev: boolean) => unknown

Type declaration

▸ (isDev): unknown

Parameters

Returns

unknown

Defined in

types.ts:128

globalState

• globalState: Record\<string, unknown>

Defined in

types.ts:130

resetAppState

• resetAppState: (isDev: boolean) => void

Type declaration

▸ (isDev): void

Parameters

Returns

void

Defined in

types.ts:129

setAppState

• setAppState: (key: string, value: unknown, isDev: boolean) => void

Type declaration

▸ (key, value, isDev): void

Parameters

Returns

void

Defined in

types.ts:127

@robust-ui/use-global-context / Exports

@robust-ui/use-global-context

Table of contents

Interfaces

• DevData
• DevTools
• GlobalContextValues
• ToolConfig
• notification
• userContext

Variables

• GlobalContext

Functions

• useGlobalContext

Variables

GlobalContext

• Const GlobalContext: Context\<GlobalContextValues>

The global context for the application.

Defined in

index.ts:9

Functions

useGlobalContext

▸ useGlobalContext\<T>(options?): GlobalContextValuesT

Custom hook to access the global context values.

Type parameters

Parameters

Returns

GlobalContextValuesT

• The value of the global context associated with the specified key.

Defined in

index.ts:21

▸ useGlobalContext\<T, K>(options?): GlobalContextValuesT

Retrieves a value from the global context based on the provided key and subKey.

Type parameters

Parameters

Returns

GlobalContextValuesT

The value from the global context.

Defined in

index.ts:34