atomize

Atomize is designed to work across various environments, including:

• Browsers: Modern browsers and Internet Explorer 9+
• Rendering: Supports Server-side Rendering (SSR)
• Desktop: Electron

To clone the repository and run the development environment locally:

1. Clone the repository:

   git clone git@github.com:Proksh/atomize.git

2. Navigate to the directory:

   cd atomize

3. Install dependencies:

   npm install // or yarn

4. Start the development server:

   npm start

Once started, visit http://localhost:8080 in your browser.

$ git clone git@github.com:Proksh/atomize.git
$ cd atomize
$ npm install // or yarn
$ npm start

To use Atomize in your React project, you must install both atomize and react-transition-group as dependencies.

Using npm:

npm install atomize react-transition-group

Using yarn:

yarn add atomize react-transition-group

After installation, you can import components directly from the atomize package. Here is a basic example of rendering a Button component:

import { Button } from "atomize";
ReactDOM.render(<Button />, mountNode);

The Notification component is a React component used to display transient messages. It features built-in entrance and exit transitions and automatically triggers the onClose callback 2000ms after the entering transition completes.

To control visibility, use the isOpen prop. To handle the component's removal from the UI, provide an onClose function. You can also pass prefix and suffix elements to be rendered around the main content.

The iconPaths object provides a collection of React components that render SVG <path> elements. Each icon component accepts a color prop to set the fill attribute and allows spreading other standard SVG props (like className, style, or onClick) via a ...rest parameter.

Commonly available icons include:

• Add
• Alert, AlertSolid
• Attachment
• Back
• Bag
• Behance
• Bookmark, BookmarkSolid
• Bulk
• Camera, CameraSolid
• Card
• Checked
• Close, CloseSolid
• Coin
• Cross
• Delete, DeleteSolid
• Dot
• Down, DownArrow, DownArrowCircle, DownArrowSolid
• Download
• Draft
• Dribbble
• Edit, EditSolid
• Email
• Expand
• External
• Eye, EyeSolid
• Facebook
• Folder, FolderSolid

The atomize library provides a collection of UI components (atoms) and utility functions. You can import these directly from the main entrypoint.

Available components include:

• Layout & Grid: StyleReset, Container, Row, Col, Div
• Typography & Content: Text, Image, Tag, Anchor
• Form Elements: Button, Input, Textarea, Label, Checkbox, Radiobox, Switch
• Overlays & Navigation: Collapse, Modal, SideDrawer, Notification, Dropdown
• Icons: Icon (and iconPaths for raw path data)

Available utility functions:

• scrollTo: For programmatic scrolling.
• currentDevice: To detect the current device type.

Core Providers:

• ThemeProvider: For managing theme context.