-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 6d1bee4
Showing
18 changed files
with
5,234 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{"total": {"lines":{"total":58,"covered":58,"skipped":0,"pct":100},"statements":{"total":58,"covered":58,"skipped":0,"pct":100},"functions":{"total":18,"covered":18,"skipped":0,"pct":100},"branches":{"total":32,"covered":32,"skipped":0,"pct":100}} | ||
,"/Users/horcrux/Work/opensources/bem-composer/src/bem.ts": {"lines":{"total":12,"covered":12,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":12,"covered":12,"skipped":0,"pct":100},"branches":{"total":8,"covered":8,"skipped":0,"pct":100}} | ||
,"/Users/horcrux/Work/opensources/bem-composer/src/block.ts": {"lines":{"total":13,"covered":13,"skipped":0,"pct":100},"functions":{"total":4,"covered":4,"skipped":0,"pct":100},"statements":{"total":13,"covered":13,"skipped":0,"pct":100},"branches":{"total":4,"covered":4,"skipped":0,"pct":100}} | ||
,"/Users/horcrux/Work/opensources/bem-composer/src/element.ts": {"lines":{"total":14,"covered":14,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":14,"covered":14,"skipped":0,"pct":100},"branches":{"total":4,"covered":4,"skipped":0,"pct":100}} | ||
,"/Users/horcrux/Work/opensources/bem-composer/src/modifier.ts": {"lines":{"total":19,"covered":19,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":19,"covered":19,"skipped":0,"pct":100},"branches":{"total":16,"covered":16,"skipped":0,"pct":100}} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# EditorConfig is awesome: http://EditorConfig.org | ||
|
||
# top-most EditorConfig file | ||
root = true | ||
|
||
# Unix-style newlines with a newline ending every file | ||
[*] | ||
charset = utf-8 | ||
end_of_line = lf | ||
indent_style = space | ||
indent_size = 2 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
module.exports = { | ||
extends: ['alloy', 'alloy/typescript'], | ||
env: { | ||
// Your environments (which contains several predefined global variables) | ||
// | ||
// browser: true, | ||
// node: true, | ||
// mocha: true, | ||
jest: true | ||
}, | ||
globals: { | ||
// Your global variables (setting to false means it's not allowed to be reassigned) | ||
// | ||
// myGlobal: false | ||
}, | ||
rules: { | ||
'no-unused-vars': 'error' | ||
}, | ||
ignorePatterns: ['dist/**/*'] | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# TypeScript v1 declaration files | ||
typings/ | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
|
||
# next.js build output | ||
.next | ||
|
||
# nuxt.js build output | ||
.nuxt | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
#DynamoDB Local files | ||
.dynamodb/ | ||
|
||
dist/ | ||
.DS_Store | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"semi": true, | ||
"trailingComma": "none", | ||
"singleQuote": true, | ||
"printWidth": 80 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"typescript.tsdk": "node_modules/typescript/lib", | ||
"cSpell.words": ["classname"], | ||
"editor.formatOnSave": true, | ||
"editor.defaultFormatter": "esbenp.prettier-vscode", | ||
"eslint.validate": ["javascript", "typescript"], | ||
"editor.codeActionsOnSave": { | ||
"source.fixAll.eslint": true | ||
}, | ||
"[typescript]": { | ||
"editor.defaultFormatter": "esbenp.prettier-vscode" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
Copyright 2021 Horcrux Chen | ||
|
||
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,230 @@ | ||
# BEM composer | ||
|
||
![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) | ||
|
||
> A easy [BEM](https://en.bem.info/) classname tool for React, styled-components, linaria. | ||
> Recommend using with [classnames](https://www.npmjs.com/package/classnames). | ||
# Install | ||
|
||
## npm | ||
|
||
``` | ||
npm i bem-composer | ||
``` | ||
|
||
## yarn | ||
|
||
``` | ||
yarn add bem-composer | ||
``` | ||
|
||
# API | ||
|
||
## Output | ||
|
||
```ts | ||
import { bem } from 'bem-composer'; | ||
|
||
// create a `button` block | ||
const b = bem('button'); | ||
|
||
console.log(b.toString()); // 'button' | ||
// shortcut for .toString() | ||
console.log(b()); // 'button' | ||
console.log(b.toSelector()); // '.button' | ||
|
||
// create a `icon` element based on `b` block | ||
const e = b('icon'); | ||
|
||
console.log(e.toString()); // 'button--icon' | ||
// shortcut for .toString() | ||
console.log(e()); // 'button--icon' | ||
console.log(e.toSelector()); // '.button--icon' | ||
console.log(e.toSuffix()); // '--icon' | ||
console.log(e.toParentSelector()); // '&--icon' | ||
|
||
// create a modifier based on `e` element | ||
const m = e('active'); | ||
|
||
console.log(m.toString()); // 'button--icon__active' | ||
// shortcut for .toString() | ||
console.log(m().toString()); // 'button--icon__active' | ||
console.log(m.toSelector().toString()); // '.button--icon__active' | ||
console.log(m.toSuffix().toString()); // '__active' | ||
console.log(m.toParentSelector().toString()); // '&__active' | ||
// get suffix with element | ||
console.log(m.toSuffix(true).toString()); // '--icon__active' | ||
// get parent selector with element | ||
console.log(m.toParentSelector(true).toString()); // '&--icon__active' | ||
|
||
// create a modifier with value | ||
const mv = e({ | ||
name: 'active', | ||
value: 'hover' | ||
}); | ||
console.log(mv.toString()); // 'button--icon__active-hover' | ||
|
||
// modifier with condition | ||
console.log(e({ | ||
'active', | ||
value: false | ||
})) // 'button--icon' | ||
console.log(e({ | ||
'active', | ||
value: true | ||
}).toString()) // 'button--icon__active' | ||
|
||
// block with modifier | ||
console.log(b('', 'active').toString()); // 'button_active' | ||
|
||
|
||
``` | ||
|
||
## Configure delimiters | ||
|
||
```ts | ||
import { configure, DefaultBEMDelimiters } from 'bem-composer'; | ||
|
||
// Configure BEM constructor with custom delimiters. | ||
const cbem = configure({ | ||
element: '__', | ||
modifier: '~~', | ||
modifierValue: '~' | ||
}); | ||
|
||
console.log( | ||
cbem('block', 'icon', { | ||
name: 'active', | ||
value: 'hover' | ||
}).toString() | ||
); // block__icon~~active~hover | ||
``` | ||
|
||
## Curried API | ||
|
||
Provide a curried API to easily create elements and modifiers. | ||
|
||
```ts | ||
import { bem } from 'bem-composer'; | ||
|
||
console.log(bem('button', 'icon')); // button--icon | ||
console.log(bem('button')('icon')); // button--icon | ||
console.log(bem('button', 'icon', 'active').toString()); // 'button--icon__active' | ||
console.log(bem('button')('icon', 'active').toString()); // 'button--icon__active' | ||
console.log(bem('button', 'icon')('active').toString()); // 'button--icon__active' | ||
``` | ||
|
||
# React | ||
|
||
```jsx | ||
import React from 'react'; | ||
import { bem } from 'bem-composer'; | ||
import classNames from 'classnames'; | ||
|
||
const b = bem('button'); | ||
const e = b('icon'); | ||
const m = e('active'); | ||
|
||
export default function Button(props) { | ||
const { active } = props; | ||
return ( | ||
<button | ||
classname={classNames([ | ||
b(), // 'button' | ||
b('', { | ||
name: 'active', | ||
value: active | ||
}) // button__active | ||
])} | ||
> | ||
<img | ||
classname={classNames([ | ||
e(), // 'button-icon' | ||
e({ | ||
name: 'active', | ||
value: active | ||
}), // active === true ? 'button--icon__active' : 'button--icon' | ||
e('primary') // 'button--icon__primary' | ||
])} | ||
/> | ||
</button> | ||
); | ||
} | ||
``` | ||
|
||
## BEM Constructor type definition | ||
|
||
```ts | ||
function bem(blockName: string): BEMBlock; | ||
function bem(blockName: string, elementName: string): BEMElement; | ||
function bem( | ||
blockName: string, | ||
elementName: string, | ||
modifierValue: BEMModifierValue | ||
): BEMModifier; | ||
|
||
type BEMModifierValue = | ||
| { | ||
name: string; | ||
value?: string | boolean; | ||
} | ||
| string; | ||
|
||
interface BEMBlock { | ||
(): string; // shortcut for toString() | ||
(elementName: string): BEMElement; | ||
( | ||
elementName: undefined | string, | ||
modifierValue: BEMModifierValue | ||
): BEMModifier; | ||
toString: () => string; // Return classname | ||
toSelector: () => string; // Return classname selector | ||
} | ||
|
||
interface BEMElement { | ||
(): string; // shortcut for toString() | ||
(modifierValue: BEMModifierValue): BEMModifier; | ||
toString: () => string; | ||
toSelector: () => string; | ||
toSuffix: () => string; | ||
toParentSelector: () => string; | ||
} | ||
|
||
interface BEMModifier { | ||
(): string; | ||
toString: () => string; | ||
toSelector: () => string; | ||
toSuffix: (withElement?: boolean) => string; | ||
toParentSelector: (withElement?: boolean) => string; | ||
} | ||
``` | ||
|
||
# Styled-components & Linaria | ||
|
||
```tsx | ||
import styled from 'styled-components'; | ||
|
||
const b = bem('button'); | ||
const e = b('icon'); | ||
const m = e('active'); | ||
|
||
export const StyledButton = styled.button` | ||
/* .button */ | ||
${b.toSelector()} { | ||
border: 1px solid red; | ||
outline: none; | ||
} | ||
/* .button-icon */ | ||
${e.toParentSelector()} { | ||
width: 20px; | ||
height: 20px; | ||
/* .button--icon__active */ | ||
${m.toParentSelector()} { | ||
opacity: 0.5; | ||
} | ||
} | ||
`; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */ | ||
module.exports = { | ||
preset: 'ts-jest', | ||
testEnvironment: 'node', | ||
coverageReporters: ['json-summary'], | ||
coverageDirectory: '.coverage' | ||
}; |
Oops, something went wrong.