├── src
    ├── .eslintrc
    └── index.tsx
├── .eslintignore
├── example
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── index.tsx
    │   ├── setupTests.ts
    │   ├── App.test.tsx
    │   ├── index.css
    │   └── App.tsx
    ├── public
    │   ├── favicon.ico
    │   ├── manifest.json
    │   └── index.html
    ├── README.md
    ├── tsconfig.json
    └── package.json
├── tsconfig.test.json
├── .editorconfig
├── .prettierrc
├── .gitignore
├── tsconfig.json
├── .eslintrc
├── README.md
└── package.json


/src/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "jest": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/
2 | dist/
3 | node_modules/
4 | .snapshots/
5 | *.min.js


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wulf/div/master/example/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import './index.css'
2 | 
3 | import React from 'react'
4 | import ReactDOM from 'react-dom'
5 | import App from './App'
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'))
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "jsxSingleQuote": true,
 4 |   "semi": false,
 5 |   "tabWidth": 2,
 6 |   "bracketSpacing": true,
 7 |   "jsxBracketSameLine": false,
 8 |   "arrowParens": "always",
 9 |   "trailingComma": "none",
10 |   "printWidth": 120
11 | }
12 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 | 
3 | It is linked to the div package in the parent directory for development purposes.
4 | 
5 | You can run `yarn install` and then `yarn start` to test your package.
6 | 


--------------------------------------------------------------------------------
/example/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/example/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div')
 7 |   ReactDOM.render(<App />, div)
 8 |   ReactDOM.unmountComponentAtNode(div)
 9 | })
10 | 


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "div",
 3 |   "name": "div",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | node_modules
 6 | 
 7 | # builds
 8 | build
 9 | dist
10 | .rpt2_cache
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 5 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": ["dom", "esnext"],
 6 |     "moduleResolution": "node",
 7 |     "jsx": "react",
 8 |     "sourceMap": true,
 9 |     "declaration": true,
10 |     "esModuleInterop": true,
11 |     "noImplicitReturns": true,
12 |     "noImplicitThis": true,
13 |     "noImplicitAny": true,
14 |     "strictNullChecks": true,
15 |     "suppressImplicitAnyIndexErrors": true,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "allowSyntheticDefaultImports": true
19 |   },
20 |   "include": ["src"],
21 |   "exclude": ["node_modules", "dist", "example"]
22 | }
23 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "extends": [
 4 |     "standard",
 5 |     "standard-react",
 6 |     "plugin:@typescript-eslint/eslint-recommended"
 7 |   ],
 8 |   "env": {
 9 |     "node": true
10 |   },
11 |   "parserOptions": {
12 |     "ecmaVersion": 2020,
13 |     "ecmaFeatures": {
14 |       "legacyDecorators": true,
15 |       "jsx": true
16 |     }
17 |   },
18 |   "settings": {
19 |     "react": {
20 |       "version": "16"
21 |     }
22 |   },
23 |   "rules": {
24 |     "space-before-function-paren": 0,
25 |     "react/prop-types": 0,
26 |     "react/jsx-handler-names": 0,
27 |     "react/jsx-fragments": 0,
28 |     "react/no-unused-prop-types": 0,
29 |     "import/export": 0
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { Div } from 'div'
 4 | 
 5 | const App = () => {
 6 |   return (
 7 |     <Div column>
 8 |       <Div row>
 9 |         <a href='https://github.com/wulf/div'>
10 |           <h1>div</h1>
11 |         </a>
12 |       </Div>
13 |       <Div row>
14 |         <Div column flex={1} style={{ backgroundColor: 'cadetblue', color: 'papayawhip' }}>
15 |           A third of the space!
16 |         </Div>
17 | 
18 |         <Div column center style={{ width: '300px', height: '75px' }}>
19 |           This one has centered content!
20 |         </Div>
21 | 
22 |         <Div column flex={2} style={{ backgroundColor: 'royalblue', color: 'palevioletred' }}>
23 |           Two thirds of space!
24 |         </Div>
25 |       </Div>
26 |       <Div />
27 |     </Div>
28 |   )
29 | }
30 | 
31 | export default App
32 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": [
 6 |       "dom",
 7 |       "esnext"
 8 |     ],
 9 |     "alwaysStrict": true,
