# @atomic-layout/core

> Atomic Layout core module

Latest version **0.14.1** (published 2020-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @atomic-layout/core
pnpm add @atomic-layout/core
yarn add @atomic-layout/core
bun add @atomic-layout/core
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.14.1 |
| Published | 2020-04-24 |
| First published | 2019-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 62.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1137 |
| Author | Artem Zakharchenko |
| Maintainers | kettanaito |
| Keywords | atomic, layout, core |

## Links

- npm: https://www.npmjs.com/package/@atomic-layout/core
- Repository: https://github.com/kettanaito/atomic-layout/tree/master/packages/atomic-layout-core
- Issues: https://github.com/kettanaito/atomic-layout/issues
- Funding: https://opencollective.com/atomic-layout
- npm.io page: https://npm.io/package/@atomic-layout/core

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.14.1 (latest) — 2020-04-24
- 0.14.0 — 2020-04-22
- 0.13.0 — 2020-04-01
- 0.12.1 — 2020-03-30
- 0.12.0 — 2020-02-12
- 0.11.7 — 2020-02-09
- 0.11.6 — 2020-02-06
- 0.12.0-alpha.0 — 2020-01-23
- 0.11.5 — 2020-01-16
- 0.11.4 — 2020-01-10
- 0.11.3 — 2019-12-28
- 0.11.2 — 2019-12-25
- 0.11.1 — 2019-12-06

## README

[![Package version](https://img.shields.io/npm/v/@atomic-layout/core.svg?color=%237B85FF)](https://npmjs.com/package/@atomic-layout/core)

# `@atomic-layout/core`

[Atomic Layout][atomic-layout] core library.

> **Please note that as a user of Atomic Layout you are not supposed to use this package directly in your application.** It serves as a logic abstraction for various rendering implementations (with styled-components, emotion, etc.). Use this package if you are planning to introduce a new styling implementation of Atomic Layout.

[atomic-layout]: https://github.com/kettanaito/atomic-layout

## Motivation

Atomic Layout contains its core functionality in a separate module in order to reuse it for various styling implementations (`styled-components`, `emotion`, etc.). The logic distributed in this module is style-agnostic and mainly concerns calculations and transformations of data structures used by the library. It also provides common type definitions to be used by Atomic Layout, or its consumers.

## Scope

Atomic Layout core operates under the following scope:

### Layout interface

- `Layout` instance to be exposed by each individual styling implementation of the library
- Interface to consume layout options (`defaultUnit`, `breakpoints`, etc.)
- Interface to store the provided options and reference them

### Breakpoint transformation

- Breakpoint parsing (`getAreaRecords`)
- Breakpoint transformations (`mergeBreakpoints`, `openBreakpoint`, `closeBreakpoint`)
- Breakpoint compiling (`createMediaQuery`)

### Media Query handling

- Normalization of media queries (`normalizeMediaQuery`)

### Utilities

- String utilities (i.e. `toCammelCase`, `toLowerCaseFirst`)
- Math utilities (i.e. `transformNumeric`)
- Functional utilities (i.e. `compose`, `when`, `memoizeWith`)

## Type definitions

> Refer to the complete type definition module `atomic-layout/core/lib/index.d.ts`.

The common use case to access the types exported by this package is to provide a proper type annotation to your custom React components that accept the same props as the library's components do (`Box`, `Composition`, `Only`, etc.).

Here's an example of how to annotate a custom React component that accepts all the props that the `Box` component does:

```tsx
import * as React from 'react'
import { BoxProps } from 'atomic-layout/core'

const MyComponent: React.FC<BoxProps & MyComponentProps> = ({
  children,
  ...boxProps
}) => {
  return <Box {...boxProps}>{children}</Box>
}
```

## Contributing

### Fork the repository

Fork this repository using the "Fork" button on the top right of the [repository page](https://github.com/kettanaito/atomic-layout/tree/master/packages/atomic-layout-core).

### Follow Git workflow

Please follow the [Git workflow](https://github.com/kettanaito/atomic-layout/blob/master/.github/CONTRIBUTING.md#git-workflow) described in the contribution guidelines to the original library.

## License

MIT.

---
_Source: https://npm.io/package/@atomic-layout/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._