From 24ffb820e35e44cb83d4f156f05533c3eff4007c Mon Sep 17 00:00:00 2001 From: "Andrew T. Poe" Date: Fri, 24 May 2019 16:40:08 -0400 Subject: [PATCH] feat(modifiers): adds responsive functionality to modifiers utils (#23) * feat(enhance modifiers): adds responsive functionality to modifiers utils * chore(enhance-modifiers): bumps version * chore(enhanced modifiers): rename some internals * chore(enhanced modifiers): cleanups after review * feat(typescript): ports library to typescript (#24) * feat(adding typescript): adds typescript to the library * fix ci * Suggestions for improved typings and build processes (#26) * wip * task(DDS-83) enhances typings and build processes * fix(DDS-83): restores 100% test coverage * task(DDS-83): removes extra type import * feat(types) adds generics to typings * chore(cleanups): improve typings * chore([DDS-83]): cleanups after review * chore(version): sets version to correct value --- .babelrc | 3 - .circleci/config.yml | 2 +- .eslintignore | 4 + .eslintrc | 20 - .eslintrc.js | 51 + .github/CONTRIBUTING.md | 89 +- .github/ISSUE_TEMPLATE.md | 9 +- .github/PULL_REQUEST_TEMPLATE.md | 14 +- .gitignore | 6 +- .npmignore | 2 +- .prettierignore | 6 + .prettierrc | 10 + README.md | 64 +- babel.config.js | 32 + lib/__tests__/applyStyleModifiers.js | 37 - lib/__tests__/styleModifierPropTypes.js | 59 - lib/applyResponsiveStyleModifiers.js | 20 - lib/applyStyleModifiers.js | 18 - lib/responsiveStyleModifierPropTypes.js | 66 - lib/styleModifierPropTypes.js | 26 - lib/utils/modifiedStyles.js | 37 - lib/utils/normalizeModifiers.js | 6 - package.json | 91 +- .../applyResponsiveStyleModifiers.js | 30 +- src/__tests__/applyStyleModifiers.js | 71 + .../__tests__/responsiveModifierPropTypes.js | 16 + src/__tests__/styleModifierPropTypes.js | 164 + src/applyResponsiveStyleModifiers.ts | 51 + src/applyStyleModifiers.ts | 44 + src/constants.ts | 2 + lib/index.js => src/index.ts | 2 + src/responsiveStyleModifierPropTypes.ts | 49 + src/styleModifierPropTypes.ts | 169 + src/types.ts | 46 + .../utils/__tests__/modifiedStyles.js | 0 .../utils/__tests__/normalizeModifiers.js | 24 +- src/utils/isResponsiveModifiersProp.ts | 15 + src/utils/modifiedStyles.ts | 61 + src/utils/normalizeModifiers.ts | 15 + tsconfig.json | 21 + yarn.lock | 7069 +++++++++++------ 41 files changed, 5556 insertions(+), 2965 deletions(-) delete mode 100644 .babelrc create mode 100644 .eslintignore delete mode 100644 .eslintrc create mode 100644 .eslintrc.js create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 babel.config.js delete mode 100644 lib/__tests__/applyStyleModifiers.js delete mode 100644 lib/__tests__/styleModifierPropTypes.js delete mode 100644 lib/applyResponsiveStyleModifiers.js delete mode 100644 lib/applyStyleModifiers.js delete mode 100644 lib/responsiveStyleModifierPropTypes.js delete mode 100644 lib/styleModifierPropTypes.js delete mode 100644 lib/utils/modifiedStyles.js delete mode 100644 lib/utils/normalizeModifiers.js rename {lib => src}/__tests__/applyResponsiveStyleModifiers.js (61%) create mode 100644 src/__tests__/applyStyleModifiers.js rename {lib => src}/__tests__/responsiveModifierPropTypes.js (85%) create mode 100644 src/__tests__/styleModifierPropTypes.js create mode 100644 src/applyResponsiveStyleModifiers.ts create mode 100644 src/applyStyleModifiers.ts create mode 100644 src/constants.ts rename lib/index.js => src/index.ts (94%) create mode 100644 src/responsiveStyleModifierPropTypes.ts create mode 100644 src/styleModifierPropTypes.ts create mode 100644 src/types.ts rename {lib => src}/utils/__tests__/modifiedStyles.js (100%) rename {lib => src}/utils/__tests__/normalizeModifiers.js (59%) create mode 100644 src/utils/isResponsiveModifiersProp.ts create mode 100644 src/utils/modifiedStyles.ts create mode 100644 src/utils/normalizeModifiers.ts create mode 100644 tsconfig.json diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 644891f..0000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["env", "stage-0"], -} diff --git a/.circleci/config.yml b/.circleci/config.yml index 373f068..fcaf0df 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -6,7 +6,7 @@ version: 2 jobs: build: docker: - - image: circleci/node:6.11.4 + - image: circleci/node:8 working_directory: ~/styled-components-modifiers steps: - checkout diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..83e6ca7 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +*.tsbuildinfo +.eslint* +package.json +tsconfig.json diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 94ef493..0000000 --- a/.eslintrc +++ /dev/null @@ -1,20 +0,0 @@ -{ - "parser": "babel-eslint", - "extends": "airbnb-base", - "globals": { - "test": true, - "expect": true, - "jest": true, - }, - "rules": { - "arrow-parens": [ - 0 - ], - "function-paren-newline": [ - 0 - ], - "no-confusing-arrow": [ - 0 - ] - } -} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..825cede --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,51 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + plugins: ['import', '@typescript-eslint', 'jest'], + extends: [ + 'airbnb-base', + 'plugin:prettier/recommended', + 'plugin:@typescript-eslint/recommended', + ], + env: { + commonjs: true, + es6: true, + jest: true, + node: true, + }, + parserOptions: { + ecmaVersion: 6, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + project: './tsconfig.json', + tsconfigRootDir: '.', + }, + settings: { + 'import/resolver': { + typescript: {}, + }, + }, + rules: { + 'prettier/prettier': 'error', + // Note regarding rule severity, the available values are: + // 'off' or 0 - turn the rule off + // 'warn' or 1 - turn the rule on as a warning (doesn't effect exit code) + // 'error' or 2 - turn the rule on as an error (exit code is 1 when triggered) + //------------------------------------------------------------------------------------------- + 'import/no-extraneous-dependencies': 0, + 'import/no-named-as-default': 0, + 'no-console': 1, + 'spaced-comment': [ + 'error', + 'always', + { + exceptions: ['=', '-'], + }, + ], + + indent: 'off', + '@typescript-eslint/indent': ['error', 2], + }, +}; diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index b18e1fb..705e172 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -1,61 +1,74 @@ # Contributing -When contributing to this repository, please first discuss the change you wish to make by creating -an issue. Please note we have a code of conduct. Please follow it in all your interactions -with the project. + +When contributing to this repository, please first discuss the change you wish +to make by creating an issue. Please note we have a code of conduct. Please +follow it in all your interactions with the project. ## Pull Request Process -* Create a fork of this repository, then clone the fork to your local development environment: `git clone https://github.com/YOUR_USERNAME/styled-components-modifiers.git` -* Create a branch with a meaningful name reflecting the bug fix or new feature: `git checkout -b my-new-feature` -* Make your changes (including updates/additions to tests) and commit: `git add` and `git commit` -* Make sure that the tests still pass: `npm run review` -* Push your branch: `git push -u origin my-new-feature` -* [Submit a pull request](https://github.com/Decisiv/styled-components-modifiers/compare) to the upstream `styled-components-modifiers` repository. -* Enter a descriptive title for the pull request and fill in the PR template, describing the proposed changes. -* Wait for a maintainer to review your PR. Follow up on any comments from the reviewer, and wait for a maintainer to merge the PR. + +- Create a fork of this repository, then clone the fork to your local + development environment: + `git clone https://github.com/YOUR_USERNAME/styled-components-modifiers.git` +- Create a branch with a meaningful name reflecting the bug fix or new feature: + `git checkout -b my-new-feature` +- Make your changes (including updates/additions to tests) and commit: `git add` + and `git commit` +- Make sure that the tests still pass: `yarn run review` +- Push your branch: `git push -u origin my-new-feature` +- [Submit a pull request](https://github.com/Decisiv/styled-components-modifiers/compare) + to the upstream `styled-components-modifiers` repository. +- Enter a descriptive title for the pull request and fill in the PR template, + describing the proposed changes. +- Wait for a maintainer to review your PR. Follow up on any comments from the + reviewer, and wait for a maintainer to merge the PR. ## Contributor Covenant Code of Conduct ### Our Pledge + In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, gender identity and expression, level of experience, -nationality, personal appearance, race, religion, or sexual identity and -orientation. +size, disability, ethnicity, gender identity and expression, level of +experience, nationality, personal appearance, race, religion, or sexual identity +and orientation. ### Our Standards + Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or -advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ### Our Responsibilities + Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, or to ban temporarily or permanently any +contributor for other behaviors that they deem inappropriate, threatening, +offensive, or harmful. ### Scope + This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail @@ -64,20 +77,22 @@ representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ### Enforcement + Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team npmjs@decsiv.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +reported by contacting the project team npmjs@decsiv.com. All complaints will be +reviewed and investigated and will result in a response that is deemed necessary +and appropriate to the circumstances. The project team is obligated to maintain +confidentiality with regard to the reporter of an incident. Further details of +specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ### Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at [http://contributor-covenant.org/version/1/4][version] + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 1175604..30d6293 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,14 +1,15 @@ ## EXPECTED BEHAVIOR + _What's the behavior you're expecting to see?_ ## ACTUAL BEHAVIOR + _What's actually happening instead?_ ## STEPS TO REPRODUCE -_Please provide some simple steps to reproduce the issue._ -* -* -* + +_Please provide some simple steps to reproduce the issue._ \* \* \* ## SUGGESTED SOLUTION + _Do you have any feedback on how this problem should be solved?_ diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ea0fa87..fd8d590 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,22 +1,28 @@ ## OVERVIEW + _Give a brief description of what this PR does._ ## WHERE SHOULD THE REVIEWER START? + _e.g. `/src/components/SomeComponent.js`_ ## HOW CAN THIS BE MANUALLY TESTED? + _List steps to test this locally._ ## ANY NEW DEPENDENCIES ADDED? + _List any new dependencies added._ ## CHECKLIST + _Be sure all items are_ ✅ _before submitting a PR for review._ -* [ ] Verify the linter and tests pass: `npm run review` -* [ ] Verify this branch is rebased with the latest master + +- [ ] Verify the linter and tests pass: `npm run review` +- [ ] Verify this branch is rebased with the latest master ## GIF -_Share a fun GIF to say thanks to your reviewer:_ -https://giphy.com + +_Share a fun GIF to say thanks to your reviewer:_ https://giphy.com ![](https://media.giphy.com/media/xTiTnfkt9wCx4fuWhW/giphy.gif) diff --git a/.gitignore b/.gitignore index 43699d1..383974e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,11 @@ +### Editor stuff ### +.vscode + ### Project build artifacts ### dist +lib reports - +*.tsbuildinfo ### Standard .gitignore stuff... ### # Created by https://www.gitignore.io/api/osx,git,node,linux,windows diff --git a/.npmignore b/.npmignore index 1987a4d..b7b8ada 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,5 @@ coverage -lib +src .babelrc .eslintrc .github diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..f856088 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +**-lock.json +*.tsbuildinfo +coverage +lib/** +node_modules +tmp diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e0a0723 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "arrowParens": "always", + "bracketSpacing": true, + "printWidth": 80, + "proseWrap": "always", + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all" + } + \ No newline at end of file diff --git a/README.md b/README.md index 70872be..69b8d40 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ by allowing you to use BEM-flavored conventions when building your components. - [Defining Modifiers](#defining-modifiers) - [Validating Modifiers](#validating-modifiers) - [Applying Modifiers](#applying-modifiers) - - [Responsive Modifiers](#responsive-modifiers) + - [Responsive Modifiers _(deprecated)_](#responsive-modifiers-deprecated) - [Alternative Prop Names](#alternative-prop-names) - [Built with Styled Components Modifiers](#built-with-styled-components-modifiers) - [Contributing](#contributing) @@ -79,10 +79,10 @@ or as a single string like this: ``` -The modifiers are passed in as an array of flags or a single flag. -Each flag changes the appearance of the Block or Element component. -When passing in an array, the values are filtered and only strings are used, -which means that it is safe to do the following: +The modifiers are passed in as an array of flags or a single flag. Each flag +changes the appearance of the Block or Element component. When passing in an +array, the values are filtered and only strings are used, which means that it is +safe to do the following: ```jsx @@ -170,6 +170,9 @@ const Button = styled.button` // Then apply the modifier configuration. ${applyStyleModifiers(MODIFIER_CONFIG)}; + + // You can apply as many modifier configurations as you like, but remember that + // the last modifiers applied take priority in the event of colliding styles. `; export default Button; @@ -203,25 +206,62 @@ invalid modifier is used. ### Applying Modifiers Applying modifiers when rendering the component is as simple as providing a -`modifiers` prop. The prop should be an array of strings that correspond to keys -in the modifier configuration object applied to the component. +`modifiers` prop. The value of this prop can be either a string or an array of +strings. Each string value should correspond to keys in the modifier +configuration object applied to the component. ```jsx function Form() { return (
{/* ...the rest of form goes here... */} - {/* Render a button, and give it a `modifiers` prop with the desired modifiers. */} + {/* Render a button, and give it a `modifiers` prop with the desired modifier. */}
); } ``` -In the example above, our button will have the `styles` from the `success` -modifier applied. +You can also apply the modifiers to be responsive. For this, the value of the +`modifiers` prop should be an object where each value is either a string or +array of strings that match a modifier name. Which set of modifiers is chosen +will be based on the value of a `size` prop that you must also provide to the +component. + +```jsx +