App-studio NPM

App-Studio

App-Studio is a powerful React-based library designed to simplify the process of building responsive, interactive, and visually consistent web applications. It provides CSS design props for layout, spacing, sizing, shadows, event management, and theming.

Features

🌈 Add styled props to your application
📦 A set of simple and powerful React components
🌍 Internationalization support for dozens of languages
🎨 Powerful theme customization in every detail

2. Installation

To install App-Studio, run the following command:

npm install app-studio  --save

3. Core Components

Element

The Element component is the base for all other components. It handles responsiveness, shadows, margins, padding, and more.

Key Features

Sets both width and height with the size prop.
Defines styles for different CSS events with the on prop.
Defines responsive styles for different media queries with the media prop.
Applies shadow effects with the shadow prop.

Usage

<Element backgroundColor="color.blue" padding={10}>
  This is an element
</Element>

View

The View component extends the basic div HTML element. It's a generic container used to create various layouts.

Key Features

Provides a flexible way to structure content.
Supports all Element props.

Usage

<View backgroundColor="color.red" color="color.white" padding={20}>
  This is a view
</View>

Text

The Text component extends the basic div HTML element for rendering text content.

Key Features

Provides text-specific styling options.
Supports all Element props.

Usage

<Text color="color.blue">This is a text</Text>

Form

The Form component extends the basic form HTML element and provides nested Form.Button and Form.Input components.

Key Features

Simplifies form creation and management.
Supports all Element props.

Usage

<Form>
  <Form.Input placeholder="Enter your name" />
  <Form.Button>Submit</Form.Button>
</Form>

Image

The Image component extends the basic img HTML element for displaying images.

Key Features

Supports responsive image loading with media.
Applies shadow effects with shadow.
Handles events with on.

Usage

<Image src="url_to_image" alt="description" />

4. Responsive Design

App-Studio offers two primary methods for implementing responsive design: the media prop and the useResponsive hook.

Media Prop

The media prop allows you to specify different styles for various devices or screen sizes without causing component re-renders.

Example

<View size={100} 
  media={{
  mobile: { backgroundColor: 'color.green' },
  tablet: { backgroundColor: 'color.yellow' },
  xl: { backgroundColor: 'color.blue' },
  }}  
/>

useResponsive Hook

The useResponsive hook provides information about the current screen size and device type based on defined breakpoints and devices.

Example

const { screen, on } = useResponsive();

return (
  <View size={100} backgroundColor={responsive[screen]}>
  {screen} - mobile: {on('mobile') ? 'yes' : 'no'}
  </View>
);

To use these responsive features, wrap your app with ResponsiveProvider:

<ResponsiveProvider 
  breakpoints={{
  xs: 0,
  sm: 340,
  md: 560,
  lg: 1080,
  xl: 1300,
  }}
  devices={{  
  mobile: ['xs', 'sm'],
  tablet: ['md', 'lg'],
  desktop: ['lg', 'xl']
  }}
>
  <App />
</ResponsiveProvider>

5. Event Management

App-Studio provides an intuitive way to manage CSS events through the on prop. This feature allows you to style elements based on various interactive states.

Example

<View 
  backgroundColor="grey" 
  padding={20}
  on={{ hover: { backgroundColor: 'blue.100' } }}
>
  Hover over me
</View>

Supported events include hover, active, focus, and disabled.

6. Theming

App-Studio's theming system allows you to maintain a consistent look across your application using the ThemeProvider component.

Setting up the Theme

const theme = {
  main: { primary: '#fff7ed' },
  components: { button: { background: '#fff7ed' } }
};

const colors = {
  main: { blue: '#94a3b8' },
  palette: {
  blueGray: {
    50: '#f8fafc',
    // ... other shades
    900: '#0f172a'
  }
  }
};

Using ThemeProvider

<ThemeProvider theme={theme} colors={colors}>
  <App />
</ThemeProvider>

Applying Theme in Components

<View backgroundColor="color.blue">
  <Text color="theme.primary">Hello</Text>
  <Button backgroundColor="theme.button.background">Click me</Button>
</View>

7. Custom Hooks

useMount

The useMount hook executes logic when a component first mounts.

Usage

import { useMount } from '@your-org/app-studio';

const MyComponent = () => {
  useMount(() => {
  console.log('MyComponent mounted');
  });

  return <div>MyComponent</div>;
};

