Skip to content

Commit

Permalink
feat: pull library across from POC
Browse files Browse the repository at this point in the history
pull library across from POC and add Typescript declarations and Jest test integration
  • Loading branch information
devonChurch committed Jun 4, 2018
1 parent 0d5c606 commit 09c55bc
Show file tree
Hide file tree
Showing 4 changed files with 313 additions and 35 deletions.
57 changes: 26 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
# Fish Tacos


## What


This module complements the **react** and **styled-components** libraries to create an API that removes the cognitive load and arduous boilerplate associated with responsive scenarios.

[![depends on styled-components](https://user-images.githubusercontent.com/15273233/40872099-ab686562-669c-11e8-8b7f-0d70f87280cb.png)](https://www.styled-components.com/)

[![depends on_ styled-components](https://user-images.githubusercontent.com/15273233/40872099-ab686562-669c-11e8-8b7f-0d70f87280cb.png)](https://www.styled-components.com/)

[![depends on_ react](https://user-images.githubusercontent.com/15273233/40872100-ae1d736a-669c-11e8-965a-3ce06fbd872d.png)](https://reactjs.org/)
[![depends on react](https://user-images.githubusercontent.com/15273233/40872100-ae1d736a-669c-11e8-965a-3ce06fbd872d.png)](https://reactjs.org/)

[![typescript](https://user-images.githubusercontent.com/15273233/40872275-a61d4660-669f-11e8-8edf-860f1947759f.png)](https://www.typescriptlang.org/)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)


[![code style prettier](https://img.shields.io/badge/code_style-prettier-FF69A4.svg)](https://prettier.io/)

## Why

Expand All @@ -26,18 +24,16 @@ Unfortunately `min-*` and `max-*` declarations are not supported natively in **C

**This module addresses the scenarios where:**

+ Users can experience jarring layout reflows as various breakpoints are triggered forcing abrupt changes to **CSS** values.

+ Percentage based values _(referencing things like **viewport** or an **element container**)_ can encounter cases where values scale to exaggerated limits _(both **big** and **small**)_ due to the absence of *Minimum* and *Maximum* thresholds.
* Users can experience jarring layout reflows as various breakpoints are triggered forcing abrupt changes to **CSS** values.

* Percentage based values _(referencing things like **viewport** or an **element container**)_ can encounter cases where values scale to exaggerated limits _(both **big** and **small**)_ due to the absence of _Minimum_ and _Maximum_ thresholds.

## Demo

[This demo](https://codepen.io/DevonChurch/project/live/DeJWLQ/) retro fits several **Bootstrap** components with the fluid resizing system this module offers. Resize the window to see the responsive measurement declarations scale *up* / *down* while staying within the limits of their thresholds.
[This demo](https://codepen.io/DevonChurch/project/live/DeJWLQ/) retro fits several **Bootstrap** components with the fluid resizing system this module offers. Resize the window to see the responsive measurement declarations scale _up_ / _down_ while staying within the limits of their thresholds.

![fish-tacos](https://user-images.githubusercontent.com/15273233/40871976-3008e8d0-669a-11e8-99b1-66955a994286.gif)


## Installation

Install the module from **NPM** .
Expand All @@ -49,25 +45,24 @@ npm install --save fish-tacos
Import the module into your project.

```javascript
import ft from 'fish-tacos';
import ft from "fish-tacos";
```


## Usage

The API is very simple. Specify the **CSS property** that you want to change and supply a *Minimum* and *Maximum* threshold to restrict scaling.
The API is very simple. Specify the **CSS property** that you want to change and supply a _Minimum_ and _Maximum_ threshold to restrict scaling.

Because designers like to supply their measurements in **pixel** based units our API uses pixels as the base target and converts them into **REM**'s in the final output. This gives styles an enhanced level of accessibility *(with dynamic font scaling)* while making **design** and **development** collaboration easier.
Because designers like to supply their measurements in **pixel** based units our API uses pixels as the base target and converts them into **REM**'s in the final output. This gives styles an enhanced level of accessibility _(with dynamic font scaling)_ while making **design** and **development** collaboration easier.

The result is pure, static **CSS**. This means the fluid scaling is based on native browser functionality and therefore performant.

### Basic

```javascript
ft('font-size', [20, 32])
ft("font-size", [20, 32]);
```

*The above declaration will create the following vanilla **CSS**:*
_The above declaration will create the following vanilla **CSS**:_

```css
font-size: 1.25rem;
Expand All @@ -86,10 +81,10 @@ font-size: 1.25rem;
If you want to target a property that uses `top`, `right`, `bottom` and `left` references for more granularity you can use the more verbose permutation below.

```javascript
ft('margin', { top: [30, 60], bottom: [10, 30] })
ft("margin", { top: [30, 60], bottom: [10, 30] });
```

*The above declaration will create the following vanilla **CSS**:*
_The above declaration will create the following vanilla **CSS**:_

```css
margin-top: 1.875rem;
Expand All @@ -101,7 +96,7 @@ margin-top: 1.875rem;
@media (min-width: 960px) {
margin-top: 3.75rem;
}

margin-bottom: 0.625rem;

@media (min-width: 480px) {
Expand All @@ -113,29 +108,29 @@ margin-bottom: 0.625rem;
}
```


### Example

Integrating this module into your existing workflow is as easy as swapping out a standard **CSS** *property* / *value* declaration for the new API.
Integrating this module into your existing workflow is as easy as swapping out a standard **CSS** _property_ / _value_ declaration for the new API.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import ft from 'fish-tacos';
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import ft from "fish-tacos";

const Heading1 = styled.h1`
${ft('font-size', [30, 50])}
${ft('margin', { top: [30, 60], bottom: [10, 30] })}
${ft("font-size", [30, 50])} ${ft("margin", {
top: [30, 60],
bottom: [10, 30]
})};
`;

ReactDOM.render(
<Heading1>Hello World</Heading1>,
document.getElementById('app')
document.getElementById("app")
);
```


## License

MIT
108 changes: 106 additions & 2 deletions __tests__/index.test.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,107 @@
test("adds 1 + 2 to equal 3", () => {
expect(1 + 1).toBe(3);
import ft from '../src/';

const setBodyFontSize = value => (document.body.style.fontSize = value);
const removeBodyStyles = () => (document.body.style = {});

beforeEach(() => {
setBodyFontSize('16px');
});

test('requires "base font" on <body />', () => {
removeBodyStyles();

expect(() => {
ft('padding', [10, 20]);
}).toThrowError('not found');
});

test('requires "base font" of 16px', () => {
setBodyFontSize('10px');

expect(() => {
ft('padding', [10, 20]);
}).toThrowError('font-size is not 16px');
});

test('requires "unit" to be defined', () => {
expect(() => {
ft(undefined, [10, 20]);
}).toThrowError('is not defined');
});

test('requires "unit" to be a "string"', () => {
expect(() => {
ft(100, [10, 20]);
}).toThrowError('is not of type "string"');
});

[
{ reference: 'min', sizes: [undefined, 20] },
{ reference: 'max', sizes: [10, undefined] },
].forEach(({ reference, sizes }) => {
test(`requires "${reference}" to be defined`, () => {
expect(() => {
ft('padding', sizes);
}).toThrowError('is not defined');
});
});

[{ reference: 'min', sizes: ['10', 20] }, { reference: 'max', sizes: [10, '20'] }].forEach(
({ reference, sizes }) => {
test(`requires "${reference}" to be a "number"`, () => {
expect(() => {
ft('padding', sizes);
}).toThrowError('not of type "number"');
});
}
);

[{ reference: 'min', sizes: [10 / 0, 20] }, { reference: 'max', sizes: [10, 20 / 0] }].forEach(
({ reference, sizes }) => {
test(`requires "${reference}" to be "finite"`, () => {
expect(() => {
ft('padding', sizes);
}).toThrowError('is an "infinite" value');
});
}
);

test('should create a single declaration in the correct format', () => {
const result = ft('padding', [10, 20]);
expect(result).toMatch(`
padding: 0.625rem;
@media (min-width: 30rem) {
padding: 2.0833333333333335vw;
}
@media (min-width: 60rem) {
padding: 1.25rem;
}
`);
});

test('should create a multi declaration in the correct format', () => {
const result = ft('padding', { top: [10, 20], bottom: [15, 25] });
expect(result).toMatch(`
padding-top: 0.625rem;
@media (min-width: 30rem) {
padding-top: 2.0833333333333335vw;
}
@media (min-width: 60rem) {
padding-top: 1.25rem;
}
padding-bottom: 0.9375rem;
@media (min-width: 30rem) {
padding-bottom: 3.125vw;
}
@media (min-width: 50rem) {
padding-bottom: 1.5625rem;
}
`);
});
11 changes: 11 additions & 0 deletions prettier.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
arrowParens: 'avoid',
parser: 'typescript',
};
Loading

0 comments on commit 09c55bc

Please sign in to comment.