├── .all-contributorsrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md ├── lerna.json ├── now.json ├── package-lock.json ├── package.json └── packages ├── dubdubdub ├── .babelrc ├── README.md ├── components │ ├── atoms │ │ ├── bookmark_heading.component.tsx │ │ ├── callout.component.ts │ │ ├── code.component.tsx │ │ ├── color.component.tsx │ │ ├── generic_container.component.tsx │ │ └── typography.component.ts │ ├── hocs │ │ └── theme_manager.component.tsx │ ├── molecules │ │ ├── header.component.tsx │ │ ├── skip_contents.component.tsx │ │ └── theme_switcher.component.tsx │ └── organisms │ │ └── error_boundary.component.tsx ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── _error.tsx │ ├── docs.tsx │ ├── faq.tsx │ └── index.tsx ├── tsconfig.json ├── types │ └── component.types.ts ├── typings │ ├── globals.d.ts │ └── react-syntax-highlighter │ │ └── index.d.ts └── utils │ ├── spacing.util.ts │ └── styles.util.ts └── styled-typography ├── README.md ├── package-lock.json ├── package.json ├── src ├── index.ts ├── types.ts └── utils.ts ├── test └── utils.test.ts └── tsconfig.json /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "styled-typography", 3 | "projectOwner": "mike-engel", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "angular", 12 | "contributors": [ 13 | { 14 | "login": "mike-engel", 15 | "name": "Mike Engel", 16 | "avatar_url": "https://avatars0.githubusercontent.com/u/464447?v=4", 17 | "profile": "https://www.mike-engel.com", 18 | "contributions": [ 19 | "question", 20 | "code", 21 | "doc", 22 | "example", 23 | "test", 24 | "review", 25 | "maintenance", 26 | "design", 27 | "infra", 28 | "ideas", 29 | "content" 30 | ] 31 | }, 32 | { 33 | "login": "alcesleo", 34 | "name": "Jimmy Börjesson", 35 | "avatar_url": "https://avatars3.githubusercontent.com/u/2709244?v=4", 36 | "profile": "http://alcesleo.github.io/", 37 | "contributions": [ 38 | "doc" 39 | ] 40 | } 41 | ], 42 | "contributorsPerLine": 7 43 | } 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | 4 | *.orig 5 | 6 | .nyc_output/ 7 | .next/ 8 | node_modules/ 9 | dist/ 10 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | 4 | .next/ 5 | .nyc_output/ 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true 3 | } 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Unreleased 2 | 3 | # 1.0.1 4 | 5 | ## Bug fixes 6 | 7 | - Update dependencies to steer clear of security violations 8 | 9 | # 1.0.0 10 | 11 | No new changes, just the first stable release. 12 | 13 | # 1.0.0-rc2 14 | 15 | ## New features 16 | 17 | - Adds a `GlobalTypeStyles` helper to inject global type styles for `Span`, `Link`, etc. 18 | 19 | # 1.0.0-rc1 20 | 21 | Initial (beta) release! 22 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at mike@mike-engel.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | 78 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2019 Mike Engel 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # styled-typography 2 | 3 | > Typograpy components for react and styled-components 4 | 5 | ![current version](https://badgen.net/npm/v/styled-typography) 6 | ![current version](https://badgen.net/github/license/mike-engel/styled-typography) 7 | ![min-zip size](https://badgen.net/bundlephobia/minzip/styled-typography) 8 | 9 | `styled-typography` is a small set of components, using [`styled-components`](https://styled-components.com), to better manage typographic styles within your app. The API was born out of years of managing large single page applications and design systems. It's flexible to be used however you need and to be customized further, but simple enough to have a small API. Additionally, care has been taken to ensure accessibility when adding it to your apps. 10 | 11 | `styled-typography` aims to be as small as possible and thus has no dependencies. It requires `styled-components` v4 or above and that's it! To get started, keep reading. 12 | 13 | ## Usage 14 | 15 | The minimum to get started is to have a `ThemeProvider` somewhere near the top of your react tree. You don't need to provide a theme if you want the default configuration, which will automatically be used if you don't provide one. 16 | 17 | ```jsx 18 | import React from "react"; 19 | import { ThemeProvider } from "styled-components"; 20 | 21 | export const App = ({ children }) => ( 22 | {children} 23 | ); 24 | ``` 25 | 26 | To configure the typographic setup, you can pass any and all [configuration options](#options) listed below. 27 | 28 | ```jsx 29 | import React from "react"; 30 | import { ThemeProvider } from "styled-components"; 31 | 32 | // only customizes these three options. The rest will come from the default implementation 33 | const typographyTheme = { 34 | fontSizes: ["2.369rem", "1.777rem", "1.333rem", "1rem", "0.75rem", "10px"], 35 | bodyFontFamily: "Source Code Pro, Input, monospace", 36 | headingFontFamily: "SF Display, Helvetica Neue, Circular, sans-serif" 37 | }; 38 | 39 | export const App = ({ children }) => ( 40 | 41 | {children} 42 | 43 | ); 44 | ``` 45 | 46 | ### Components 47 | 48 | `styled-typography` provides components for you to use and extend if needed: `GlobalTypeStyles`, `Text`, `Heading`, `Span`, and `Link`. 49 | 50 | #### `GlobalTypeStyles` 51 | 52 | The `GlobalStyleStyles` component is a way to quickly get global type styles into your app. This is useful if you intent to use `Span` or `Link` outside of `Text`/`Heading`, or other non-`styled-typography` components in your app. It's important, however, that you place it within the `ThemeProvider` component. 53 | 54 | ```jsx 55 | import React from "react"; 56 | import { ThemeProvider } from "styled-components"; 57 | import { GlobalTypeStyles } from "styled-typography"; 58 | 59 | export const App = ({ children }) => ( 60 | 61 | 62 | {children} 63 | 64 | ); 65 | ``` 66 | 67 | #### `Text` 68 | 69 | The `Text` component resolves, by default, to a `p` component within the DOM. It accepts all props passable to `p`, as well as `TextProps`. 70 | 71 | ```jsx 72 | import React from "react"; 73 | import { Text, FontWeight, FontStyle } from "styled-typography"; 74 | 75 | export const HelloWorld = ({ className }) => ( 76 | 84 | Hello, World! 85 | 86 | ); 87 | ``` 88 | 89 | #### `Heading` 90 | 91 | The `Heading` component resolves, by default, to a `div` component within the DOM. It accepts all props passable to `div`, as well as `TextProps`. 92 | 93 | But wait, you say! That's not accessible! I know. By default, a `div` is not semantically an `h1` element. `ARIA`, however, provides attributes that _can_ make it a semantic header. Thus, the `Header` component automatically gets `role="heading" and`aria-level="#"` attributes. 94 | 95 | ```jsx 96 | import React from "react"; 97 | import { Heading, FontWeight, FontStyle } from "styled-typography"; 98 | 99 | export const HelloWorld = ({ className }) => ( 100 | 109 | Hello, World! 110 | 111 | ); 112 | ``` 113 | 114 | #### `Span` 115 | 116 | The `Span` component resolves, by default, to a `span` component within the DOM. It accepts all props passable to `span`, as well as `TextProps`. 117 | 118 | ```jsx 119 | import React from "react"; 120 | import { Span, FontWeight, FontStyle } from "styled-typography"; 121 | 122 | export const HelloWorld = ({ className }) => ( 123 | 131 | Hello, World! 132 | 133 | ); 134 | ``` 135 | 136 | #### `Link` 137 | 138 | The `Link` component resolves, by default, to an `a` component within the DOM. It accepts all props passable to `a`, as well as `TextProps`. 139 | 140 | ```jsx 141 | import React from "react"; 142 | import { Link, FontWeight, FontStyle } from "styled-typography"; 143 | 144 | export const HelloWorld = ({ className }) => ( 145 | 155 | Hello, World! 156 | 157 | ); 158 | ``` 159 | 160 | ### Options 161 | 162 | Each of these options has what I consider to be a good default. You may override all of them, or choose just a few to change. 163 | 164 | - [fontSizes](#fontsizes) 165 | - [bodyFontFamily](#bodyfontfamily) 166 | - [bodySize](#bodysize) 167 | - [bodyWeight](#bodyweight) 168 | - [bodyStyle](#bodystyle) 169 | - [bodyColor](#bodycolor) 170 | - [bodyLineHeight](#bodylineheight) 171 | - [headingFontFamily](#headingfontfamily) 172 | - [headingSize](#headingsize) 173 | - [headingWeight](#headingweight) 174 | - [headingStyle](#headingstyle) 175 | - [headingColor](#headingcolor) 176 | - [headingLineHeight](#headinglineheight) 177 | - [extras](#extra) 178 | 179 | #### **`fontSizes`** 180 | 181 | **Type**: `[string, string, string, string, string, string]` 182 | **Default**: `["2.369rem", "1.777rem", "1.333rem", "1rem", "0.750rem", "10px"]` 183 | 184 | `fontSizes` controls the 6 font size levels available to you. This generally corresponds to `h1` through `h6`. 6 levels are required. If your app has less than that, just duplicate the smallest value until there are 6. 185 | 186 | If only having 6 levels doesn't work for you, please file an issue! 187 | 188 | #### **`bodyFontFamily`** 189 | 190 | **Type**: `string` 191 | **Default**: `"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"` 192 | 193 | `bodyFontFamily` sets the font family for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 194 | 195 | #### **`bodySize`** 196 | 197 | **Type**: `number` 198 | **Default**: `4` 199 | 200 | `bodySize` sets the default font size level for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 201 | 202 | #### **`bodyWeight`** 203 | 204 | **Type**: `FontWeight` 205 | **Default**: `FontWeight.Normal` 206 | 207 | `bodyWeight` sets the default `font-weight` for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 208 | 209 | Available options are tied to the [common name mapping system](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping): 210 | 211 | - `FontWeight.Hairline` = `"100"`, 212 | - `FontWeight.ExtraLight` = `"200"`, 213 | - `FontWeight.Light` = `"300"`, 214 | - `FontWeight.Normal` = `"400"`, 215 | - `FontWeight.Medium` = `"500"`, 216 | - `FontWeight.SemiBold` = `"600"`, 217 | - `FontWeight.Bold` = `"700"`, 218 | - `FontWeight.ExtraBold` = `"800"`, 219 | - `FontWeight.Heavy` = `"900"`, 220 | - `FontWeight.Inherit` = `"inherit"` 221 | 222 | #### **`bodyStyle`** 223 | 224 | **Type**: `FontStyle` 225 | **Default**: `FontStyle.Regular` 226 | 227 | `bodyStyle` sets the default `font-style` for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 228 | 229 | Available options are tied to the [standard `font-style` options](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style#Values) with an exception for `oblique `: 230 | 231 | - `FontStyle.Italic` = `"italic"`, 232 | - `FontStyle.Oblique` = `"oblique"`, 233 | - `FontStyle.Normal` = `"normal"`, 234 | - `FontStyle.Inherit` = `"inherit"` 235 | 236 | #### **`bodyColor`** 237 | 238 | **Type**: `string` 239 | **Default**: `"#000000"` 240 | 241 | `bodyColor` sets the default `color` for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 242 | 243 | #### **`bodyLineHeight`** 244 | 245 | **Type**: `number | string` 246 | **Default**: `1.4` 247 | 248 | `bodyLineHeight` sets the default `line-height` for `Text` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 249 | 250 | #### **`headingFontFamily`** 251 | 252 | **Type**: `string` 253 | **Default**: `"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"` 254 | 255 | `headingFontFamily` sets the font family for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 256 | 257 | #### **`headingSize`** 258 | 259 | **Type**: `number` 260 | **Default**: `4` 261 | 262 | `headingSize` sets the default font size level for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 263 | 264 | #### **`headingWeight`** 265 | 266 | **Type**: `FontWeight` 267 | **Default**: `FontWeight.Normal` 268 | 269 | `headingWeight` sets the default `font-weight` for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 270 | 271 | Available options are tied to the [common name mapping system](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping): 272 | 273 | - `FontWeight.Hairline` = `"100"`, 274 | - `FontWeight.ExtraLight` = `"200"`, 275 | - `FontWeight.Light` = `"300"`, 276 | - `FontWeight.Normal` = `"400"`, 277 | - `FontWeight.Medium` = `"500"`, 278 | - `FontWeight.SemiBold` = `"600"`, 279 | - `FontWeight.Bold` = `"700"`, 280 | - `FontWeight.ExtraBold` = `"800"`, 281 | - `FontWeight.Heavy` = `"900"`, 282 | - `FontWeight.Inherit` = `"inherit"` 283 | 284 | #### **`headingStyle`** 285 | 286 | **Type**: `FontStyle` 287 | **Default**: `FontStyle.Regular` 288 | 289 | `headingStyle` sets the default `font-style` for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 290 | 291 | Available options are tied to the [standard `font-style` options](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style#Values) with an exception for `oblique `: 292 | 293 | - `FontStyle.Italic` = `"italic"`, 294 | - `FontStyle.Oblique` = `"oblique"`, 295 | - `FontStyle.Normal` = `"normal"`, 296 | - `FontStyle.Inherit` = `"inherit"` 297 | 298 | #### **`headingColor`** 299 | 300 | **Type**: `string` 301 | **Default**: `"#000000"` 302 | 303 | `headingColor` sets the default `color` for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 304 | 305 | #### **`headingLineHeight`** 306 | 307 | **Type**: `number | string` 308 | **Default**: `1.4` 309 | 310 | `headingLineHeight` sets the default `line-height` for `Heading` elements. `Span` and `Link` will inherit the global styles unless used within a `Text` or `Heading` element. 311 | 312 | #### **`extra`** 313 | 314 | **Type**: `{ text: string, heading: string, span: string, link: string }` 315 | **Default**: `{}` 316 | 317 | `extra` injects extra styles for each type of component. Template strings and plain strings are acceptable values for each key. 318 | 319 | ## Differences from [`react-typography`](https://github.com/KyleAMathews/typography.js#reactjs-helper-components) 320 | 321 | The main difference is that `react-typography`, and `typography.js` both are meant to setup typographic styling at the root level (i.e. at the `body` element). They don't provide components to use throughout the app. 322 | 323 | The main issue I have with this approach is that it's not very `JSX`-like. To customize each instance of `p`, `h#`, `span`, etc, you must override each or create your own components. This is ok, but also time consuming. 324 | 325 | `styled-typography` takes a different approach, by providing components that feel like react and have an API that allows you to customize each one as needed with props rather than a `className` or `style` prop. 326 | 327 | Please use whichever you prefer! I personally prefer the API and components used in `styled-typography`, which is why I created it, but everyone's different! 328 | 329 | ## Contibuting 330 | 331 | Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 332 | 333 | Issues and pull requests are welcome! 334 | 335 | ### Setup 336 | 337 | This project is setup as a monorepo using [lerna](https://lerna.js.org). Lerna is pretty small, so there isn't too much to learn. In summary, you should be able to use the following command to start on this project: 338 | 339 | ```sh 340 | # install dependencies 341 | lerna bootstrap --hoist 342 | ``` 343 | 344 | #### npm package 345 | 346 | To contribute to the npm package, there's only a handful of `npm run` commands. In general, you probably only need `npm run test:watch`. 347 | 348 | ```sh 349 | # run tests with a coverage report 350 | npm run test:coverage 351 | 352 | # run tests without a coverage report 353 | npm run test 354 | 355 | # run tests and re-test when files change 356 | npm run test:watch 357 | 358 | # run a quick typecheck on the code 359 | npm run typecheck 360 | 361 | # build the project to ./dist/ 362 | npm run build 363 | ``` 364 | 365 | To see your changes, you can run the `dubdubdub` project, or use `npm link` to include it in another one of your projects locally. 366 | 367 | #### Public site (a.k.a `dubdubdub`) 368 | 369 | To contribute to the public facing website, there's also a handful of relevant `npm run` scripts you'll need to use. Other commands are meant to be used for deployment, which you shouldn't have to worry about ✨ 370 | 371 | ```sh 372 | # start the development server 373 | npm run dev 374 | 375 | # run a quick typecheck on the code 376 | npm run typecheck 377 | ``` 378 | 379 | ## [License](LICENSE.md) 380 | 381 | ## Contributors ✨ 382 | 383 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 |
Mike Engel
Mike Engel
💬 💻 📖 💡 ⚠️ 👀 🚧 🎨 🚇 🤔 🖋		Jimmy Börjesson
Jimmy Börjesson
📖
393 | 394 | 395 | 396 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 397 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "version": "1.0.3" 4 | } 5 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "alias": ["styled-typography.now.sh"], 4 | "builds": [ 5 | { "src": "packages/dubdubdub/next.config.js", "use": "@now/next" } 6 | ], 7 | "routes": [ 8 | { "src": "/", "dest": "/packages/dubdubdub/index" }, 9 | { "src": "/(.+)", "dest": "/packages/dubdubdub/$1" } 10 | ], 11 | "public": true 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "devDependencies": { 5 | "husky": "^4.2.5", 6 | "lerna": "^3.22.1", 7 | "lint-staged": "^10.1.3", 8 | "prettier": "^2.0.4" 9 | }, 10 | "husky": { 11 | "hooks": { 12 | "pre-commit": "lint-staged" 13 | } 14 | }, 15 | "lint-staged": { 16 | "*.{ts,tsx,js,jsx,md,json}": [ 17 | "prettier --write", 18 | "git add" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/dubdubdub/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["next/babel", "@zeit/next-typescript/babel"], 3 | "plugins": [ 4 | "jsx-control-statements", 5 | [ 6 | "babel-plugin-styled-components", 7 | { 8 | "ssr": true, 9 | "displayName": false, 10 | "preprocess": false 11 | } 12 | ] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/dubdubdub/README.md: -------------------------------------------------------------------------------- 1 | # dubdubdub (public site) 2 | 3 | For more info on how to run this package locally, please refer to the [parent README](../../README.md#public-site-aka-dubdubdub). 4 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/bookmark_heading.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactChild } from "react"; 2 | import styled from "styled-components"; 3 | import NextLink from "next/link"; 4 | import { Heading, Link, TypeProps } from "styled-typography"; 5 | import { Stylable } from "../../types/component.types"; 6 | 7 | type Props = Stylable & 8 | TypeProps & { 9 | children: ReactChild | ReactChild[]; 10 | id: string; 11 | }; 12 | 13 | export const RawBookmarkHeading = ({ 14 | className, 15 | children, 16 | id, 17 | ...rest 18 | }: Props) => ( 19 | 20 | 21 | 22 | 32 | 33 | 34 | 35 | 36 | 37 | {children} 38 | 39 | ); 40 | 41 | export const BookmarkHeading = styled(RawBookmarkHeading)` 42 | position: relative; 43 | 44 | ${Link}:first-child { 45 | position: absolute; 46 | top: 50%; 47 | left: -44px; 48 | transform: translateY(-50%); 49 | padding: 10px; 50 | line-height: 0; 51 | } 52 | 53 | @media (hover) { 54 | ${Link}:first-child { 55 | opacity: 0; 56 | } 57 | 58 | &:hover ${Link}:first-child { 59 | opacity: 1; 60 | } 61 | } 62 | `; 63 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/callout.component.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { spacing } from "../../utils/spacing.util"; 3 | import { getThemeProp } from "../../utils/styles.util"; 4 | import { Text } from "styled-typography"; 5 | import { light, pSBC } from "./color.component"; 6 | 7 | export const Callout = styled("div")` 8 | padding: ${spacing(2)}px; 9 | background: ${getThemeProp("highlight")}; 10 | margin: ${spacing(2)}px 0; 11 | border-left: ${spacing(0.75)}px solid ${pSBC(-0.2, light)}; 12 | 13 | ul { 14 | margin: 0; 15 | } 16 | 17 | ${Text} { 18 | margin: 0; 19 | 20 | & + & { 21 | margin-top: ${spacing(2)}px; 22 | } 23 | } 24 | `; 25 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/code.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactChild } from "react"; 2 | import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter"; 3 | import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism"; 4 | 5 | type Props = { 6 | language?: SyntaxHighlighterProps["language"]; 7 | children: ReactChild; 8 | }; 9 | 10 | export const Code = ({ language = "jsx", children }: Props) => ( 11 | 12 | {children} 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/color.component.tsx: -------------------------------------------------------------------------------- 1 | export const hexToRgba = (hex: string, alpha: number) => { 2 | const r = hex.substr(1, 2); 3 | const g = hex.substr(3, 2); 4 | const b = hex.substr(5, 2); 5 | 6 | return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt( 7 | b, 8 | 16 9 | )}, ${alpha})`; 10 | }; 11 | 12 | export const pSBCr = (color: string) => { 13 | const l = color.length; 14 | const RGB: Record = {}; 15 | 16 | if (l > 9) { 17 | const colorArr = color.split(","); 18 | 19 | if (colorArr.length < 3 || colorArr.length > 4) return null; 20 | 21 | RGB[0] = parseInt(colorArr[0].split("(")[1]); 22 | RGB[1] = parseInt(colorArr[1]); 23 | RGB[2] = parseInt(colorArr[2]); 24 | RGB[3] = colorArr[3] ? parseFloat(colorArr[3]) : -1; 25 | } else { 26 | let colorStr: string | number = color; 27 | 28 | if (l == 8 || l == 6 || l < 4) return null; 29 | 30 | if (l < 6) { 31 | colorStr = 32 | "#" + 33 | color[1] + 34 | color[1] + 35 | color[2] + 36 | color[2] + 37 | color[3] + 38 | color[3] + 39 | (l > 4 ? color[4] + "" + color[4] : ""); 40 | } 41 | 42 | const colorInt = parseInt(colorStr.slice(1), 16); 43 | 44 | RGB[0] = (colorInt >> 16) & 255; 45 | RGB[1] = (colorInt >> 8) & 255; 46 | RGB[2] = colorInt & 255; 47 | RGB[3] = -1; 48 | 49 | if (l == 9 || l == 5) { 50 | RGB[3] = Math.round((RGB[2] / 255) * 10000) / 10000; 51 | RGB[2] = RGB[1]; 52 | RGB[1] = RGB[0]; 53 | RGB[0] = (colorInt >> 24) & 255; 54 | } 55 | } 56 | 57 | return RGB; 58 | }; 59 | 60 | export const pSBC = function(percentage: number, from: string, to?: string) { 61 | if (percentage < -1 || percentage > 1 || (from[0] != "r" && from[0] != "#")) { 62 | return null; 63 | } 64 | 65 | const isHex = from.length > 9; 66 | const isRgb = !!to 67 | ? to.length > 9 68 | ? true 69 | : to == "c" 70 | ? !isHex 71 | : false 72 | : isHex; 73 | const makeDarker = percentage < 0; 74 | const delta = makeDarker ? percentage * -1 : percentage; 75 | const normalizedTo = 76 | !!to && to != "c" ? to : makeDarker ? "#000000" : "#FFFFFF"; 77 | const f = pSBCr(from); 78 | const t = pSBCr(normalizedTo); 79 | 80 | if (!f || !t) return null; 81 | 82 | if (isRgb) { 83 | return ( 84 | "rgb" + 85 | (f[3] > -1 || t[3] > -1 ? "a(" : "(") + 86 | Math.round((t[0] - f[0]) * delta + f[0]) + 87 | "," + 88 | Math.round((t[1] - f[1]) * delta + f[1]) + 89 | "," + 90 | Math.round((t[2] - f[2]) * delta + f[2]) + 91 | (f[3] < 0 && t[3] < 0 92 | ? ")" 93 | : "," + 94 | (f[3] > -1 && t[3] > -1 95 | ? Math.round(((t[3] - f[3]) * delta + f[3]) * 10000) / 10000 96 | : t[3] < 0 97 | ? f[3] 98 | : t[3]) + 99 | ")") 100 | ); 101 | } else { 102 | return ( 103 | "#" + 104 | ( 105 | 0x100000000 + 106 | Math.round((t[0] - f[0]) * delta + f[0]) * 0x1000000 + 107 | Math.round((t[1] - f[1]) * delta + f[1]) * 0x10000 + 108 | Math.round((t[2] - f[2]) * delta + f[2]) * 0x100 + 109 | (f[3] > -1 && t[3] > -1 110 | ? Math.round(((t[3] - f[3]) * delta + f[3]) * 255) 111 | : t[3] > -1 112 | ? Math.round(t[3] * 255) 113 | : f[3] > -1 114 | ? Math.round(f[3] * 255) 115 | : 255) 116 | ) 117 | .toString(16) 118 | .slice(1, f[3] > -1 || t[3] > -1 ? undefined : -2) 119 | ); 120 | } 121 | }; 122 | 123 | export const light = "#ceeaeb"; 124 | export const dark = "#0e425e"; 125 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/generic_container.component.tsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { spacing, Breakpoints } from "../../utils/spacing.util"; 3 | 4 | export const GenericContainer = styled("section")` 5 | max-width: ${spacing(60)}px; 6 | width: 100%; 7 | margin: ${spacing(10)}px auto 0 auto; 8 | padding: 0; 9 | 10 | @media (min-width: ${Breakpoints.Mobile}px) { 11 | margin-top: ${spacing(17)}px; 12 | } 13 | `; 14 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/atoms/typography.component.ts: -------------------------------------------------------------------------------- 1 | export const typographyTheme = {}; 2 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/hocs/theme_manager.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | ReactChild, 3 | createContext, 4 | Dispatch, 5 | useState, 6 | SetStateAction, 7 | useEffect 8 | } from "react"; 9 | import { ThemeProvider } from "styled-components"; 10 | import { TypographyProps, defaultTheme } from "styled-typography"; 11 | import cookie from "cookie"; 12 | import { light, dark, pSBC } from "../atoms/color.component"; 13 | 14 | export enum Theme { 15 | Light = "LIGHT", 16 | Dark = "DARK", 17 | Serif = "SERIF", 18 | GoldenRatio = "GOLDEN_RATIO", 19 | Spacey = "SPACEY" 20 | } 21 | 22 | type Props = { 23 | theme?: Theme; 24 | children: ReactChild; 25 | }; 26 | 27 | type ThemeConfig = Record & { 28 | typography: Partial; 29 | }; 30 | 31 | export const ThemeManagerContext = createContext<{ 32 | dispatch: Dispatch>; 33 | theme: Theme; 34 | }>({ dispatch: () => Theme.Light, theme: Theme.Light }); 35 | 36 | export const commonTypographyConfig = { 37 | extra: { 38 | heading: ` 39 | margin: 1.5em 0 .5em 0; 40 | ` 41 | } 42 | }; 43 | 44 | export const themes: Record = { 45 | [Theme.Light]: { 46 | foreground: dark, 47 | background: light, 48 | highlight: pSBC(-0.1, light), 49 | typography: { 50 | ...defaultTheme, 51 | ...commonTypographyConfig, 52 | bodyColor: dark, 53 | headingColor: dark 54 | } 55 | }, 56 | [Theme.Dark]: { 57 | foreground: light, 58 | background: dark, 59 | highlight: pSBC(0.1, dark), 60 | typography: { 61 | ...defaultTheme, 62 | ...commonTypographyConfig, 63 | bodyColor: light, 64 | headingColor: light 65 | } 66 | }, 67 | [Theme.Serif]: { 68 | foreground: dark, 69 | background: light, 70 | highlight: pSBC(-0.1, light), 71 | typography: { 72 | ...defaultTheme, 73 | ...commonTypographyConfig, 74 | bodyFontFamily: "palatino, times new roman, times, serif", 75 | headingFontFamily: "palatino, times new roman, times, serif", 76 | bodyColor: dark, 77 | headingColor: dark 78 | } 79 | }, 80 | [Theme.GoldenRatio]: { 81 | foreground: dark, 82 | background: light, 83 | highlight: pSBC(-0.1, light), 84 | typography: { 85 | ...defaultTheme, 86 | ...commonTypographyConfig, 87 | fontSizes: ["4.236rem", "2.618rem", "1.618rem", "1rem", "10px", "10px"], 88 | bodyColor: dark, 89 | headingColor: dark 90 | } 91 | }, 92 | [Theme.Spacey]: { 93 | foreground: dark, 94 | background: light, 95 | highlight: pSBC(-0.1, light), 96 | typography: { 97 | ...defaultTheme, 98 | ...commonTypographyConfig, 99 | bodyLineHeight: 2.0, 100 | headingLineHeight: 2.0, 101 | bodyColor: dark, 102 | headingColor: dark 103 | } 104 | } 105 | }; 106 | 107 | export const ThemeManager = ({ theme: cookieTheme, children }: Props) => { 108 | const [theme, setTheme] = useState(cookieTheme || Theme.Light); 109 | 110 | useEffect(() => { 111 | if (typeof window !== "undefined") { 112 | const setCookie = cookie.serialize("theme", theme); 113 | 114 | document.cookie = setCookie; 115 | } 116 | }, [theme]); 117 | 118 | return ( 119 | 120 | {children} 121 | 122 | ); 123 | }; 124 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/molecules/header.component.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Heading, Link, FontWeight } from "styled-typography"; 3 | import styled from "styled-components"; 4 | import NextLink from "next/link"; 5 | import { useRouter, NextRouter } from "next/router"; 6 | import { Stylable } from "../../types/component.types"; 7 | import { spacing, Breakpoints } from "../../utils/spacing.util"; 8 | import { ThemeSwitcher } from "./theme_switcher.component"; 9 | 10 | type Props = Stylable; 11 | 12 | const getPath = (router: NextRouter) => (!!router ? router.asPath : ""); 13 | 14 | export const RawHeader = ({ className }: Props) => { 15 | const router = useRouter(); 16 | const currentPath = getPath(router); 17 | 18 | console.log({ currentPath }); 19 | 20 | return ( 21 |
22 | 23 | Styled Typography 24 | 25 | 52 | 53 |
54 | ); 55 | }; 56 | 57 | export const Header = styled(RawHeader)` 58 | padding: ${spacing(1)}px ${spacing(3)}px; 59 | display: flex; 60 | flex-direction: column; 61 | align-items: baseline; 62 | 63 | ${Heading} { 64 | margin: 0; 65 | } 66 | 67 | ul { 68 | display: flex; 69 | align-items: top; 70 | margin: ${spacing(1)}px 0 0 0; 71 | } 72 | 73 | li + li { 74 | margin-left: ${spacing(3)}px; 75 | } 76 | 77 | [data-active="true"] { 78 | text-decoration: line-through; 79 | } 80 | 81 | @media (hover) { 82 | ${Link}:hover { 83 | text-decoration-line: underline; 84 | text-decoration-style: wavy; 85 | } 86 | } 87 | 88 | @media (min-width: ${Breakpoints.Tablet}px) { 89 | padding: ${spacing(1)}px ${spacing(6)}px; 90 | flex-direction: row; 91 | 92 | ul { 93 | display: inline-flex; 94 | margin: 0 0 0 ${spacing(6)}px; 95 | } 96 | } 97 | `; 98 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/molecules/skip_contents.component.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import NextLink from "next/link"; 3 | import { Link } from "styled-typography"; 4 | import { Stylable } from "../../types/component.types"; 5 | import styled from "styled-components"; 6 | import { getThemeProp } from "../../utils/styles.util"; 7 | 8 | type Props = Stylable; 9 | 10 | export const RawSkipContents = ({ className }: Props) => ( 11 | 12 | Skip to content 13 | 14 | ); 15 | 16 | export const SkipContents = styled(RawSkipContents)` 17 | &:focus { 18 | width: unset; 19 | height: unset; 20 | margin: unset; 21 | padding: 1em; 22 | clip: unset; 23 | clip-path: unset; 24 | z-index: 999999; 25 | background: ${getThemeProp("background")}; 26 | } 27 | `; 28 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/molecules/theme_switcher.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | useState, 3 | useContext, 4 | ReactChild, 5 | ChangeEventHandler 6 | } from "react"; 7 | import styled from "styled-components"; 8 | import { Span } from "styled-typography"; 9 | import { Stylable } from "../../types/component.types"; 10 | import { ThemeManagerContext, Theme } from "../hocs/theme_manager.component"; 11 | import { spacing, Breakpoints } from "../../utils/spacing.util"; 12 | import { getThemeProp } from "../../utils/styles.util"; 13 | import { hexToRgba, pSBC } from "../atoms/color.component"; 14 | 15 | type Props = Stylable; 16 | 17 | type ThemeOptionProps = { 18 | value: Theme; 19 | onChange: ChangeEventHandler; 20 | checked?: boolean; 21 | children: ReactChild; 22 | }; 23 | 24 | export const ThemeOption = ({ 25 | value, 26 | checked, 27 | onChange, 28 | children 29 | }: ThemeOptionProps) => ( 30 | 41 | ); 42 | 43 | export const RawThemeSwitcher = ({ className }: Props) => { 44 | const [open, setOpen] = useState(false); 45 | const { dispatch, theme } = useContext(ThemeManagerContext); 46 | 47 | const onChange: ChangeEventHandler = evt => { 48 | const value = (evt.currentTarget as any).value; 49 | 50 | dispatch(value); 51 | }; 52 | 53 | return ( 54 |
55 | 62 | 99 |
100 | ); 101 | }; 102 | 103 | export const ThemeSwitcher = styled(RawThemeSwitcher)` 104 | position: fixed; 105 | top: 0; 106 | right: 0; 107 | z-index: 99999; 108 | display: flex; 109 | flex-direction: column; 110 | align-items: flex-end; 111 | 112 | button { 113 | appearance: none; 114 | border: none; 115 | border-radius: 0 0 0 ${spacing(0.5)}px; 116 | background: ${getThemeProp("highlight")}; 117 | color: currentcolor; 118 | font-size: 1rem; 119 | font-family: inherit; 120 | padding: ${spacing(0.5)}px ${spacing(1)}px; 121 | 122 | @media (hover) { 123 | &:hover { 124 | cursor: pointer; 125 | } 126 | } 127 | 128 | @media (min-width: ${Breakpoints.Tablet}px) { 129 | padding: ${spacing(1)}px ${spacing(2)}px; 130 | } 131 | } 132 | 133 | div { 134 | margin-top: ${spacing(0.5)}px; 135 | background: ${getThemeProp("highlight")}; 136 | width: ${spacing(30)}px; 137 | border-radius: ${spacing(0.5)}px 0 0 ${spacing(0.5)}px; 138 | box-shadow: 0 2px 4px ${({ theme }) => hexToRgba(theme.foreground, 0.2)}; 139 | } 140 | 141 | label { 142 | display: block; 143 | padding: ${spacing(1)}px ${spacing(2)}px; 144 | margin: ${spacing(0.5)}px; 145 | border-radius: ${spacing(0.5)}px; 146 | border: ${spacing(0.5)}px solid transparent; 147 | 148 | &[data-active="true"] { 149 | border-color: ${getThemeProp("foreground")}; 150 | } 151 | 152 | @media (hover) { 153 | &:hover { 154 | background-color: ${({ theme }) => pSBC(-0.2, theme.background)}; 155 | cursor: pointer; 156 | } 157 | } 158 | } 159 | `; 160 | -------------------------------------------------------------------------------- /packages/dubdubdub/components/organisms/error_boundary.component.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component, ErrorInfo, ReactNode } from "react"; 2 | import styled from "styled-components"; 3 | import { Text, Heading, Link } from "styled-typography"; 4 | import Head from "next/head"; 5 | import { Stylable } from "../../types/component.types"; 6 | import { GenericContainer } from "../atoms/generic_container.component"; 7 | 8 | type Props = Stylable & { 9 | children: ReactNode; 10 | }; 11 | 12 | type State = { 13 | hasError: boolean; 14 | error?: Error; 15 | }; 16 | 17 | export class RawErrorBoundary extends Component { 18 | state: State = { 19 | hasError: false, 20 | error: undefined 21 | }; 22 | 23 | componentDidCatch(err: Error, info: ErrorInfo & { [key: string]: any }) { 24 | this.setState(() => ({ hasError: true, error: err })); 25 | 26 | console.groupCollapsed("Caught exception in error boundary"); 27 | console.log("info:", info.componentStack); 28 | console.error("error:", err); 29 | console.groupEnd(); 30 | } 31 | 32 | render() { 33 | const { children, className } = this.props; 34 | 35 | if (this.state.hasError) { 36 | return ( 37 | 38 | 39 | This is embarrasing / Styled Typography 40 | 41 | This is embarrasing 42 | 43 | {/* prettier-ignore */} 44 | Something bad happened that we didn’t plan for. Try refreshing the 45 | page or go back. If this keeps happening, please send us a message 46 | at{" "} 47 | mike@mike-engel.com. 48 | 49 | 50 | ); 51 | } 52 | 53 | return children; 54 | } 55 | } 56 | 57 | export const ErrorBoundary = styled(RawErrorBoundary)``; 58 | -------------------------------------------------------------------------------- /packages/dubdubdub/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /packages/dubdubdub/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | target: "serverless" 3 | }; 4 | -------------------------------------------------------------------------------- /packages/dubdubdub/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-typography-www", 3 | "private": true, 4 | "version": "1.0.3", 5 | "description": "Typograpy components for react and styled-components", 6 | "main": "./dist/index.js", 7 | "scripts": { 8 | "build": "next build", 9 | "dev": "next", 10 | "start": "next start", 11 | "test": "echo 'make tests maybe idk'", 12 | "typecheck": "tsc --noEmit" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/mike-engel/styled-typography.git" 17 | }, 18 | "author": "Mike Engel ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/mike-engel/styled-typography/issues" 22 | }, 23 | "homepage": "https://github.com/mike-engel/styled-typography#readme", 24 | "dependencies": { 25 | "@types/react-syntax-highlighter": "^10.2.1", 26 | "cookie": "^0.4.0", 27 | "next": "^9.0.2", 28 | "react": "^16.8.6", 29 | "react-dom": "^16.8.6", 30 | "react-syntax-highlighter": "^11.0.2", 31 | "styled-components": "^5.1.0", 32 | "styled-typography": "^1.0.3" 33 | }, 34 | "devDependencies": { 35 | "@babel/preset-env": "^7.9.0", 36 | "@babel/preset-react": "^7.9.4", 37 | "@types/cookie": "^0.3.3", 38 | "@types/next": "^8.0.6", 39 | "@types/react": "^16.9.34", 40 | "@types/react-dom": "^16.8.5", 41 | "@types/styled-components": "^5.0.1", 42 | "@zeit/next-typescript": "^1.1.1", 43 | "babel-plugin-jsx-control-statements": "^4.0.0", 44 | "babel-plugin-styled-components": "^1.10.7", 45 | "typescript": "^3.8.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import App, { Container, AppContext, AppProps } from "next/app"; 3 | import styled, { createGlobalStyle } from "styled-components"; 4 | import { GlobalTypeStyles, Heading } from "styled-typography"; 5 | import cookie from "cookie"; 6 | import Head from "next/head"; 7 | import { ErrorBoundary } from "../components/organisms/error_boundary.component"; 8 | import { Stylable } from "../types/component.types"; 9 | import { spacing, Breakpoints } from "../utils/spacing.util"; 10 | import { 11 | ThemeManager, 12 | Theme 13 | } from "../components/hocs/theme_manager.component"; 14 | import { getThemeProp } from "../utils/styles.util"; 15 | import { light } from "../components/atoms/color.component"; 16 | import { Header } from "../components/molecules/header.component"; 17 | import { SkipContents } from "../components/molecules/skip_contents.component"; 18 | 19 | type ComponentProps = { 20 | path: string; 21 | pageProps: any; 22 | theme?: Theme; 23 | }; 24 | 25 | type Props = Stylable & AppProps & ComponentProps; 26 | 27 | const Main = styled("main")``; 28 | 29 | const GlobalStyles = createGlobalStyle` 30 | body { 31 | position: relative; 32 | background: ${getThemeProp("background")}; 33 | } 34 | 35 | #__next { 36 | min-width: 100vw; 37 | min-height: 100vh; 38 | } 39 | 40 | section { 41 | max-width: 40em; 42 | margin-left: auto; 43 | margin-right: auto; 44 | } 45 | 46 | code { 47 | background: ${getThemeProp("highlight")}; 48 | padding: ${spacing(0.25)}px ${spacing(0.5)}px; 49 | border-radius: ${spacing(0.5)}px; 50 | } 51 | 52 | pre { 53 | padding: ${spacing(2)}px; 54 | white-space: pre-wrap; 55 | border-radius: ${spacing(0.5)}px; 56 | font-size: 14px; 57 | } 58 | 59 | ul { 60 | padding-left: 1em; 61 | } 62 | 63 | ${Heading} code, 64 | pre code { 65 | background: transparent; 66 | padding: initial; 67 | border-radius: 0; 68 | } 69 | `; 70 | 71 | export class RawApp extends App { 72 | static async getInitialProps({ Component, ctx }: AppContext) { 73 | let pageProps = {}; 74 | const cookies = !!ctx.req && ctx.req.headers.cookie; 75 | const themeCookie = cookie.parse(cookies || ""); 76 | 77 | if (Component && Component.getInitialProps) { 78 | pageProps = await Component.getInitialProps(ctx); 79 | } 80 | 81 | return { 82 | pageProps, 83 | theme: themeCookie.theme 84 | }; 85 | } 86 | 87 | render() { 88 | const { Component, pageProps, className, theme } = this.props; 89 | const defaultDescription = 90 | "Typograpy components for react and styled-components"; 91 | const defaultTitle = "Styled Typography"; 92 | const meta = pageProps.meta || {}; 93 | 94 | return ( 95 | 96 | 97 | 98 | 102 | 106 | 107 | 108 | 109 | 113 | 114 | 115 | {meta.title ? `${meta.title} | ${defaultTitle}` : defaultTitle} 116 | 117 | 118 | 119 | <> 120 | 121 | 122 | 123 |
124 | 125 |
126 |
127 | 128 |
129 | 130 |
131 | 132 | 133 | 134 | ); 135 | } 136 | } 137 | 138 | export default styled(RawApp)` 139 | min-width: 100vw; 140 | min-height: 100vh; 141 | margin: 0; 142 | padding: 0; 143 | 144 | ${Main} { 145 | position: relative; 146 | padding: 0 ${spacing(3)}px ${spacing(3)}px ${spacing(3)}px; 147 | 148 | @media (min-width: ${Breakpoints.Tablet}px) { 149 | padding: ${spacing(6)}px; 150 | } 151 | } 152 | `; 153 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from "react"; 2 | import Document from "next/document"; 3 | import { ServerStyleSheet } from "styled-components"; 4 | import { DocumentContext } from "next/document"; 5 | 6 | type Props = { 7 | styleTags: ReactElement; 8 | }; 9 | 10 | export default class MyDocument extends Document { 11 | static async getInitialProps(ctx: DocumentContext) { 12 | const sheet = new ServerStyleSheet(); 13 | const originalRenderPage = ctx.renderPage; 14 | 15 | try { 16 | ctx.renderPage = () => 17 | originalRenderPage({ 18 | enhanceApp: App => props => sheet.collectStyles() 19 | }); 20 | 21 | const initialProps = await Document.getInitialProps(ctx); 22 | 23 | return { 24 | ...initialProps, 25 | styles: ( 26 | <> 27 | {initialProps.styles} 28 | {sheet.getStyleElement()} 29 | 30 | ) 31 | }; 32 | } finally { 33 | sheet.seal(); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/_error.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NextPageContext } from "next"; 3 | import NextLink from "next/link"; 4 | import styled from "styled-components"; 5 | import Head from "next/head"; 6 | import { Heading, Text, Link } from "styled-typography"; 7 | import { Stylable } from "../types/component.types"; 8 | import { GenericContainer } from "../components/atoms/generic_container.component"; 9 | 10 | type Props = Stylable & { 11 | statusCode?: number; 12 | }; 13 | 14 | export const RawError = ({ className, statusCode }: Props) => { 15 | if (statusCode === 404) { 16 | return ( 17 | 18 | 19 | There’s nothing here / Finances 20 | 21 | There’s nothing here 22 | 23 | Typo? Bad link? Hacker? Either way, nothing belongs here that we know 24 | of. 25 | 26 | 27 | Go back 28 | 29 | 30 | ); 31 | } 32 | 33 | return ( 34 | 35 | 36 | This is embarrasing / Finances 37 | 38 | This is embarrasing 39 | 40 | {/* prettier-ignore */} 41 | Something bad happened that we didn’t plan for. Try refreshing the page 42 | or go back. If this keeps happening, please send us a message at{" "} 43 | 44 | finances@mike-engel.com 45 | 46 | . 47 | 48 | 49 | ); 50 | }; 51 | 52 | RawError.getInitialProps = async ({ res, err }: NextPageContext) => { 53 | const statusCode = res 54 | ? res.statusCode 55 | : err 56 | ? (err as Record).statusCode 57 | : null; 58 | 59 | return { statusCode }; 60 | }; 61 | 62 | export default styled(RawError)``; 63 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/docs.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { 4 | Heading, 5 | Text, 6 | FontWeight, 7 | Span, 8 | Link, 9 | FontStyle 10 | } from "styled-typography"; 11 | import NextLink from "next/link"; 12 | import { Stylable } from "../types/component.types"; 13 | import { Code } from "../components/atoms/code.component"; 14 | import { Callout } from "../components/atoms/callout.component"; 15 | import { BookmarkHeading } from "../components/atoms/bookmark_heading.component"; 16 | 17 | type Props = Stylable; 18 | 19 | export const RawIndex = ({ className }: Props) => ( 20 |
21 | Docs 22 | 23 | Installation 24 | 25 | 26 | To download styled-typography{" "} 27 | run the following from within your project: 28 | 29 | {`npm install styled-typography`} 30 | 31 | Configuring the theme 32 | 33 | 34 | You can customize{" "} 35 | styled-typography as much or as 36 | little as you’d like. A default will be provided that looks nice, 37 | visually. 38 | 39 | 40 | The minimum to get started is to have a ThemeProvider{" "} 41 | somewhere near the top of your react tree. You don’t need to provide a 42 | theme if you want the default configuration. 43 | 44 | {`import React from "react"; 45 | import { ThemeProvider } from "styled-components"; 46 | 47 | export const App = ({ children }) => ( 48 | {children} 49 | );`} 50 | 51 | To configure the typographic setup, you can pass any and all{" "} 52 | 53 | configuration options 54 | {" "} 55 | listed below. 56 | 57 | {`import React from "react"; 58 | import { ThemeProvider } from "styled-components"; 59 | 60 | // only customizes these three options. The rest will come from the default implementation 61 | const typographyTheme = { 62 | fontSizes: ["2.369rem", "1.777rem", "1.333rem", "1rem", "0.75rem", "10px"], 63 | bodyFontFamily: "Source Code Pro, Input, monospace", 64 | headingFontFamily: "SF Display, Helvetica Neue, Circular, sans-serif" 65 | }; 66 | 67 | export const App = ({ children }) => ( 68 | 69 | {children} 70 | 71 | );`} 72 | 73 | Components 74 | 75 | 76 | styled-typography provides give components for you to use and 77 | extend if needed: GlobalTypeStyles, Text,{" "} 78 | Heading, Span, and Link. 79 | 80 | 81 | GlobalTypeStyles 82 | 83 | 84 | The GlobalStyleStyles component is a way to quickly get 85 | global type styles into your app. This is useful if you intent to use{" "} 86 | Span or Link outside of Text/ 87 | Heading, or other non-styled-typography{" "} 88 | components in your app. It’s important, however, that you place it within 89 | the ThemeProvider component. 90 | 91 | {`import React from "react"; 92 | import { ThemeProvider } from "styled-components"; 93 | import { GlobalTypeStyles } from "styled-typography"; 94 | 95 | export const App = ({ children }) => ( 96 | 97 | 98 | {children} 99 | 100 | );`} 101 | 102 | Text 103 | 104 | 105 | The Text component resolves, by default, to a p{" "} 106 | component within the DOM. It accepts all props passable to p, 107 | as well as TextProps. 108 | 109 | {`import React from "react"; 110 | import { Text, FontWeight, FontStyle } from "styled-typography"; 111 | 112 | export const HelloWorld = ({ className }) => ( 113 | 121 | Hello, World! 122 | 123 | );`} 124 | 125 | Heading 126 | 127 | 128 | The Heading component resolves, by default, to a{" "} 129 | div component within the DOM. It accepts all props passable 130 | to div, as well as TextProps. 131 | 132 | 133 | 134 | But wait, you say! That’s not accessible! I know. By default, a{" "} 135 | div is not semantically an h1 element.{" "} 136 | ARIA, however, provides attributes that{" "} 137 | can make it a semantic header. 138 | Thus, the Header component automatically gets{" "} 139 | role="heading" and aria-level="#" attributes. 140 | 141 | 142 | {`import React from "react"; 143 | import { Heading, FontWeight, FontStyle } from "styled-typography"; 144 | 145 | export const HelloWorld = ({ className }) => ( 146 | 155 | Hello, World! 156 | 157 | );`} 158 | 159 | Span 160 | 161 | 162 | The Span component resolves, by default, to a{" "} 163 | span component within the DOM. It accepts all props passable 164 | to span, as well as TextProps. 165 | 166 | {`import React from "react"; 167 | import { Span, FontWeight, FontStyle } from "styled-typography"; 168 | 169 | export const HelloWorld = ({ className }) => ( 170 | 178 | Hello, World! 179 | 180 | );`} 181 | 182 | Link 183 | 184 | 185 | The Link component resolves, by default, to an a{" "} 186 | component within the DOM. It accepts all props passable to a, 187 | as well as TextProps. 188 | 189 | {`import React from "react"; 190 | import { Link, FontWeight, FontStyle } from "styled-typography"; 191 | 192 | export const HelloWorld = ({ className }) => ( 193 | 203 | Hello, World! 204 | 205 | );`} 206 | 207 | Configuration options 208 | 209 | 210 | Each of these options has what I consider to be a good default. You may 211 | override all of them, choose just a few to change, or do nothing. 212 | 213 | 214 | fontSizes 215 | 216 | 217 | 218 | Type: [string, string, string, 219 | string, string, string] 220 | 221 | 222 | 223 | 224 | Default: ["2.369rem", 225 | "1.777rem", "1.333rem", "1rem", "0.750rem", "10px"] 226 | 227 | 228 | 229 | fontSizes controls the 6 font size levels available to you. 230 | This generally corresponds to h1 through h6. 6 231 | levels are required. If your app has less than that, just duplicate the 232 | smallest value until there are 6. 233 | 234 | 235 | If only having 6 levels doesn’t work for you, please{" "} 236 | 240 | file an issue 241 | 242 | ! 243 | 244 | 245 | bodyFontFamily 246 | 247 | 248 | 249 | Type: string 250 | 251 | 252 | 253 | 254 | Default: "system-ui, 255 | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 256 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 257 | sans-serif" 258 | 259 | 260 | 261 | bodyFontFamily sets the font family for Text{" "} 262 | elements. Span and Link will inherit the global 263 | styles unless used within a Text or Heading{" "} 264 | element. 265 | 266 | 267 | bodySize 268 | 269 | 270 | 271 | Type: number 272 | 273 | 274 | 275 | 276 | Default: 4 277 | 278 | 279 | 280 | bodySize sets the default font size level for{" "} 281 | Text elements. Span and Link will 282 | inherit the global styles unless used within a Text or{" "} 283 | Heading element. 284 | 285 | 286 | bodyWeight 287 | 288 | 289 | 290 | Type: FontWeight 291 | 292 | 293 | 294 | 295 | Default: FontWeight.Normal 296 | 297 | 298 | 299 | bodyWeight sets the default font-weight for{" "} 300 | Text elements. Span and Link will 301 | inherit the global styles unless used within a Text or{" "} 302 | Heading element. 303 | 304 | 305 | Available options are tied to the{" "} 306 | 310 | common name mapping system 311 | 312 | . 313 | 314 | 315 |
    316 |
  • 317 | FontWeight.Hairline = "100" 318 |
    • 319 |
  • 320 | FontWeight.ExtraLight = "200" 321 |
    • 322 |
  • 323 | FontWeight.Light = "300" 324 |
    • 325 |
  • 326 | FontWeight.Normal = "400" 327 |
    • 328 |
  • 329 | FontWeight.Medium = "500" 330 |
    • 331 |
  • 332 | FontWeight.SemiBold = "600" 333 |
    • 334 |
  • 335 | FontWeight.Bold = "700" 336 |
    • 337 |
  • 338 | FontWeight.ExtraBold = "800" 339 |
    • 340 |
  • 341 | FontWeight.Heavy = "900" 342 |
    • 343 |
  • 344 | FontWeight.Inherit = "inherit 345 |
    • 346 |
347 | 348 | 349 | bodyStyle 350 | 351 | 352 | 353 | Type: FontStyle 354 | 355 | 356 | 357 | 358 | Default: FontStyle.Regular 359 | 360 | 361 | 362 | bodyStyle sets the default font-style for{" "} 363 | Text elements. Span and Link will 364 | inherit the global styles unless used within a Text or{" "} 365 | Heading element. 366 | 367 | 368 | Available options are tied to the{" "} 369 | 373 | standard font-style options 374 | {" "} 375 | with an exception for oblique <angle> 376 | 377 | 378 |
    379 |
  • 380 | FontStyle.Italic = "italic" 381 |
    • 382 |
  • 383 | FontStyle.Oblique = "oblique" 384 |
    • 385 |
  • 386 | FontStyle.Normal = "normal" 387 |
    • 388 |
  • 389 | FontStyle.Inherit = "inherit 390 |
    • 391 |
392 | 393 | 394 | bodyColor 395 | 396 | 397 | 398 | Type: string 399 | 400 | 401 | 402 | 403 | Default: #000000 404 | 405 | 406 | 407 | bodyColor sets the default color for{" "} 408 | Text elements. Span and Link will 409 | inherit the global styles unless used within a Text or{" "} 410 | Heading element. 411 | 412 | 413 | bodyLineHeight 414 | 415 | 416 | 417 | Type: string | number 418 | 419 | 420 | 421 | 422 | Default: 1.4 423 | 424 | 425 | 426 | bodyColor sets the default line-height for{" "} 427 | Text elements. Span and Link will 428 | inherit the global styles unless used within a Text or{" "} 429 | Heading element. 430 | 431 | 432 | headingFontFamily 433 | 434 | 435 | 436 | Type: string 437 | 438 | 439 | 440 | 441 | Default: "system-ui, 442 | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 443 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 444 | sans-serif" 445 | 446 | 447 | 448 | headingFontFamily sets the font family for{" "} 449 | Heading elements. Span and Link{" "} 450 | will inherit the global styles unless used within a Text or{" "} 451 | Heading element. 452 | 453 | 454 | headingSize 455 | 456 | 457 | 458 | Type: number 459 | 460 | 461 | 462 | 463 | Default: 4 464 | 465 | 466 | 467 | headingSize sets the default font size level for{" "} 468 | Heading elements. Span and Link{" "} 469 | will inherit the global styles unless used within a Text or{" "} 470 | Heading element. 471 | 472 | 473 | headingWeight 474 | 475 | 476 | 477 | Type: FontWeight 478 | 479 | 480 | 481 | 482 | Default: FontWeight.Normal 483 | 484 | 485 | 486 | headingWeight sets the default font-weight for{" "} 487 | Heading elements. Span and Link{" "} 488 | will inherit the global styles unless used within a Text or{" "} 489 | Heading element. 490 | 491 | 492 | Available options are tied to the{" "} 493 | 497 | common name mapping system 498 | 499 | . 500 | 501 | 502 |
    503 |
  • 504 | FontWeight.Hairline = "100" 505 |
    • 506 |
  • 507 | FontWeight.ExtraLight = "200" 508 |
    • 509 |
  • 510 | FontWeight.Light = "300" 511 |
    • 512 |
  • 513 | FontWeight.Normal = "400" 514 |
    • 515 |
  • 516 | FontWeight.Medium = "500" 517 |
    • 518 |
  • 519 | FontWeight.SemiBold = "600" 520 |
    • 521 |
  • 522 | FontWeight.Bold = "700" 523 |
    • 524 |
  • 525 | FontWeight.ExtraBold = "800" 526 |
    • 527 |
  • 528 | FontWeight.Heavy = "900" 529 |
    • 530 |
  • 531 | FontWeight.Inherit = "inherit 532 |
    • 533 |
534 | 535 | 536 | headingStyle 537 | 538 | 539 | 540 | Type: FontStyle 541 | 542 | 543 | 544 | 545 | Default: FontStyle.Regular 546 | 547 | 548 | 549 | headingStyle sets the default font-style for{" "} 550 | Heading elements. Span and Link{" "} 551 | will inherit the global styles unless used within a Text or{" "} 552 | Heading element. 553 | 554 | 555 | Available options are tied to the{" "} 556 | 560 | standard font-style options 561 | {" "} 562 | with an exception for oblique <angle> 563 | 564 | 565 |
    566 |
  • 567 | FontStyle.Italic = "italic" 568 |
    • 569 |
  • 570 | FontStyle.Oblique = "oblique" 571 |
    • 572 |
  • 573 | FontStyle.Normal = "normal" 574 |
    • 575 |
  • 576 | FontStyle.Inherit = "inherit 577 |
    • 578 |
579 | 580 | 581 | headingColor 582 | 583 | 584 | 585 | Type: string 586 | 587 | 588 | 589 | 590 | Default: #000000 591 | 592 | 593 | 594 | headingColor sets the default color for{" "} 595 | Heading elements. Span and Link{" "} 596 | will inherit the global styles unless used within a Text or{" "} 597 | Heading element. 598 | 599 | 600 | headingLineHeight 601 | 602 | 603 | 604 | Type: string | number 605 | 606 | 607 | 608 | 609 | Default: 1.4 610 | 611 | 612 | 613 | headingColor sets the default line-height for{" "} 614 | Heading elements. Span and Link{" "} 615 | will inherit the global styles unless used within a Text or{" "} 616 | Heading element. 617 | 618 | 619 | extra 620 | 621 | 622 | 623 | Type:{" "} 624 | {`{ text: string, heading: string, span: string, link: string }`} 625 | 626 | 627 | 628 | 629 | Default: {`{}`} 630 | 631 | 632 | 633 | extra injects extra styles for each type of component. 634 | Template strings and plain strings are acceptable values for each key. 635 | 636 |
637 | ); 638 | 639 | export default styled(RawIndex)``; 640 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/faq.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { Heading, Text, Link, FontWeight, Span } from "styled-typography"; 4 | import { Stylable } from "../types/component.types"; 5 | import { BookmarkHeading } from "../components/atoms/bookmark_heading.component"; 6 | 7 | type Props = Stylable; 8 | 9 | export const RawIndex = ({ className }: Props) => ( 10 |
11 | FAQ 12 | 13 | Why? 14 | 15 | 16 | That’s a good question! I wrote this for a few different reasons, any of 17 | which you may not agree with. As with everything, this is opinionated! 18 | 19 |
    20 |
  • 21 | Using className when you’re already using{" "} 22 | styled-components feels like an anti-pattern 23 |
    • 24 |
  • I wanted a consistent API between all typographic elements
    • 25 |
  • 26 | I wanted a better API for differentiating between semantic hierarchy and 27 | visual hierarchy 28 |
    • 29 |
  • 30 | As design systems grow, so do one-off components. I needed typography 31 | components I could compose as needed without creating many abstractions 32 |
    • 33 |
  • 34 | I was inspired by{" "} 35 | 39 | react-native-web 40 | 41 | , but wanted something that fit in with styled-components 42 |
    • 43 |
44 | 45 | Overall, yes, you could do this with h#, p,{" "} 46 | span, and a tags. In the end, having a single 47 | reusable API that fits in with my existing styling framework and 48 | composition style made the most sense to me. And after tweaking this API 49 | over several years, it still does! 50 | 51 | 52 | How is this different from{" "} 53 | 57 | react-typography 58 | 59 | ? 60 | 61 | 62 | The main difference is that react-typography, and{" "} 63 | typography.js both are meant to setup typographic styling at 64 | the root level (i.e. at the body element). They don’t provide 65 | components to use throughout the app. 66 | 67 | 68 | The main issue I have with this approach is that it’s not very{" "} 69 | JSX-like. To customize each instance of p,{" "} 70 | h#, span, etc, you must override each or create 71 | your own components. This is ok, but also time consuming. 72 | 73 | 74 | styled-typography takes a 75 | different approach, by providing components that feel like react and have 76 | an API that allows you to customize each one as needed with props rather 77 | than a className or style prop. 78 | 79 | 80 | Please use whichever you prefer! I personally prefer the API and 81 | components used in{" "} 82 | styled-typography, which is why 83 | I created it, but everyone’s different! 84 | 85 |
86 | ); 87 | 88 | export default styled(RawIndex)``; 89 | -------------------------------------------------------------------------------- /packages/dubdubdub/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { Heading, Text, FontWeight, Link, Span } from "styled-typography"; 4 | import NextLink from "next/link"; 5 | import { Stylable } from "../types/component.types"; 6 | import { spacing } from "../utils/spacing.util"; 7 | import { Code } from "../components/atoms/code.component"; 8 | 9 | type Props = Stylable; 10 | 11 | export const RawIndex = ({ className }: Props) => ( 12 |
13 | Styled Typography 14 | 15 | Typograpy components for react and styled-components 16 | 17 | 18 | styled-typography is a small set 19 | of components using{" "} 20 | 21 | styled-components 22 | 23 | , to better manage typographic styles within your app. The API was born 24 | out of years of managing large single page applications and design 25 | systems. 26 | 27 | 28 | It’s flexible to be used however you need and to be customized further, 29 | but simple enough to have a small API. Additionally, care has been taken 30 | to ensure accessibility when adding it to your apps. 31 | 32 | 33 | Getting started 34 | 35 | 36 | {`import React from "react"; 37 | import { ThemeProvider } from "styled-components"; 38 | import { Heading, Text, Link } from "styled-typography"; 39 | 40 | export const App = ({ children }) => ( 41 | 42 | Welcome to my app! 43 | 44 | Do some pretty cool things 45 | 46 | 47 | To get started, 48 | {" "}create an account{" "} 49 | via email or your social network login. 50 | 51 | 52 | );`} 53 | 54 | 55 | Still interested? Read the{" "} 56 | 57 | docs 58 | {" "} 59 | to learn more! 60 | 61 |
62 | ); 63 | 64 | export default styled(RawIndex)` 65 | margin-top: ${spacing(10)}px; 66 | `; 67 | -------------------------------------------------------------------------------- /packages/dubdubdub/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "inlineSources": true, 5 | "jsx": "preserve", 6 | "lib": [ 7 | "es2017", 8 | "esnext.asynciterable", 9 | "dom", 10 | "dom.iterable", 11 | "scripthost" 12 | ], 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "noImplicitAny": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "pretty": true, 19 | "removeComments": true, 20 | "resolveJsonModule": true, 21 | "outDir": "dist", 22 | "skipLibCheck": true, 23 | "sourceMap": true, 24 | "strictNullChecks": true, 25 | "target": "es2016", 26 | "allowJs": true, 27 | "strict": false, 28 | "forceConsistentCasingInFileNames": true, 29 | "noEmit": true, 30 | "isolatedModules": true 31 | }, 32 | "exclude": ["node_modules"], 33 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] 34 | } 35 | -------------------------------------------------------------------------------- /packages/dubdubdub/types/component.types.ts: -------------------------------------------------------------------------------- 1 | export type Stylable = { className?: string }; 2 | -------------------------------------------------------------------------------- /packages/dubdubdub/typings/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare var If: React.SFC<{ condition: boolean }>; 2 | declare var For: React.SFC<{ each: string; index: string; of: any[] }>; 3 | declare var Choose: React.SFC; 4 | declare var When: React.SFC<{ condition: boolean }>; 5 | declare var Otherwise: React.SFC; 6 | -------------------------------------------------------------------------------- /packages/dubdubdub/typings/react-syntax-highlighter/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "react-syntax-highlighter/dist/cjs/styles/prism" { 2 | export const tomorrow: any; 3 | } 4 | -------------------------------------------------------------------------------- /packages/dubdubdub/utils/spacing.util.ts: -------------------------------------------------------------------------------- 1 | export const spacing = (multiple: number = 1) => multiple * 8; 2 | 3 | export enum Breakpoints { 4 | Mobile = 580, 5 | Tablet = 768, 6 | Desktop = 1024 7 | } 8 | -------------------------------------------------------------------------------- /packages/dubdubdub/utils/styles.util.ts: -------------------------------------------------------------------------------- 1 | type GetThemePropProps = Record & { 2 | theme: Record; 3 | }; 4 | 5 | export const getThemeProp = (prop: string) => ({ theme }: GetThemePropProps) => 6 | theme[prop] || ""; 7 | -------------------------------------------------------------------------------- /packages/styled-typography/README.md: -------------------------------------------------------------------------------- 1 | # styled-typography 2 | 3 | For more info on how to run this package locally, please refer to the [parent README](../../README.md#npm-package). 4 | -------------------------------------------------------------------------------- /packages/styled-typography/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-typography", 3 | "version": "1.0.3", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@babel/code-frame": { 8 | "version": "7.0.0", 9 | "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", 10 | "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", 11 | "dev": true, 12 | "requires": { 13 | "@babel/highlight": "^7.0.0" 14 | } 15 | }, 16 | "@babel/generator": { 17 | "version": "7.4.4", 18 | "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz", 19 | "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==", 20 | "dev": true, 21 | "requires": { 22 | "@babel/types": "^7.4.4", 23 | "jsesc": "^2.5.1", 24 | "lodash": "^4.17.11", 25 | "source-map": "^0.5.0", 26 | "trim-right": "^1.0.1" 27 | } 28 | }, 29 | "@babel/helper-annotate-as-pure": { 30 | "version": "7.8.3", 31 | "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz", 32 | "integrity": "sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==", 33 | "dev": true, 34 | "requires": { 35 | "@babel/types": "^7.8.3" 36 | }, 37 | "dependencies": { 38 | "@babel/types": { 39 | "version": "7.9.5", 40 | "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", 41 | "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", 42 | "dev": true, 43 | "requires": { 44 | "@babel/helper-validator-identifier": "^7.9.5", 45 | "lodash": "^4.17.13", 46 | "to-fast-properties": "^2.0.0" 47 | } 48 | } 49 | } 50 | }, 51 | "@babel/helper-function-name": { 52 | "version": "7.1.0", 53 | "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", 54 | "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", 55 | "dev": true, 56 | "requires": { 57 | "@babel/helper-get-function-arity": "^7.0.0", 58 | "@babel/template": "^7.1.0", 59 | "@babel/types": "^7.0.0" 60 | } 61 | }, 62 | "@babel/helper-get-function-arity": { 63 | "version": "7.0.0", 64 | "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz", 65 | "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==", 66 | "dev": true, 67 | "requires": { 68 | "@babel/types": "^7.0.0" 69 | } 70 | }, 71 | "@babel/helper-module-imports": { 72 | "version": "7.8.3", 73 | "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz", 74 | "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==", 75 | "dev": true, 76 | "requires": { 77 | "@babel/types": "^7.8.3" 78 | }, 79 | "dependencies": { 80 | "@babel/types": { 81 | "version": "7.9.5", 82 | "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz", 83 | "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==", 84 | "dev": true, 85 | "requires": { 86 | "@babel/helper-validator-identifier": "^7.9.5", 87 | "lodash": "^4.17.13", 88 | "to-fast-properties": "^2.0.0" 89 | } 90 | } 91 | } 92 | }, 93 | "@babel/helper-split-export-declaration": { 94 | "version": "7.4.4", 95 | "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", 96 | "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", 97 | "dev": true, 98 | "requires": { 99 | "@babel/types": "^7.4.4" 100 | } 101 | }, 102 | "@babel/helper-validator-identifier": { 103 | "version": "7.9.5", 104 | "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz", 105 | "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==", 106 | "dev": true 107 | }, 108 | "@babel/highlight": { 109 | "version": "7.0.0", 110 | "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", 111 | "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", 112 | "dev": true, 113 | "requires": { 114 | "chalk": "^2.0.0", 115 | "esutils": "^2.0.2", 116 | "js-tokens": "^4.0.0" 117 | } 118 | }, 119 | "@babel/parser": { 120 | "version": "7.4.5", 121 | "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz", 122 | "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==", 123 | "dev": true 124 | }, 125 | "@babel/template": { 126 | "version": "7.4.4", 127 | "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", 128 | "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", 129 | "dev": true, 130 | "requires": { 131 | "@babel/code-frame": "^7.0.0", 132 | "@babel/parser": "^7.4.4", 133 | "@babel/types": "^7.4.4" 134 | } 135 | }, 136 | "@babel/traverse": { 137 | "version": "7.4.5", 138 | "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", 139 | "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", 140 | "dev": true, 141 | "requires": { 142 | "@babel/code-frame": "^7.0.0", 143 | "@babel/generator": "^7.4.4", 144 | "@babel/helper-function-name": "^7.1.0", 145 | "@babel/helper-split-export-declaration": "^7.4.4", 146 | "@babel/parser": "^7.4.5", 147 | "@babel/types": "^7.4.4", 148 | "debug": "^4.1.0", 149 | "globals": "^11.1.0", 150 | "lodash": "^4.17.11" 151 | }, 152 | "dependencies": { 153 | "debug": { 154 | "version": "4.1.1", 155 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 156 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 157 | "dev": true, 158 | "requires": { 159 | "ms": "^2.1.1" 160 | } 161 | } 162 | } 163 | }, 164 | "@babel/types": { 165 | "version": "7.4.4", 166 | "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz", 167 | "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==", 168 | "dev": true, 169 | "requires": { 170 | "esutils": "^2.0.2", 171 | "lodash": "^4.17.11", 172 | "to-fast-properties": "^2.0.0" 173 | } 174 | }, 175 | "@emotion/is-prop-valid": { 176 | "version": "0.8.8", 177 | "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", 178 | "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", 179 | "dev": true, 180 | "requires": { 181 | "@emotion/memoize": "0.7.4" 182 | } 183 | }, 184 | "@emotion/memoize": { 185 | "version": "0.7.4", 186 | "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", 187 | "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", 188 | "dev": true 189 | }, 190 | "@emotion/unitless": { 191 | "version": "0.7.5", 192 | "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", 193 | "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", 194 | "dev": true 195 | }, 196 | "@istanbuljs/nyc-config-typescript": { 197 | "version": "0.1.3", 198 | "resolved": "https://registry.npmjs.org/@istanbuljs/nyc-config-typescript/-/nyc-config-typescript-0.1.3.tgz", 199 | "integrity": "sha512-EzRFg92bRSD1W/zeuNkeGwph0nkWf+pP2l/lYW4/5hav7RjKKBN5kV1Ix7Tvi0CMu3pC4Wi/U7rNisiJMR3ORg==", 200 | "dev": true 201 | }, 202 | "@types/chai": { 203 | "version": "4.2.11", 204 | "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.11.tgz", 205 | "integrity": "sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==", 206 | "dev": true 207 | }, 208 | "@types/hoist-non-react-statics": { 209 | "version": "3.3.1", 210 | "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", 211 | "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", 212 | "dev": true, 213 | "requires": { 214 | "@types/react": "*", 215 | "hoist-non-react-statics": "^3.3.0" 216 | } 217 | }, 218 | "@types/mocha": { 219 | "version": "5.2.7", 220 | "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.7.tgz", 221 | "integrity": "sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==", 222 | "dev": true 223 | }, 224 | "@types/prop-types": { 225 | "version": "15.7.3", 226 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", 227 | "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", 228 | "dev": true 229 | }, 230 | "@types/react": { 231 | "version": "16.9.34", 232 | "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz", 233 | "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==", 234 | "dev": true, 235 | "requires": { 236 | "@types/prop-types": "*", 237 | "csstype": "^2.2.0" 238 | } 239 | }, 240 | "@types/react-native": { 241 | "version": "0.62.2", 242 | "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.2.tgz", 243 | "integrity": "sha512-oIUIbqZNN9vRnGKWHYbTVp/GyTqdaM5mfy1s4zsi6BYvHAaFOPZ32IrhIHno/A5XOv4wuGfE7g5fliDk/H0+/Q==", 244 | "dev": true, 245 | "requires": { 246 | "@types/react": "*" 247 | } 248 | }, 249 | "@types/styled-components": { 250 | "version": "4.4.3", 251 | "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-4.4.3.tgz", 252 | "integrity": "sha512-U0udeNOZBfUkJycmGJwmzun0FBt11rZy08weVQmE2xfUNAbX8AGOEWxWna2d+qAUKxKgMlcG+TZT0+K2FfDcnQ==", 253 | "dev": true, 254 | "requires": { 255 | "@types/hoist-non-react-statics": "*", 256 | "@types/react": "*", 257 | "@types/react-native": "*", 258 | "csstype": "^2.2.0" 259 | } 260 | }, 261 | "ansi-colors": { 262 | "version": "3.2.3", 263 | "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz", 264 | "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==", 265 | "dev": true 266 | }, 267 | "ansi-regex": { 268 | "version": "3.0.0", 269 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", 270 | "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", 271 | "dev": true 272 | }, 273 | "ansi-styles": { 274 | "version": "3.2.1", 275 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 276 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 277 | "dev": true, 278 | "requires": { 279 | "color-convert": "^1.9.0" 280 | } 281 | }, 282 | "append-transform": { 283 | "version": "1.0.0", 284 | "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-1.0.0.tgz", 285 | "integrity": "sha512-P009oYkeHyU742iSZJzZZywj4QRJdnTWffaKuJQLablCZ1uz6/cW4yaRgcDaoQ+uwOxxnt0gRUcwfsNP2ri0gw==", 286 | "dev": true, 287 | "requires": { 288 | "default-require-extensions": "^2.0.0" 289 | } 290 | }, 291 | "archy": { 292 | "version": "1.0.0", 293 | "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", 294 | "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", 295 | "dev": true 296 | }, 297 | "arg": { 298 | "version": "4.1.3", 299 | "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", 300 | "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", 301 | "dev": true 302 | }, 303 | "argparse": { 304 | "version": "1.0.10", 305 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 306 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 307 | "dev": true, 308 | "requires": { 309 | "sprintf-js": "~1.0.2" 310 | } 311 | }, 312 | "assertion-error": { 313 | "version": "1.1.0", 314 | "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", 315 | "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", 316 | "dev": true 317 | }, 318 | "babel-plugin-styled-components": { 319 | "version": "1.10.7", 320 | "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", 321 | "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", 322 | "dev": true, 323 | "requires": { 324 | "@babel/helper-annotate-as-pure": "^7.0.0", 325 | "@babel/helper-module-imports": "^7.0.0", 326 | "babel-plugin-syntax-jsx": "^6.18.0", 327 | "lodash": "^4.17.11" 328 | } 329 | }, 330 | "babel-plugin-syntax-jsx": { 331 | "version": "6.18.0", 332 | "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", 333 | "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", 334 | "dev": true 335 | }, 336 | "balanced-match": { 337 | "version": "1.0.0", 338 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", 339 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", 340 | "dev": true 341 | }, 342 | "brace-expansion": { 343 | "version": "1.1.11", 344 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 345 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 346 | "dev": true, 347 | "requires": { 348 | "balanced-match": "^1.0.0", 349 | "concat-map": "0.0.1" 350 | } 351 | }, 352 | "browser-stdout": { 353 | "version": "1.3.1", 354 | "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", 355 | "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", 356 | "dev": true 357 | }, 358 | "buffer-from": { 359 | "version": "1.1.1", 360 | "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", 361 | "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", 362 | "dev": true 363 | }, 364 | "caching-transform": { 365 | "version": "3.0.2", 366 | "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-3.0.2.tgz", 367 | "integrity": "sha512-Mtgcv3lh3U0zRii/6qVgQODdPA4G3zhG+jtbCWj39RXuUFTMzH0vcdMtaJS1jPowd+It2Pqr6y3NJMQqOqCE2w==", 368 | "dev": true, 369 | "requires": { 370 | "hasha": "^3.0.0", 371 | "make-dir": "^2.0.0", 372 | "package-hash": "^3.0.0", 373 | "write-file-atomic": "^2.4.2" 374 | } 375 | }, 376 | "camelcase": { 377 | "version": "5.3.1", 378 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", 379 | "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", 380 | "dev": true 381 | }, 382 | "camelize": { 383 | "version": "1.0.0", 384 | "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", 385 | "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", 386 | "dev": true 387 | }, 388 | "chai": { 389 | "version": "4.2.0", 390 | "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz", 391 | "integrity": "sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==", 392 | "dev": true, 393 | "requires": { 394 | "assertion-error": "^1.1.0", 395 | "check-error": "^1.0.2", 396 | "deep-eql": "^3.0.1", 397 | "get-func-name": "^2.0.0", 398 | "pathval": "^1.1.0", 399 | "type-detect": "^4.0.5" 400 | } 401 | }, 402 | "chalk": { 403 | "version": "2.4.2", 404 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", 405 | "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", 406 | "dev": true, 407 | "requires": { 408 | "ansi-styles": "^3.2.1", 409 | "escape-string-regexp": "^1.0.5", 410 | "supports-color": "^5.3.0" 411 | } 412 | }, 413 | "check-error": { 414 | "version": "1.0.2", 415 | "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", 416 | "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=", 417 | "dev": true 418 | }, 419 | "cliui": { 420 | "version": "4.1.0", 421 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", 422 | "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", 423 | "dev": true, 424 | "requires": { 425 | "string-width": "^2.1.1", 426 | "strip-ansi": "^4.0.0", 427 | "wrap-ansi": "^2.0.0" 428 | }, 429 | "dependencies": { 430 | "ansi-regex": { 431 | "version": "3.0.0", 432 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", 433 | "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", 434 | "dev": true 435 | }, 436 | "is-fullwidth-code-point": { 437 | "version": "2.0.0", 438 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 439 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", 440 | "dev": true 441 | }, 442 | "string-width": { 443 | "version": "2.1.1", 444 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", 445 | "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", 446 | "dev": true, 447 | "requires": { 448 | "is-fullwidth-code-point": "^2.0.0", 449 | "strip-ansi": "^4.0.0" 450 | } 451 | }, 452 | "strip-ansi": { 453 | "version": "4.0.0", 454 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", 455 | "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", 456 | "dev": true, 457 | "requires": { 458 | "ansi-regex": "^3.0.0" 459 | } 460 | }, 461 | "wrap-ansi": { 462 | "version": "2.1.0", 463 | "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", 464 | "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", 465 | "dev": true, 466 | "requires": { 467 | "string-width": "^1.0.1", 468 | "strip-ansi": "^3.0.1" 469 | }, 470 | "dependencies": { 471 | "ansi-regex": { 472 | "version": "2.1.1", 473 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", 474 | "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", 475 | "dev": true 476 | }, 477 | "is-fullwidth-code-point": { 478 | "version": "1.0.0", 479 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", 480 | "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", 481 | "dev": true, 482 | "requires": { 483 | "number-is-nan": "^1.0.0" 484 | } 485 | }, 486 | "string-width": { 487 | "version": "1.0.2", 488 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", 489 | "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", 490 | "dev": true, 491 | "requires": { 492 | "code-point-at": "^1.0.0", 493 | "is-fullwidth-code-point": "^1.0.0", 494 | "strip-ansi": "^3.0.0" 495 | } 496 | }, 497 | "strip-ansi": { 498 | "version": "3.0.1", 499 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", 500 | "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", 501 | "dev": true, 502 | "requires": { 503 | "ansi-regex": "^2.0.0" 504 | } 505 | } 506 | } 507 | } 508 | } 509 | }, 510 | "code-point-at": { 511 | "version": "1.1.0", 512 | "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", 513 | "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", 514 | "dev": true 515 | }, 516 | "color-convert": { 517 | "version": "1.9.3", 518 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 519 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 520 | "dev": true, 521 | "requires": { 522 | "color-name": "1.1.3" 523 | } 524 | }, 525 | "color-name": { 526 | "version": "1.1.3", 527 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 528 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", 529 | "dev": true 530 | }, 531 | "commondir": { 532 | "version": "1.0.1", 533 | "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", 534 | "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", 535 | "dev": true 536 | }, 537 | "concat-map": { 538 | "version": "0.0.1", 539 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 540 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", 541 | "dev": true 542 | }, 543 | "convert-source-map": { 544 | "version": "1.6.0", 545 | "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz", 546 | "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==", 547 | "dev": true, 548 | "requires": { 549 | "safe-buffer": "~5.1.1" 550 | } 551 | }, 552 | "cp-file": { 553 | "version": "6.2.0", 554 | "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-6.2.0.tgz", 555 | "integrity": "sha512-fmvV4caBnofhPe8kOcitBwSn2f39QLjnAnGq3gO9dfd75mUytzKNZB1hde6QHunW2Rt+OwuBOMc3i1tNElbszA==", 556 | "dev": true, 557 | "requires": { 558 | "graceful-fs": "^4.1.2", 559 | "make-dir": "^2.0.0", 560 | "nested-error-stacks": "^2.0.0", 561 | "pify": "^4.0.1", 562 | "safe-buffer": "^5.0.1" 563 | }, 564 | "dependencies": { 565 | "pify": { 566 | "version": "4.0.1", 567 | "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", 568 | "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", 569 | "dev": true 570 | } 571 | } 572 | }, 573 | "cross-spawn": { 574 | "version": "6.0.5", 575 | "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", 576 | "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", 577 | "dev": true, 578 | "requires": { 579 | "nice-try": "^1.0.4", 580 | "path-key": "^2.0.1", 581 | "semver": "^5.5.0", 582 | "shebang-command": "^1.2.0", 583 | "which": "^1.2.9" 584 | } 585 | }, 586 | "css-color-keywords": { 587 | "version": "1.0.0", 588 | "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", 589 | "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", 590 | "dev": true 591 | }, 592 | "css-to-react-native": { 593 | "version": "2.3.2", 594 | "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", 595 | "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", 596 | "dev": true, 597 | "requires": { 598 | "camelize": "^1.0.0", 599 | "css-color-keywords": "^1.0.0", 600 | "postcss-value-parser": "^3.3.0" 601 | } 602 | }, 603 | "csstype": { 604 | "version": "2.6.10", 605 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", 606 | "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==", 607 | "dev": true 608 | }, 609 | "debug": { 610 | "version": "3.2.6", 611 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", 612 | "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", 613 | "dev": true, 614 | "requires": { 615 | "ms": "^2.1.1" 616 | } 617 | }, 618 | "decamelize": { 619 | "version": "1.2.0", 620 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", 621 | "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", 622 | "dev": true 623 | }, 624 | "deep-eql": { 625 | "version": "3.0.1", 626 | "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz", 627 | "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==", 628 | "dev": true, 629 | "requires": { 630 | "type-detect": "^4.0.0" 631 | } 632 | }, 633 | "default-require-extensions": { 634 | "version": "2.0.0", 635 | "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-2.0.0.tgz", 636 | "integrity": "sha1-9fj7sYp9bVCyH2QfZJ67Uiz+JPc=", 637 | "dev": true, 638 | "requires": { 639 | "strip-bom": "^3.0.0" 640 | } 641 | }, 642 | "define-properties": { 643 | "version": "1.1.3", 644 | "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", 645 | "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", 646 | "dev": true, 647 | "requires": { 648 | "object-keys": "^1.0.12" 649 | } 650 | }, 651 | "diff": { 652 | "version": "3.5.0", 653 | "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", 654 | "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", 655 | "dev": true 656 | }, 657 | "emoji-regex": { 658 | "version": "7.0.3", 659 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", 660 | "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", 661 | "dev": true 662 | }, 663 | "end-of-stream": { 664 | "version": "1.4.1", 665 | "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", 666 | "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==", 667 | "dev": true, 668 | "requires": { 669 | "once": "^1.4.0" 670 | } 671 | }, 672 | "error-ex": { 673 | "version": "1.3.2", 674 | "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", 675 | "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", 676 | "dev": true, 677 | "requires": { 678 | "is-arrayish": "^0.2.1" 679 | } 680 | }, 681 | "es-abstract": { 682 | "version": "1.17.5", 683 | "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz", 684 | "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==", 685 | "dev": true, 686 | "requires": { 687 | "es-to-primitive": "^1.2.1", 688 | "function-bind": "^1.1.1", 689 | "has": "^1.0.3", 690 | "has-symbols": "^1.0.1", 691 | "is-callable": "^1.1.5", 692 | "is-regex": "^1.0.5", 693 | "object-inspect": "^1.7.0", 694 | "object-keys": "^1.1.1", 695 | "object.assign": "^4.1.0", 696 | "string.prototype.trimleft": "^2.1.1", 697 | "string.prototype.trimright": "^2.1.1" 698 | } 699 | }, 700 | "es-to-primitive": { 701 | "version": "1.2.1", 702 | "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", 703 | "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", 704 | "dev": true, 705 | "requires": { 706 | "is-callable": "^1.1.4", 707 | "is-date-object": "^1.0.1", 708 | "is-symbol": "^1.0.2" 709 | } 710 | }, 711 | "es6-error": { 712 | "version": "4.1.1", 713 | "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", 714 | "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", 715 | "dev": true 716 | }, 717 | "escape-string-regexp": { 718 | "version": "1.0.5", 719 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 720 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", 721 | "dev": true 722 | }, 723 | "esprima": { 724 | "version": "4.0.1", 725 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 726 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", 727 | "dev": true 728 | }, 729 | "esutils": { 730 | "version": "2.0.2", 731 | "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", 732 | "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", 733 | "dev": true 734 | }, 735 | "execa": { 736 | "version": "1.0.0", 737 | "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", 738 | "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", 739 | "dev": true, 740 | "requires": { 741 | "cross-spawn": "^6.0.0", 742 | "get-stream": "^4.0.0", 743 | "is-stream": "^1.1.0", 744 | "npm-run-path": "^2.0.0", 745 | "p-finally": "^1.0.0", 746 | "signal-exit": "^3.0.0", 747 | "strip-eof": "^1.0.0" 748 | } 749 | }, 750 | "find-cache-dir": { 751 | "version": "2.1.0", 752 | "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz", 753 | "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==", 754 | "dev": true, 755 | "requires": { 756 | "commondir": "^1.0.1", 757 | "make-dir": "^2.0.0", 758 | "pkg-dir": "^3.0.0" 759 | }, 760 | "dependencies": { 761 | "pkg-dir": { 762 | "version": "3.0.0", 763 | "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", 764 | "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", 765 | "dev": true, 766 | "requires": { 767 | "find-up": "^3.0.0" 768 | } 769 | } 770 | } 771 | }, 772 | "find-up": { 773 | "version": "3.0.0", 774 | "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", 775 | "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", 776 | "dev": true, 777 | "requires": { 778 | "locate-path": "^3.0.0" 779 | } 780 | }, 781 | "flat": { 782 | "version": "4.1.0", 783 | "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz", 784 | "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==", 785 | "dev": true, 786 | "requires": { 787 | "is-buffer": "~2.0.3" 788 | } 789 | }, 790 | "foreground-child": { 791 | "version": "1.5.6", 792 | "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-1.5.6.tgz", 793 | "integrity": "sha1-T9ca0t/elnibmApcCilZN8svXOk=", 794 | "dev": true, 795 | "requires": { 796 | "cross-spawn": "^4", 797 | "signal-exit": "^3.0.0" 798 | }, 799 | "dependencies": { 800 | "cross-spawn": { 801 | "version": "4.0.2", 802 | "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz", 803 | "integrity": "sha1-e5JHYhwjrf3ThWAEqCPL45dCTUE=", 804 | "dev": true, 805 | "requires": { 806 | "lru-cache": "^4.0.1", 807 | "which": "^1.2.9" 808 | } 809 | } 810 | } 811 | }, 812 | "fs.realpath": { 813 | "version": "1.0.0", 814 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 815 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", 816 | "dev": true 817 | }, 818 | "function-bind": { 819 | "version": "1.1.1", 820 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 821 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 822 | "dev": true 823 | }, 824 | "get-caller-file": { 825 | "version": "2.0.5", 826 | "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", 827 | "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", 828 | "dev": true 829 | }, 830 | "get-func-name": { 831 | "version": "2.0.0", 832 | "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", 833 | "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=", 834 | "dev": true 835 | }, 836 | "get-stream": { 837 | "version": "4.1.0", 838 | "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", 839 | "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", 840 | "dev": true, 841 | "requires": { 842 | "pump": "^3.0.0" 843 | } 844 | }, 845 | "glob": { 846 | "version": "7.1.4", 847 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz", 848 | "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==", 849 | "dev": true, 850 | "requires": { 851 | "fs.realpath": "^1.0.0", 852 | "inflight": "^1.0.4", 853 | "inherits": "2", 854 | "minimatch": "^3.0.4", 855 | "once": "^1.3.0", 856 | "path-is-absolute": "^1.0.0" 857 | } 858 | }, 859 | "globals": { 860 | "version": "11.12.0", 861 | "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", 862 | "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", 863 | "dev": true 864 | }, 865 | "graceful-fs": { 866 | "version": "4.1.15", 867 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", 868 | "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", 869 | "dev": true 870 | }, 871 | "growl": { 872 | "version": "1.10.5", 873 | "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", 874 | "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==", 875 | "dev": true 876 | }, 877 | "has": { 878 | "version": "1.0.3", 879 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 880 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 881 | "dev": true, 882 | "requires": { 883 | "function-bind": "^1.1.1" 884 | } 885 | }, 886 | "has-flag": { 887 | "version": "3.0.0", 888 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 889 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", 890 | "dev": true 891 | }, 892 | "has-symbols": { 893 | "version": "1.0.1", 894 | "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", 895 | "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", 896 | "dev": true 897 | }, 898 | "hasha": { 899 | "version": "3.0.0", 900 | "resolved": "https://registry.npmjs.org/hasha/-/hasha-3.0.0.tgz", 901 | "integrity": "sha1-UqMvq4Vp1BymmmH/GiFPjrfIvTk=", 902 | "dev": true, 903 | "requires": { 904 | "is-stream": "^1.0.1" 905 | } 906 | }, 907 | "he": { 908 | "version": "1.2.0", 909 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", 910 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", 911 | "dev": true 912 | }, 913 | "hoist-non-react-statics": { 914 | "version": "3.3.2", 915 | "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", 916 | "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", 917 | "dev": true, 918 | "requires": { 919 | "react-is": "^16.7.0" 920 | } 921 | }, 922 | "hosted-git-info": { 923 | "version": "2.8.9", 924 | "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", 925 | "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", 926 | "dev": true 927 | }, 928 | "html-escaper": { 929 | "version": "2.0.2", 930 | "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", 931 | "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", 932 | "dev": true 933 | }, 934 | "imurmurhash": { 935 | "version": "0.1.4", 936 | "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", 937 | "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", 938 | "dev": true 939 | }, 940 | "inflight": { 941 | "version": "1.0.6", 942 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 943 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 944 | "dev": true, 945 | "requires": { 946 | "once": "^1.3.0", 947 | "wrappy": "1" 948 | } 949 | }, 950 | "inherits": { 951 | "version": "2.0.3", 952 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 953 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", 954 | "dev": true 955 | }, 956 | "invert-kv": { 957 | "version": "2.0.0", 958 | "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz", 959 | "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==", 960 | "dev": true 961 | }, 962 | "is-arrayish": { 963 | "version": "0.2.1", 964 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", 965 | "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", 966 | "dev": true 967 | }, 968 | "is-buffer": { 969 | "version": "2.0.4", 970 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", 971 | "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==", 972 | "dev": true 973 | }, 974 | "is-callable": { 975 | "version": "1.1.5", 976 | "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", 977 | "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", 978 | "dev": true 979 | }, 980 | "is-date-object": { 981 | "version": "1.0.2", 982 | "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz", 983 | "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==", 984 | "dev": true 985 | }, 986 | "is-fullwidth-code-point": { 987 | "version": "2.0.0", 988 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 989 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", 990 | "dev": true 991 | }, 992 | "is-regex": { 993 | "version": "1.0.5", 994 | "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", 995 | "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", 996 | "dev": true, 997 | "requires": { 998 | "has": "^1.0.3" 999 | } 1000 | }, 1001 | "is-stream": { 1002 | "version": "1.1.0", 1003 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", 1004 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", 1005 | "dev": true 1006 | }, 1007 | "is-symbol": { 1008 | "version": "1.0.3", 1009 | "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz", 1010 | "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==", 1011 | "dev": true, 1012 | "requires": { 1013 | "has-symbols": "^1.0.1" 1014 | } 1015 | }, 1016 | "is-what": { 1017 | "version": "3.8.0", 1018 | "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.8.0.tgz", 1019 | "integrity": "sha512-UKeBoQfV8bjlM4pmx1FLDHdxslW/1mTksEs8ReVsilPmUv5cORd4+2/wFcviI3cUjrLybxCjzc8DnodAzJ/Wrg==", 1020 | "dev": true 1021 | }, 1022 | "isexe": { 1023 | "version": "2.0.0", 1024 | "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", 1025 | "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", 1026 | "dev": true 1027 | }, 1028 | "istanbul-lib-coverage": { 1029 | "version": "2.0.5", 1030 | "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz", 1031 | "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==", 1032 | "dev": true 1033 | }, 1034 | "istanbul-lib-hook": { 1035 | "version": "2.0.7", 1036 | "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-2.0.7.tgz", 1037 | "integrity": "sha512-vrRztU9VRRFDyC+aklfLoeXyNdTfga2EI3udDGn4cZ6fpSXpHLV9X6CHvfoMCPtggg8zvDDmC4b9xfu0z6/llA==", 1038 | "dev": true, 1039 | "requires": { 1040 | "append-transform": "^1.0.0" 1041 | } 1042 | }, 1043 | "istanbul-lib-instrument": { 1044 | "version": "3.3.0", 1045 | "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz", 1046 | "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==", 1047 | "dev": true, 1048 | "requires": { 1049 | "@babel/generator": "^7.4.0", 1050 | "@babel/parser": "^7.4.3", 1051 | "@babel/template": "^7.4.0", 1052 | "@babel/traverse": "^7.4.3", 1053 | "@babel/types": "^7.4.0", 1054 | "istanbul-lib-coverage": "^2.0.5", 1055 | "semver": "^6.0.0" 1056 | }, 1057 | "dependencies": { 1058 | "semver": { 1059 | "version": "6.1.1", 1060 | "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz", 1061 | "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==", 1062 | "dev": true 1063 | } 1064 | } 1065 | }, 1066 | "istanbul-lib-report": { 1067 | "version": "2.0.8", 1068 | "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz", 1069 | "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==", 1070 | "dev": true, 1071 | "requires": { 1072 | "istanbul-lib-coverage": "^2.0.5", 1073 | "make-dir": "^2.1.0", 1074 | "supports-color": "^6.1.0" 1075 | }, 1076 | "dependencies": { 1077 | "supports-color": { 1078 | "version": "6.1.0", 1079 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", 1080 | "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", 1081 | "dev": true, 1082 | "requires": { 1083 | "has-flag": "^3.0.0" 1084 | } 1085 | } 1086 | } 1087 | }, 1088 | "istanbul-lib-source-maps": { 1089 | "version": "3.0.6", 1090 | "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz", 1091 | "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==", 1092 | "dev": true, 1093 | "requires": { 1094 | "debug": "^4.1.1", 1095 | "istanbul-lib-coverage": "^2.0.5", 1096 | "make-dir": "^2.1.0", 1097 | "rimraf": "^2.6.3", 1098 | "source-map": "^0.6.1" 1099 | }, 1100 | "dependencies": { 1101 | "debug": { 1102 | "version": "4.1.1", 1103 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 1104 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 1105 | "dev": true, 1106 | "requires": { 1107 | "ms": "^2.1.1" 1108 | } 1109 | }, 1110 | "source-map": { 1111 | "version": "0.6.1", 1112 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 1113 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 1114 | "dev": true 1115 | } 1116 | } 1117 | }, 1118 | "istanbul-reports": { 1119 | "version": "2.2.7", 1120 | "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz", 1121 | "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==", 1122 | "dev": true, 1123 | "requires": { 1124 | "html-escaper": "^2.0.0" 1125 | } 1126 | }, 1127 | "js-tokens": { 1128 | "version": "4.0.0", 1129 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 1130 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", 1131 | "dev": true 1132 | }, 1133 | "js-yaml": { 1134 | "version": "3.13.1", 1135 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", 1136 | "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", 1137 | "dev": true, 1138 | "requires": { 1139 | "argparse": "^1.0.7", 1140 | "esprima": "^4.0.0" 1141 | } 1142 | }, 1143 | "jsesc": { 1144 | "version": "2.5.2", 1145 | "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", 1146 | "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", 1147 | "dev": true 1148 | }, 1149 | "json-parse-better-errors": { 1150 | "version": "1.0.2", 1151 | "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", 1152 | "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", 1153 | "dev": true 1154 | }, 1155 | "lcid": { 1156 | "version": "2.0.0", 1157 | "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz", 1158 | "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==", 1159 | "dev": true, 1160 | "requires": { 1161 | "invert-kv": "^2.0.0" 1162 | } 1163 | }, 1164 | "load-json-file": { 1165 | "version": "4.0.0", 1166 | "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", 1167 | "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", 1168 | "dev": true, 1169 | "requires": { 1170 | "graceful-fs": "^4.1.2", 1171 | "parse-json": "^4.0.0", 1172 | "pify": "^3.0.0", 1173 | "strip-bom": "^3.0.0" 1174 | } 1175 | }, 1176 | "locate-path": { 1177 | "version": "3.0.0", 1178 | "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", 1179 | "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", 1180 | "dev": true, 1181 | "requires": { 1182 | "p-locate": "^3.0.0", 1183 | "path-exists": "^3.0.0" 1184 | } 1185 | }, 1186 | "lodash": { 1187 | "version": "4.17.21", 1188 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", 1189 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", 1190 | "dev": true 1191 | }, 1192 | "lodash.flattendeep": { 1193 | "version": "4.4.0", 1194 | "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", 1195 | "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", 1196 | "dev": true 1197 | }, 1198 | "log-symbols": { 1199 | "version": "2.2.0", 1200 | "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", 1201 | "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==", 1202 | "dev": true, 1203 | "requires": { 1204 | "chalk": "^2.0.1" 1205 | } 1206 | }, 1207 | "loose-envify": { 1208 | "version": "1.4.0", 1209 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 1210 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 1211 | "dev": true, 1212 | "requires": { 1213 | "js-tokens": "^3.0.0 || ^4.0.0" 1214 | } 1215 | }, 1216 | "lru-cache": { 1217 | "version": "4.1.5", 1218 | "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", 1219 | "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", 1220 | "dev": true, 1221 | "requires": { 1222 | "pseudomap": "^1.0.2", 1223 | "yallist": "^2.1.2" 1224 | } 1225 | }, 1226 | "make-dir": { 1227 | "version": "2.1.0", 1228 | "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", 1229 | "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", 1230 | "dev": true, 1231 | "requires": { 1232 | "pify": "^4.0.1", 1233 | "semver": "^5.6.0" 1234 | }, 1235 | "dependencies": { 1236 | "pify": { 1237 | "version": "4.0.1", 1238 | "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", 1239 | "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", 1240 | "dev": true 1241 | } 1242 | } 1243 | }, 1244 | "make-error": { 1245 | "version": "1.3.6", 1246 | "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", 1247 | "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", 1248 | "dev": true 1249 | }, 1250 | "map-age-cleaner": { 1251 | "version": "0.1.3", 1252 | "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", 1253 | "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", 1254 | "dev": true, 1255 | "requires": { 1256 | "p-defer": "^1.0.0" 1257 | } 1258 | }, 1259 | "mem": { 1260 | "version": "4.3.0", 1261 | "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz", 1262 | "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==", 1263 | "dev": true, 1264 | "requires": { 1265 | "map-age-cleaner": "^0.1.1", 1266 | "mimic-fn": "^2.0.0", 1267 | "p-is-promise": "^2.0.0" 1268 | }, 1269 | "dependencies": { 1270 | "mimic-fn": { 1271 | "version": "2.1.0", 1272 | "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", 1273 | "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", 1274 | "dev": true 1275 | } 1276 | } 1277 | }, 1278 | "memoize-one": { 1279 | "version": "5.1.1", 1280 | "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", 1281 | "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==", 1282 | "dev": true 1283 | }, 1284 | "merge-anything": { 1285 | "version": "2.4.4", 1286 | "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz", 1287 | "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==", 1288 | "dev": true, 1289 | "requires": { 1290 | "is-what": "^3.3.1" 1291 | } 1292 | }, 1293 | "merge-source-map": { 1294 | "version": "1.1.0", 1295 | "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz", 1296 | "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==", 1297 | "dev": true, 1298 | "requires": { 1299 | "source-map": "^0.6.1" 1300 | }, 1301 | "dependencies": { 1302 | "source-map": { 1303 | "version": "0.6.1", 1304 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 1305 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 1306 | "dev": true 1307 | } 1308 | } 1309 | }, 1310 | "minimatch": { 1311 | "version": "3.0.4", 1312 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 1313 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", 1314 | "dev": true, 1315 | "requires": { 1316 | "brace-expansion": "^1.1.7" 1317 | } 1318 | }, 1319 | "minimist": { 1320 | "version": "1.2.5", 1321 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", 1322 | "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", 1323 | "dev": true 1324 | }, 1325 | "mkdirp": { 1326 | "version": "0.5.5", 1327 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", 1328 | "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", 1329 | "dev": true, 1330 | "requires": { 1331 | "minimist": "^1.2.5" 1332 | } 1333 | }, 1334 | "mocha": { 1335 | "version": "6.2.3", 1336 | "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.3.tgz", 1337 | "integrity": "sha512-0R/3FvjIGH3eEuG17ccFPk117XL2rWxatr81a57D+r/x2uTYZRbdZ4oVidEUMh2W2TJDa7MdAb12Lm2/qrKajg==", 1338 | "dev": true, 1339 | "requires": { 1340 | "ansi-colors": "3.2.3", 1341 | "browser-stdout": "1.3.1", 1342 | "debug": "3.2.6", 1343 | "diff": "3.5.0", 1344 | "escape-string-regexp": "1.0.5", 1345 | "find-up": "3.0.0", 1346 | "glob": "7.1.3", 1347 | "growl": "1.10.5", 1348 | "he": "1.2.0", 1349 | "js-yaml": "3.13.1", 1350 | "log-symbols": "2.2.0", 1351 | "minimatch": "3.0.4", 1352 | "mkdirp": "0.5.4", 1353 | "ms": "2.1.1", 1354 | "node-environment-flags": "1.0.5", 1355 | "object.assign": "4.1.0", 1356 | "strip-json-comments": "2.0.1", 1357 | "supports-color": "6.0.0", 1358 | "which": "1.3.1", 1359 | "wide-align": "1.1.3", 1360 | "yargs": "13.3.2", 1361 | "yargs-parser": "13.1.2", 1362 | "yargs-unparser": "1.6.0" 1363 | }, 1364 | "dependencies": { 1365 | "ansi-regex": { 1366 | "version": "4.1.0", 1367 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 1368 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", 1369 | "dev": true 1370 | }, 1371 | "cliui": { 1372 | "version": "5.0.0", 1373 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", 1374 | "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", 1375 | "dev": true, 1376 | "requires": { 1377 | "string-width": "^3.1.0", 1378 | "strip-ansi": "^5.2.0", 1379 | "wrap-ansi": "^5.1.0" 1380 | } 1381 | }, 1382 | "glob": { 1383 | "version": "7.1.3", 1384 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", 1385 | "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", 1386 | "dev": true, 1387 | "requires": { 1388 | "fs.realpath": "^1.0.0", 1389 | "inflight": "^1.0.4", 1390 | "inherits": "2", 1391 | "minimatch": "^3.0.4", 1392 | "once": "^1.3.0", 1393 | "path-is-absolute": "^1.0.0" 1394 | } 1395 | }, 1396 | "minimist": { 1397 | "version": "1.2.5", 1398 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", 1399 | "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", 1400 | "dev": true 1401 | }, 1402 | "mkdirp": { 1403 | "version": "0.5.4", 1404 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", 1405 | "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", 1406 | "dev": true, 1407 | "requires": { 1408 | "minimist": "^1.2.5" 1409 | } 1410 | }, 1411 | "ms": { 1412 | "version": "2.1.1", 1413 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", 1414 | "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", 1415 | "dev": true 1416 | }, 1417 | "string-width": { 1418 | "version": "3.1.0", 1419 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 1420 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 1421 | "dev": true, 1422 | "requires": { 1423 | "emoji-regex": "^7.0.1", 1424 | "is-fullwidth-code-point": "^2.0.0", 1425 | "strip-ansi": "^5.1.0" 1426 | } 1427 | }, 1428 | "strip-ansi": { 1429 | "version": "5.2.0", 1430 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 1431 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 1432 | "dev": true, 1433 | "requires": { 1434 | "ansi-regex": "^4.1.0" 1435 | } 1436 | }, 1437 | "supports-color": { 1438 | "version": "6.0.0", 1439 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz", 1440 | "integrity": "sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==", 1441 | "dev": true, 1442 | "requires": { 1443 | "has-flag": "^3.0.0" 1444 | } 1445 | }, 1446 | "yargs": { 1447 | "version": "13.3.2", 1448 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", 1449 | "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", 1450 | "dev": true, 1451 | "requires": { 1452 | "cliui": "^5.0.0", 1453 | "find-up": "^3.0.0", 1454 | "get-caller-file": "^2.0.1", 1455 | "require-directory": "^2.1.1", 1456 | "require-main-filename": "^2.0.0", 1457 | "set-blocking": "^2.0.0", 1458 | "string-width": "^3.0.0", 1459 | "which-module": "^2.0.0", 1460 | "y18n": "^4.0.0", 1461 | "yargs-parser": "^13.1.2" 1462 | } 1463 | } 1464 | } 1465 | }, 1466 | "ms": { 1467 | "version": "2.1.2", 1468 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 1469 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", 1470 | "dev": true 1471 | }, 1472 | "nested-error-stacks": { 1473 | "version": "2.1.0", 1474 | "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz", 1475 | "integrity": "sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==", 1476 | "dev": true 1477 | }, 1478 | "nice-try": { 1479 | "version": "1.0.5", 1480 | "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", 1481 | "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", 1482 | "dev": true 1483 | }, 1484 | "node-environment-flags": { 1485 | "version": "1.0.5", 1486 | "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.5.tgz", 1487 | "integrity": "sha512-VNYPRfGfmZLx0Ye20jWzHUjyTW/c+6Wq+iLhDzUI4XmhrDd9l/FozXV3F2xOaXjvp0co0+v1YSR3CMP6g+VvLQ==", 1488 | "dev": true, 1489 | "requires": { 1490 | "object.getownpropertydescriptors": "^2.0.3", 1491 | "semver": "^5.7.0" 1492 | } 1493 | }, 1494 | "normalize-package-data": { 1495 | "version": "2.5.0", 1496 | "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", 1497 | "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", 1498 | "dev": true, 1499 | "requires": { 1500 | "hosted-git-info": "^2.1.4", 1501 | "resolve": "^1.10.0", 1502 | "semver": "2 || 3 || 4 || 5", 1503 | "validate-npm-package-license": "^3.0.1" 1504 | } 1505 | }, 1506 | "npm-run-path": { 1507 | "version": "2.0.2", 1508 | "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", 1509 | "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", 1510 | "dev": true, 1511 | "requires": { 1512 | "path-key": "^2.0.0" 1513 | } 1514 | }, 1515 | "number-is-nan": { 1516 | "version": "1.0.1", 1517 | "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", 1518 | "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", 1519 | "dev": true 1520 | }, 1521 | "nyc": { 1522 | "version": "14.1.1", 1523 | "resolved": "https://registry.npmjs.org/nyc/-/nyc-14.1.1.tgz", 1524 | "integrity": "sha512-OI0vm6ZGUnoGZv/tLdZ2esSVzDwUC88SNs+6JoSOMVxA+gKMB8Tk7jBwgemLx4O40lhhvZCVw1C+OYLOBOPXWw==", 1525 | "dev": true, 1526 | "requires": { 1527 | "archy": "^1.0.0", 1528 | "caching-transform": "^3.0.2", 1529 | "convert-source-map": "^1.6.0", 1530 | "cp-file": "^6.2.0", 1531 | "find-cache-dir": "^2.1.0", 1532 | "find-up": "^3.0.0", 1533 | "foreground-child": "^1.5.6", 1534 | "glob": "^7.1.3", 1535 | "istanbul-lib-coverage": "^2.0.5", 1536 | "istanbul-lib-hook": "^2.0.7", 1537 | "istanbul-lib-instrument": "^3.3.0", 1538 | "istanbul-lib-report": "^2.0.8", 1539 | "istanbul-lib-source-maps": "^3.0.6", 1540 | "istanbul-reports": "^2.2.4", 1541 | "js-yaml": "^3.13.1", 1542 | "make-dir": "^2.1.0", 1543 | "merge-source-map": "^1.1.0", 1544 | "resolve-from": "^4.0.0", 1545 | "rimraf": "^2.6.3", 1546 | "signal-exit": "^3.0.2", 1547 | "spawn-wrap": "^1.4.2", 1548 | "test-exclude": "^5.2.3", 1549 | "uuid": "^3.3.2", 1550 | "yargs": "^13.2.2", 1551 | "yargs-parser": "^13.0.0" 1552 | }, 1553 | "dependencies": { 1554 | "resolve-from": { 1555 | "version": "4.0.0", 1556 | "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", 1557 | "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", 1558 | "dev": true 1559 | } 1560 | } 1561 | }, 1562 | "object-assign": { 1563 | "version": "4.1.1", 1564 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 1565 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", 1566 | "dev": true 1567 | }, 1568 | "object-inspect": { 1569 | "version": "1.7.0", 1570 | "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", 1571 | "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", 1572 | "dev": true 1573 | }, 1574 | "object-keys": { 1575 | "version": "1.1.1", 1576 | "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", 1577 | "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", 1578 | "dev": true 1579 | }, 1580 | "object.assign": { 1581 | "version": "4.1.0", 1582 | "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", 1583 | "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", 1584 | "dev": true, 1585 | "requires": { 1586 | "define-properties": "^1.1.2", 1587 | "function-bind": "^1.1.1", 1588 | "has-symbols": "^1.0.0", 1589 | "object-keys": "^1.0.11" 1590 | } 1591 | }, 1592 | "object.getownpropertydescriptors": { 1593 | "version": "2.1.0", 1594 | "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz", 1595 | "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==", 1596 | "dev": true, 1597 | "requires": { 1598 | "define-properties": "^1.1.3", 1599 | "es-abstract": "^1.17.0-next.1" 1600 | } 1601 | }, 1602 | "once": { 1603 | "version": "1.4.0", 1604 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 1605 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 1606 | "dev": true, 1607 | "requires": { 1608 | "wrappy": "1" 1609 | } 1610 | }, 1611 | "os-homedir": { 1612 | "version": "1.0.2", 1613 | "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", 1614 | "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", 1615 | "dev": true 1616 | }, 1617 | "os-locale": { 1618 | "version": "3.1.0", 1619 | "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", 1620 | "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", 1621 | "dev": true, 1622 | "requires": { 1623 | "execa": "^1.0.0", 1624 | "lcid": "^2.0.0", 1625 | "mem": "^4.0.0" 1626 | } 1627 | }, 1628 | "p-defer": { 1629 | "version": "1.0.0", 1630 | "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", 1631 | "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=", 1632 | "dev": true 1633 | }, 1634 | "p-finally": { 1635 | "version": "1.0.0", 1636 | "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", 1637 | "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", 1638 | "dev": true 1639 | }, 1640 | "p-is-promise": { 1641 | "version": "2.1.0", 1642 | "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz", 1643 | "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==", 1644 | "dev": true 1645 | }, 1646 | "p-limit": { 1647 | "version": "2.2.0", 1648 | "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz", 1649 | "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==", 1650 | "dev": true, 1651 | "requires": { 1652 | "p-try": "^2.0.0" 1653 | } 1654 | }, 1655 | "p-locate": { 1656 | "version": "3.0.0", 1657 | "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", 1658 | "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", 1659 | "dev": true, 1660 | "requires": { 1661 | "p-limit": "^2.0.0" 1662 | } 1663 | }, 1664 | "p-try": { 1665 | "version": "2.2.0", 1666 | "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", 1667 | "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", 1668 | "dev": true 1669 | }, 1670 | "package-hash": { 1671 | "version": "3.0.0", 1672 | "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-3.0.0.tgz", 1673 | "integrity": "sha512-lOtmukMDVvtkL84rJHI7dpTYq+0rli8N2wlnqUcBuDWCfVhRUfOmnR9SsoHFMLpACvEV60dX7rd0rFaYDZI+FA==", 1674 | "dev": true, 1675 | "requires": { 1676 | "graceful-fs": "^4.1.15", 1677 | "hasha": "^3.0.0", 1678 | "lodash.flattendeep": "^4.4.0", 1679 | "release-zalgo": "^1.0.0" 1680 | } 1681 | }, 1682 | "parse-json": { 1683 | "version": "4.0.0", 1684 | "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", 1685 | "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", 1686 | "dev": true, 1687 | "requires": { 1688 | "error-ex": "^1.3.1", 1689 | "json-parse-better-errors": "^1.0.1" 1690 | } 1691 | }, 1692 | "path-exists": { 1693 | "version": "3.0.0", 1694 | "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", 1695 | "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", 1696 | "dev": true 1697 | }, 1698 | "path-is-absolute": { 1699 | "version": "1.0.1", 1700 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 1701 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", 1702 | "dev": true 1703 | }, 1704 | "path-key": { 1705 | "version": "2.0.1", 1706 | "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", 1707 | "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", 1708 | "dev": true 1709 | }, 1710 | "path-parse": { 1711 | "version": "1.0.7", 1712 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 1713 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 1714 | "dev": true 1715 | }, 1716 | "path-type": { 1717 | "version": "3.0.0", 1718 | "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", 1719 | "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", 1720 | "dev": true, 1721 | "requires": { 1722 | "pify": "^3.0.0" 1723 | } 1724 | }, 1725 | "pathval": { 1726 | "version": "1.1.1", 1727 | "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", 1728 | "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==", 1729 | "dev": true 1730 | }, 1731 | "pify": { 1732 | "version": "3.0.0", 1733 | "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", 1734 | "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", 1735 | "dev": true 1736 | }, 1737 | "postcss-value-parser": { 1738 | "version": "3.3.1", 1739 | "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", 1740 | "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", 1741 | "dev": true 1742 | }, 1743 | "prop-types": { 1744 | "version": "15.7.2", 1745 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", 1746 | "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", 1747 | "dev": true, 1748 | "requires": { 1749 | "loose-envify": "^1.4.0", 1750 | "object-assign": "^4.1.1", 1751 | "react-is": "^16.8.1" 1752 | } 1753 | }, 1754 | "pseudomap": { 1755 | "version": "1.0.2", 1756 | "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", 1757 | "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", 1758 | "dev": true 1759 | }, 1760 | "pump": { 1761 | "version": "3.0.0", 1762 | "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", 1763 | "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", 1764 | "dev": true, 1765 | "requires": { 1766 | "end-of-stream": "^1.1.0", 1767 | "once": "^1.3.1" 1768 | } 1769 | }, 1770 | "react": { 1771 | "version": "16.13.1", 1772 | "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", 1773 | "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", 1774 | "dev": true, 1775 | "requires": { 1776 | "loose-envify": "^1.1.0", 1777 | "object-assign": "^4.1.1", 1778 | "prop-types": "^15.6.2" 1779 | } 1780 | }, 1781 | "react-is": { 1782 | "version": "16.13.1", 1783 | "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", 1784 | "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", 1785 | "dev": true 1786 | }, 1787 | "read-pkg-up": { 1788 | "version": "4.0.0", 1789 | "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz", 1790 | "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==", 1791 | "dev": true, 1792 | "requires": { 1793 | "find-up": "^3.0.0", 1794 | "read-pkg": "^3.0.0" 1795 | }, 1796 | "dependencies": { 1797 | "read-pkg": { 1798 | "version": "3.0.0", 1799 | "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", 1800 | "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", 1801 | "dev": true, 1802 | "requires": { 1803 | "load-json-file": "^4.0.0", 1804 | "normalize-package-data": "^2.3.2", 1805 | "path-type": "^3.0.0" 1806 | } 1807 | } 1808 | } 1809 | }, 1810 | "release-zalgo": { 1811 | "version": "1.0.0", 1812 | "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", 1813 | "integrity": "sha1-CXALflB0Mpc5Mw5TXFqQ+2eFFzA=", 1814 | "dev": true, 1815 | "requires": { 1816 | "es6-error": "^4.0.1" 1817 | } 1818 | }, 1819 | "require-directory": { 1820 | "version": "2.1.1", 1821 | "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", 1822 | "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", 1823 | "dev": true 1824 | }, 1825 | "require-main-filename": { 1826 | "version": "2.0.0", 1827 | "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", 1828 | "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", 1829 | "dev": true 1830 | }, 1831 | "resolve": { 1832 | "version": "1.11.0", 1833 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz", 1834 | "integrity": "sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==", 1835 | "dev": true, 1836 | "requires": { 1837 | "path-parse": "^1.0.6" 1838 | } 1839 | }, 1840 | "rimraf": { 1841 | "version": "2.6.3", 1842 | "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", 1843 | "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", 1844 | "dev": true, 1845 | "requires": { 1846 | "glob": "^7.1.3" 1847 | } 1848 | }, 1849 | "safe-buffer": { 1850 | "version": "5.1.2", 1851 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 1852 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", 1853 | "dev": true 1854 | }, 1855 | "semver": { 1856 | "version": "5.7.0", 1857 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", 1858 | "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", 1859 | "dev": true 1860 | }, 1861 | "set-blocking": { 1862 | "version": "2.0.0", 1863 | "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", 1864 | "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", 1865 | "dev": true 1866 | }, 1867 | "shebang-command": { 1868 | "version": "1.2.0", 1869 | "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", 1870 | "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", 1871 | "dev": true, 1872 | "requires": { 1873 | "shebang-regex": "^1.0.0" 1874 | } 1875 | }, 1876 | "shebang-regex": { 1877 | "version": "1.0.0", 1878 | "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", 1879 | "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", 1880 | "dev": true 1881 | }, 1882 | "signal-exit": { 1883 | "version": "3.0.2", 1884 | "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", 1885 | "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", 1886 | "dev": true 1887 | }, 1888 | "source-map": { 1889 | "version": "0.5.7", 1890 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 1891 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", 1892 | "dev": true 1893 | }, 1894 | "source-map-support": { 1895 | "version": "0.5.16", 1896 | "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz", 1897 | "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==", 1898 | "dev": true, 1899 | "requires": { 1900 | "buffer-from": "^1.0.0", 1901 | "source-map": "^0.6.0" 1902 | }, 1903 | "dependencies": { 1904 | "source-map": { 1905 | "version": "0.6.1", 1906 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 1907 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 1908 | "dev": true 1909 | } 1910 | } 1911 | }, 1912 | "spawn-wrap": { 1913 | "version": "1.4.3", 1914 | "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-1.4.3.tgz", 1915 | "integrity": "sha512-IgB8md0QW/+tWqcavuFgKYR/qIRvJkRLPJDFaoXtLLUaVcCDK0+HeFTkmQHj3eprcYhc+gOl0aEA1w7qZlYezw==", 1916 | "dev": true, 1917 | "requires": { 1918 | "foreground-child": "^1.5.6", 1919 | "mkdirp": "^0.5.0", 1920 | "os-homedir": "^1.0.1", 1921 | "rimraf": "^2.6.2", 1922 | "signal-exit": "^3.0.2", 1923 | "which": "^1.3.0" 1924 | } 1925 | }, 1926 | "spdx-correct": { 1927 | "version": "3.1.0", 1928 | "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", 1929 | "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", 1930 | "dev": true, 1931 | "requires": { 1932 | "spdx-expression-parse": "^3.0.0", 1933 | "spdx-license-ids": "^3.0.0" 1934 | } 1935 | }, 1936 | "spdx-exceptions": { 1937 | "version": "2.2.0", 1938 | "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", 1939 | "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", 1940 | "dev": true 1941 | }, 1942 | "spdx-expression-parse": { 1943 | "version": "3.0.0", 1944 | "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", 1945 | "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", 1946 | "dev": true, 1947 | "requires": { 1948 | "spdx-exceptions": "^2.1.0", 1949 | "spdx-license-ids": "^3.0.0" 1950 | } 1951 | }, 1952 | "spdx-license-ids": { 1953 | "version": "3.0.4", 1954 | "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz", 1955 | "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==", 1956 | "dev": true 1957 | }, 1958 | "sprintf-js": { 1959 | "version": "1.0.3", 1960 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 1961 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", 1962 | "dev": true 1963 | }, 1964 | "string-width": { 1965 | "version": "2.1.1", 1966 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", 1967 | "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", 1968 | "dev": true, 1969 | "requires": { 1970 | "is-fullwidth-code-point": "^2.0.0", 1971 | "strip-ansi": "^4.0.0" 1972 | } 1973 | }, 1974 | "string.prototype.trimend": { 1975 | "version": "1.0.1", 1976 | "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", 1977 | "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==", 1978 | "dev": true, 1979 | "requires": { 1980 | "define-properties": "^1.1.3", 1981 | "es-abstract": "^1.17.5" 1982 | } 1983 | }, 1984 | "string.prototype.trimleft": { 1985 | "version": "2.1.2", 1986 | "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz", 1987 | "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==", 1988 | "dev": true, 1989 | "requires": { 1990 | "define-properties": "^1.1.3", 1991 | "es-abstract": "^1.17.5", 1992 | "string.prototype.trimstart": "^1.0.0" 1993 | } 1994 | }, 1995 | "string.prototype.trimright": { 1996 | "version": "2.1.2", 1997 | "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz", 1998 | "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==", 1999 | "dev": true, 2000 | "requires": { 2001 | "define-properties": "^1.1.3", 2002 | "es-abstract": "^1.17.5", 2003 | "string.prototype.trimend": "^1.0.0" 2004 | } 2005 | }, 2006 | "string.prototype.trimstart": { 2007 | "version": "1.0.1", 2008 | "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz", 2009 | "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==", 2010 | "dev": true, 2011 | "requires": { 2012 | "define-properties": "^1.1.3", 2013 | "es-abstract": "^1.17.5" 2014 | } 2015 | }, 2016 | "strip-ansi": { 2017 | "version": "4.0.0", 2018 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", 2019 | "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", 2020 | "dev": true, 2021 | "requires": { 2022 | "ansi-regex": "^3.0.0" 2023 | } 2024 | }, 2025 | "strip-bom": { 2026 | "version": "3.0.0", 2027 | "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", 2028 | "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", 2029 | "dev": true 2030 | }, 2031 | "strip-eof": { 2032 | "version": "1.0.0", 2033 | "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", 2034 | "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", 2035 | "dev": true 2036 | }, 2037 | "strip-json-comments": { 2038 | "version": "2.0.1", 2039 | "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", 2040 | "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", 2041 | "dev": true 2042 | }, 2043 | "styled-components": { 2044 | "version": "4.4.1", 2045 | "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", 2046 | "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", 2047 | "dev": true, 2048 | "requires": { 2049 | "@babel/helper-module-imports": "^7.0.0", 2050 | "@babel/traverse": "^7.0.0", 2051 | "@emotion/is-prop-valid": "^0.8.1", 2052 | "@emotion/unitless": "^0.7.0", 2053 | "babel-plugin-styled-components": ">= 1", 2054 | "css-to-react-native": "^2.2.2", 2055 | "memoize-one": "^5.0.0", 2056 | "merge-anything": "^2.2.4", 2057 | "prop-types": "^15.5.4", 2058 | "react-is": "^16.6.0", 2059 | "stylis": "^3.5.0", 2060 | "stylis-rule-sheet": "^0.0.10", 2061 | "supports-color": "^5.5.0" 2062 | } 2063 | }, 2064 | "stylis": { 2065 | "version": "3.5.4", 2066 | "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", 2067 | "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", 2068 | "dev": true 2069 | }, 2070 | "stylis-rule-sheet": { 2071 | "version": "0.0.10", 2072 | "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", 2073 | "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", 2074 | "dev": true 2075 | }, 2076 | "supports-color": { 2077 | "version": "5.5.0", 2078 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 2079 | "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", 2080 | "dev": true, 2081 | "requires": { 2082 | "has-flag": "^3.0.0" 2083 | } 2084 | }, 2085 | "test-exclude": { 2086 | "version": "5.2.3", 2087 | "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz", 2088 | "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==", 2089 | "dev": true, 2090 | "requires": { 2091 | "glob": "^7.1.3", 2092 | "minimatch": "^3.0.4", 2093 | "read-pkg-up": "^4.0.0", 2094 | "require-main-filename": "^2.0.0" 2095 | } 2096 | }, 2097 | "to-fast-properties": { 2098 | "version": "2.0.0", 2099 | "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", 2100 | "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", 2101 | "dev": true 2102 | }, 2103 | "trim-right": { 2104 | "version": "1.0.1", 2105 | "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", 2106 | "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", 2107 | "dev": true 2108 | }, 2109 | "ts-node": { 2110 | "version": "8.8.2", 2111 | "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.8.2.tgz", 2112 | "integrity": "sha512-duVj6BpSpUpD/oM4MfhO98ozgkp3Gt9qIp3jGxwU2DFvl/3IRaEAvbLa8G60uS7C77457e/m5TMowjedeRxI1Q==", 2113 | "dev": true, 2114 | "requires": { 2115 | "arg": "^4.1.0", 2116 | "diff": "^4.0.1", 2117 | "make-error": "^1.1.1", 2118 | "source-map-support": "^0.5.6", 2119 | "yn": "3.1.1" 2120 | }, 2121 | "dependencies": { 2122 | "diff": { 2123 | "version": "4.0.2", 2124 | "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", 2125 | "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", 2126 | "dev": true 2127 | } 2128 | } 2129 | }, 2130 | "type-detect": { 2131 | "version": "4.0.8", 2132 | "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", 2133 | "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", 2134 | "dev": true 2135 | }, 2136 | "typescript": { 2137 | "version": "3.8.3", 2138 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz", 2139 | "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==", 2140 | "dev": true 2141 | }, 2142 | "uuid": { 2143 | "version": "3.3.2", 2144 | "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", 2145 | "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", 2146 | "dev": true 2147 | }, 2148 | "validate-npm-package-license": { 2149 | "version": "3.0.4", 2150 | "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", 2151 | "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", 2152 | "dev": true, 2153 | "requires": { 2154 | "spdx-correct": "^3.0.0", 2155 | "spdx-expression-parse": "^3.0.0" 2156 | } 2157 | }, 2158 | "which": { 2159 | "version": "1.3.1", 2160 | "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", 2161 | "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", 2162 | "dev": true, 2163 | "requires": { 2164 | "isexe": "^2.0.0" 2165 | } 2166 | }, 2167 | "which-module": { 2168 | "version": "2.0.0", 2169 | "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", 2170 | "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", 2171 | "dev": true 2172 | }, 2173 | "wide-align": { 2174 | "version": "1.1.3", 2175 | "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", 2176 | "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", 2177 | "dev": true, 2178 | "requires": { 2179 | "string-width": "^1.0.2 || 2" 2180 | } 2181 | }, 2182 | "wrap-ansi": { 2183 | "version": "5.1.0", 2184 | "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", 2185 | "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", 2186 | "dev": true, 2187 | "requires": { 2188 | "ansi-styles": "^3.2.0", 2189 | "string-width": "^3.0.0", 2190 | "strip-ansi": "^5.0.0" 2191 | }, 2192 | "dependencies": { 2193 | "ansi-regex": { 2194 | "version": "4.1.0", 2195 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 2196 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", 2197 | "dev": true 2198 | }, 2199 | "string-width": { 2200 | "version": "3.1.0", 2201 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 2202 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 2203 | "dev": true, 2204 | "requires": { 2205 | "emoji-regex": "^7.0.1", 2206 | "is-fullwidth-code-point": "^2.0.0", 2207 | "strip-ansi": "^5.1.0" 2208 | } 2209 | }, 2210 | "strip-ansi": { 2211 | "version": "5.2.0", 2212 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 2213 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 2214 | "dev": true, 2215 | "requires": { 2216 | "ansi-regex": "^4.1.0" 2217 | } 2218 | } 2219 | } 2220 | }, 2221 | "wrappy": { 2222 | "version": "1.0.2", 2223 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 2224 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", 2225 | "dev": true 2226 | }, 2227 | "write-file-atomic": { 2228 | "version": "2.4.3", 2229 | "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", 2230 | "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", 2231 | "dev": true, 2232 | "requires": { 2233 | "graceful-fs": "^4.1.11", 2234 | "imurmurhash": "^0.1.4", 2235 | "signal-exit": "^3.0.2" 2236 | } 2237 | }, 2238 | "y18n": { 2239 | "version": "4.0.1", 2240 | "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", 2241 | "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==", 2242 | "dev": true 2243 | }, 2244 | "yallist": { 2245 | "version": "2.1.2", 2246 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", 2247 | "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", 2248 | "dev": true 2249 | }, 2250 | "yargs": { 2251 | "version": "13.2.2", 2252 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.2.tgz", 2253 | "integrity": "sha512-WyEoxgyTD3w5XRpAQNYUB9ycVH/PQrToaTXdYXRdOXvEy1l19br+VJsc0vcO8PTGg5ro/l/GY7F/JMEBmI0BxA==", 2254 | "dev": true, 2255 | "requires": { 2256 | "cliui": "^4.0.0", 2257 | "find-up": "^3.0.0", 2258 | "get-caller-file": "^2.0.1", 2259 | "os-locale": "^3.1.0", 2260 | "require-directory": "^2.1.1", 2261 | "require-main-filename": "^2.0.0", 2262 | "set-blocking": "^2.0.0", 2263 | "string-width": "^3.0.0", 2264 | "which-module": "^2.0.0", 2265 | "y18n": "^4.0.0", 2266 | "yargs-parser": "^13.0.0" 2267 | }, 2268 | "dependencies": { 2269 | "ansi-regex": { 2270 | "version": "4.1.0", 2271 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 2272 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", 2273 | "dev": true 2274 | }, 2275 | "is-fullwidth-code-point": { 2276 | "version": "2.0.0", 2277 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 2278 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", 2279 | "dev": true 2280 | }, 2281 | "string-width": { 2282 | "version": "3.1.0", 2283 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 2284 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 2285 | "dev": true, 2286 | "requires": { 2287 | "emoji-regex": "^7.0.1", 2288 | "is-fullwidth-code-point": "^2.0.0", 2289 | "strip-ansi": "^5.1.0" 2290 | } 2291 | }, 2292 | "strip-ansi": { 2293 | "version": "5.2.0", 2294 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 2295 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 2296 | "dev": true, 2297 | "requires": { 2298 | "ansi-regex": "^4.1.0" 2299 | } 2300 | } 2301 | } 2302 | }, 2303 | "yargs-parser": { 2304 | "version": "13.1.2", 2305 | "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", 2306 | "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", 2307 | "dev": true, 2308 | "requires": { 2309 | "camelcase": "^5.0.0", 2310 | "decamelize": "^1.2.0" 2311 | } 2312 | }, 2313 | "yargs-unparser": { 2314 | "version": "1.6.0", 2315 | "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz", 2316 | "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==", 2317 | "dev": true, 2318 | "requires": { 2319 | "flat": "^4.1.0", 2320 | "lodash": "^4.17.15", 2321 | "yargs": "^13.3.0" 2322 | }, 2323 | "dependencies": { 2324 | "ansi-regex": { 2325 | "version": "4.1.0", 2326 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 2327 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", 2328 | "dev": true 2329 | }, 2330 | "cliui": { 2331 | "version": "5.0.0", 2332 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", 2333 | "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", 2334 | "dev": true, 2335 | "requires": { 2336 | "string-width": "^3.1.0", 2337 | "strip-ansi": "^5.2.0", 2338 | "wrap-ansi": "^5.1.0" 2339 | } 2340 | }, 2341 | "string-width": { 2342 | "version": "3.1.0", 2343 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 2344 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 2345 | "dev": true, 2346 | "requires": { 2347 | "emoji-regex": "^7.0.1", 2348 | "is-fullwidth-code-point": "^2.0.0", 2349 | "strip-ansi": "^5.1.0" 2350 | } 2351 | }, 2352 | "strip-ansi": { 2353 | "version": "5.2.0", 2354 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 2355 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 2356 | "dev": true, 2357 | "requires": { 2358 | "ansi-regex": "^4.1.0" 2359 | } 2360 | }, 2361 | "yargs": { 2362 | "version": "13.3.2", 2363 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", 2364 | "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", 2365 | "dev": true, 2366 | "requires": { 2367 | "cliui": "^5.0.0", 2368 | "find-up": "^3.0.0", 2369 | "get-caller-file": "^2.0.1", 2370 | "require-directory": "^2.1.1", 2371 | "require-main-filename": "^2.0.0", 2372 | "set-blocking": "^2.0.0", 2373 | "string-width": "^3.0.0", 2374 | "which-module": "^2.0.0", 2375 | "y18n": "^4.0.0", 2376 | "yargs-parser": "^13.1.2" 2377 | } 2378 | } 2379 | } 2380 | }, 2381 | "yn": { 2382 | "version": "3.1.1", 2383 | "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", 2384 | "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", 2385 | "dev": true 2386 | } 2387 | } 2388 | } 2389 | -------------------------------------------------------------------------------- /packages/styled-typography/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-typography", 3 | "version": "1.0.3", 4 | "description": "Typograpy components for react and styled-components", 5 | "main": "./dist/index.js", 6 | "types": "./dist/index.d.ts", 7 | "scripts": { 8 | "build": "tsc", 9 | "prepublishOnly": "npm run test && npm run build", 10 | "test": "mocha --exit -r ts-node/register test/*.test.ts", 11 | "test:coverage": "nyc npm run test", 12 | "test:watch": "mocha --watch --watch-extensions ts -r ts-node/register test/*.test.ts", 13 | "typecheck": "tsc --noEmit" 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/mike-engel/styled-typography.git" 21 | }, 22 | "keywords": [ 23 | "styled-components", 24 | "typography", 25 | "jsx", 26 | "react", 27 | "components", 28 | "ui", 29 | "type", 30 | "fonts", 31 | "font", 32 | "theme" 33 | ], 34 | "author": "Mike Engel ", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/mike-engel/styled-typography/issues" 38 | }, 39 | "homepage": "https://github.com/mike-engel/styled-typography#readme", 40 | "peerDependencies": { 41 | "styled-components": ">= 4.0.0" 42 | }, 43 | "devDependencies": { 44 | "@istanbuljs/nyc-config-typescript": "^0.1.3", 45 | "@types/chai": "^4.2.11", 46 | "@types/mocha": "^5.2.7", 47 | "@types/react": "^16.9.34", 48 | "@types/styled-components": "^4.4.3", 49 | "chai": "^4.2.0", 50 | "mocha": "^6.2.3", 51 | "nyc": "^14.1.1", 52 | "react": "^16.13.1", 53 | "styled-components": "^4.4.1", 54 | "ts-node": "^8.8.2", 55 | "typescript": "^3.8.3" 56 | }, 57 | "nyc": { 58 | "extends": "@istanbuljs/nyc-config-typescript", 59 | "check-coverage": true, 60 | "branches": 100, 61 | "lines": 100, 62 | "functions": 100, 63 | "statements": 100 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/styled-typography/src/index.ts: -------------------------------------------------------------------------------- 1 | import styled, { createGlobalStyle } from "styled-components"; 2 | import { 3 | getFontColor, 4 | TextType, 5 | getFontSize, 6 | getFontWeight, 7 | getFontStyle, 8 | getLineHeight, 9 | getFontFamily, 10 | getExtras 11 | } from "./utils"; 12 | import { HeadingProps, TextProps, LinkProps } from "./types"; 13 | 14 | export const GlobalTypeStyles = createGlobalStyle` 15 | body { 16 | color: ${getFontColor(TextType.Body)}; 17 | font-family: ${getFontFamily(TextType.Body)}; 18 | font-size: ${getFontSize(TextType.Body)}; 19 | font-weight: ${getFontWeight(TextType.Body)}; 20 | font-style: ${getFontStyle(TextType.Body)}; 21 | line-height: ${getLineHeight(TextType.Body)}; 22 | } 23 | `; 24 | 25 | /* istanbul ignore next */ 26 | export const Heading = styled("div").attrs(({ level }) => ({ 27 | role: "heading", 28 | "aria-level": level || 1 29 | }))` 30 | color: ${getFontColor(TextType.Heading)}; 31 | font-family: ${getFontFamily(TextType.Heading)}; 32 | font-size: ${getFontSize(TextType.Heading)}; 33 | font-weight: ${getFontWeight(TextType.Heading)}; 34 | font-style: ${getFontStyle(TextType.Heading)}; 35 | line-height: ${getLineHeight(TextType.Heading)}; 36 | ${getExtras(TextType.Heading)} 37 | `; 38 | 39 | /* istanbul ignore next */ 40 | export const Text = styled("p")` 41 | color: ${getFontColor(TextType.Body)}; 42 | font-family: ${getFontFamily(TextType.Body)}; 43 | font-size: ${getFontSize(TextType.Body)}; 44 | font-weight: ${getFontWeight(TextType.Body)}; 45 | font-style: ${getFontStyle(TextType.Body)}; 46 | line-height: ${getLineHeight(TextType.Body)}; 47 | ${getExtras(TextType.Body)} 48 | `; 49 | 50 | /* istanbul ignore next */ 51 | export const Span = styled(Text).attrs(() => ({ as: "span" }))` 52 | color: ${getFontColor(TextType.Span)}; 53 | font-family: ${getFontFamily(TextType.Span)}; 54 | font-size: ${getFontSize(TextType.Span)}; 55 | font-weight: ${getFontWeight(TextType.Span)}; 56 | font-style: ${getFontStyle(TextType.Span)}; 57 | line-height: ${getLineHeight(TextType.Span)}; 58 | ${getExtras(TextType.Span)} 59 | `; 60 | 61 | /* istanbul ignore next */ 62 | export const Link = styled("a")` 63 | display: inline-block; 64 | color: ${getFontColor(TextType.Link)}; 65 | font-family: ${getFontFamily(TextType.Link)}; 66 | font-size: ${getFontSize(TextType.Link)}; 67 | font-weight: ${getFontWeight(TextType.Link)}; 68 | font-style: ${getFontStyle(TextType.Link)}; 69 | line-height: ${getLineHeight(TextType.Link)}; 70 | ${getExtras(TextType.Link)} 71 | `; 72 | 73 | export { TypographyProps, defaultTheme } from "./utils"; 74 | export * from "./types"; 75 | -------------------------------------------------------------------------------- /packages/styled-typography/src/types.ts: -------------------------------------------------------------------------------- 1 | import { HTMLProps } from "react"; 2 | 3 | export enum FontStyle { 4 | Italic = "italic", 5 | Oblique = "oblique", 6 | Normal = "normal", 7 | Inherit = "inherit" 8 | } 9 | 10 | export enum FontWeight { 11 | Hairline = "100", 12 | ExtraLight = "200", 13 | Light = "300", 14 | Normal = "400", 15 | Medium = "500", 16 | SemiBold = "600", 17 | Bold = "700", 18 | ExtraBold = "800", 19 | Heavy = "900", 20 | Inherit = "inherit" 21 | } 22 | 23 | export type TypeProps = { 24 | color?: string; 25 | fontWeight?: FontWeight; 26 | fontStyle?: FontStyle; 27 | lineHeight?: string | number; 28 | level?: 1 | 2 | 3 | 4 | 5 | 6 | "inherit"; 29 | displayLevel?: 1 | 2 | 3 | 4 | 5 | 6 | "inherit"; 30 | }; 31 | 32 | export type HeadingProps = TypeProps & HTMLProps; 33 | 34 | export type TextProps = TypeProps & HTMLProps; 35 | 36 | export type LinkProps = TypeProps & HTMLProps; 37 | -------------------------------------------------------------------------------- /packages/styled-typography/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { InterpolationFunction, ThemedStyledProps } from "styled-components"; 2 | import { 3 | FontWeight, 4 | FontStyle, 5 | HeadingProps, 6 | TypeProps, 7 | TextProps, 8 | LinkProps 9 | } from "./types"; 10 | 11 | export enum TextType { 12 | Body, 13 | Heading, 14 | Span, 15 | Link 16 | } 17 | 18 | export type TypographyProps = { 19 | fontSizes: [string, string, string, string, string, string]; 20 | bodyFontFamily: string; 21 | bodySize: number; 22 | bodyWeight: FontWeight; 23 | bodyStyle: FontStyle; 24 | bodyColor: string; 25 | bodyLineHeight: string | number; 26 | headingFontFamily: string; 27 | headingSize: number; 28 | headingWeight: FontWeight; 29 | headingStyle: FontStyle; 30 | headingColor: string; 31 | headingLineHeight: string | number; 32 | extra: { 33 | heading?: string; 34 | body?: string; 35 | span?: string; 36 | link?: string; 37 | }; 38 | }; 39 | 40 | export type ThemeProps = ThemedStyledProps< 41 | Record & T, 42 | { typography?: Partial } 43 | >; 44 | 45 | export type InterpolationGetter = InterpolationFunction< 46 | ThemeProps 47 | >; 48 | 49 | export const defaultTheme: TypographyProps = { 50 | fontSizes: ["2.369rem", "1.777rem", "1.333rem", "1rem", "0.750rem", "10px"], 51 | bodyFontFamily: 52 | "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", 53 | bodySize: 4, 54 | bodyWeight: FontWeight.Normal, 55 | bodyStyle: FontStyle.Normal, 56 | bodyColor: "#000000", 57 | bodyLineHeight: 1.4, 58 | headingFontFamily: 59 | "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", 60 | headingSize: 1, 61 | headingWeight: FontWeight.Bold, 62 | headingStyle: FontStyle.Normal, 63 | headingColor: "#000000", 64 | headingLineHeight: 1.2, 65 | extra: {} 66 | }; 67 | 68 | export const getTheme = (props: ThemeProps) => ({ 69 | ...defaultTheme, 70 | ...props.theme.typography 71 | }); 72 | 73 | export const getDefault = ( 74 | type: TextType, 75 | body: B, 76 | heading: H, 77 | span: S, 78 | link: S | L = span 79 | ): B | H | S | L => { 80 | switch (type) { 81 | case TextType.Body: 82 | return body; 83 | case TextType.Heading: 84 | return heading; 85 | case TextType.Span: 86 | return span; 87 | case TextType.Link: 88 | return link; 89 | } 90 | }; 91 | 92 | export const getFontFamily = (type: TextType): InterpolationGetter => props => { 93 | const { bodyFontFamily, headingFontFamily } = getTheme(props); 94 | const defaultFontFamily = getDefault( 95 | type, 96 | bodyFontFamily, 97 | headingFontFamily, 98 | "inherit" 99 | ); 100 | 101 | return defaultFontFamily; 102 | }; 103 | 104 | export const getFontSize = (type: TextType): InterpolationGetter => props => { 105 | const { fontSizes, bodySize, headingSize } = getTheme(props); 106 | const defaultSize = getDefault(type, bodySize, headingSize, "inherit"); 107 | 108 | if (props.level === "inherit" || (!props.level && defaultSize === "inherit")) 109 | return "inherit"; 110 | if (type === TextType.Heading && props.displayLevel === "inherit") 111 | return "inherit"; 112 | if (type === TextType.Heading && !!props.displayLevel) 113 | return fontSizes[(props.displayLevel as number) - 1]; 114 | 115 | return fontSizes[(props.level || (defaultSize as number)) - 1]; 116 | }; 117 | 118 | export const getFontWeight = (type: TextType): InterpolationGetter => props => { 119 | const { bodyWeight, headingWeight } = getTheme(props); 120 | const defaultWeight = getDefault( 121 | type, 122 | bodyWeight, 123 | headingWeight, 124 | FontWeight.Inherit 125 | ); 126 | 127 | return props.fontWeight || defaultWeight; 128 | }; 129 | 130 | export const getFontStyle = (type: TextType): InterpolationGetter => props => { 131 | const { bodyStyle, headingStyle } = getTheme(props); 132 | const defaultStyle = getDefault( 133 | type, 134 | bodyStyle, 135 | headingStyle, 136 | FontStyle.Inherit 137 | ); 138 | 139 | return props.fontStyle || defaultStyle; 140 | }; 141 | 142 | export const getFontColor = (type: TextType): InterpolationGetter => props => { 143 | const { bodyColor, headingColor } = getTheme(props); 144 | const defaultColor = getDefault( 145 | type, 146 | bodyColor, 147 | headingColor, 148 | "currentcolor" 149 | ); 150 | 151 | return props.color || defaultColor; 152 | }; 153 | 154 | export const getLineHeight = (type: TextType): InterpolationGetter => props => { 155 | const { bodyLineHeight, headingLineHeight } = getTheme(props); 156 | const defaultLineHeight = getDefault( 157 | type, 158 | bodyLineHeight, 159 | headingLineHeight, 160 | "inherit" 161 | ); 162 | 163 | return props.lineHeight || defaultLineHeight; 164 | }; 165 | 166 | export const getExtras = (type: TextType): InterpolationGetter => props => { 167 | const { extra } = getTheme(props); 168 | 169 | return ( 170 | getDefault(type, extra.body, extra.heading, extra.span, extra.link) || `` 171 | ); 172 | }; 173 | -------------------------------------------------------------------------------- /packages/styled-typography/test/utils.test.ts: -------------------------------------------------------------------------------- 1 | import { expect } from "chai"; 2 | import { 3 | defaultTheme, 4 | getTheme, 5 | TypographyProps, 6 | getDefault, 7 | TextType, 8 | getFontFamily, 9 | getFontSize, 10 | getFontWeight, 11 | getFontStyle, 12 | getFontColor, 13 | getLineHeight, 14 | getExtras 15 | } from "../src/utils"; 16 | import { FontWeight, FontStyle } from "../src/types"; 17 | 18 | describe("utils", () => { 19 | context("getTheme", () => { 20 | it("provides a default theme if none is provided", () => { 21 | expect(getTheme({ theme: {} })).to.deep.equal(defaultTheme); 22 | expect(getTheme({ theme: { typography: {} } })).to.deep.equal( 23 | defaultTheme 24 | ); 25 | }); 26 | 27 | it("uses the default theme for missing configurations", () => { 28 | const themeOverride: Partial = { 29 | headingFontFamily: "times new roman, times, serif", 30 | fontSizes: ["4rem", "3rem", "2rem", "1rem", "0.5rem", "10px"] 31 | }; 32 | 33 | expect(getTheme({ theme: { typography: themeOverride } })).to.deep.equal({ 34 | ...defaultTheme, 35 | ...themeOverride 36 | }); 37 | }); 38 | }); 39 | 40 | context("getDefault", () => { 41 | it("should provide default body styles", () => { 42 | expect(getDefault(TextType.Body, "body", "heading", "span")).to.equal( 43 | "body" 44 | ); 45 | expect( 46 | getDefault(TextType.Body, "body", "heading", "span", "link") 47 | ).to.equal("body"); 48 | }); 49 | 50 | it("should provide default heading styles", () => { 51 | expect(getDefault(TextType.Heading, "body", "heading", "span")).to.equal( 52 | "heading" 53 | ); 54 | expect( 55 | getDefault(TextType.Heading, "body", "heading", "span", "link") 56 | ).to.equal("heading"); 57 | }); 58 | 59 | it("should provide default span styles", () => { 60 | expect(getDefault(TextType.Span, "body", "heading", "span")).to.equal( 61 | "span" 62 | ); 63 | expect( 64 | getDefault(TextType.Span, "body", "heading", "span", "link") 65 | ).to.equal("span"); 66 | }); 67 | 68 | it("should provide default link styles", () => { 69 | expect(getDefault(TextType.Link, "body", "heading", "span")).to.equal( 70 | "span" 71 | ); 72 | expect( 73 | getDefault(TextType.Link, "body", "heading", "span", "link") 74 | ).to.equal("link"); 75 | }); 76 | }); 77 | 78 | context("getFontFamily", () => { 79 | const fontFamilies = { 80 | bodyFontFamily: "serif", 81 | headingFontFamily: "monospace" 82 | }; 83 | const customTheme = { theme: { typography: fontFamilies } }; 84 | 85 | it("should provide the default body font family", () => { 86 | expect(getFontFamily(TextType.Body)({ theme: {} })).to.equal( 87 | defaultTheme.bodyFontFamily 88 | ); 89 | }); 90 | 91 | it("should use the custom body font family", () => { 92 | expect(getFontFamily(TextType.Body)(customTheme)).to.equal( 93 | fontFamilies.bodyFontFamily 94 | ); 95 | }); 96 | 97 | it("should provide the default heading font family", () => { 98 | expect(getFontFamily(TextType.Heading)({ theme: {} })).to.equal( 99 | defaultTheme.headingFontFamily 100 | ); 101 | }); 102 | 103 | it("should use the custom heading font family", () => { 104 | expect(getFontFamily(TextType.Heading)(customTheme)).to.equal( 105 | fontFamilies.headingFontFamily 106 | ); 107 | }); 108 | 109 | it("should provide the inherited font family for spans", () => { 110 | expect(getFontFamily(TextType.Span)({ theme: {} })).to.equal("inherit"); 111 | }); 112 | 113 | it("should provide the inherited font family for links", () => { 114 | expect(getFontFamily(TextType.Link)({ theme: {} })).to.equal("inherit"); 115 | }); 116 | }); 117 | 118 | context("getFontSize", () => { 119 | const fontSizes = { 120 | bodySize: 3, 121 | headingSize: 2 122 | }; 123 | const customTheme = { theme: { typography: fontSizes } }; 124 | 125 | it("should use the level 4 size for body text by default", () => { 126 | expect(getFontSize(TextType.Body)({ theme: {} })).to.equal( 127 | defaultTheme.fontSizes[3] 128 | ); 129 | }); 130 | 131 | it("should use the custom body size for body text", () => { 132 | expect(getFontSize(TextType.Body)(customTheme)).to.equal( 133 | defaultTheme.fontSizes[2] 134 | ); 135 | }); 136 | 137 | it("should use the level prop size for body text", () => { 138 | expect(getFontSize(TextType.Body)({ level: 5, ...customTheme })).to.equal( 139 | defaultTheme.fontSizes[4] 140 | ); 141 | expect( 142 | getFontSize(TextType.Body)({ level: "inherit", ...customTheme }) 143 | ).to.equal("inherit"); 144 | }); 145 | 146 | it("should use the level 1 size for heading text by default", () => { 147 | expect(getFontSize(TextType.Heading)({ theme: {} })).to.equal( 148 | defaultTheme.fontSizes[0] 149 | ); 150 | }); 151 | 152 | it("should use the custom heading size for heading text", () => { 153 | expect(getFontSize(TextType.Heading)(customTheme)).to.equal( 154 | defaultTheme.fontSizes[1] 155 | ); 156 | }); 157 | 158 | it("should use the level prop size for heading text", () => { 159 | expect( 160 | getFontSize(TextType.Heading)({ level: 2, ...customTheme }) 161 | ).to.equal(defaultTheme.fontSizes[1]); 162 | expect( 163 | getFontSize(TextType.Heading)({ level: "inherit", ...customTheme }) 164 | ).to.equal("inherit"); 165 | }); 166 | 167 | it("should use the displayLevel prop size for heading text", () => { 168 | expect( 169 | getFontSize(TextType.Heading)({ 170 | level: 2, 171 | displayLevel: 5, 172 | ...customTheme 173 | }) 174 | ).to.equal(defaultTheme.fontSizes[4]); 175 | expect( 176 | getFontSize(TextType.Heading)({ 177 | level: 2, 178 | displayLevel: "inherit", 179 | ...customTheme 180 | }) 181 | ).to.equal("inherit"); 182 | }); 183 | 184 | it("should use inherit for span type text by default", () => { 185 | expect(getFontSize(TextType.Span)({ theme: {} })).to.equal("inherit"); 186 | expect(getFontSize(TextType.Link)({ theme: {} })).to.equal("inherit"); 187 | }); 188 | 189 | it("should use level prop for span type text", () => { 190 | expect(getFontSize(TextType.Span)({ level: 1, theme: {} })).to.equal( 191 | defaultTheme.fontSizes[0] 192 | ); 193 | expect(getFontSize(TextType.Link)({ level: 1, theme: {} })).to.equal( 194 | defaultTheme.fontSizes[0] 195 | ); 196 | }); 197 | }); 198 | 199 | context("getFontWeight", () => { 200 | const fontWeights = { 201 | bodyWeight: FontWeight.Light, 202 | headingWeight: FontWeight.Heavy 203 | }; 204 | const customTheme = { theme: { typography: fontWeights } }; 205 | 206 | it("should use normal for body text by default", () => { 207 | expect(getFontWeight(TextType.Body)({ theme: {} })).to.equal( 208 | defaultTheme.bodyWeight 209 | ); 210 | }); 211 | 212 | it("should use the custom theme for body text", () => { 213 | expect(getFontWeight(TextType.Body)(customTheme)).to.equal( 214 | FontWeight.Light 215 | ); 216 | }); 217 | 218 | it("should use the fontWeight prop for body text", () => { 219 | expect( 220 | getFontWeight(TextType.Body)({ 221 | fontWeight: FontWeight.ExtraLight, 222 | ...customTheme 223 | }) 224 | ).to.equal(FontWeight.ExtraLight); 225 | }); 226 | 227 | it("should use bold for heading text by default", () => { 228 | expect(getFontWeight(TextType.Heading)({ theme: {} })).to.equal( 229 | defaultTheme.headingWeight 230 | ); 231 | }); 232 | 233 | it("should use the custom theme for heading text", () => { 234 | expect(getFontWeight(TextType.Heading)(customTheme)).to.equal( 235 | FontWeight.Heavy 236 | ); 237 | }); 238 | 239 | it("should use the fontWeight prop for heading text", () => { 240 | expect( 241 | getFontWeight(TextType.Heading)({ 242 | fontWeight: FontWeight.ExtraBold, 243 | ...customTheme 244 | }) 245 | ).to.equal(FontWeight.ExtraBold); 246 | }); 247 | 248 | it("should use inherit for span type text by default", () => { 249 | expect(getFontWeight(TextType.Span)({ theme: {} })).to.equal("inherit"); 250 | expect(getFontWeight(TextType.Link)({ theme: {} })).to.equal("inherit"); 251 | }); 252 | 253 | it("should use the fontWeight prop for span type text", () => { 254 | expect( 255 | getFontWeight(TextType.Span)({ 256 | fontWeight: FontWeight.ExtraBold, 257 | theme: {} 258 | }) 259 | ).to.equal(FontWeight.ExtraBold); 260 | expect( 261 | getFontWeight(TextType.Link)({ 262 | fontWeight: FontWeight.ExtraBold, 263 | theme: {} 264 | }) 265 | ).to.equal(FontWeight.ExtraBold); 266 | }); 267 | }); 268 | 269 | context("getFontStyle", () => { 270 | const fontStyles = { 271 | bodyStyle: FontStyle.Italic, 272 | headingStyle: FontStyle.Oblique 273 | }; 274 | const customTheme = { theme: { typography: fontStyles } }; 275 | 276 | it("should use normal for body text by default", () => { 277 | expect(getFontStyle(TextType.Body)({ theme: {} })).to.equal( 278 | defaultTheme.bodyStyle 279 | ); 280 | }); 281 | 282 | it("should use the custom theme for body text", () => { 283 | expect(getFontStyle(TextType.Body)(customTheme)).to.equal( 284 | FontStyle.Italic 285 | ); 286 | }); 287 | 288 | it("should use the fontStyle prop for body text", () => { 289 | expect( 290 | getFontStyle(TextType.Body)({ 291 | fontStyle: FontStyle.Oblique, 292 | ...customTheme 293 | }) 294 | ).to.equal(FontStyle.Oblique); 295 | }); 296 | 297 | it("should use normal for heading text by default", () => { 298 | expect(getFontStyle(TextType.Heading)({ theme: {} })).to.equal( 299 | defaultTheme.headingStyle 300 | ); 301 | }); 302 | 303 | it("should use the custom theme for heading text", () => { 304 | expect(getFontStyle(TextType.Heading)(customTheme)).to.equal( 305 | FontStyle.Oblique 306 | ); 307 | }); 308 | 309 | it("should use the fontStyle prop for heading text", () => { 310 | expect( 311 | getFontStyle(TextType.Heading)({ 312 | fontStyle: FontStyle.Italic, 313 | ...customTheme 314 | }) 315 | ).to.equal(FontStyle.Italic); 316 | }); 317 | 318 | it("should use inherit for span type text by default", () => { 319 | expect(getFontStyle(TextType.Span)({ theme: {} })).to.equal("inherit"); 320 | expect(getFontStyle(TextType.Link)({ theme: {} })).to.equal("inherit"); 321 | }); 322 | 323 | it("should use the fontStyle prop for span type text", () => { 324 | expect( 325 | getFontStyle(TextType.Span)({ fontStyle: FontStyle.Oblique, theme: {} }) 326 | ).to.equal(FontStyle.Oblique); 327 | expect( 328 | getFontStyle(TextType.Link)({ fontStyle: FontStyle.Oblique, theme: {} }) 329 | ).to.equal(FontStyle.Oblique); 330 | }); 331 | }); 332 | 333 | context("getFontColor", () => { 334 | const colors = { 335 | bodyColor: "rebeccapurple", 336 | headingColor: "red" 337 | }; 338 | const customTheme = { theme: { typography: colors } }; 339 | 340 | it("should use black for body text by default", () => { 341 | expect(getFontColor(TextType.Body)({ theme: {} })).to.equal( 342 | defaultTheme.bodyColor 343 | ); 344 | }); 345 | 346 | it("should use the custom theme for body text", () => { 347 | expect(getFontColor(TextType.Body)(customTheme)).to.equal( 348 | "rebeccapurple" 349 | ); 350 | }); 351 | 352 | it("should use the color prop for body text", () => { 353 | expect( 354 | getFontColor(TextType.Body)({ color: "orange", ...customTheme }) 355 | ).to.equal("orange"); 356 | }); 357 | 358 | it("should use black for heading text by default", () => { 359 | expect(getFontColor(TextType.Heading)({ theme: {} })).to.equal( 360 | defaultTheme.headingColor 361 | ); 362 | }); 363 | 364 | it("should use the custom theme for heading text", () => { 365 | expect(getFontColor(TextType.Heading)(customTheme)).to.equal("red"); 366 | }); 367 | 368 | it("should use the color prop for heading text", () => { 369 | expect( 370 | getFontColor(TextType.Heading)({ color: "blue", ...customTheme }) 371 | ).to.equal("blue"); 372 | }); 373 | 374 | it("should use currentcolor for span type text by default", () => { 375 | expect(getFontColor(TextType.Span)({ theme: {} })).to.equal( 376 | "currentcolor" 377 | ); 378 | expect(getFontColor(TextType.Link)({ theme: {} })).to.equal( 379 | "currentcolor" 380 | ); 381 | }); 382 | 383 | it("should use the color prop for span type text", () => { 384 | expect( 385 | getFontColor(TextType.Span)({ color: "violet", theme: {} }) 386 | ).to.equal("violet"); 387 | expect( 388 | getFontColor(TextType.Link)({ color: "violet", theme: {} }) 389 | ).to.equal("violet"); 390 | }); 391 | }); 392 | 393 | context("getLineHeight", () => { 394 | const lineHeights = { 395 | bodyLineHeight: 1.6, 396 | headingLineHeight: 1.0 397 | }; 398 | const customTheme = { theme: { typography: lineHeights } }; 399 | 400 | it("should use 1.4 for body text by default", () => { 401 | expect(getLineHeight(TextType.Body)({ theme: {} })).to.equal( 402 | defaultTheme.bodyLineHeight 403 | ); 404 | }); 405 | 406 | it("should use the custom theme for body text", () => { 407 | expect(getLineHeight(TextType.Body)(customTheme)).to.equal(1.6); 408 | }); 409 | 410 | it("should use the lineHeight prop for body text", () => { 411 | expect( 412 | getLineHeight(TextType.Body)({ lineHeight: 2.0, ...customTheme }) 413 | ).to.equal(2.0); 414 | }); 415 | 416 | it("should use 1.2 for heading text by default", () => { 417 | expect(getLineHeight(TextType.Heading)({ theme: {} })).to.equal( 418 | defaultTheme.headingLineHeight 419 | ); 420 | }); 421 | 422 | it("should use the custom theme for heading text", () => { 423 | expect(getLineHeight(TextType.Heading)(customTheme)).to.equal(1.0); 424 | }); 425 | 426 | it("should use the lineHeight prop for heading text", () => { 427 | expect( 428 | getLineHeight(TextType.Heading)({ lineHeight: 1.8, ...customTheme }) 429 | ).to.equal(1.8); 430 | }); 431 | 432 | it("should use inherit for span type text by default", () => { 433 | expect(getLineHeight(TextType.Span)({ theme: {} })).to.equal("inherit"); 434 | expect(getLineHeight(TextType.Link)({ theme: {} })).to.equal("inherit"); 435 | }); 436 | 437 | it("should use the lineHeight prop for span type text", () => { 438 | expect( 439 | getLineHeight(TextType.Span)({ lineHeight: 1.7, theme: {} }) 440 | ).to.equal(1.7); 441 | expect( 442 | getLineHeight(TextType.Link)({ lineHeight: 1.7, theme: {} }) 443 | ).to.equal(1.7); 444 | }); 445 | }); 446 | 447 | context("getExtras", () => { 448 | const extraStyles = { 449 | body: `background: red;`, 450 | heading: `background: blue;`, 451 | span: `background: pink;`, 452 | link: `background: orange;` 453 | }; 454 | const customTheme = { theme: { typography: { extra: extraStyles } } }; 455 | 456 | it("should return empty strings by default", () => { 457 | expect(getExtras(TextType.Body)({ theme: {} })).to.deep.equal(``); 458 | expect(getExtras(TextType.Heading)({ theme: {} })).to.deep.equal(``); 459 | expect(getExtras(TextType.Span)({ theme: {} })).to.deep.equal(``); 460 | expect(getExtras(TextType.Link)({ theme: {} })).to.deep.equal(``); 461 | }); 462 | 463 | it("should return the proper extra styles", () => { 464 | expect(getExtras(TextType.Body)(customTheme)).to.deep.equal( 465 | extraStyles.body 466 | ); 467 | expect(getExtras(TextType.Heading)(customTheme)).to.deep.equal( 468 | extraStyles.heading 469 | ); 470 | expect(getExtras(TextType.Span)(customTheme)).to.deep.equal( 471 | extraStyles.span 472 | ); 473 | expect(getExtras(TextType.Link)(customTheme)).to.deep.equal( 474 | extraStyles.link 475 | ); 476 | }); 477 | }); 478 | }); 479 | -------------------------------------------------------------------------------- /packages/styled-typography/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "declaration": true, 5 | "declarationDir": "./dist", 6 | "allowSyntheticDefaultImports": true, 7 | "strictNullChecks": true, 8 | "noImplicitAny": true, 9 | "sourceMap": true, 10 | "skipLibCheck": true, 11 | "module": "commonjs", 12 | "jsx": "react", 13 | "target": "es2016", 14 | "moduleResolution": "node", 15 | "lib": ["es6", "es2016", "dom", "dom.iterable", "scripthost"] 16 | }, 17 | "include": ["src/*"], 18 | "exclude": ["test/*"] 19 | } 20 | --------------------------------------------------------------------------------