├── .eslintrc ├── .gitignore ├── .travis.yml ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── jest.transformer.js ├── lerna.json ├── package.json ├── packages ├── base │ ├── LICENSE │ ├── README.md │ ├── __tests__ │ │ └── base.test.js │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── globalStyle.ts │ │ │ ├── transitions.tsx │ │ │ └── utilityStyle.ts │ │ └── index.ts │ └── tsconfig.json ├── button │ ├── .npmignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── Button.tsx │ │ │ ├── ButtonGroup.tsx │ │ │ └── ButtonToolbar.tsx │ │ └── index.ts │ ├── test │ │ ├── Button │ │ │ ├── LinkButton.spec.js │ │ │ ├── __snapshots__ │ │ │ │ ├── LinkButton.spec.js.snap │ │ │ │ ├── active.spec.js.snap │ │ │ │ ├── block.spec.js.snap │ │ │ │ ├── danger.active.spec.js.snap │ │ │ │ ├── danger.outline.spec.js.snap │ │ │ │ ├── danger.spec.js.snap │ │ │ │ ├── dark.active.spec.js.snap │ │ │ │ ├── dark.outline.spec.js.snap │ │ │ │ ├── dark.spec.js.snap │ │ │ │ ├── disabled.spec.js.snap │ │ │ │ ├── dropDownToggle.spec.js.snap │ │ │ │ ├── info.active.spec.js.snap │ │ │ │ ├── info.outline.spec.js.snap │ │ │ │ ├── info.spec.js.snap │ │ │ │ ├── large.spec.js.snap │ │ │ │ ├── light.active.spec.js.snap │ │ │ │ ├── light.outline.spec.js.snap │ │ │ │ ├── light.spec.js.snap │ │ │ │ ├── noRadius.spec.js.snap │ │ │ │ ├── pill.spec.js.snap │ │ │ │ ├── primary.active.spec.js.snap │ │ │ │ ├── primary.outline.spec.js.snap │ │ │ │ ├── primary.spec.js.snap │ │ │ │ ├── secondary.active.spec.js.snap │ │ │ │ ├── secondary.outline.spec.js.snap │ │ │ │ ├── secondary.spec.js.snap │ │ │ │ ├── small.spec.js.snap │ │ │ │ ├── spec.js.snap │ │ │ │ ├── split.spec.js.snap │ │ │ │ ├── success.active.spec.js.snap │ │ │ │ ├── success.outline.spec.js.snap │ │ │ │ ├── success.spec.js.snap │ │ │ │ ├── toggleCollapse.spec.js.snap │ │ │ │ ├── warning.active.spec.js.snap │ │ │ │ ├── warning.outline.spec.js.snap │ │ │ │ └── warning.spec.js.snap │ │ │ ├── active.spec.js │ │ │ ├── block.spec.js │ │ │ ├── danger.active.spec.js │ │ │ ├── danger.outline.spec.js │ │ │ ├── danger.spec.js │ │ │ ├── dark.active.spec.js │ │ │ ├── dark.outline.spec.js │ │ │ ├── dark.spec.js │ │ │ ├── disabled.spec.js │ │ │ ├── dropDownToggle.spec.js │ │ │ ├── info.active.spec.js │ │ │ ├── info.outline.spec.js │ │ │ ├── info.spec.js │ │ │ ├── large.spec.js │ │ │ ├── light.active.spec.js │ │ │ ├── light.outline.spec.js │ │ │ ├── light.spec.js │ │ │ ├── noRadius.spec.js │ │ │ ├── pill.spec.js │ │ │ ├── primary.active.spec.js │ │ │ ├── primary.outline.spec.js │ │ │ ├── primary.spec.js │ │ │ ├── secondary.active.spec.js │ │ │ ├── secondary.outline.spec.js │ │ │ ├── secondary.spec.js │ │ │ ├── small.spec.js │ │ │ ├── spec.js │ │ │ ├── split.spec.js │ │ │ ├── success.active.spec.js │ │ │ ├── success.outline.spec.js │ │ │ ├── success.spec.js │ │ │ ├── toggleCollapse.spec.js │ │ │ ├── warning.active.spec.js │ │ │ ├── warning.outline.spec.js │ │ │ └── warning.spec.js │ │ ├── ButtonGroup │ │ │ ├── __snapshots__ │ │ │ │ ├── lg.spec.js.snap │ │ │ │ ├── sm.spec.js.snap │ │ │ │ ├── spec.js.snap │ │ │ │ └── vertical.spec.js.snap │ │ │ ├── lg.spec.js │ │ │ ├── sm.spec.js │ │ │ ├── spec.js │ │ │ └── vertical.spec.js │ │ └── ButtonToolbar │ │ │ ├── __snapshots__ │ │ │ └── spec.js.snap │ │ │ └── spec.js │ ├── tsconfig.json │ └── yarn.lock ├── config │ ├── LICENSE │ ├── README.md │ ├── __tests__ │ │ └── config.test.js │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── theme │ │ │ ├── alert.ts │ │ │ ├── badge.ts │ │ │ ├── breadcrumb.ts │ │ │ ├── breadcrumbItem.ts │ │ │ ├── button.ts │ │ │ ├── buttonGroup.ts │ │ │ ├── card.ts │ │ │ ├── cardBody.ts │ │ │ ├── cardFooter.ts │ │ │ ├── cardHeader.ts │ │ │ ├── cardImageHeader.ts │ │ │ ├── cardText.ts │ │ │ ├── cardTitle.ts │ │ │ ├── colorScheme.ts │ │ │ ├── container.ts │ │ │ ├── dropdownDivider.ts │ │ │ ├── dropdownItem.ts │ │ │ ├── dropdownMenu.ts │ │ │ ├── formCheck.ts │ │ │ ├── formCheckInput.ts │ │ │ ├── formControl.ts │ │ │ ├── formControlPlainText.ts │ │ │ ├── formGroup.ts │ │ │ ├── formText.ts │ │ │ ├── globals.ts │ │ │ ├── index.ts │ │ │ ├── inputGroup.ts │ │ │ ├── inputGroupText.ts │ │ │ ├── jumbotron.ts │ │ │ ├── listGroup.ts │ │ │ ├── listGroupItem.ts │ │ │ ├── modalBody.ts │ │ │ ├── modalContent.ts │ │ │ ├── modalFooter.ts │ │ │ ├── modalHeader.ts │ │ │ ├── nav.ts │ │ │ ├── navLink.ts │ │ │ ├── navbar.ts │ │ │ ├── navbarLink.ts │ │ │ ├── popover.ts │ │ │ ├── popoverArrow.ts │ │ │ ├── popoverBody.ts │ │ │ ├── popoverHeader.ts │ │ │ ├── screenSize.ts │ │ │ ├── shared.ts │ │ │ ├── table.ts │ │ │ ├── tooltip.ts │ │ │ ├── tooltipArrow.ts │ │ │ ├── tooltipInner.ts │ │ │ └── tr.ts │ │ └── utils │ │ │ └── index.ts │ └── tsconfig.json └── form │ ├── LICENSE │ ├── README.md │ ├── __tests__ │ └── form.test.js │ ├── package.json │ ├── src │ ├── components │ │ └── FormControl.tsx │ └── index.ts │ └── tsconfig.json └── tsconfig.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:react/recommended", 5 | "plugin:@typescript-eslint/recommended", 6 | "prettier/@typescript-eslint" 7 | ], 8 | "plugins": ["react", "@typescript-eslint", "prettier"], 9 | "env": { 10 | "browser": true, 11 | "es6": true 12 | }, 13 | "rules": { 14 | "@typescript-eslint/camelcase": ["warn", { "properties": "never" }], 15 | "@typescript-eslint/explicit-function-return-type": ["off"], 16 | "@typescript-eslint/no-inferrable-types": ["off"], 17 | "@typescript-eslint/no-explicit-any": ["off"], 18 | "no-console": ["warn", { "allow": ["warn", "error"] }], 19 | "@typescript-eslint/ban-ts-ignore": ["off"], 20 | "@typescript-eslint/no-use-before-define": ["off"], 21 | "@typescript-eslint/no-non-null-assertion": ["off"], 22 | "@typescript-eslint/no-unused-vars": ["warn", { "ignoreRestSiblings": true }] 23 | }, 24 | "settings": { 25 | "react": { 26 | "pragma": "React", 27 | "version": "detect" 28 | } 29 | }, 30 | "parser": "@typescript-eslint/parser", 31 | "parserOptions": { 32 | "ecmaVersion": 2018, 33 | "sourceType": "module" 34 | }, 35 | "globals": { 36 | "process": "readonly" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # modules 2 | node_modules 3 | npm-debug.log 4 | packages/*/node_modules 5 | packages/*/npm-debug.log 6 | packages/*/error-log.log 7 | .storybook/node_modules 8 | .storybook/npm-debug.log 9 | .storybook/yarn-error.log 10 | 11 | # generated 12 | coverage 13 | .nyc* 14 | *.log 15 | *.cache 16 | .eslintcache 17 | package-lock.json 18 | 19 | packages/*/lib 20 | 21 | packages/*/coverage 22 | packages/*/.nyc* 23 | packages/*/*.log 24 | packages/*/*.cache 25 | packages/**/.eslintcache 26 | packages/*/package-lock.json 27 | 28 | .storybook/coverage 29 | .storybook/.nyc* 30 | .storybook/*.log 31 | .storybook/*.cache 32 | .storybook/.eslintcache 33 | .storybook/package-lock.json 34 | 35 | # macOS 36 | .DS_STORE 37 | 38 | # IDE / Editors 39 | .idea/ 40 | _old 41 | 42 | docs 43 | .storybook 44 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: true 3 | dist: trusty 4 | node_js: 5 | - 8 6 | - 10 7 | install: 8 | - yarn 9 | - npm i -g codecov 10 | - travis_wait lerna bootstrap 11 | script: 12 | - npm test 13 | notifications: 14 | email: 15 | on_failure: change 16 | after_success: 17 | - codecov 18 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | // macOS compatible: 8 | { 9 | "type": "node", 10 | "request": "launch", 11 | "name": "Jest Current Test", 12 | "program": "${workspaceRoot}/node_modules/jest/bin/jest.js", 13 | "args": [ 14 | "${file}" 15 | ] 16 | }, 17 | // Windows compatible: 18 | { 19 | "name": "Jest All Tests", 20 | "type": "node", 21 | "request": "launch", 22 | "runtimeArgs": [ 23 | "--inspect-brk", 24 | "${workspaceRoot}/node_modules/jest/bin/jest.js", 25 | "--runInBand" 26 | ], 27 | "console": "integratedTerminal", 28 | "internalConsoleOptions": "neverOpen" 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present Oleg Akbarov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bootstrap-styled-components 2 | 3 | 4 | 5 | 6 | 7 | 8 | [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square)](https://lernajs.io/) 9 | 10 | Originally a fork from [styled-bootstrap-components](https://github.com/aichbauer/styled-bootstrap-components) 11 | 12 | ## Table of Contents 13 | 14 | - [Installation](#installation) 15 | - [Usage](#Usage) 16 | - [Components](#components) 17 | - [License](https://github.com/typestrap/bootstrap-typescript-styled-components/blob/master/LICENSE) 18 | 19 | ## Installation 20 | 21 | Example: 22 | 23 | ```sh 24 | npm install @typestrap/button@4.0.1-alpha.1 25 | ``` 26 | 27 | or 28 | 29 | ``` 30 | yarn add @typestrap/button@4.0.1-alpha.1 31 | ``` 32 | 33 | ## Usage 34 | 35 | TODO 36 | 37 | ## Components 38 | 39 | TODO 40 | 41 | MIT © Oleg Akbarov and contributors 42 | -------------------------------------------------------------------------------- /jest.transformer.js: -------------------------------------------------------------------------------- 1 | module.exports = require("babel-jest").createTransformer({ 2 | rootMode: "upward", 3 | }); 4 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "4.0.1", 6 | "npmClient": "yarn", 7 | "useWorkspaces": true, 8 | "command": { 9 | "publish": { 10 | "registry": "https://npm.pkg.github.com" 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-styled-components", 3 | "description": "The bootstrap components made with styled-components", 4 | "private": true, 5 | "scripts": { 6 | "clean": "lerna run clean", 7 | "build": "lerna run build", 8 | "pub": "lerna publish" 9 | }, 10 | "workspaces": [ 11 | "packages/*" 12 | ], 13 | "license": "MIT", 14 | "author": "Oleg Akbarov ", 15 | "keywords": [ 16 | "components", 17 | "react", 18 | "react-component", 19 | "ui", 20 | "styled-components", 21 | "bootstrap", 22 | "presentational", 23 | "stateless", 24 | "functional" 25 | ], 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/olegakbarov/bootstrap-styled-components.git" 29 | }, 30 | "publishConfig": { 31 | "registry": "https://npm.pkg.github.com/" 32 | }, 33 | "bugs": { 34 | "url": "https://github.com/olegakbarov/bootstrap-styled-components/issues" 35 | }, 36 | "homepage": "https://github.com/olegakbarov/bootstrap-styled-components", 37 | "devDependencies": { 38 | "jest-styled-components": "^6.3.1", 39 | "lerna": "^3.16.4", 40 | "react": "^16.7.0", 41 | "react-dom": "^16.7.0", 42 | "styled-components": "^4.1.3", 43 | "typescript": "^3.7.0-dev.20191018" 44 | }, 45 | "dependencies": { 46 | "@types/react": "^16.9.2", 47 | "@types/styled-components": "^4.1.19" 48 | } 49 | } -------------------------------------------------------------------------------- /packages/base/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present Oleg Akbarov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/base/README.md: -------------------------------------------------------------------------------- 1 | # `base` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const base = require('base'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/base/__tests__/base.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const base = require('..'); 4 | 5 | describe('base', () => { 6 | it('needs tests'); 7 | }); 8 | -------------------------------------------------------------------------------- /packages/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@typestrap/base", 3 | "version": "4.0.1", 4 | "description": "Base components", 5 | "publishConfig": { 6 | "registry": "https://npm.pkg.github.com/" 7 | }, 8 | "scripts": { 9 | "compile": "tsc -b tsconfig.json", 10 | "clean": "rm -rf ./lib && rm -rf tsconfig.build.tsbuildinfo", 11 | "build": "npm run clean && npm run compile" 12 | }, 13 | "keywords": [ 14 | "bootstrap", 15 | "styled", 16 | "components" 17 | ], 18 | "homepage": "https://github.com/typestrap/bootstrap-typescript-styled-components", 19 | "license": "MIT", 20 | "main": "lib/index.js", 21 | "directories": { 22 | "lib": "lib", 23 | "test": "__tests__" 24 | }, 25 | "files": [ 26 | "lib" 27 | ], 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/typestrap/bootstrap-typescript-styled-components.git" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/typestrap/bootstrap-typescript-styled-components/issues" 34 | } 35 | } -------------------------------------------------------------------------------- /packages/base/src/components/globalStyle.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | const BootstrapBaseCss = createGlobalStyle` 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | font-family: sans-serif; 12 | line-height: 1.15; 13 | -webkit-text-size-adjust: 100%; 14 | -ms-overflow-style: scrollbar; 15 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 16 | } 17 | 18 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 19 | display: block; 20 | } 21 | 22 | body { 23 | margin: 0; 24 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 25 | font-size: 1rem; 26 | font-weight: 400; 27 | line-height: 1.5; 28 | color: #212529; 29 | text-align: left; 30 | background-color: #fff; 31 | } 32 | 33 | [tabindex="-1"]:focus { 34 | outline: 0 !important; 35 | } 36 | 37 | hr { 38 | box-sizing: content-box; 39 | height: 0; 40 | overflow: visible; 41 | } 42 | 43 | h1, h2, h3, h4, h5, h6 { 44 | margin-top: 0; 45 | margin-bottom: 0.5rem; 46 | } 47 | 48 | p { 49 | margin-top: 0; 50 | margin-bottom: 1rem; 51 | } 52 | 53 | abbr[title], 54 | abbr[data-original-title] { 55 | text-decoration: underline; 56 | -webkit-text-decoration: underline dotted; 57 | text-decoration: underline dotted; 58 | cursor: help; 59 | border-bottom: 0; 60 | text-decoration-skip-ink: none; 61 | } 62 | 63 | address { 64 | margin-bottom: 1rem; 65 | font-style: normal; 66 | line-height: inherit; 67 | } 68 | 69 | ol, 70 | ul, 71 | dl { 72 | margin-top: 0; 73 | margin-bottom: 1rem; 74 | } 75 | 76 | ol ol, 77 | ul ul, 78 | ol ul, 79 | ul ol { 80 | margin-bottom: 0; 81 | } 82 | 83 | dt { 84 | font-weight: 700; 85 | } 86 | 87 | dd { 88 | margin-bottom: .5rem; 89 | margin-left: 0; 90 | } 91 | 92 | blockquote { 93 | margin: 0 0 1rem; 94 | } 95 | 96 | b, 97 | strong { 98 | font-weight: bolder; 99 | } 100 | 101 | small { 102 | font-size: 80%; 103 | } 104 | 105 | sub, 106 | sup { 107 | position: relative; 108 | font-size: 75%; 109 | line-height: 0; 110 | vertical-align: baseline; 111 | } 112 | 113 | sub { 114 | bottom: -.25em; 115 | } 116 | 117 | sup { 118 | top: -.5em; 119 | } 120 | 121 | a { 122 | color: #007bff; 123 | text-decoration: none; 124 | background-color: transparent; 125 | } 126 | 127 | a:hover { 128 | color: #0056b3; 129 | text-decoration: underline; 130 | } 131 | 132 | a:not([href]):not([tabindex]) { 133 | color: inherit; 134 | text-decoration: none; 135 | } 136 | 137 | a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { 138 | color: inherit; 139 | text-decoration: none; 140 | } 141 | 142 | a:not([href]):not([tabindex]):focus { 143 | outline: 0; 144 | } 145 | 146 | pre, 147 | code, 148 | kbd, 149 | samp { 150 | font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 151 | font-size: 1em; 152 | } 153 | 154 | pre { 155 | margin-top: 0; 156 | margin-bottom: 1rem; 157 | overflow: auto; 158 | -ms-overflow-style: scrollbar; 159 | } 160 | 161 | figure { 162 | margin: 0 0 1rem; 163 | } 164 | 165 | img { 166 | vertical-align: middle; 167 | border-style: none; 168 | } 169 | 170 | svg { 171 | overflow: hidden; 172 | vertical-align: middle; 173 | } 174 | 175 | table { 176 | border-collapse: collapse; 177 | } 178 | 179 | caption { 180 | padding-top: 0.75rem; 181 | padding-bottom: 0.75rem; 182 | color: #6c757d; 183 | text-align: left; 184 | caption-side: bottom; 185 | } 186 | 187 | th { 188 | text-align: inherit; 189 | } 190 | 191 | label { 192 | display: inline-block; 193 | margin-bottom: 0.5rem; 194 | } 195 | 196 | button { 197 | border-radius: 0; 198 | } 199 | 200 | button:focus { 201 | outline: 1px dotted; 202 | outline: 5px auto -webkit-focus-ring-color; 203 | } 204 | 205 | input, 206 | button, 207 | select, 208 | optgroup, 209 | textarea { 210 | margin: 0; 211 | font-family: inherit; 212 | font-size: inherit; 213 | line-height: inherit; 214 | } 215 | 216 | button, 217 | input { 218 | overflow: visible; 219 | } 220 | 221 | button, 222 | select { 223 | text-transform: none; 224 | } 225 | 226 | button, 227 | [type="button"], 228 | [type="reset"], 229 | [type="submit"] { 230 | -webkit-appearance: button; 231 | } 232 | 233 | button::-moz-focus-inner, 234 | [type="button"]::-moz-focus-inner, 235 | [type="reset"]::-moz-focus-inner, 236 | [type="submit"]::-moz-focus-inner { 237 | padding: 0; 238 | border-style: none; 239 | } 240 | 241 | input[type="radio"], 242 | input[type="checkbox"] { 243 | box-sizing: border-box; 244 | padding: 0; 245 | } 246 | 247 | input[type="date"], 248 | input[type="time"], 249 | input[type="datetime-local"], 250 | input[type="month"] { 251 | -webkit-appearance: listbox; 252 | } 253 | 254 | textarea { 255 | overflow: auto; 256 | resize: vertical; 257 | } 258 | 259 | fieldset { 260 | min-width: 0; 261 | padding: 0; 262 | margin: 0; 263 | border: 0; 264 | } 265 | 266 | legend { 267 | display: block; 268 | width: 100%; 269 | max-width: 100%; 270 | padding: 0; 271 | margin-bottom: .5rem; 272 | font-size: 1.5rem; 273 | line-height: inherit; 274 | color: inherit; 275 | white-space: normal; 276 | } 277 | 278 | progress { 279 | vertical-align: baseline; 280 | } 281 | 282 | [type="number"]::-webkit-inner-spin-button, 283 | [type="number"]::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | [type="search"] { 288 | outline-offset: -2px; 289 | -webkit-appearance: none; 290 | } 291 | 292 | [type="search"]::-webkit-search-decoration { 293 | -webkit-appearance: none; 294 | } 295 | 296 | ::-webkit-file-upload-button { 297 | font: inherit; 298 | -webkit-appearance: button; 299 | } 300 | 301 | output { 302 | display: inline-block; 303 | } 304 | 305 | summary { 306 | display: list-item; 307 | cursor: pointer; 308 | } 309 | 310 | template { 311 | display: none; 312 | } 313 | 314 | h1, h2, h3, h4, h5, h6 { 315 | margin-bottom: 0.5rem; 316 | font-family: inherit; 317 | font-weight: 500; 318 | line-height: 1.2; 319 | color: inherit; 320 | } 321 | 322 | h1 { 323 | font-size: 2.5rem; 324 | } 325 | 326 | h2 { 327 | font-size: 2rem; 328 | } 329 | 330 | h3 { 331 | font-size: 1.75rem; 332 | } 333 | 334 | h4 { 335 | font-size: 1.5rem; 336 | } 337 | 338 | h5 { 339 | font-size: 1.25rem; 340 | } 341 | 342 | h6 { 343 | font-size: 1rem; 344 | } 345 | 346 | hr { 347 | margin-top: 1rem; 348 | margin-bottom: 1rem; 349 | border: 0; 350 | border-top: 1px solid rgba(0, 0, 0, 0.1); 351 | } 352 | 353 | small { 354 | font-size: 80%; 355 | font-weight: 400; 356 | } 357 | 358 | mark { 359 | padding: 0.2em; 360 | background-color: #fcf8e3; 361 | } 362 | `; 363 | 364 | export { BootstrapBaseCss }; 365 | -------------------------------------------------------------------------------- /packages/base/src/index.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Transition } from './components/transitions'; 3 | import { BootstrapBaseCss } from './components/globalStyle'; 4 | import { Utilities } from './components/utilityStyle'; 5 | 6 | const P = styled.p`${Utilities};`; 7 | const A = styled.a`${Utilities};`; 8 | const Ul = styled.ul`${Utilities};`; 9 | const Li = styled.li`${Utilities};`; 10 | const Ol = styled.ol`${Utilities};`; 11 | const H1 = styled.h1`${Utilities};`; 12 | const H2 = styled.h2`${Utilities};`; 13 | const H3 = styled.h3`${Utilities};`; 14 | const H4 = styled.h4`${Utilities};`; 15 | const H5 = styled.h5`${Utilities};`; 16 | const H6 = styled.h6`${Utilities};`; 17 | const Tr = styled.tr`${Utilities};`; 18 | const Td = styled.td`${Utilities};`; 19 | const Div = styled.div`${Utilities};`; 20 | const Nav = styled.nav`${Utilities};`; 21 | const Img = styled.img`${Utilities};`; 22 | const Span = styled.span`${Utilities};`; 23 | const Form = styled.form`${Utilities};`; 24 | const Small = styled.small`${Utilities};`; 25 | const Input = styled.input`${Utilities};`; 26 | const Table = styled.table`${Utilities};`; 27 | const Button = styled.button`${Utilities};`; 28 | const Select = styled.select`${Utilities};`; 29 | const Textarea = styled.textarea`${Utilities};`; 30 | 31 | export { 32 | Transition, 33 | BootstrapBaseCss, 34 | Utilities, 35 | P, 36 | A, 37 | Ul, 38 | Li, 39 | Ol, 40 | H1, 41 | H2, 42 | H3, 43 | H4, 44 | H5, 45 | H6, 46 | Tr, 47 | Td, 48 | Div, 49 | Nav, 50 | Img, 51 | Span, 52 | Form, 53 | Small, 54 | Input, 55 | Table, 56 | Button, 57 | Select, 58 | Textarea, 59 | }; 60 | -------------------------------------------------------------------------------- /packages/base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib" 5 | }, 6 | "include": ["./src/**/*"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/button/.npmignore: -------------------------------------------------------------------------------- 1 | coverage 2 | test 3 | .babelrc 4 | yarn.lock 5 | package-lock.json 6 | src 7 | -------------------------------------------------------------------------------- /packages/button/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present Oleg Akbarov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/button/README.md: -------------------------------------------------------------------------------- 1 | # @bootstrap-styled-components/button 2 | 3 | > The [bootstrap](https://getbootstrap.com) button component made with [styled-components](https://styled-components.com). 4 | 5 | Button component 6 | 7 | ## Requirements 8 | 9 | ```sh 10 | - styled-components@^4.1.3 11 | - react@^16.7.0 12 | ``` 13 | 14 | ## Installation 15 | 16 | ```sh 17 | npm install --save @bootstrap-styled-components/button 18 | or 19 | yarn add @bootstrap-styled-components/button 20 | ``` 21 | 22 | ## Usage 23 | 24 | For detailed information take a look at the [documentation](https://aichbauer.github.io/styled-bootstrap-components). 25 | 26 | ```jsx 27 | import { 28 | Button, 29 | LinkButton, 30 | ButtonGroups, 31 | ButtonToolbar 32 | } from "styled-button-component"; 33 | 34 | const MyButtonComponent = props => ( 35 | 38 | ); 39 | 40 | const MyButtonGroupComponent = props => ( 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | 48 | const MyButtonToolbarComponent = props => ( 49 | 50 | 51 | 1 52 | 2 53 | 3 54 | 4 55 | 56 | 57 | 5 58 | 6 59 | 7 60 | 61 | 62 | 8 63 | 64 | 65 | ); 66 | ``` 67 | 68 | ## Props 69 | 70 | Props correspond to `Bootstrap` css classes all have same type: `boolean` 71 | 72 | - `pill` only on Button, LinkButton 73 | - `noRadius` only on Button, LinkButton 74 | - `vertical` only on ButtonGroup **Type**: boolean 75 | - `primary` 76 | - `secondary` 77 | - `success` 78 | - `danger` 79 | - `warning` 80 | - `info` 81 | - `light` 82 | - `dark` 83 | - `active` 84 | - `disabled` 85 | - `outline` 86 | - `block` 87 | - `sm` 88 | - `lg` 89 | -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@typestrap/button", 3 | "version": "4.0.1", 4 | "description": "The bootstrap button component created with styled-components", 5 | "entrypoint": "./lib/index.js", 6 | "directories": { 7 | "lib": "lib" 8 | }, 9 | "private": false, 10 | "publishConfig": { 11 | "registry": "https://npm.pkg.github.com/" 12 | }, 13 | "scripts": { 14 | "compile": "tsc -b tsconfig.json", 15 | "clean": "rm -rf ./lib && rm -rf tsconfig.build.tsbuildinfo", 16 | "build": "npm run clean && npm run compile" 17 | }, 18 | "license": "MIT", 19 | "keywords": [ 20 | "components", 21 | "react", 22 | "react-component", 23 | "ui", 24 | "styled-components", 25 | "bootstrap" 26 | ], 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/typestrap/bootstrap-typescript-styled-components.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/typestrap/bootstrap-typescript-styled-components/issues" 33 | }, 34 | "homepage": "https://github.com/typestrap/bootstrap-typescript-styled-components", 35 | "dependencies": { 36 | "@typestrap/base": "^4.0.0", 37 | "@typestrap/config": "^4.0.0" 38 | }, 39 | "peerDependencies": { 40 | "react": "^16.7.0", 41 | "styled-components": "^4.1.2" 42 | } 43 | } -------------------------------------------------------------------------------- /packages/button/src/components/ButtonGroup.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components"; 2 | import { Div } from "@typestrap/base"; 3 | import { theme, getStyle, ButtonProps as Props } from "@typestrap/config"; 4 | 5 | const size = (props: Props) => { 6 | const { theme, lg, sm } = props; 7 | if (lg) { 8 | return css` 9 | padding: ${getStyle(theme, "buttonGroup", "padding", "lg")}; 10 | font-size: ${getStyle(theme, "buttonGroup", "fontSize", "lg")}; 11 | line-height: 1.5; 12 | `; 13 | } else if (sm) { 14 | return css` 15 | padding: ${getStyle(theme, "buttonGroup", "padding", "sm")}; 16 | font-size: ${getStyle(theme, "buttonGroup", "fontSize", "sm")}; 17 | line-height: 1.5; 18 | `; 19 | } 20 | 21 | return css` 22 | padding: ${getStyle(theme, "buttonGroup", "padding", "default")}; 23 | font-size: ${getStyle(theme, "buttonGroup", "fontSize", "default")}; 24 | line-height: 1.5; 25 | `; 26 | }; 27 | 28 | const vertical = (props: Props) => { 29 | if (props.vertical) { 30 | return css` 31 | flex-direction: column; 32 | align-items: flex-start; 33 | justify-content: center; 34 | & > button { 35 | width: 100%; 36 | &:not(:last-child) { 37 | border-bottom-right-radius: 0; 38 | border-bottom-left-radius: 0; 39 | } 40 | &:not(:first-child) { 41 | border-top-left-radius: 0; 42 | border-top-right-radius: 0; 43 | } 44 | } 45 | `; 46 | } 47 | 48 | return css` 49 | & > button { 50 | &:not(:last-child) { 51 | border-top-right-radius: 0; 52 | border-bottom-right-radius: 0; 53 | } 54 | &:not(:first-child) { 55 | border-top-left-radius: 0; 56 | border-bottom-left-radius: 0; 57 | } 58 | } 59 | `; 60 | }; 61 | 62 | const ButtonGroup = styled(Div)` 63 | position: relative; 64 | display: inline-flex; 65 | vertical-align: middle; 66 | & > button { 67 | line-height: 1.5; 68 | position: relative; 69 | flex: 0 1 auto; 70 | &:hover { 71 | z-index: 1; 72 | } 73 | ${props => size(props)}; 74 | } 75 | ${props => vertical(props)}; 76 | `; 77 | 78 | ButtonGroup.defaultProps = { 79 | theme 80 | }; 81 | 82 | export { ButtonGroup }; 83 | -------------------------------------------------------------------------------- /packages/button/src/components/ButtonToolbar.tsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | import { Div } from "@bootstrap-styled-components/base"; 4 | 5 | const ButtonToolbar = styled(Div)` 6 | display: flex; 7 | flex-wrap: wrap; 8 | justify-content: flex-start; 9 | width: auto; 10 | `; 11 | 12 | export { ButtonToolbar }; 13 | -------------------------------------------------------------------------------- /packages/button/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Button, LinkButton } from "./components/Button"; 2 | import { ButtonGroup } from "./components/ButtonGroup"; 3 | import { ButtonToolbar } from "./components/ButtonToolbar"; 4 | 5 | export { Button, LinkButton, ButtonGroup, ButtonToolbar }; 6 | -------------------------------------------------------------------------------- /packages/button/test/Button/LinkButton.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import 'jest-styled-components'; 4 | 5 | import { LinkButton } from '../../src'; 6 | 7 | test('Styles matches LinkButton', () => { 8 | const tree = renderer.create().toJSON(); 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/button/test/Button/__snapshots__/LinkButton.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Styles matches LinkButton 1`] = ` 4 | .c0 { 5 | -webkit-text-decoration: none; 6 | text-decoration: none; 7 | font-weight: 400; 8 | line-height: 1.5; 9 | text-align: center; 10 | white-space: nowrap; 11 | vertical-align: middle; 12 | -webkit-user-select: none; 13 | -moz-user-select: none; 14 | -ms-user-select: none; 15 | user-select: none; 16 | -webkit-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; 17 | transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; 18 | border: 1px solid #6c757d; 19 | background-color: #6c757d; 20 | border-radius: 0.25rem; 21 | display: inline-block; 22 | font-size: 1rem; 23 | color: #fff; 24 | padding: 0.375rem 0.75rem; 25 | } 26 | 27 | .c0:focus { 28 | outline: 0; 29 | box-shadow: 0 0 0 0.2rem rgba(108,117,125,0.5); 30 | } 31 | 32 | .c0:hover, 33 | .c0:focus { 34 | -webkit-text-decoration: none; 35 | text-decoration: none; 36 | border: 1px solid #6c757d; 37 | background-color: #6c757d; 38 | color: #fff; 39 | cursor: pointer; 40 | } 41 | 42 | .c0:hover:focus, 43 | .c0:focus:focus, 44 | .c0:hover:hover, 45 | .c0:focus:hover { 46 | border: 1px solid #4e555b; 47 | } 48 | 49 | .c0:hover:focus, 50 | .c0:focus:focus, 51 | .c0:hover:hover, 52 | .c0:focus:hover { 53 | background-color: #5a6268; 54 | } 55 | 56 | .c0:focus, 57 | .c0:hover { 58 | border: 1px solid #4e555b; 59 | } 60 | 61 | .c0:focus, 62 | .c0:hover { 63 | background-color: #5a6268; 64 | } 65 | 66 | 69 | `; 70 | -------------------------------------------------------------------------------- /packages/button/test/Button/__snapshots__/active.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Styles matches Button active 1`] = ` 4 | .c0 { 5 | font-weight: 400; 6 | line-height: 1.5; 7 | text-align: center; 8 | white-space: nowrap; 9 | vertical-align: middle; 10 | -webkit-user-select: none; 11 | -moz-user-select: none; 12 | -ms-user-select: none; 13 | user-select: none; 14 | -webkit-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; 15 | transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; 16 | border: 1px solid #4e555b; 17 | background-image: none; 18 | background-color: #6c757d; 19 | border-radius: 0.25rem; 20 | display: inline-block; 21 | font-size: 1rem; 22 | color: #fff; 23 | padding: 0.375rem 0.75rem; 24 | } 25 | 26 | .c0:focus { 27 | outline: 0; 28 | box-shadow: 0 0 0 0.2rem rgba(108,117,125,0.5); 29 | } 30 | 31 | .c0:hover, 32 | .c0:focus { 33 | -webkit-text-decoration: none; 34 | text-decoration: none; 35 | border: 1px solid #4e555b; 36 | background-image: none; 37 | background-color: #6c757d; 38 | color: #fff; 39 | cursor: pointer; 40 | } 41 | 42 |