atomic-layout - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "atomic-layout",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description":
-    "A single component to distribute the spacial relation between your atom components using CSS Grid",
+    "A single component to distribute the spacial relation in your layouts using CSS Grid",
   "main": "./index.js",
   "scripts": {
+    "dev": "webpack --watch",
+    "build": "NODE_ENV=production webpack",
+    "test": "BABEL_ENV=test jest",
+    "storybook": "start-storybook -p 6006",
     "prettify": "node_modules/.bin/prettier 'src/**/*.js' --write",
-    "test": "BABEL_ENV=test jest",
-    "build": "rollup -c",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm run build",
+    "build-storybook": "build-storybook"
   },
@@ -28,11 +31,19 @@ "pre-push": ["prettify", "test"],
   "devDependencies": {
+    "@storybook/addon-actions": "^3.4.5",
+    "@storybook/addon-links": "^3.4.5",
+    "@storybook/react": "^3.4.5",
     "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "chai": "^4.1.2",
-    "jest": "^22.4.3",
+    "eslint": "^4.19.1",
+    "eslint-loader": "^2.0.0",
+    "jest": "^22.4.4",
     "pre-push": "^0.1.1",
     "prettier": "^1.12.1",
     "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "rollup": "^0.58.2",
@@ -43,4 +54,10 @@ "rollup-plugin-babel": "^3.0.4",
     "rollup-plugin-visualizer": "^0.6.0",
-    "styled-components": "^3.2.6"
+    "storybook": "^1.0.0",
+    "styled-components": "^3.2.6",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3"
+  },
+  "dependencies": {
+    "ramda": "^0.25.0"
   }
 }

README.md

@@ -1,2 +0,2 @@
-A single component to distribute spacial relation between your atom components.
+A single component to distribute the spacial relation in your layouts.
 
@@ -7,8 +7,10 @@ ## Motivation
 
-Implementation of atom components is straightforward. But when it comes to composing molecules how do you handle the relation between the atoms? Most likely, you are creating extra CSS to change position or add spacing to the atoms which are under a specific molecule. Not only that makes you write more CSS, but it also contradicts the idea of atom being independant, reusable, predictable.
+Implementation of atom components is quite straightforward, but when it comes to composing the molecules how do you handle the relation between the atoms? Most likely, you are writing some extra CSS to change the position or add spacing to the atoms, which are under a specific molecule. Not only that makes you write more CSS, but it also contradicts the idea of an atom being independant, reusable, predictable.
 
-**What if there was a single layer above the atoms that could distribute spacial relation to atoms without actually affecting them?** Well, this is what this repository is about.
+**_What if there was a single layer above the atoms that could distribute the spacial relation between them without actually affecting them?_** And wouldn't it be great if that layer could be applied not only to the atoms, but also to molecules, templates, layouts?
 
-## Technology
+Well, this is what `atomic-layout` is about.
 
+## How does this work?
+
 We are using a jaw-droppingly powerful (and standardized) [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and combining it with the simplicity and flexibility of [React](https://reactjs.org/). You can depict this library like an easier way to declare and maintain CSS Grid in your React application.
@@ -20,6 +22,5 @@
 import React from 'react'
-// import the "Layout" from the library
 import Layout from 'atomic-layout'
 
-// declare templates ("grid-template-areas")
+// declare template areas ("grid-template-areas")
 const templateMobile = `
@@ -40,5 +41,4 @@ 'thumbnail'
     return (
-      {/* Configure the Layout */}
       <Layout template={templateMobile} templateSmUp={templateDesktop}>
-        {/* Get the components out of your grid areas */}
+        {/* Get React components based on your grid areas */}
         {({ Thumbnail, Heading, Subheading }) => (
@@ -45,0 +45,0 @@ <React.Fragment>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90293

increased by965.53%

Number of package files

10

increased by150%

Lines of code

386

increased by1738.1%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

26

increased by73.33%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedramda@^0.25.0

• + Addedramda@0.25.0(transitive)