8. Design Props

App-Studio provides additional props to better manage design integration in CSS. These props offer more control over the styling of components, including layout, spacing, and sizing.

Example

<View 
  backgroundColor="theme.primary" 
  padding={20}
  margin={10}
  width={200}
  height={100}
>
  I am a View component with custom styling
</View>

Shadow Prop

The shadow prop is used to manage shadows in CSS. It takes a number or a string as a value, which defines the shadow effect to apply to the component.

<View 
  backgroundColor="theme.primary" 
  padding={20}
  shadow={6}
>
  I have a shadow
</View>

9. Animation

App-Studio provides a powerful animation system through the Animation object. Animations can be applied to any Element or its derivatives using the animate prop.

Usage

// Basic animation
<View 
  animate={Animation.fadeIn({
    duration: '1s',
    timingFunction: 'ease',
    iterationCount: '1'
  })}
/>

// Animation sequence
const sequence = [
  {
    from: { opacity: 0, transform: 'translateY(-100px)' },
    to: { opacity: 1, transform: 'translateY(0)' },
    duration: '2s',
    timingFunction: 'ease-in'
  },
  {
    from: { opacity: 1, transform: 'translateY(100px)' },
    to: { opacity: 0, transform: 'translateY(0)' },
    duration: '2s',
    timingFunction: 'ease-out'
  }
];

<View animate={sequence} />

// Animation on hover
<View
  on={{
    hover: {
      animate: Animation.rotate({ duration: '1s', timingFunction: 'ease' })
    }
  }}
/>

Available Animations

All animations are available through the Animation object:

Animation.fadeIn()
Animation.fadeOut()
Animation.bounce()
Animation.rotate()
Animation.pulse()
And many more...

Basic Usage

To apply an animation to a component, use the animate prop with an animation object:

import { View, Animation } from 'app-studio';

function Example() {
  return (
    <View
      animate={Animation.fadeIn()} // Fades in the view
      backgroundColor="theme.primary"
      padding={20}
    >
      This view will fade in
    </View>
  );
}

Available Animations

App-Studio comes with a set of pre-defined animations that you can use out of the box:

Transition Animations

fadeIn / fadeOut
slideInLeft / slideInRight / slideInUp / slideInDown
zoomIn / zoomOut

Transform Animations

rotate
scale
translate

Effect Animations

bounce
pulse
flash
shake
swing
rubberBand
wobble
flip
heartBeat
rollIn / rollOut
lightSpeedIn / lightSpeedOut
hinge
jackInTheBox

Each animation function accepts parameters to customize the duration, timing function, and other properties.

Animation Properties

Each animation function accepts an object with the following properties:

duration: Length of the animation (e.g., '1s', '500ms')
timingFunction: CSS timing function (e.g., 'ease', 'linear', 'ease-in-out')
iterationCount: Number of times to play the animation (number or 'infinite') // e.g., '1', 'infinite'

10. Advanced Usage

Here's an advanced example showcasing various features of App-Studio, including animations:

import { ThemeProvider, ResponsiveProvider, View, Span, Text, Button, Animation } from 'app-studio';

const theme = {
  main: { primary: '#fff7ed' },
  components: { button: { background: '#fff7ed' } }
};

const colors = {
  main: { blue: '#94a3b8' },
  palette: { blueGray: { 500: '#64748b' } }
};

function Example() {
  return (
    <ResponsiveProvider>
      <ThemeProvider theme={theme} colors={colors}>
        <Span
          animate={Animation.fadeIn({duration: '1s',timingFunction:'ease-out'})}
          backgroundColor="color.blue"
          padding={10}
          media={{
            mobile: {
              padding: 20
            }
          }}
        >
          Base element
        </Span>
        <View 
          animate={Animation.slideInRight()}
          backgroundColor="theme.primary" 
          margin={10}
          width={200}
          on={{ hover: { backgroundColor: 'color.blueGray.500' } }}
        >
          Hover to change color
        </View>
        <Button 
          animate={Animation.pulse({timingFunction:'infinite'})}
          backgroundColor="theme.button.background"
        >
          Click here
        </Button>
        <Text 
          animate={Animation.typewriter('Hello', 100)}
          color="theme.primary"
        />
      </ThemeProvider>
    </ResponsiveProvider>
  );
}