App Studio is a responsive and themeable framework to build cross platform applications
npm install app-studioApp-Studio is a React library designed to streamline the development of modern web applications. It provides a comprehensive suite of reusable components, hooks, utilities, and built-in systems for theming, responsive design, animation, and analytics. Built upon a flexible Element base component, App-Studio empowers developers to build high-quality, efficient, and scalable projects faster.
* Core Element Component: A versatile base for all UI elements, offering extensive styling via props, including responsive (media) and state-based (on) styles.
* Rich Component Library: Includes components for layout (View, Horizontal, Vertical, etc.), text (Text), images (Image, ImageBackground), forms (Form, Input, Button), and loading states (Skeleton).
* Powerful Styling: Utilizes a utility-prop system for direct styling, alongside support for standard CSS and the css prop.
* Integrated Theming: ThemeProvider and useTheme hook for managing light/dark modes, custom color palettes, and consistent design tokens.
* Responsive Design: ResponsiveProvider and useResponsive hook provide tools to adapt layouts and styles based on screen size and orientation.
* Animation System: A declarative Animation object for easily applying and sequencing CSS animations and transitions, including scroll-driven effects.
* Helpful Hooks: A collection of hooks for managing state, detecting interactions (useHover, useActive, useFocus), tracking viewport status (useInView, useOnScreen), handling events (useClickOutside, useKeyPress), and more.
* Analytics Integration: AnalyticsProvider to easily integrate event tracking.
* TypeScript Support: Fully typed for a better development experience.
---
Get started with App-Studio by installing it via npm and setting up the necessary providers in your application root.
Prerequisites
* Node.js (>= 14.x recommended)
* React (>= 17.x recommended)
Installation Steps
1. Install the package using npm or yarn:
``bash`
npm install --save app-studio
# or
yarn add app-studio
2. Wrap your application with the core providers. Typically, you'll need ThemeProvider, ResponsiveProvider, and potentially AnalyticsProvider and WindowSizeProvider.
`jsx
import React from 'react';
import {
ThemeProvider,
ResponsiveProvider,
AnalyticsProvider,
WindowSizeProvider
} from 'app-studio';
// Example analytics tracking function
const trackMyAppEvent = ({ type, target, ...event }) => {
console.log('Tracking Event:', { type, target, ...event });
// Replace with your actual analytics service call, e.g.,
// YourAnalyticsService.track(${type}_${target || 'element'}, event);
};
function App() {
return (
{/ Your application components go here /}
{/ e.g.,
);
}
export default App;
`
---
The Element component is the cornerstone of App-Studio. Most other components extend Element. It acts as a highly configurable primitive that renders an HTML tag (defaulting to div, configurable via the as prop) and accepts a wide range of props for styling.
* Direct Styling Props: Apply CSS styles directly (e.g., backgroundColor="blue", padding={10}).media
* Responsive Styles: Use the prop to define styles for specific breakpoints (e.g., media={{ mobile: { padding: 8 }, desktop: { padding: 16 } }}).on
* State-Based Styles: Use the prop to apply styles based on interaction states like hover, focus, or active (e.g., on={{ hover: { backgroundColor: 'lightgray' } }}).animate
* Animation: Integrates with the animation system via the prop.color="theme.primary"
* Theming: Automatically resolves theme colors (e.g., ).
App-Studio generates CSS utility classes based on the props you provide to Element and its derived components. This approach keeps styles co-located with the component logic and optimizes performance by reusing generated classes.
Use ThemeProvider to define global theme settings, including light/dark mode colors and custom theme tokens (e.g., primary, secondary). The useTheme hook provides access to the current theme mode (themeMode), theme configuration (theme), a function to switch modes (setThemeMode), and the essential getColor function to resolve color strings (like color-blue.500 or theme.primary) into actual CSS color values for the current mode.
You can also directly access specific theme mode colors using the light- or dark- prefix (e.g., light-white or dark-red.200), which will always use that specific theme mode's color regardless of the current theme setting.
Wrap your app in ResponsiveProvider (optionally configuring custom breakpoints and devices). Use the useResponsive hook to access the current breakpoint (screen), device type (currentDevice), orientation, and helper functions (on, is) to conditionally render components or apply styles. You can also use the media prop on Element components for responsive styling.
App-Studio includes a powerful animation system accessible via the Animation object. Apply pre-defined animations (Animation.fadeIn, Animation.slideInLeft, etc.) or create custom keyframe animations using the animate prop on any Element-based component. Animations can be sequenced, triggered by events (on prop), or applied responsively (media prop).
---
App-Studio provides a set of reusable components built on the Element base.
The fundamental building block. Renders as a specified HTML tag (as prop, defaults to div) and accepts extensive styling props.
Key Props:
| Prop | Type | Description |
| :-------- | :------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
| as | keyof JSX.IntrinsicElements | HTML element tag to render (default: 'div'). |style
| | CSSProperties | Standard React style object. |css
| | CSSProperties or string | Apply custom CSS styles or raw CSS strings. |media
| | Record | Defines styles for specific breakpoints or devices (e.g., mobile, tablet, lg). |on
| | Record | Defines styles for interaction states (e.g., hover, focus, active). Includes animate support here. |animate
| | AnimationProps or AnimationProps[] | Applies one or more animations from the Animation system. |size
| | number or string | Sets equal width and height. |shadow
| | boolean or number | Applies a pre-defined box-shadow effect (levels 0-9). |blend
| | boolean | Explicitly applies mix-blend-mode: difference. Default: Active if color is undefined. |...rest
| | CssProps | Accepts numerous CSS properties directly as props (e.g., backgroundColor, padding, fontSize, etc.). |
Example:
`jsx
import { Element } from 'app-studio';
function MyStyledElement() {
return (
padding={16}
backgroundColor="color-blue-500"
borderRadius={8}
color="color-white"
on={{ hover: { backgroundColor: 'color-blue-600' } }}
media={{ mobile: { padding: 8 } }}
>
This is a styled section.
);
}
`
In addition to global theming via ThemeProvider, the Element component offers granular control through the themeMode, colors, and theme props. When specified, these props locally override the context provided by ThemeProvider for this specific element instance and how its style props (like backgroundColor="theme.primary" or color="color-blue-500") resolve color values. themeMode forces 'light' or 'dark' mode resolution, colors provides a custom { main, palette } object, and theme supplies custom token mappings (e.g., { primary: 'color-purple-500' }). This allows creating distinctly styled sections or components without altering the global theme, useful for sidebars, specific UI states, or component variations.
Example (Local Theme Override):
`jsx
import { Element, Text } from 'app-studio';
function LocallyThemedSection() {
// Assume the global theme is currently 'light' mode.
// Define a local override theme and colors for this specific section
const localThemeOverride = { primary: 'color-orange-500', secondary: 'color-teal-300' };
const localDarkColorsOverride = {
main: {
white: '#EEE'
}
}; // Using defaults for demonstration
return (
marginVertical={10}
// Force dark mode and provide specific theme/color definitions JUST for this Element
themeMode="dark"
theme={localThemeOverride}
colors={localDarkColorsOverride}
// Styles below will resolve using the LOCAL dark theme override defined above:
backgroundColor="theme.secondary" // Resolves to 'color-teal-300' via localThemeOverride in dark mode
borderRadius={8}
>
This section forces dark mode with an orange primary, even if the app is light-
);
}
`
A versatile container component extending Element, primarily used for layout. Defaults to div.
Key Features:
* Inherits all Element props.
* Ideal for structuring UI and applying layout styles (Flexbox, Grid).
Variants:
* Horizontal: A View with display: flex, flexDirection: row.Vertical
* : A View with display: flex, flexDirection: column.Center
* : A View with display: flex, justifyContent: center, alignItems: center.HorizontalResponsive
* : Switches from row to column on mobile.VerticalResponsive
* : Switches from column to row on mobile.Scroll
* : Basic scrollable view (might need explicit overflow styles).SafeArea
* : A view with overflow: auto.Div
* , Span: Aliases for Element rendering div and span respectively.
Example:
`jsx
import { View, Horizontal, Text } from 'app-studio';
function MyLayout() {
return (
);
}
`
A component for rendering text content, extending Element. Defaults to span.
Key Features:
* Inherits all Element props.fontSize
* Applies typography styles easily (, fontWeight, lineHeight, textAlign, etc.).toUpperCase
* Supports prop.
Key Props (in addition to Element props):
| Prop | Type | Description |
| :------------ | :-------- | :---------------------------------- |
| as | string | HTML element tag (default: 'span'). |toUpperCase
| | boolean | Converts text content to uppercase. |...rest
| | CssProps | Typography props like fontSize, fontWeight, color, etc. |
Example:
`jsx
import { Text } from 'app-studio';
function MyText() {
return (
fontWeight="bold"
color="theme.primary"
textAlign="center"
toUpperCase
>
Important Heading
);
}
`
An optimized image component extending Element. Renders an tag.
Key Features:
* Inherits Element props relevant to images.src
* Supports standard , alt attributes.
* Potentially supports features like lazy loading or fallbacks (verify implementation specifics if needed).
Key Props (in addition to relevant Element props):
| Prop | Type | Description |
| :-------- | :------- | :---------------------------------------------- |
| src | string | Image source URL. |alt
| | string | Alternative text for accessibility. |...rest
| | CssProps | Styling props like width, height, borderRadius, objectFit. |
Variant:
* ImageBackground: Renders an Element (div) with the image applied as a backgroundImage (covers and no-repeat). Takes src prop.
Example:
`jsx
import { Image, ImageBackground, Text } from 'app-studio';
function MyImage() {
return (
<>
>
);
}
`
Simplifies form creation and handling. Extends Element and renders a