@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
462 lines (326 loc) • 10.5 kB
Markdown
# /purei
🌿 Source branch: [`release/0.2.0-alpha.0`](https://bitbucket.org/worktif/npm-purei/branch/release/0.2.0-alpha.0)
## Overview
Purei is a collection of React Material UI Components designed to enhance your user interface immediately. This library offers styled and interactive components that are ready to use in your React applications.
## Installation
```shell script
# Using npm
npm install /purei
# Using yarn
yarn add /purei
```
## Components
### List Components
#### AnimatedListItem
A styled list item with animated fade-in effect. The item starts with opacity 0 and slightly below its original position and transitions to opacity 1 and its original position on visibility.
```tsx
import { AnimatedListItem } from '@worktif/purei';
function MyList() {
return (
<ul>
<AnimatedListItem className="visible">List Item 1</AnimatedListItem>
<AnimatedListItem>List Item 2</AnimatedListItem>
</ul>
);
}
```
### Card Components
#### LayeredCard
A styled card component with layered effects that extends from Material-UI Paper component. Applies a box shadow for a subtle hover effect.
```tsx
import { LayeredCard } from '@worktif/purei';
function MyComponent() {
return (
<LayeredCard>
<h3>Card Content</h3>
<p>This card has a layered shadow effect that responds to hover.</p>
</LayeredCard>
);
}
```
#### InteractiveCard
An interactive card component that extends Card component with additional styling for hover effects.
```tsx
import { InteractiveCard } from '@worktif/purei';
function MyComponent() {
return (
<InteractiveCard>
<h3>Interactive Card</h3>
<p>Hover over me to see the interactive effect!</p>
</InteractiveCard>
);
}
```
#### ThreeDCard
Extends the Card component and adds 3D hover effect with box shadow and scale transformation.
```tsx
import { ThreeDCard } from '@worktif/purei';
function MyComponent() {
return (
<ThreeDCard>
<h3>3D Effect Card</h3>
<p>This card has a 3D effect on hover.</p>
</ThreeDCard>
);
}
```
#### LayeredShadowCard
A styled card component with layered shadow effect that inherits styles from Card component.
```tsx
import { LayeredShadowCard } from '@worktif/purei';
function MyComponent() {
return (
<LayeredShadowCard>
<h3>Layered Shadow Card</h3>
<p>This card has multiple shadow layers for depth.</p>
</LayeredShadowCard>
);
}
```
#### GradientCard
A card with gradient effects and smooth transitions on hover.
```tsx
import { GradientCard } from '@worktif/purei';
function MyComponent() {
return (
<GradientCard raised={true}>
<h3>Gradient Card</h3>
<p>A card with gradient effects.</p>
</GradientCard>
);
}
```
#### MotionCard
A card with blur effect and smooth animations.
```tsx
import { MotionCard } from '@worktif/purei';
function MyComponent() {
return (
<MotionCard>
<h3>Motion Card</h3>
<p>This card has blur and motion effects.</p>
</MotionCard>
);
}
```
#### CardProduct
A card specifically designed for product displays with custom styling.
```tsx
import { CardProduct } from '@worktif/purei';
import { Button, Typography } from '@mui/material';
function ProductDisplay() {
return (
<CardProduct
action={<Button variant="contained">View Details</Button>}
>
<Typography variant="h5">Product Name</Typography>
<Typography variant="body1">Product description goes here</Typography>
</CardProduct>
);
}
```
### Progress Indicators
#### BrandProgressIndicator
A custom styled CircularProgress component to show progress related to a brand.
```tsx
import { BrandProgressIndicator } from '@worktif/purei';
function LoadingComponent() {
return <BrandProgressIndicator />;
}
```
#### GradientProgress
A custom styled CircularProgress with a gradient background that rotates infinitely.
```tsx
import { GradientProgress } from '@worktif/purei';
function LoadingComponent() {
return <GradientProgress />;
}
```
#### CustomLinearLoader
A styled component that extends the LinearProgress component with custom appearance and animation.
```tsx
import { CustomLinearLoader } from '@worktif/purei';
function LoadingBar() {
return <CustomLinearLoader />;
}
```
#### CustomLinearDialogLoader
A styled wrapper component for the LinearProgress component featuring a gradient progress bar with a rounded border and smooth animation.
```tsx
import { CustomLinearDialogLoader } from '@worktif/purei';
function DialogLoader() {
return <CustomLinearDialogLoader />;
}
```
### Container Components
#### CustomContainer
A styled component based on the Container component that applies full width and removes default paddings.
```tsx
import { CustomContainer } from '@worktif/purei';
function MyPage() {
return (
<CustomContainer>
<h1>Full Width Container</h1>
<p>This container has no horizontal padding and is full width.</p>
</CustomContainer>
);
}
```
#### HeroContainer
A styled component for hero sections with centered alignment and gradient background.
```tsx
import { HeroContainer } from '@worktif/purei';
function HeroSection() {
return (
<HeroContainer>
<h1>Welcome to Our Site</h1>
<p>A beautiful hero section with gradient background.</p>
</HeroContainer>
);
}
```
### Background Components
#### DynamicBackground
A styled div element that can transition between different gradient backgrounds.
```tsx
import { DynamicBackground } from '@worktif/purei';
function TimeBasedBackground() {
const timeOfDay = new Date().getHours() < 12 ? 'morning' : 'evening';
return (
<DynamicBackground className={timeOfDay}>
<h1>Dynamic Background</h1>
<p>This background changes based on time of day.</p>
</DynamicBackground>
);
}
```
#### ParallaxSection
A styled div for creating a parallax section with background image and text content.
```tsx
import { ParallaxSection } from '@worktif/purei';
function ParallaxDemo() {
return (
<ParallaxSection>
<h2>Parallax Effect</h2>
<p>Scroll to see the parallax background effect.</p>
</ParallaxSection>
);
}
```
#### VideoBackground
A styled div element used as a video background with specific styling properties.
```tsx
import { VideoBackground } from '@worktif/purei';
function VideoBackgroundDemo() {
return (
<VideoBackground>
<video autoPlay muted loop>
<source src="/path/to/video.mp4" type="video/mp4" />
</video>
<h1>Video Background</h1>
<p>Content overlaid on a video background.</p>
</VideoBackground>
);
}
```
#### DynamicGradientBackground
A styled div element with a dynamic gradient background that shifts position continuously.
```tsx
import { DynamicGradientBackground } from '@worktif/purei';
function GradientBackgroundDemo() {
return (
<DynamicGradientBackground>
<h1>Dynamic Gradient</h1>
<p>This background has a shifting gradient effect.</p>
</DynamicGradientBackground>
);
}
```
### Effect Components
#### SectionTransition
A styled div element with transition effects for opacity and transform properties.
```tsx
import { SectionTransition } from '@worktif/purei';
import { useState, useEffect } from 'react';
function TransitionDemo() {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(true);
}, []);
return (
<SectionTransition className={isVisible ? 'visible' : 'hidden'}>
<h2>Transition Effect</h2>
<p>This section fades in with a transition effect.</p>
</SectionTransition>
);
}
```
#### HiddenContent
A styled div element used for displaying hidden content with transition effects.
```tsx
import { HiddenContent } from '@worktif/purei';
import { useState } from 'react';
function ExpandableContent() {
const [isActive, setIsActive] = useState(false);
return (
<div>
<button onClick={() => setIsActive(!isActive)}>
{isActive ? 'Hide Content' : 'Show Content'}
</button>
<HiddenContent className={isActive ? 'active' : ''}>
<p>This content is revealed when active.</p>
</HiddenContent>
</div>
);
}
```
#### GlowSphere
A styled div that creates a glowing sphere with pulsating animation.
```tsx
import { GlowSphere } from '@worktif/purei';
function GlowEffect() {
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<GlowSphere />
</div>
);
}
```
---
## Contribution
As an external npm package publisher, you need to follow instructions:
- Run CLI `npm login --scope=` and login to you account.
- While you have an undefined TLS error, run `npm config set registry https://registry.npmjs.org/`
- Complete your utils package enhancement.
- Create a pull request.
- Wait until your pull request will be approved.
- Merge your pull request to `main` branch.
- Make git checkout of `main` branch.
- Pull all the changes currently exist in `main` branch.
- Create a new branch by the next release template `releases/v[your.semantic.version-[pre+[meta]]]-next-release-description`
- Increase a semantic utils package version.
- Commit your version to the release branch.
- Push your crucial package version increase.
- Create a pull request.
- Wait until your pull request will be approved.
- Merge your pull request to `main` branch.
- Pull all the changes currently exist in `main` branch.
- Check you version release in `package.json` file.
- If your version is not increased: run `npm run publish:npm` to publish your changes.
- If your version has been increased: contact contributor by email `raman@worktif.com` to solve this issue.
If the utils package published successfully, you should see in the terminal:
```shell
+ /purei@[your.semantic.version-[pre+[meta]]]
✨ Done in 28.81s.
```
## License
This package is licensed under the Business Source License 1.1 (BUSL-1.1).
- Copyright (C) 2025 Raman Marozau, raman@worktif.com
- Use of this software is governed by the Business Source License included in the LICENSE file
- Additional Use Grant: Free for personal and non-commercial research use only
## Author
Work TIF, Raman Marozau
All rights reserved.
Copyright(c), 2025-present.