10 |     "moduleResolution": "node",
11 |     "jsx": "react",
12 |     "sourceMap": true,
13 |     "declaration": true,
14 |     "esModuleInterop": true,
15 |     "noImplicitReturns": true,
16 |     "noImplicitThis": true,
17 |     "noImplicitAny": true,
18 |     "strictNullChecks": true,
19 |     "suppressImplicitAnyIndexErrors": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "allowSyntheticDefaultImports": true,
23 |     "target": "es5",
24 |     "allowJs": true,
25 |     "skipLibCheck": true,
26 |     "strict": true,
27 |     "forceConsistentCasingInFileNames": true,
28 |     "resolveJsonModule": true,
29 |     "isolatedModules": true,
30 |     "noEmit": true
31 |   },
32 |   "include": [
33 |     "src"
34 |   ],
35 |   "exclude": [
36 |     "node_modules",
37 |     "build"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
 4 |   flex?: number | string
 5 |   column?: boolean
 6 |   reverse?: boolean
 7 |   row?: boolean
 8 |   wrap?: boolean
 9 |   center?: boolean
10 |   children?: React.ReactNode
11 | }
12 | 
13 | export const Div = ({
14 |   flex,
15 |   column,
16 |   reverse,
17 |   row,
18 |   wrap,
19 |   center,
20 |   children,
21 |   style,
22 |   ...rest
23 | }: Props) => {
24 |   const styles: React.CSSProperties = { ...style }
25 | 
26 |   if (flex) styles.flex = flex
27 |   if (wrap) styles.flexWrap = 'wrap'
28 |   if (row || column) {
29 |     styles.display = 'flex'
30 |     styles.flexDirection = row
31 |       ? (reverse ? 'row-reverse' : 'row')
32 |       : (reverse ? 'column-reverse' : 'column')
33 |   }
34 | 
35 |   if (center) {
36 |     styles.alignItems = 'center'
37 |     styles.justifyContent = 'center'
38 |   }
39 | 
40 |   return (
41 |     <div {...rest} style={styles}>
42 |       {children}
43 |     </div>
44 |   )
45 | }
46 | 
47 | export default Div
48 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "div-example",
 3 |   "homepage": ".",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
 8 |     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
 9 |     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
