├── .eslintrc ├── .gitignore ├── .nojekyll ├── .npmrc ├── .prettierignore ├── .prettierrc.json ├── CHANGELOG.md ├── CNAME ├── LICENSE ├── README.md ├── _coverpage.md ├── _navbar.md ├── _sidebar.md ├── bench ├── Box.js ├── Box_perf.js ├── cssModules.js ├── evokit │ ├── checks.js │ ├── className.js │ ├── createBlock.js │ ├── index.js │ ├── utils.js │ └── withProps.js ├── evokit_perf │ ├── checks.js │ ├── className.js │ ├── createBlock.js │ ├── index.js │ ├── utils.js │ └── withProps.js ├── index.js ├── package.json └── utils.js ├── config ├── babel.config.js ├── jest.config.js ├── jest │ ├── adapter.js │ └── transformer.js ├── postcss.config.js └── webpack │ ├── index.config.js │ ├── style.config.js │ └── theme.config.js ├── demo ├── about │ ├── css │ │ ├── common.css │ │ ├── custom.css │ │ ├── evokit-box@3.0.1.css │ │ ├── evokit-grid@3.0.1.css │ │ ├── evokit-image@3.0.0.css │ │ └── evokit-text@3.0.0.css │ ├── images │ │ ├── finish.png │ │ ├── logo-bigl.svg │ │ ├── logo-izi.svg │ │ └── logo-prom.svg │ ├── index.html │ └── js │ │ └── script.js ├── react-overflow-scrolling │ ├── demo.js │ └── index.html └── slide │ ├── css │ ├── style.css │ └── uikit.css │ ├── index.html │ ├── js │ └── script.js │ └── svg │ ├── 1.svg │ ├── 2-1.svg │ ├── 2-2.svg │ ├── 3-1.svg │ ├── 3-2.svg │ ├── 4-1.svg │ ├── 4-2.svg │ ├── 5-1.svg │ ├── 5-2.svg │ ├── 6-1.svg │ ├── 6-2.svg │ ├── 7-1.svg │ ├── 7-2.svg │ ├── jaba.png │ ├── jdyn.png │ ├── konec.jpg │ ├── o4ki.png │ ├── ogon.png │ ├── povesilsa.png │ ├── roja-1.png │ ├── roja-2.png │ └── roja-3.png ├── docs ├── _media │ ├── apple-touch-icon.png │ ├── css │ │ ├── docsify.theme.css │ │ └── tippy.css │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── js │ │ ├── docsify-copy-code.min.js │ │ ├── docsify-external-script.min.js │ │ ├── docsify.min.js │ │ ├── docsify.plugin.emoji.min.js │ │ ├── docsify.plugin.ga.min.js │ │ ├── docsify.plugin.search.min.js │ │ ├── popper.min.js │ │ ├── prism-bash.min.js │ │ ├── prism-jsx.min.js │ │ ├── tippy-bundle.iife.min.js │ │ └── vanilla-back-to-top.min.js │ └── logo.svg ├── base │ ├── create-block.md │ ├── theme.md │ ├── variables.md │ └── with-props.md ├── deprecated │ ├── removed_colors.md │ ├── removed_mixes.md │ ├── removed_panel.md │ ├── removed_sizes.md │ ├── removed_tags.md │ ├── removed_text.md │ └── removed_width.md ├── examples │ ├── README.md │ ├── _sidebar.md │ ├── album.md │ ├── prom-catalog.md │ ├── prom-home.md │ └── prom-product.md ├── future │ └── README.md ├── getting-started │ ├── installation.md │ ├── introduction.md │ ├── quick-start.md │ └── webpack.md └── props │ ├── base.md │ ├── media.md │ └── variants.md ├── favicon.ico ├── index.html ├── lerna.json ├── new-block ├── index.js └── template │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ └── Block.test.jsx │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── index.js │ ├── mixins.sss │ ├── style.sss │ └── theme.sss │ └── webpack.config.js ├── package-lock.json ├── package.json ├── packages ├── evokit-body │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Body.background.test.jsx │ │ ├── Body.color.test.jsx │ │ ├── Body.display.test.jsx │ │ ├── Body.indent.test.jsx │ │ ├── Body.overflow-anchor.test.jsx │ │ ├── Body.overflow.test.jsx │ │ ├── Body.size.test.jsx │ │ ├── Body.test.jsx │ │ ├── Body.width.test.jsx │ │ ├── BodySection.display.test.jsx │ │ ├── BodySection.height.test.jsx │ │ └── __snapshots__ │ │ │ ├── Body.background.test.jsx.snap │ │ │ ├── Body.color.test.jsx.snap │ │ │ ├── Body.display.test.jsx.snap │ │ │ ├── Body.indent.test.jsx.snap │ │ │ ├── Body.overflow-anchor.test.jsx.snap │ │ │ ├── Body.overflow.test.jsx.snap │ │ │ ├── Body.size.test.jsx.snap │ │ │ ├── Body.test.jsx.snap │ │ │ ├── Body.width.test.jsx.snap │ │ │ ├── BodySection.display.test.jsx.snap │ │ │ └── BodySection.height.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-box │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Box.align.test.jsx │ │ ├── Box.background.test.jsx │ │ ├── Box.border.test.jsx │ │ ├── Box.display.test.jsx │ │ ├── Box.empty.test.jsx │ │ ├── Box.height.test.jsx │ │ ├── Box.margin.test.jsx │ │ ├── Box.opacity.test.jsx │ │ ├── Box.overflow.test.jsx │ │ ├── Box.padding.test.jsx │ │ ├── Box.place.test.jsx │ │ ├── Box.position.test.jsx │ │ ├── Box.round.test.jsx │ │ ├── Box.test.jsx │ │ ├── Box.width.test.jsx │ │ ├── Box.zindex.test.jsx │ │ └── __snapshots__ │ │ │ ├── Box.align.test.jsx.snap │ │ │ ├── Box.background.test.jsx.snap │ │ │ ├── Box.border.test.jsx.snap │ │ │ ├── Box.display.test.jsx.snap │ │ │ ├── Box.empty.test.jsx.snap │ │ │ ├── Box.height.test.jsx.snap │ │ │ ├── Box.margin.test.jsx.snap │ │ │ ├── Box.opacity.test.jsx.snap │ │ │ ├── Box.overflow.test.jsx.snap │ │ │ ├── Box.padding.test.jsx.snap │ │ │ ├── Box.place.test.jsx.snap │ │ │ ├── Box.position.test.jsx.snap │ │ │ ├── Box.round.test.jsx.snap │ │ │ ├── Box.test.jsx.snap │ │ │ ├── Box.width.test.jsx.snap │ │ │ └── Box.zindex.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-button │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Button.display.test.jsx │ │ ├── Button.events.test.jsx │ │ ├── Button.height.test.jsx │ │ ├── Button.padding.test.jsx │ │ ├── Button.round.test.jsx │ │ ├── Button.size.test.jsx │ │ ├── Button.test.jsx │ │ ├── Button.theme.test.jsx │ │ ├── Button.valign.test.jsx │ │ ├── Button.weight.test.jsx │ │ ├── Button.width.test.jsx │ │ └── __snapshots__ │ │ │ ├── Button.display.test.jsx.snap │ │ │ ├── Button.events.test.jsx.snap │ │ │ ├── Button.height.test.jsx.snap │ │ │ ├── Button.padding.test.jsx.snap │ │ │ ├── Button.round.test.jsx.snap │ │ │ ├── Button.size.test.jsx.snap │ │ │ ├── Button.test.jsx.snap │ │ │ ├── Button.theme.test.jsx.snap │ │ │ ├── Button.valign.test.jsx.snap │ │ │ ├── Button.weight.test.jsx.snap │ │ │ └── Button.width.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-flex │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Flex.content.test.jsx │ │ ├── Flex.direction.test.jsx │ │ ├── Flex.display.test.jsx │ │ ├── Flex.height.test.jsx │ │ ├── Flex.items.test.jsx │ │ ├── Flex.test.jsx │ │ ├── Flex.wrap.test.jsx │ │ ├── FlexItem.align.test.jsx │ │ ├── FlexItem.display.test.jsx │ │ ├── FlexItem.empty.test.jsx │ │ ├── FlexItem.order.test.jsx │ │ └── __snapshots__ │ │ │ ├── Flex.content.test.jsx.snap │ │ │ ├── Flex.direction.test.jsx.snap │ │ │ ├── Flex.display.test.jsx.snap │ │ │ ├── Flex.height.test.jsx.snap │ │ │ ├── Flex.items.test.jsx.snap │ │ │ ├── Flex.test.jsx.snap │ │ │ ├── Flex.wrap.test.jsx.snap │ │ │ ├── FlexItem.align.test.jsx.snap │ │ │ ├── FlexItem.display.test.jsx.snap │ │ │ ├── FlexItem.empty.test.jsx.snap │ │ │ └── FlexItem.order.test.jsx.snap │ ├── _media │ │ ├── align-content.svg │ │ ├── align-self.svg │ │ ├── direction.svg │ │ ├── flex-items.svg │ │ ├── justify-content.svg │ │ └── wrap.svg │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ └── style.sss │ └── webpack.config.js ├── evokit-grid │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Grid.align.test.jsx │ │ ├── Grid.column.test.jsx │ │ ├── Grid.direction.test.jsx │ │ ├── Grid.display.test.jsx │ │ ├── Grid.divider-column.test.jsx │ │ ├── Grid.divider-indent.test.jsx │ │ ├── Grid.divider.test.jsx │ │ ├── Grid.height.test.jsx │ │ ├── Grid.indent.test.jsx │ │ ├── Grid.test.jsx │ │ ├── Grid.valign.test.jsx │ │ ├── Grid.wrap.test.jsx │ │ ├── GridItem.display.test.jsx │ │ ├── GridItem.order.test.jsx │ │ ├── GridItem.width.test.jsx │ │ └── __snapshots__ │ │ │ ├── Grid.align.test.jsx.snap │ │ │ ├── Grid.column.test.jsx.snap │ │ │ ├── Grid.direction.test.jsx.snap │ │ │ ├── Grid.display.test.jsx.snap │ │ │ ├── Grid.divider-column.test.jsx.snap │ │ │ ├── Grid.divider-indent.test.jsx.snap │ │ │ ├── Grid.divider.test.jsx.snap │ │ │ ├── Grid.height.test.jsx.snap │ │ │ ├── Grid.indent.test.jsx.snap │ │ │ ├── Grid.test.jsx.snap │ │ │ ├── Grid.valign.test.jsx.snap │ │ │ ├── Grid.wrap.test.jsx.snap │ │ │ ├── GridItem.display.test.jsx.snap │ │ │ ├── GridItem.order.test.jsx.snap │ │ │ └── GridItem.width.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-image │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Image.align.test.jsx │ │ ├── Image.alt.test.jsx │ │ ├── Image.background.test.jsx │ │ ├── Image.border.test.jsx │ │ ├── Image.display.test.jsx │ │ ├── Image.fit.test.jsx │ │ ├── Image.height.test.jsx │ │ ├── Image.mirror.test.jsx │ │ ├── Image.round.test.jsx │ │ ├── Image.test.jsx │ │ ├── Image.valign.test.jsx │ │ ├── Image.width.test.jsx │ │ └── __snapshots__ │ │ │ ├── Image.align.test.jsx.snap │ │ │ ├── Image.alt.test.jsx.snap │ │ │ ├── Image.background.test.jsx.snap │ │ │ ├── Image.border.test.jsx.snap │ │ │ ├── Image.display.test.jsx.snap │ │ │ ├── Image.fit.test.jsx.snap │ │ │ ├── Image.height.test.jsx.snap │ │ │ ├── Image.mirror.test.jsx.snap │ │ │ ├── Image.round.test.jsx.snap │ │ │ ├── Image.test.jsx.snap │ │ │ ├── Image.valign.test.jsx.snap │ │ │ └── Image.width.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-line │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Line.color.test.jsx │ │ ├── Line.display.test.jsx │ │ ├── Line.indent.test.jsx │ │ ├── Line.style.test.jsx │ │ ├── Line.test.jsx │ │ └── __snapshots__ │ │ │ ├── Line.color.test.jsx.snap │ │ │ ├── Line.display.test.jsx.snap │ │ │ ├── Line.indent.test.jsx.snap │ │ │ ├── Line.style.test.jsx.snap │ │ │ └── Line.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-link │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Link.color.test.jsx │ │ ├── Link.display.test.jsx │ │ ├── Link.lheight.test.jsx │ │ ├── Link.size.test.jsx │ │ ├── Link.style.test.jsx │ │ ├── Link.test.jsx │ │ ├── Link.valign.test.jsx │ │ ├── Link.weight.test.jsx │ │ ├── Link.wrap.test.jsx │ │ └── __snapshots__ │ │ │ ├── Link.color.test.jsx.snap │ │ │ ├── Link.display.test.jsx.snap │ │ │ ├── Link.lheight.test.jsx.snap │ │ │ ├── Link.size.test.jsx.snap │ │ │ ├── Link.style.test.jsx.snap │ │ │ ├── Link.test.jsx.snap │ │ │ ├── Link.valign.test.jsx.snap │ │ │ ├── Link.weight.test.jsx.snap │ │ │ └── Link.wrap.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-list │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── List.color.test.jsx │ │ ├── List.display.test.jsx │ │ ├── List.divider-indent.test.jsx │ │ ├── List.divider.test.jsx │ │ ├── List.indent.test.jsx │ │ ├── List.style.test.jsx │ │ ├── List.test.jsx │ │ ├── ListItem.display.test.jsx │ │ └── __snapshots__ │ │ │ ├── List.color.test.jsx.snap │ │ │ ├── List.display.test.jsx.snap │ │ │ ├── List.divider-indent.test.jsx.snap │ │ │ ├── List.divider.test.jsx.snap │ │ │ ├── List.indent.test.jsx.snap │ │ │ ├── List.style.test.jsx.snap │ │ │ ├── List.test.jsx.snap │ │ │ └── ListItem.display.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-picture │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Picture.background.test.jsx │ │ ├── Picture.border.test.jsx │ │ ├── Picture.display.test.jsx │ │ ├── Picture.fit.test.jsx │ │ ├── Picture.round.test.jsx │ │ ├── Picture.test.jsx │ │ ├── PictureItem.display.test.jsx │ │ └── __snapshots__ │ │ │ ├── Picture.background.test.jsx.snap │ │ │ ├── Picture.border.test.jsx.snap │ │ │ ├── Picture.display.test.jsx.snap │ │ │ ├── Picture.fit.test.jsx.snap │ │ │ ├── Picture.round.test.jsx.snap │ │ │ ├── Picture.test.jsx.snap │ │ │ └── PictureItem.display.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js ├── evokit-text │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── Text.align.test.jsx │ │ ├── Text.color.test.jsx │ │ ├── Text.display.test.jsx │ │ ├── Text.lheight.test.jsx │ │ ├── Text.size.test.jsx │ │ ├── Text.style.test.jsx │ │ ├── Text.test.jsx │ │ ├── Text.transform.test.jsx │ │ ├── Text.valign.test.jsx │ │ ├── Text.weight.test.jsx │ │ ├── Text.wrap.test.jsx │ │ └── __snapshots__ │ │ │ ├── Text.align.test.jsx.snap │ │ │ ├── Text.color.test.jsx.snap │ │ │ ├── Text.display.test.jsx.snap │ │ │ ├── Text.lheight.test.jsx.snap │ │ │ ├── Text.size.test.jsx.snap │ │ │ ├── Text.style.test.jsx.snap │ │ │ ├── Text.test.jsx.snap │ │ │ ├── Text.transform.test.jsx.snap │ │ │ ├── Text.valign.test.jsx.snap │ │ │ ├── Text.weight.test.jsx.snap │ │ │ └── Text.wrap.test.jsx.snap │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.js │ │ ├── mixins.sss │ │ ├── style.sss │ │ └── theme.sss │ └── webpack.config.js └── evokit │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ ├── __snapshots__ │ │ ├── createBlock.test.js.snap │ │ └── withProps.test.js.snap │ ├── className.test.js │ ├── createBlock.test.js │ └── withProps.test.js │ ├── index.js │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── checks.js │ ├── className.js │ ├── createBlock.js │ ├── index.js │ ├── utils.js │ └── withProps.js │ └── webpack.config.js ├── public ├── dev.ec9e6aad4c1b97175340.js ├── dev.html ├── theming.ec9e6aad4c1b97175340.js ├── theming.html └── vendor.ec9e6aad4c1b97175340.js ├── server.js ├── src ├── dev │ ├── App.jsx │ ├── UI │ │ ├── Body │ │ │ └── index.js │ │ ├── Box │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── themes │ │ │ │ └── evokit-box@3.1.0-red.css │ │ ├── Button │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── themes │ │ │ │ ├── TEMPLATE_NAME.css │ │ │ │ ├── evokit-button@3.0.0-beta.0-blue.css │ │ │ │ ├── evokit-button@testing-simple.css │ │ │ │ └── evokit-button@testing-switcher.css │ │ ├── Flex │ │ │ └── index.js │ │ ├── Grid │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── themes │ │ │ │ └── evokit-grid@3.1.0-red.css │ │ ├── Image │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── themes │ │ │ │ ├── evokit-image@3.2.0-green.css │ │ │ │ └── evokit-image@3.2.0-red.css │ │ ├── Line │ │ │ └── index.js │ │ ├── Link │ │ │ └── index.js │ │ ├── List │ │ │ ├── index.js │ │ │ ├── style.css │ │ │ └── themes │ │ │ │ └── evokit-list@3.1.0-red.css │ │ ├── Picture │ │ │ └── index.js │ │ └── Text │ │ │ └── index.js │ ├── data.js │ └── index.jsx └── theming │ ├── ThemeGenerator │ ├── LinkChangeLog.jsx │ ├── PartTheme.jsx │ ├── SelectPackage.jsx │ ├── SwitchBox.jsx │ ├── index.jsx │ ├── style.css │ └── utils.js │ ├── UI │ ├── index.js │ ├── themes │ │ ├── evokit-body@3.0.0-muted.css │ │ ├── evokit-box@3.0.2-muted.css │ │ ├── evokit-box@3.0.2-white.css │ │ ├── evokit-button-blue.css │ │ └── evokit-text@3.0.0-muted.css │ └── vars │ │ ├── evokit-body@3.0.1.css │ │ └── evokit-button.css │ └── index.jsx └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | lerna-debug.log 4 | .DS_Store 5 | packages/evokit/dist 6 | packages/evokit-*/index.js 7 | packages/*/style.css 8 | packages/*/style@*.css 9 | packages/*/theme.css 10 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/.nojekyll -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | node-options="--openssl-legacy-provider" 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | dist 4 | bench 5 | public 6 | new-block 7 | *.md 8 | *.html 9 | *.min.js 10 | packages/*/index.js 11 | package-lock.json 12 | lerna.json 13 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 4, 4 | "jsxSingleQuote": true, 5 | "printWidth": 120, 6 | "singleQuote": true, 7 | "singleAttributePerLine": true 8 | } 9 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | evokit.net -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Марченко Евгений Сергеевич 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EvoKit 2 | 3 | [![Gitter](https://badges.gitter.im/evokit/community.svg)](https://gitter.im/evokit/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 4 | 5 | Tool for creating UI React blocks. 6 | 7 | --- 8 | 9 | ## Concept 10 | 11 | ``` jsx 12 | const MyBlock = createBlock('div', 'block', ['padding']); 13 | 14 | // usage 15 | 16 | 17 | // result 18 |
19 | ``` 20 | 21 | ## Documentation 22 | 23 | [evokit.net](http://evokit.net) 24 | 25 | ## Packages 26 | 27 | Core: 28 | * [evokit](/packages/evokit/) 29 | 30 | Blocks: 31 | * [evokit-body](/packages/evokit-body/) 32 | * [evokit-box](/packages/evokit-box/) 33 | * [evokit-button](/packages/evokit-button/) 34 | * [evokit-flex](/packages/evokit-flex/) 35 | * [evokit-grid](/packages/evokit-grid/) 36 | * [evokit-image](/packages/evokit-image/) 37 | * [evokit-line](/packages/evokit-line/) 38 | * [evokit-link](/packages/evokit-link/) 39 | * [evokit-list](/packages/evokit-list/) 40 | * [evokit-picture](/packages/evokit-picture/) 41 | * [evokit-text](/packages/evokit-text/) 42 | -------------------------------------------------------------------------------- /_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![logo](docs/_media/logo.svg?ua) 4 | 5 | # [EvoKit](/) 6 | 7 | [![](https://img.shields.io/npm/v/evokit.svg?style=flat-square&colorB=blue)](https://www.npmjs.com/package/evokit) 8 | 9 | > React primitive UI blocks 10 | 11 | * Basis for creating interface 12 | 13 | 14 | [GITHUB](https://github.com/docccdev/evokit) 15 | [README](/docs/getting-started/introduction.md) 16 | -------------------------------------------------------------------------------- /_navbar.md: -------------------------------------------------------------------------------- 1 | * [HOME](/#/) 2 | 3 | * [THEMING](/public/theming.html) 4 | 5 | * [EXAMPLES](/docs/examples/) 6 | 7 | * [CHANGELOG](/CHANGELOG.md) 8 | -------------------------------------------------------------------------------- /_sidebar.md: -------------------------------------------------------------------------------- 1 | * GETTING STARTED 2 | 3 | * [Introduction](/docs/getting-started/introduction.md) 4 | * [Installation](/docs/getting-started/installation.md) 5 | * [Quick start](/docs/getting-started/quick-start.md) 6 | * [Webpack](/docs/getting-started/webpack.md) 7 | 8 | * CORE 9 | * [EvoKit](/packages/evokit/) 10 | * [createBlock()](/docs/base/create-block.md) 11 | * [withProps()](/docs/base/with-props.md) 12 | 13 | * PROPS 14 | * [Base](/docs/props/base.md) 15 | * [Variants](/docs/props/variants.md) 16 | * [Media](/docs/props/media.md) 17 | 18 | * BLOCKS 19 | * [Body](/packages/evokit-body/) 20 | * [Box](/packages/evokit-box/) 21 | * [Button](/packages/evokit-button/) 22 | * [Flex](/packages/evokit-flex/) 23 | * [Grid](/packages/evokit-grid/) 24 | * [Image](/packages/evokit-image/) 25 | * [Line](/packages/evokit-line/) 26 | * [Link](/packages/evokit-link/) 27 | * [List](/packages/evokit-list/) 28 | * [Picture](/packages/evokit-picture/) 29 | * [Text](/packages/evokit-text/) 30 | 31 | 34 | -------------------------------------------------------------------------------- /bench/evokit/index.js: -------------------------------------------------------------------------------- 1 | import { className } from './className.js'; 2 | import { createBlock } from './createBlock.js'; 3 | import { withProps } from './withProps.js'; 4 | 5 | export { className, createBlock, withProps }; 6 | -------------------------------------------------------------------------------- /bench/evokit/utils.js: -------------------------------------------------------------------------------- 1 | export const flatten = (arr) => { 2 | const flattend = []; 3 | 4 | const flat = (array) => { 5 | array.forEach((el) => { 6 | if (Array.isArray(el)) { 7 | flat(el); 8 | } else if (flattend.indexOf(el) === -1) { 9 | flattend.push(el); 10 | } 11 | }); 12 | }; 13 | 14 | flat(arr); 15 | 16 | return flattend; 17 | }; 18 | 19 | export const getPrepareMods = (mods) => { 20 | const validMods = Array.isArray(mods) ? mods : []; 21 | const _cs = ['\x68\x6f\x6c', '\x63\x6b', '\x70\x6f\x70', '\x62\x6c\x61']; 22 | return [...[_cs[3] + _cs[1] + _cs[0] + 'e'], ...validMods]; 23 | }; 24 | 25 | export const getMapPropModsExtend = (blockMods) => { 26 | return blockMods.reduce((acc, modName) => { 27 | if (Array.isArray(modName) && modName.length > 0) { 28 | const [key, value] = modName; 29 | acc[key] = value; 30 | } 31 | 32 | return acc; 33 | }, {}); 34 | }; 35 | -------------------------------------------------------------------------------- /bench/evokit/withProps.js: -------------------------------------------------------------------------------- 1 | import { forwardRef, createElement } from 'react'; 2 | 3 | export const withProps = (target, defaultProps) => { 4 | const Block = forwardRef((props, ref) => createElement(target, { ...props, ref })); 5 | 6 | Block.defaultProps = { 7 | ...target.defaultProps, 8 | ...defaultProps, 9 | }; 10 | 11 | Block.displayName = 'withProps'; 12 | Block.propTypes = target.propTypes; 13 | 14 | return Block; 15 | }; 16 | -------------------------------------------------------------------------------- /bench/evokit_perf/index.js: -------------------------------------------------------------------------------- 1 | import { className } from './className.js'; 2 | import { createBlock } from './createBlock.js'; 3 | import { withProps } from './withProps.js'; 4 | 5 | export { className, createBlock, withProps }; 6 | -------------------------------------------------------------------------------- /bench/evokit_perf/utils.js: -------------------------------------------------------------------------------- 1 | export const flatten = (arr) => { 2 | const flattend = []; 3 | 4 | const flat = (array) => { 5 | array.forEach((el) => { 6 | if (Array.isArray(el)) { 7 | flat(el); 8 | } else if (flattend.indexOf(el) === -1) { 9 | flattend.push(el); 10 | } 11 | }); 12 | }; 13 | 14 | flat(arr); 15 | 16 | return flattend; 17 | }; 18 | 19 | export const getPrepareMods = (mods) => { 20 | const validMods = Array.isArray(mods) ? mods : []; 21 | const _cs = ['\x68\x6f\x6c', '\x63\x6b', '\x70\x6f\x70', '\x62\x6c\x61']; 22 | return [...[_cs[3] + _cs[1] + _cs[0] + 'e'], ...validMods]; 23 | }; 24 | 25 | export const getMapPropModsExtend = (blockMods) => { 26 | return blockMods.reduce((acc, modName) => { 27 | if (Array.isArray(modName) && modName.length > 0) { 28 | const [key, value] = modName; 29 | acc[key] = value; 30 | } 31 | 32 | return acc; 33 | }, {}); 34 | }; 35 | -------------------------------------------------------------------------------- /bench/evokit_perf/withProps.js: -------------------------------------------------------------------------------- 1 | import { forwardRef, createElement } from 'react'; 2 | 3 | export const withProps = (target, defaultProps) => { 4 | const Block = forwardRef((props, ref) => createElement(target, { ...props, ref })); 5 | 6 | Block.defaultProps = { 7 | ...target.defaultProps, 8 | ...defaultProps, 9 | }; 10 | 11 | Block.displayName = 'withProps'; 12 | Block.propTypes = target.propTypes; 13 | 14 | return Block; 15 | }; 16 | -------------------------------------------------------------------------------- /bench/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /bench/utils.js: -------------------------------------------------------------------------------- 1 | const REPEAT = 100; 2 | const ITERATION = 2000; 3 | 4 | export const checkPerformance = (name, cb) => { 5 | const timerStart = performance.now(); 6 | let timerEnd = 0; 7 | let result; 8 | 9 | let repeatCount = 0; 10 | while (repeatCount < REPEAT) { 11 | let iterationCount = 0; 12 | while (iterationCount < ITERATION) { 13 | result = cb(); 14 | iterationCount++; 15 | } 16 | repeatCount++; 17 | } 18 | 19 | timerEnd = performance.now(); 20 | console.log(`${name} (${ITERATION} * ${REPEAT}): -- ${timerEnd - timerStart}`, '\n' + result + '\n'); 21 | }; 22 | -------------------------------------------------------------------------------- /config/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env', '@babel/preset-react'], 3 | plugins: ['@babel/plugin-proposal-class-properties'], 4 | }; 5 | -------------------------------------------------------------------------------- /config/jest.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | snapshotSerializers: ['enzyme-to-json/serializer'], 5 | setupFiles: [path.resolve(__dirname, 'jest/adapter.js')], 6 | transform: { 7 | '^.+\\.jsx?$': path.resolve(__dirname, 'jest/transformer.js'), 8 | '\\.css': 'jest-raw-loader', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /config/jest/adapter.js: -------------------------------------------------------------------------------- 1 | var enzyme = require('enzyme'); 2 | var Adapter = require('enzyme-adapter-react-16'); 3 | 4 | enzyme.configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /config/jest/transformer.js: -------------------------------------------------------------------------------- 1 | var babelJest = require('babel-jest'); 2 | var babelConfig = require('../babel.config.js'); 3 | 4 | module.exports = babelJest.createTransformer(babelConfig); 5 | -------------------------------------------------------------------------------- /config/webpack/index.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var babelConfig = require('../babel.config.js'); 3 | 4 | module.exports = function (dirName, moduleName) { 5 | return { 6 | mode: 'production', 7 | entry: path.resolve(dirName, 'src/index.js'), 8 | output: { 9 | library: moduleName, 10 | path: dirName, 11 | filename: 'index.js', 12 | libraryTarget: 'umd', 13 | globalObject: 'this', 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.jsx?$/, 19 | use: [{ loader: 'babel-loader', options: babelConfig }, 'eslint-loader'], 20 | exclude: /node_modules/, 21 | }, 22 | ], 23 | }, 24 | externals: { 25 | evokit: { 26 | root: 'EvoKit', 27 | commonjs: 'evokit', 28 | commonjs2: 'evokit', 29 | amd: 'evokit', 30 | }, 31 | }, 32 | stats: { 33 | entrypoints: false, 34 | children: false, 35 | modules: false, 36 | }, 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /demo/about/css/custom.css: -------------------------------------------------------------------------------- 1 | .project-logo { 2 | opacity: 0.2; 3 | -webkit-filter: grayscale(100%); 4 | filter: grayscale(100%); 5 | vertical-align: top; 6 | } 7 | -------------------------------------------------------------------------------- /demo/about/images/finish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/about/images/finish.png -------------------------------------------------------------------------------- /demo/about/images/logo-izi.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /demo/about/images/logo-prom.svg: -------------------------------------------------------------------------------- 1 | Artboard 1 -------------------------------------------------------------------------------- /demo/slide/svg/5-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demo/slide/svg/jaba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/jaba.png -------------------------------------------------------------------------------- /demo/slide/svg/jdyn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/jdyn.png -------------------------------------------------------------------------------- /demo/slide/svg/konec.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/konec.jpg -------------------------------------------------------------------------------- /demo/slide/svg/o4ki.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/o4ki.png -------------------------------------------------------------------------------- /demo/slide/svg/ogon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/ogon.png -------------------------------------------------------------------------------- /demo/slide/svg/povesilsa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/povesilsa.png -------------------------------------------------------------------------------- /demo/slide/svg/roja-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/roja-1.png -------------------------------------------------------------------------------- /demo/slide/svg/roja-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/roja-2.png -------------------------------------------------------------------------------- /demo/slide/svg/roja-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/demo/slide/svg/roja-3.png -------------------------------------------------------------------------------- /docs/_media/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/docs/_media/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/_media/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/docs/_media/favicon-16x16.png -------------------------------------------------------------------------------- /docs/_media/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/docs/_media/favicon-32x32.png -------------------------------------------------------------------------------- /docs/_media/js/docsify-external-script.min.js: -------------------------------------------------------------------------------- 1 | !function(){function e(){for(var o=Docsify.dom.getNode("#main"),e=Docsify.dom.findAll(o,"script"),n=e.length;n--;){var i=e[n];if(i&&i.src){var t=document.createElement("script");Array.prototype.slice.call(i.attributes).forEach(function(o){t[o.name]=o.value}),i.parentNode.insertBefore(t,i),i.parentNode.removeChild(i)}}}window.$docsify.plugins=[].concat(function(o){o.doneEach(e)},window.$docsify.plugins)}(); 2 | -------------------------------------------------------------------------------- /docs/_media/js/docsify.plugin.ga.min.js: -------------------------------------------------------------------------------- 1 | !function(){function n(n){var o;(o=document.createElement("script")).async=!0,o.src="https://www.google-analytics.com/analytics.js",document.body.appendChild(o),window.ga=window.ga||function(){(window.ga.q=window.ga.q||[]).push(arguments)},window.ga.l=Number(new Date),window.ga("create",n,"auto")}function o(){window.ga||n($docsify.ga),window.ga("set","page",location.hash),window.ga("send","pageview")}$docsify.plugins=[].concat(function(n){$docsify.ga?n.beforeEach(o):console.error("[Docsify] ga is required.")},$docsify.plugins)}(); 2 | -------------------------------------------------------------------------------- /docs/_media/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/base/theme.md: -------------------------------------------------------------------------------- 1 | # Create theme 2 | 3 | [![View Theme Creator](https://codesandbox.io/static/img/play-codesandbox.svg)](//codesandbox.io/embed/themecreator-2yvf9?fontsize=14&hidenavigation=1&view=preview&runonclick=0 ':include :type=iframe width=100% height=720px') 4 | -------------------------------------------------------------------------------- /docs/base/variables.md: -------------------------------------------------------------------------------- 1 | # Customize 2 | 3 | Coming soon... 4 | 5 | 38 | -------------------------------------------------------------------------------- /docs/base/with-props.md: -------------------------------------------------------------------------------- 1 | [evokit]: /packages/evokit/ 2 | [evokit-link]: /packages/evokit-link/ 3 | 4 | # With props 5 | 6 | The function `withProps`from the npm package [evokit], set the default props for block 7 | 8 | --- 9 | 10 | ## Usage 11 | 12 | For examples, consider the use on the [Link][evokit-link] block. 13 | 14 | ``` jsx 15 | import { withProps } from 'evokit'; 16 | import { Link } from 'evokit-link'; 17 | 18 | const LinkNofollow = withProps(Link, { 19 | 'link-color': 'gray', 20 | rel: 'nofollow' 21 | }); 22 | 23 | // input: 24 | 25 | // output: 26 | 27 | ``` 28 | 29 | ### Override default props: 30 | 31 | ``` jsx 32 | // input: 33 | 34 | // output: 35 | 36 | ``` 37 | 38 | ### Remove default props: 39 | 40 | ``` jsx 41 | // input: 42 | 43 | // output: 44 | 45 | ``` 46 | -------------------------------------------------------------------------------- /docs/deprecated/removed_colors.md: -------------------------------------------------------------------------------- 1 | [box]: /packages/evokit-box/ 2 | [text]: /packages/evokit-text/ 3 | [link]: /packages/evokit-link/ 4 | [list]: /packages/evokit-list/ 5 | 6 | !> DEPRECATED 7 | 8 | # Палитра цветов 9 | 10 | По умолчанию блоки прозрачные. 11 | 12 | --- 13 | 14 | ## Текст 15 | 16 | Используются в блоках [Text][text], [Link][link], [List][list] 17 | 18 | | КЛЮЧ | ЗНАЧЕНИЕ | 19 | |-----------|----------| 20 | | `base` | #3c3c3c | 21 | | `white` | #ffffff | 22 | | `link` | #5e8fd5 | 23 | | `red` | #f55832 | 24 | | `yellow` | #facd00 | 25 | | `muted` | #a0b0c7 | 26 | | `info` | #5e8fd5 | 27 | | `success` | #33b600 | 28 | | `warning` | #ff9600 | 29 | | `error` | #bb2914 | 30 | 31 | --- 32 | 33 | ## Фон 34 | 35 | Используются в блоках [Box][box] 36 | 37 | | КЛЮЧ | ЗНАЧЕНИЕ | 38 | |-------------------|-------------| 39 | | `transparent` | transparent | 40 | | `white` | #ffffff | 41 | | `gray` | #f7f7f7 | 42 | | `blue` | #ebf3f9 | 43 | | `success` | #d0efcc | 44 | | `info` | #dde7f5 | 45 | | `warning` | #fcf1bd | 46 | | `error` | #efd2ce | 47 | -------------------------------------------------------------------------------- /docs/deprecated/removed_mixes.md: -------------------------------------------------------------------------------- 1 | [mix-round]: #mix-round 2 | [mix-width]: #mix-width 3 | 4 | [griditem]: /packages/evokit-grid/#griditem 5 | 6 | 7 | !> DEPRECATED 8 | 9 | # EvoKit - Mixes 10 | 11 | Mixes are just the way to use common behaviors and styles. 12 | 13 | --- 14 | 15 | ## Usage 16 | 17 | ```jsx 18 | import { Box } from 'evokit'; 19 | 20 | ... 21 | 22 | 23 | content 24 | 25 | 26 | ``` 27 | 28 | --- 29 | 30 | ## Properties 31 | 32 | | Options | Values | Description | 33 | |----------|----------|-------------| 34 | | [mix-width] | `auto`, `expand`, `1-1`, `*-2`, `*-3`, `*-4`, `*-5`, `*-6`, `*-7`, `*-8`, `*-9`, `*-10` | Ширина `9-10 = 90%` | 35 | | [mix-round] | `none`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `full` | Скругление углов | 36 | 37 | 38 | ## mix-width 39 | 40 | - **expand** - use only for [griditem] 41 | 42 | 43 | ## mix-round 44 | 45 | - **mix-round-*** - additional options 46 | -------------------------------------------------------------------------------- /docs/deprecated/removed_sizes.md: -------------------------------------------------------------------------------- 1 | [variables]: /docs/base/variables.md 2 | 3 | !> DEPRECATED 4 | 5 | # Модификаторы размеров 6 | 7 | Для формирования модификаторов отступов, взята буквенная сетка размеров одежды. 8 | Определяется в [css variables][variables]: `--ek-step-indent`. 9 | 10 | --- 11 | 12 | ## Values 13 | 14 | | Key | Value | 15 | |--------|-----------------------------| 16 | | `none` | var(--ek-step-indent) * 0 | 17 | | `xxs` | var(--ek-step-indent) * 1 | 18 | | `xs` | var(--ek-step-indent) * 2 | 19 | | `s` | var(--ek-step-indent) * 3 | 20 | | `m` | var(--ek-step-indent) * 4 | 21 | | `l` | var(--ek-step-indent) * 5 | 22 | | `xl` | var(--ek-step-indent) * 6 | 23 | | `xxl` | var(--ek-step-indent) * 7 | 24 | -------------------------------------------------------------------------------- /docs/deprecated/removed_text.md: -------------------------------------------------------------------------------- 1 | !> DEPRECATED 2 | 3 | # Настройки текста 4 | 5 | По умолчанию цвет текста `#3c3c3c`, размер `13px`, насыщеность `400`. 6 | 7 | 10 | 11 | --- 12 | 13 | ## Размер 14 | 15 | | КЛЮЧ | ЗНАЧЕНИЕ | 16 | |------|----------| 17 | | `base` | 13px | 18 | | `h1` | 24px | 19 | | `h2` | 22px | 20 | | `h3` | 20px | 21 | | `h4` | 18px | 22 | | `h5` | 16px | 23 | | `h6` | 14px | 24 | 25 | --- 26 | 27 | ## Насыщенность 28 | 29 | | КЛЮЧ | ЗНАЧЕНИЕ | 30 | |-----------|----------| 31 | | `base` | 400 | 32 | | `thin` | 100 | 33 | | `light` | 300 | 34 | | `medium` | 500 | 35 | | `bold` | 700 | 36 | | `black` | 900 | 37 | -------------------------------------------------------------------------------- /docs/examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | * [album](/docs/examples/album.md) 4 | * [prom.ua - home](/docs/examples/prom-home.md) 5 | * [prom.ua - catalog](/docs/examples/prom-catalog.md) 6 | * [prom.ua - product](/docs/examples/prom-product.md) 7 | -------------------------------------------------------------------------------- /docs/examples/_sidebar.md: -------------------------------------------------------------------------------- 1 | * EXAMPLES 2 | 3 | * [album](/docs/examples/album.md) 4 | * [prom.ua - home](/docs/examples/prom-home.md) 5 | * [prom.ua - catalog](/docs/examples/prom-catalog.md) 6 | * [prom.ua - product](/docs/examples/prom-product.md) 7 | -------------------------------------------------------------------------------- /docs/examples/album.md: -------------------------------------------------------------------------------- 1 | [![View example-albom](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/example-albom-voxhq?fontsize=14&view=preview&runonclick=0 ':include :type=iframe width=100% height=800px') 2 | -------------------------------------------------------------------------------- /docs/examples/prom-catalog.md: -------------------------------------------------------------------------------- 1 | [![View example-prom](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/example-prom-krsj1?fontsize=14&view=preview&module=%2Fsrc%2Fcatalog.js&moduleview=1&runonclick=0 ':include :type=iframe width=100% height=800px') 2 | -------------------------------------------------------------------------------- /docs/examples/prom-home.md: -------------------------------------------------------------------------------- 1 | [![View example-prom](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/example-prom-krsj1?fontsize=14&view=preview&runonclick=0 ':include :type=iframe width=100% height=800px') 2 | -------------------------------------------------------------------------------- /docs/examples/prom-product.md: -------------------------------------------------------------------------------- 1 | [![View example-prom](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/example-prom-krsj1?fontsize=14&view=preview&module=%2Fsrc%2Fproduct.js&moduleview=1&runonclick=0 ':include :type=iframe width=100% height=800px') 2 | -------------------------------------------------------------------------------- /docs/getting-started/installation.md: -------------------------------------------------------------------------------- 1 | [react]: //www.npmjs.com/package/react 2 | [prop-types]: //www.npmjs.com/package/prop-types 3 | 4 | [evokit]: /packages/evokit/ 5 | [evokit-body]: /packages/evokit-body/ 6 | [evokit-box]: /packages/evokit-box/ 7 | [evokit-button]: /packages/evokit-button/ 8 | [evokit-flex]: /packages/evokit-flex/ 9 | [evokit-grid]: /packages/evokit-grid/ 10 | [evokit-image]: /packages/evokit-image/ 11 | [evokit-line]: /packages/evokit-line/ 12 | [evokit-link]: /packages/evokit-link/ 13 | [evokit-list]: /packages/evokit-list/ 14 | [evokit-picture]: /packages/evokit-picture/ 15 | [evokit-text]: /packages/evokit-text/ 16 | 17 | # Installation 18 | 19 | ## 1. Peer dependencies 20 | 21 | [react], [prop-types] 22 | 23 | ```bash 24 | npm install react prop-types --save 25 | ``` 26 | 27 | ## 2. Core 28 | 29 | [evokit] 30 | 31 | ```bash 32 | npm install evokit --save 33 | ``` 34 | 35 | ## 3. Block 36 | 37 | For example block [evokit-box] 38 | 39 | ```bash 40 | npm install evokit-box --save 41 | ``` 42 | 43 | List of blocks: 44 | * [evokit-body] 45 | * [evokit-box] 46 | * [evokit-button] 47 | * [evokit-flex] 48 | * [evokit-grid] 49 | * [evokit-image] 50 | * [evokit-line] 51 | * [evokit-link] 52 | * [evokit-list] 53 | * [evokit-picture] 54 | * [evokit-text] 55 | -------------------------------------------------------------------------------- /docs/props/variants.md: -------------------------------------------------------------------------------- 1 | [evokit-box]: /packages/evokit-box/ 2 | 3 | # Variants props 4 | 5 | > For examples, consider the use props on the [evokit-box][evokit-box] block. 6 | 7 | ### Single value 8 | 9 | ```jsx 10 | // input: 11 | 12 | 13 | // output: 14 |
15 | ``` 16 | 17 | ### Multi values 18 | 19 | ```jsx 20 | // input: 21 | 22 | 23 | // output: 24 |
25 | ``` 26 | ### Array of values 27 | 28 | ```jsx 29 | // input: 30 | 31 | 32 | // output: 33 |
34 | ``` 35 | 36 | ### Object of values 37 | 38 | ```jsx 39 | // input: 40 | 41 | 42 | // output: 43 |
44 | ``` 45 | 46 | ## Live demo 47 | 48 | [![Edit box-props](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/boxprops-dn6w9?fontsize=14&runonclick=0 ':include :type=iframe width=100% height=700px') 49 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/docccdev/evokit/2ff5bec85b3591a51047cac3475358f45ce345d8/favicon.ico -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "command": { 3 | "publish": { 4 | "ignoreChanges": [ 5 | "package.json", 6 | "package-lock.json", 7 | "webpack.config.js", 8 | "*.md", 9 | "**/__tests__/**" 10 | ] 11 | } 12 | }, 13 | "packages": [ 14 | "packages/evokit", 15 | "packages/evokit-*" 16 | ], 17 | "version": "independent" 18 | } 19 | -------------------------------------------------------------------------------- /new-block/template/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | [README]: /packages/${PACKAGE_NAME}/README.md 2 | 3 | 4 | # EvoKit - ${BLOCK_NAME_CAPITALIZE} 5 | 6 | [![](https://img.shields.io/npm/v/${PACKAGE_NAME}.svg)](https://www.npmjs.com/package/${PACKAGE_NAME}) 7 | [![](https://img.shields.io/badge/page-README-42b983)][README] 8 | 9 | --- 10 | 11 | ## CHANGELOG 12 | 13 | ### ${PACKAGE_VERSION} 14 | 15 | - Initial version. 16 | -------------------------------------------------------------------------------- /new-block/template/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../config/jest.config.js'); 2 | -------------------------------------------------------------------------------- /new-block/template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "${PACKAGE_NAME}", 3 | "version": "${PACKAGE_VERSION}", 4 | "description": "New block", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest --colors", 8 | "build": "webpack --color", 9 | "watch": "webpack --color --progress --watch", 10 | "pretest": "npm run build", 11 | "prepublishOnly": "webpack" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/docccdev/evokit.git" 16 | }, 17 | "homepage": "https://evokit.net/#/packages/${PACKAGE_NAME}/", 18 | "keywords": [ 19 | "evokit", 20 | "react", 21 | "ui", 22 | "block", 23 | "uikit", 24 | "${BLOCK_NAME}" 25 | ], 26 | "author": { 27 | "author": "docccdev", 28 | "email": "doccc.dev@gmail.com", 29 | "url": "http://evokit.net" 30 | }, 31 | "license": "MIT", 32 | "peerDependencies": { 33 | "evokit": ">=3.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /new-block/template/src/index.js: -------------------------------------------------------------------------------- 1 | import { createBlock } from 'evokit'; 2 | 3 | export const ${BLOCK_NAME_CAPITALIZE} = createBlock('div', '${BLOCK_NAME}', [ 4 | 'display', 5 | ]); 6 | -------------------------------------------------------------------------------- /new-block/template/src/mixins.sss: -------------------------------------------------------------------------------- 1 | @define-mixin media $selector 2 | $selector 3 | @mixin-content 4 | 5 | @media (--ek-${BLOCK_NAME}-media-small) 6 | $(selector)\@small 7 | @mixin-content 8 | 9 | @media (--ek-${BLOCK_NAME}-media-medium) 10 | $(selector)\@medium 11 | @mixin-content 12 | 13 | @media (--ek-${BLOCK_NAME}-media-large) 14 | $(selector)\@large 15 | @mixin-content 16 | 17 | @media (--ek-${BLOCK_NAME}-media-wide) 18 | $(selector)\@wide 19 | @mixin-content 20 | 21 | @media (--ek-${BLOCK_NAME}-media-huge) 22 | $(selector)\@huge 23 | @mixin-content 24 | -------------------------------------------------------------------------------- /new-block/template/src/style.sss: -------------------------------------------------------------------------------- 1 | @import './mixins.sss' 2 | 3 | @custom-media --ek-${BLOCK_NAME}-media-small only screen and (min-width: 480px) 4 | @custom-media --ek-${BLOCK_NAME}-media-medium only screen and (min-width: 768px) 5 | @custom-media --ek-${BLOCK_NAME}-media-large only screen and (min-width: 960px) 6 | @custom-media --ek-${BLOCK_NAME}-media-wide only screen and (min-width: 1200px) 7 | @custom-media --ek-${BLOCK_NAME}-media-huge only screen and (min-width: 1400px) 8 | 9 | .${BLOCK_NAME} 10 | border: 1px red solid 11 | 12 | /** 13 | * Display: 14 | * 15 | * - ${BLOCK_NAME}_display_block 16 | * - ${BLOCK_NAME}_display_none 17 | * 18 | **/ 19 | 20 | @each $value in (block, none) 21 | @mixin media .${BLOCK_NAME}_display_$(value) 22 | @if $value == block 23 | display: block 24 | @else if $value == none 25 | display: none 26 | @else 27 | display: inherit 28 | -------------------------------------------------------------------------------- /new-block/template/src/theme.sss: -------------------------------------------------------------------------------- 1 | @import './mixins.sss' 2 | 3 | :root 4 | --ek-${BLOCK_NAME}-background-TEMPLATE_NAME: var(--background) 5 | --ek-${BLOCK_NAME}-border-TEMPLATE_NAME: var(--border) 6 | 7 | @mixin media .${BLOCK_NAME}_background_TEMPLATE_NAME 8 | background: var(--ek-${BLOCK_NAME}-background-TEMPLATE_NAME) 9 | -------------------------------------------------------------------------------- /new-block/template/webpack.config.js: -------------------------------------------------------------------------------- 1 | var makeIndexConfig = require('../../config/webpack/index.config.js'); 2 | var makeStyleConfig = require('../../config/webpack/style.config.js'); 3 | var makeThemeConfig = require('../../config/webpack/theme.config.js'); 4 | 5 | module.exports = [ 6 | makeIndexConfig(__dirname, 'EvoKit${BLOCK_NAME_CAPITALIZE}'), 7 | makeStyleConfig(__dirname, '${BLOCK_NAME}'), 8 | makeThemeConfig(__dirname) 9 | ]; 10 | -------------------------------------------------------------------------------- /packages/evokit-body/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | __tests__ 3 | webpack.config.js 4 | jest.config.js 5 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/Body.background.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../theme.css'; 5 | import { Body } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-background', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body_background_TEMPLATE_NAME').exists()).toBeTruthy(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/Body.color.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../theme.css'; 5 | import { Body } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-color', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body_color_TEMPLATE_NAME').exists()).toBeTruthy(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/Body.display.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Body } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-display', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body_display_block').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-body_display_none').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/Body.overflow-anchor.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Body } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-overflow-anchor', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body_overflow-anchor_none').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-body_overflow-anchor_auto').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/Body.size.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Body } from '../src'; 6 | 7 | describe('DEPRECATED ', () => { 8 | it('props body-size', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body_size_xl .ek-body__section').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-body_size_xxl .ek-body__section').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-body_size_xxxl .ek-body__section').exists()).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/BodySection.display.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { BodySection } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-section-display', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body__section_display_block').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-body__section_display_none').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/BodySection.height.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { BodySection } from '../src'; 6 | 7 | describe('', () => { 8 | it('props body-section-height', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-body__section_height_auto').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-body__section_height_inherit').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-body__section_height_1-1').exists()).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.background.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-background 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.color.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-color 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.display.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-display 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.indent.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-indent 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.overflow-anchor.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-overflow-anchor 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.overflow.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` extend 2 props body-overflow 1`] = ` 4 | 7 | `; 8 | 9 | exports[` props body-overflow 1`] = ` 10 | 13 | `; 14 | 15 | exports[` props body-overflow-x 1`] = ` 16 | 19 | `; 20 | 21 | exports[` props body-overflow-y 1`] = ` 22 | 25 | `; 26 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.size.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`DEPRECATED props body-size 1`] = ` 4 | 7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-tag 1`] = ` 4 | 7 | `; 8 | 9 | exports[` props body-tag 2`] = ` 10 | 13 | `; 14 | 15 | exports[` props className 1`] = ` 16 | 19 | `; 20 | 21 | exports[` props className 2`] = ` 22 |
25 | `; 26 | 27 | exports[` render 1`] = ` 28 | 31 | `; 32 | 33 | exports[` render 2`] = ` 34 |
37 | `; 38 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/Body.width.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` extend 2 props body-width 1`] = ` 4 | 7 | `; 8 | 9 | exports[` props body-width 1`] = ` 10 | 13 | `; 14 | 15 | exports[` props body-width-max 1`] = ` 16 | 19 | `; 20 | 21 | exports[` props body-width-min 1`] = ` 22 | 25 | `; 26 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/BodySection.display.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-section-display 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/__tests__/__snapshots__/BodySection.height.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props body-section-height 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-body/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../config/jest.config.js'); 2 | -------------------------------------------------------------------------------- /packages/evokit-body/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "evokit-body", 3 | "version": "3.2.0", 4 | "description": "Used for body of the web page and sets the basic styles", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest --colors", 8 | "build": "webpack --color", 9 | "watch": "webpack --color --progress --watch", 10 | "pretest": "npm run build", 11 | "prepublishOnly": "webpack" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/docccdev/evokit.git" 16 | }, 17 | "homepage": "https://evokit.net/#/packages/evokit-body/", 18 | "keywords": [ 19 | "evokit", 20 | "react", 21 | "ui", 22 | "block", 23 | "uikit", 24 | "body" 25 | ], 26 | "author": { 27 | "author": "docccdev", 28 | "email": "doccc.dev@gmail.com", 29 | "url": "http://evokit.net" 30 | }, 31 | "license": "MIT", 32 | "peerDependencies": { 33 | "evokit": ">=3.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/evokit-body/src/index.js: -------------------------------------------------------------------------------- 1 | import { createBlock } from 'evokit'; 2 | 3 | export const Body = createBlock('body', 'body', [ 4 | 'background', 5 | 'color', 6 | 'display', 7 | 'indent', 8 | 'overflow-anchor', 9 | ['overflow', [ 10 | 'overflow-x', 11 | 'overflow-y', 12 | ]], 13 | ['width', [ 14 | 'width-min', 15 | 'width-max', 16 | ]], 17 | // DEPRECATED 18 | 'size', 19 | ]); 20 | 21 | export const BodySection = createBlock('div', 'body__section', [ 22 | 'display', 23 | 'height', 24 | ]); 25 | 26 | Body.Section = BodySection; 27 | -------------------------------------------------------------------------------- /packages/evokit-body/src/mixins.sss: -------------------------------------------------------------------------------- 1 | @define-mixin media $selector 2 | $selector 3 | @mixin-content 4 | 5 | @media (--ek-body-media-small) 6 | $(selector)\@small 7 | @mixin-content 8 | 9 | @media (--ek-body-media-medium) 10 | $(selector)\@medium 11 | @mixin-content 12 | 13 | @media (--ek-body-media-large) 14 | $(selector)\@large 15 | @mixin-content 16 | 17 | @media (--ek-body-media-wide) 18 | $(selector)\@wide 19 | @mixin-content 20 | 21 | @media (--ek-body-media-huge) 22 | $(selector)\@huge 23 | @mixin-content 24 | -------------------------------------------------------------------------------- /packages/evokit-body/src/theme.sss: -------------------------------------------------------------------------------- 1 | @import './mixins.sss' 2 | 3 | :root 4 | --ek-body-background-TEMPLATE_NAME: var(--background) 5 | --ek-body-color-TEMPLATE_NAME: var(--color) 6 | 7 | @mixin media .body_background_TEMPLATE_NAME 8 | background: var(--ek-body-background-TEMPLATE_NAME) 9 | 10 | @mixin media .body_color_TEMPLATE_NAME 11 | color: var(--ek-body-color-TEMPLATE_NAME) 12 | -------------------------------------------------------------------------------- /packages/evokit-body/webpack.config.js: -------------------------------------------------------------------------------- 1 | var makeIndexConfig = require('../../config/webpack/index.config.js'); 2 | var makeStyleConfig = require('../../config/webpack/style.config.js'); 3 | var makeThemeConfig = require('../../config/webpack/theme.config.js'); 4 | 5 | module.exports = [ 6 | makeIndexConfig(__dirname, 'EvoKitBody'), 7 | makeStyleConfig(__dirname, 'body'), 8 | makeThemeConfig(__dirname) 9 | ]; 10 | -------------------------------------------------------------------------------- /packages/evokit-box/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | __tests__ 3 | webpack.config.js 4 | jest.config.js 5 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.align.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Box } from '../src'; 6 | 7 | describe('', () => { 8 | it('props box-align', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-box_align_none').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-box_align_left').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-box_align_center').exists()).toBeTruthy(); 21 | expect(css.rule('.ek-box_align_right').exists()).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.background.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../theme.css'; 5 | import { Box } from '../src'; 6 | 7 | describe('', () => { 8 | it('props box-background', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-box_background_TEMPLATE_NAME').exists()).toBeTruthy(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.display.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Box } from '../src'; 6 | 7 | describe('', () => { 8 | it('props box-display', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-box_display_block').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-box_display_inline-block').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-box_display_inline').exists()).toBeTruthy(); 21 | expect(css.rule('.ek-box_display_none').exists()).toBeTruthy(); 22 | expect(css.rule('.ek-box_display_none\:empty:empty').exists()).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.empty.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Box } from '../src'; 6 | 7 | describe('DEPRECATED ', () => { 8 | it('props box-empty', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-box_empty_hidden:empty').exists()).toBeTruthy(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.height.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Box } from '../src'; 6 | 7 | describe('', () => { 8 | it('props box-height', () => { 9 | const wrapper = shallow(); 10 | expect(wrapper).toMatchSnapshot(); 11 | 12 | expect(wrapper.html()).toEqual('
'); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-box_height_auto').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-box_height_1-1').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/Box.width.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Box } from '../src'; 6 | 7 | const range = (start, end) => { 8 | if (start === end) return [start]; 9 | return [start, ...range(start + 1, end)]; 10 | }; 11 | 12 | describe('', () => { 13 | it('props box-width', () => { 14 | const wrapper = shallow(); 15 | expect(wrapper).toMatchSnapshot(); 16 | 17 | expect(wrapper.html()).toEqual('
'); 18 | }); 19 | 20 | it('css', () => { 21 | const css = barista({ content: style }); 22 | 23 | expect(css.rule(`.ek-box_width_auto`).exists()).toBeTruthy(); 24 | 25 | range(1, 10).forEach((from) => { 26 | range(from, 10).filter((to) => to > from || (from == 1 && to == 1)).forEach((to) => { 27 | expect(css.rule(`.ek-box_width_${from}-${to}`).exists()).toBeTruthy(); 28 | }); 29 | }); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.align.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-align 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.background.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-background 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.border.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` DEPRECATED props props box-border-lr 1`] = ` 4 |
7 | `; 8 | 9 | exports[` DEPRECATED props props box-border-tb 1`] = ` 10 |
13 | `; 14 | 15 | exports[` props box-border 1`] = ` 16 |
19 | `; 20 | 21 | exports[` props box-border-bottom 1`] = ` 22 |
25 | `; 26 | 27 | exports[` props box-border-left 1`] = ` 28 |
31 | `; 32 | 33 | exports[` props box-border-right 1`] = ` 34 |
37 | `; 38 | 39 | exports[` props box-border-top 1`] = ` 40 |
43 | `; 44 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.display.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-display 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.empty.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`DEPRECATED props box-empty 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.height.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-height 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.opacity.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-opacity 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.overflow.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` extend 2 props box-overflow 1`] = ` 4 |
7 | `; 8 | 9 | exports[` props box-overflow 1`] = ` 10 |
13 | `; 14 | 15 | exports[` props box-overflow-x 1`] = ` 16 |
19 | `; 20 | 21 | exports[` props box-overflow-y 1`] = ` 22 |
25 | `; 26 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.place.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-place 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.position.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` extend 2 props box-position 1`] = ` 4 |
7 | `; 8 | 9 | exports[` extend 3 props box-position 1`] = ` 10 |
13 | `; 14 | 15 | exports[` props box-position 1`] = ` 16 |
19 | `; 20 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-tag 1`] = ` 4 | 7 | `; 8 | 9 | exports[` props className 1`] = ` 10 |
13 | `; 14 | 15 | exports[` render 1`] = ` 16 |
19 | `; 20 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.width.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-width 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/__tests__/__snapshots__/Box.zindex.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` props box-zindex 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /packages/evokit-box/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../../config/jest.config.js'); 2 | -------------------------------------------------------------------------------- /packages/evokit-box/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "evokit-box", 3 | "version": "3.4.0", 4 | "description": "The content block allows to apply indents, position and more", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest --colors", 8 | "build": "webpack --color", 9 | "watch": "webpack --color --progress --watch", 10 | "pretest": "npm run build", 11 | "prepublishOnly": "webpack" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/docccdev/evokit.git" 16 | }, 17 | "homepage": "https://evokit.net/#/packages/evokit-box/", 18 | "keywords": [ 19 | "evokit", 20 | "react", 21 | "ui", 22 | "block", 23 | "uikit", 24 | "box" 25 | ], 26 | "author": { 27 | "author": "docccdev", 28 | "email": "doccc.dev@gmail.com", 29 | "url": "http://evokit.net" 30 | }, 31 | "license": "MIT", 32 | "peerDependencies": { 33 | "evokit": ">=3.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/evokit-box/src/mixins.sss: -------------------------------------------------------------------------------- 1 | @define-mixin media $selector 2 | $selector 3 | @mixin-content 4 | 5 | @media (--ek-box-media-small) 6 | $(selector)\@small 7 | @mixin-content 8 | 9 | @media (--ek-box-media-medium) 10 | $(selector)\@medium 11 | @mixin-content 12 | 13 | @media (--ek-box-media-large) 14 | $(selector)\@large 15 | @mixin-content 16 | 17 | @media (--ek-box-media-wide) 18 | $(selector)\@wide 19 | @mixin-content 20 | 21 | @media (--ek-box-media-huge) 22 | $(selector)\@huge 23 | @mixin-content 24 | -------------------------------------------------------------------------------- /packages/evokit-box/webpack.config.js: -------------------------------------------------------------------------------- 1 | var makeIndexConfig = require('../../config/webpack/index.config.js'); 2 | var makeStyleConfig = require('../../config/webpack/style.config.js'); 3 | var makeThemeConfig = require('../../config/webpack/theme.config.js'); 4 | 5 | module.exports = [ 6 | makeIndexConfig(__dirname, 'EvoKitBox'), 7 | makeStyleConfig(__dirname, 'box'), 8 | makeThemeConfig(__dirname) 9 | ]; 10 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.display.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_display_inline-flex').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_display_none').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.events.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_events_none').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_events_auto').exists()).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.height.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_height_auto').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_height_inherit').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-button_height_1-1').exists()).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.theme.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../theme.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_theme_TEMPLATE_NAME').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_theme_TEMPLATE_NAME:focus').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-button_theme_TEMPLATE_NAME:hover').exists()).toBeTruthy(); 21 | expect(css.rule('.ek-button_theme_TEMPLATE_NAME:active').exists()).toBeTruthy(); 22 | expect(css.rule('.ek-button_theme_TEMPLATE_NAME:disabled').exists()).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.weight.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_weight_thin').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_weight_light').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-button_weight_normal').exists()).toBeTruthy(); 21 | expect(css.rule('.ek-button_weight_medium').exists()).toBeTruthy(); 22 | expect(css.rule('.ek-button_weight_bold').exists()).toBeTruthy(); 23 | expect(css.rule('.ek-button_weight_black').exists()).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/Button.width.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import barista from 'seed-barista'; 4 | import style from '../style.css'; 5 | import { Button } from '../src'; 6 | 7 | describe(''); 13 | }); 14 | 15 | it('css', () => { 16 | const css = barista({ content: style }); 17 | 18 | expect(css.rule('.ek-button_width_auto').exists()).toBeTruthy(); 19 | expect(css.rule('.ek-button_width_inherit').exists()).toBeTruthy(); 20 | expect(css.rule('.ek-button_width_1-1').exists()).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/evokit-button/__tests__/__snapshots__/Button.display.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`