├── .gitignore ├── README.md ├── ScreenShot.png ├── example ├── .npmignore ├── index.html ├── index.tsx ├── package.json ├── tsconfig.json └── yarn.lock ├── package.json ├── src ├── flex-components.ts ├── flex.ts └── index.ts ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | .rts2_cache_cjs 6 | .rts2_cache_esm 7 | .rts2_cache_umd 8 | dist 9 | .idea 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Welcome to layout-styled-components 👋

2 |

3 | 4 | Version 5 | 6 | 7 | Documentation 8 | 9 | 10 | Twitter: thekitze 11 | 12 |

13 | 14 | > Styled Components Layout Helper Components 15 | 16 | This project simplify uses `horizontal`, `grid`,`vertical` and `space` [`styled-components`](https://styled-components.com). 17 | 18 | ## Example 19 | 20 | See [example/index.tsx](./example/index.tsx). 21 | 22 | ```js 23 | const App = () => { 24 | return ( 25 |
26 | 27 |
Hello
28 |
World
29 | 30 | 31 |
32 | 33 | 34 |
Goodbye
35 |
World
36 | 37 |
38 | ); 39 | }; 40 | ``` 41 | 42 | Produces: 43 | 44 | ![ScreenShot](./ScreenShot.png) 45 | 46 | ## Install 47 | 48 | ```sh 49 | yarn install && yarn watch 50 | ``` 51 | 52 | ## Usage 53 | 54 | ```sh 55 | cd examples && yarn start 56 | ``` 57 | 58 | See it in browser at http://localhost:1234 59 | 60 | ## Run tests 61 | 62 | ```sh 63 | yarn run test 64 | ``` 65 | 66 | ## Author 67 | 68 | 👤 **Kitze** 69 | 70 | * Website: https://youtube.com/kitze 71 | * Twitter: [@thekitze](https://twitter.com/@thekitze) 72 | * Github: [@kitze](https://github.com/kitze) 73 | 74 | ## 🤝 Contributing 75 | 76 | Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/kitze/layout-styled-components/issues). 77 | 78 | ## Show your support 79 | 80 | Give a ⭐️ if this project helped you! 81 | 82 | *** 83 | _This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_ -------------------------------------------------------------------------------- /ScreenShot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sizzyapp/layout-styled-components/9622ca2a8cab71e008f2fe06c8be11808a6038b9/ScreenShot.png -------------------------------------------------------------------------------- /example/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Playground 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; 2 | import * as React from 'react'; 3 | import * as ReactDOM from 'react-dom'; 4 | import { Horizontal, Vertical } from '../.'; 5 | 6 | const App = () => { 7 | return ( 8 |
9 | 10 |
Hello
11 |
World
12 | 13 | 14 |
15 | 16 | 17 |
Goodbye
18 |
World
19 | 20 |
21 | ); 22 | }; 23 | 24 | ReactDOM.render(, document.getElementById('root')); 25 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": { 11 | "react-app-polyfill": "^1.0.0" 12 | }, 13 | "alias": { 14 | "react": "../node_modules/react", 15 | "react-dom": "../node_modules/react-dom/profiling", 16 | "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^16.8.15", 20 | "@types/react-dom": "^16.8.4", 21 | "parcel": "^1.12.3", 22 | "typescript": "^3.4.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": false, 4 | "target": "es5", 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "moduleResolution": "node", 8 | "noImplicitAny": false, 9 | "noUnusedLocals": false, 10 | "noUnusedParameters": false, 11 | "removeComments": true, 12 | "strictNullChecks": true, 13 | "preserveConstEnums": true, 14 | "sourceMap": true, 15 | "lib": ["es2015", "es2016", "dom"], 16 | "baseUrl": ".", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "layout-styled-components", 3 | "version": "0.1.12", 4 | "main": "dist/index.js", 5 | "module": "dist/layout-styled-components.esm.js", 6 | "typings": "dist/index.d.ts", 7 | "files": [ 8 | "dist" 9 | ], 10 | "scripts": { 11 | "start": "tsdx watch", 12 | "build": "tsdx build", 13 | "test": "tsdx test --env=jsdom" 14 | }, 15 | "peerDependencies": { 16 | "@types/react": "^16.9.4", 17 | "@types/styled-components": "^4.4.2", 18 | "react": ">=16", 19 | "styled-components": "^5.0.0" 20 | }, 21 | "husky": { 22 | "hooks": { 23 | "pre-commit": "pretty-quick --staged" 24 | } 25 | }, 26 | "prettier": { 27 | "printWidth": 80, 28 | "semi": true, 29 | "singleQuote": true, 30 | "trailingComma": "es5" 31 | }, 32 | "devDependencies": { 33 | "@types/jest": "^24.0.18", 34 | "@types/react": "^16.9.4", 35 | "@types/react-dom": "^16.9.1", 36 | "@types/styled-components": "^4.4.2", 37 | "husky": "^3.0.8", 38 | "prettier": "^1.18.2", 39 | "pretty-quick": "^1.11.1", 40 | "react": "^16.10.1", 41 | "react-dom": "^16.10.1", 42 | "styled-components": "^5.0.0", 43 | "tsdx": "^0.9.3", 44 | "tslib": "^1.10.0", 45 | "typescript": "^3.6.3" 46 | }, 47 | "dependencies": { 48 | "polished": "^3.4.4", 49 | "styled-mixins": "^0.1.10" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/flex-components.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import flex from './flex'; 3 | import { fixedHeight, fixedWidth, gridProps, grid } from 'styled-mixins'; 4 | 5 | const margin = { 6 | horizontal: 'marginRight', 7 | vertical: 'marginBottom', 8 | }; 9 | 10 | interface CommonProps { 11 | wrap?: boolean; 12 | spaceBetween?: boolean; 13 | spaceAround?: boolean; 14 | justifyEnd?: boolean; 15 | justifyStart?: boolean; 16 | flex?: number; 17 | spaceFirst?: boolean; 18 | spaceAll?: number; 19 | spaceBottom?: boolean; 20 | alignStart?: boolean; 21 | alignItemsStart?: boolean; 22 | center?: boolean; 23 | centerV?: boolean; 24 | centerH?: boolean; 25 | noShrink?: boolean; 26 | styles?: any; 27 | invert?: boolean; 28 | fullW?: boolean; 29 | fullH?: boolean; 30 | debug?: boolean; 31 | } 32 | 33 | export const common = (direction: 'horizontal' | 'vertical') => ( 34 | p: CommonProps 35 | ) => ({ 36 | ...(p.spaceBetween && flex.spaceBetween), 37 | ...(p.wrap && flex.wrap), 38 | ...(p.spaceAround && flex.spaceAround), 39 | ...(p.justifyEnd && flex.justifyEnd), 40 | ...(p.justifyStart && flex.justifyStart), 41 | ...(p.alignStart && flex.alignStart), 42 | ...(p.alignItemsStart && flex.alignItemsStart), 43 | ...(p.flex && { flex: p.flex }), 44 | ...(p.spaceFirst && { 45 | '& :first-child': { [margin[direction]]: `${p.spaceFirst}px !important` }, 46 | }), 47 | ...(p.spaceAll && { 48 | '& > *': { 49 | [margin[direction]]: `${p.spaceAll}px !important`, 50 | ...(p.spaceBottom && { marginBottom: `${p.spaceAll}px !important` }), 51 | }, 52 | '& > *:last-child': { 53 | [margin[direction]]: `0 !important`, 54 | ...(p.spaceBottom && { marginBottom: `0 !important` }), 55 | }, 56 | }), 57 | ...(p.noShrink && { 58 | flexShrink: 0, 59 | }), 60 | ...(p.fullW && { width: '100%' }), 61 | ...(p.fullH && { height: '100%' }), 62 | ...(p.debug && { border: '1px solid red' }), 63 | ...(p.styles && p.styles), 64 | }); 65 | 66 | const horizontalProps = (props: any) => { 67 | const { center, centerV, centerH } = props; 68 | return { 69 | ...flex.horizontal, 70 | ...(center && flex.centerHorizontal), 71 | ...(centerV && flex.centerHorizontalV), 72 | ...(centerH && flex.centerHorizontalH), 73 | ...common('horizontal')(props), 74 | }; 75 | }; 76 | 77 | const verticalProps = (props: any) => { 78 | const { center, centerV, centerH } = props; 79 | return { 80 | ...flex.vertical, 81 | ...(center && flex.centerVertical), 82 | ...(centerV && flex.centerVerticalV), 83 | ...(centerH && flex.centerVerticalH), 84 | ...common('vertical')(props), 85 | }; 86 | }; 87 | 88 | const getHorizontalProps = ({ invert = false, ...rest }) => { 89 | return invert === false ? horizontalProps(rest) : verticalProps(rest); 90 | }; 91 | 92 | const getVerticalProps = ({ invert = false, ...rest }) => { 93 | return invert === false ? verticalProps(rest) : horizontalProps(rest); 94 | }; 95 | 96 | const spaceUnit = 1; 97 | 98 | export const Space = styled.div<{ size: number }>(({ size = 1 }) => ({ 99 | ...fixedHeight(spaceUnit * size), 100 | ...fixedWidth(spaceUnit * size), 101 | })); 102 | 103 | export const Horizontal = styled.div(getHorizontalProps); 104 | export const Vertical = styled.div(getVerticalProps); 105 | export const Grid = styled.div(grid); 106 | -------------------------------------------------------------------------------- /src/flex.ts: -------------------------------------------------------------------------------- 1 | interface CSSObjects { 2 | [propertyName: string]: any; 3 | } 4 | 5 | export const flex: CSSObjects = { 6 | horizontal: { 7 | display: 'flex', 8 | flexDirection: 'row' 9 | }, 10 | vertical: { 11 | display: 'flex', 12 | flexDirection: 'column' 13 | }, 14 | flexWrap: { 15 | display: 'flex', 16 | flexWrap: 'wrap' 17 | }, 18 | centerHorizontal: { 19 | justifyContent: 'center', 20 | alignItems: 'center' 21 | }, 22 | wrap: { 23 | flexWrap: 'wrap' 24 | }, 25 | noWrap: { 26 | flexWrap: 'nowrap' 27 | }, 28 | centerHorizontalH: { 29 | justifyContent: 'center' 30 | }, 31 | centerHorizontalV: { 32 | alignItems: 'center' 33 | }, 34 | centerVertical: { 35 | alignItems: 'center', 36 | justifyContent: 'center' 37 | }, 38 | centerVerticalH: { 39 | alignItems: 'center' 40 | }, 41 | centerVerticalV: { 42 | justifyContent: 'center' 43 | }, 44 | spaceAround: { 45 | justifyContent: 'space-around' 46 | }, 47 | spaceBetween: { 48 | justifyContent: 'space-between' 49 | }, 50 | justifyEnd: { 51 | justifyContent: 'flex-end' 52 | }, 53 | justifyStart: { 54 | justifyContent: 'flex-start' 55 | }, 56 | alignStart: { 57 | alignContent: 'flex-start' 58 | }, 59 | stretchSelf: { 60 | alignSelf: 'stretch' 61 | }, 62 | alignItemsStart:{ 63 | alignItems: 'flex-start' 64 | }, 65 | selfEnd: { 66 | alignSelf: 'flex-end' 67 | } 68 | }; 69 | 70 | export default flex; 71 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { flex } from './flex'; 2 | export { Horizontal, Vertical, Space, Grid } from './flex-components'; 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "target": "es5", 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | "declaration": true, 9 | "sourceMap": true, 10 | "rootDir": "./", 11 | "strict": true, 12 | "noImplicitAny": false, 13 | "strictNullChecks": true, 14 | "strictFunctionTypes": true, 15 | "strictPropertyInitialization": true, 16 | "noImplicitThis": true, 17 | "alwaysStrict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noImplicitReturns": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "moduleResolution": "node", 23 | "baseUrl": "./", 24 | "paths": { 25 | "*": ["src/*", "node_modules/*"] 26 | }, 27 | "jsx": "react", 28 | "esModuleInterop": true 29 | } 30 | } 31 | --------------------------------------------------------------------------------