10 |     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
11 |   },
12 |   "dependencies": {
13 |     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
14 |     "@testing-library/react": "link:../node_modules/@testing-library/react",
15 |     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
16 |     "@types/jest": "link:../node_modules/@types/jest",
17 |     "@types/node": "link:../node_modules/@types/node",
18 |     "@types/react": "link:../node_modules/@types/react",
19 |     "@types/react-dom": "link:../node_modules/@types/react-dom",
20 |     "react": "link:../node_modules/react",
21 |     "react-dom": "link:../node_modules/react-dom",
22 |     "react-scripts": "link:../node_modules/react-scripts",
23 |     "typescript": "link:../node_modules/typescript",
24 |     "div": "link:.."
25 |   },
26 |   "devDependencies": {
27 |     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": "react-app"
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 | 
12 |     <!--
13 |       manifest.json provides metadata used when your web app is added to the
14 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
15 |     -->
16 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17 | 
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>div</title>
28 |   </head>
29 | 
30 |   <body>
31 |     <noscript>
32 |       You need to enable JavaScript to run this app.
33 |     </noscript>
34 | 
35 |     <div id="root"></div>
36 | 
37 |     <!--
38 |       This HTML file is a template.
39 |       If you open it directly in the browser, you will see an empty page.
40 | 
41 |       You can add webfonts, meta tags, or analytics to this file.
42 |       The build step will place the bundled scripts into the <body> tag.
43 | 
44 |       To begin the development, run `npm start` or `yarn start`.
45 |       To create a production bundle, use `npm run build` or `yarn build`.
46 |     -->
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # div
 2 | 
 3 | > &lt;Div row&gt; Use flexbox with ease in React! &lt;/Div&gt;
 4 | 
 5 | [![NPM](https://img.shields.io/npm/v/div.svg)](https://www.npmjs.com/package/div) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 6 | 
 7 | ## Features
 8 | 
 9 | * Easy to read & use flexbox!
10 | * Accepts all standard div props! (like `style`, `className` and `id`)
11 | * Typescript support!
12 | 
13 | ## Install
14 | 
15 | ```bash
16 | # with yarn:
17 | yarn add div
18 | 
19 | # with npm:
20 | npm install --save div
21 | ```
22 | 
23 | ## Usage
24 | 
25 | ```tsx
26 | import React, { Component } from 'react'
27 | 
28 | import { Div } from 'div'
29 | 
30 | const Example = () => {
31 |   return (
32 |     <Div row>
33 |       <Div column flex={1}>
34 |         A third of the space
35 |       </Div>
36 |       <Div column flex={2}>
37 |         Two thirds of space!
38 |       </Div>
39 |     </Div>
40 |   )
41 | }
42 | ```
43 | 
44 | ## Props
45 | 
46 | (All props are optional)
47 | 
48 | ### `flex`: {number | string}
49 | 
50 | * Applies `flex: {number}`.
51 | * Reminder: the flex shorthand params are in this order:
52 |   `flex-grow`, `flex-shrink`, `flex-basis` (without commas)
53 | 
54 | ### `row`: {boolean}
55 | 
56 | * Makes div a flex row.
57 | * Applies `display: flex` and `flex-direction: row`.
58 | 
59 | ### `column`: {boolean}
60 | 
61 | * Makes div a flex column.
62 | * Applies `display: flex` and `flex-direction: column`.
63 | 
64 | ### `reverse`: {boolean}
65 | 
66 | * Reverses the flex-direction if `column` or `row` are specified.
67 | 
68 | ### `wrap`: {boolean}
69 | 
70 | * Applies `flex-wrap: 'wrap'`.
71 | * By default, a div's `flex-wrap` is `'nowrap'`.
72 | 
73 | ### `center`: {boolean}
74 | 
75 | * Centers content if `row` or `column` are specified.
76 | * Applies `justify-content: 'center'` and `align-items: 'center'`.
77 | 
78 | ## License
79 | 
80 | MIT © [Wulf](https://github.com/Wulf)
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "div",
 3 |   "version": "2.0.2",
 4 |   "description": "&lt;Div row&gt; Use flexbox with ease in React! &lt;/Div&gt;",
 5 |   "author": "Wulf",
 6 |   "license": "MIT",
 7 |   "repository": "Wulf/div",
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.modern.js",
10 |   "source": "src/index.tsx",
11 |   "engines": {
12 |     "node": ">=10"
13 |   },
14 |   "scripts": {
15 |     "build": "microbundle-crl --no-compress --format modern,cjs",
16 |     "start": "microbundle-crl watch --no-compress --format modern,cjs",
17 |     "prepare": "run-s build",
18 |     "test": "run-s test:unit test:lint test:build",
19 |     "test:build": "run-s build",
20 |     "test:lint": "eslint .",
21 |     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
22 |     "test:watch": "react-scripts test --env=jsdom",
23 |     "predeploy": "cd example && yarn install && yarn run build",
24 |     "deploy": "gh-pages -d example/build"
25 |   },
26 |   "peerDependencies": {
27 |     "react": "^16.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@testing-library/jest-dom": "^4.2.4",
31 |     "@testing-library/react": "^9.5.0",
32 |     "@testing-library/user-event": "^7.2.1",
33 |     "@types/jest": "^25.1.4",
34 |     "@types/node": "^12.12.38",
35 |     "@types/react": "^16.9.27",
36 |     "@types/react-dom": "^16.9.7",
37 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
38 |     "@typescript-eslint/parser": "^2.26.0",
39 |     "microbundle-crl": "^0.13.10",
40 |     "babel-eslint": "^10.0.3",
41 |     "cross-env": "^7.0.2",
42 |     "eslint": "^6.8.0",
43 |     "eslint-config-prettier": "^6.7.0",
44 |     "eslint-config-standard": "^14.1.0",
45 |     "eslint-config-standard-react": "^9.2.0",
46 |     "eslint-plugin-import": "^2.18.2",
47 |     "eslint-plugin-node": "^11.0.0",
48 |     "eslint-plugin-prettier": "^3.1.1",
49 |     "eslint-plugin-promise": "^4.2.1",
50 |     "eslint-plugin-react": "^7.17.0",
51 |     "eslint-plugin-standard": "^4.0.1",
52 |     "gh-pages": "^2.2.0",
53 |     "npm-run-all": "^4.1.5",
54 |     "prettier": "^2.0.4",
55 |     "react": "^16.13.1",
56 |     "react-dom": "^16.13.1",
57 |     "react-scripts": "^3.4.1",
58 |     "typescript": "^3.7.5"
59 |   },
60 |   "files": [
61 |     "dist"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------