eser 2.1.9 → 3.0.0-rc.1

package/css-in-javascript/README.md

@@ -1,432 +0,0 @@
-# [Eser: CSS-in-JavaScript Style Guide](https://github.com/eserozvataf/eser)
-
-*A mostly reasonable approach to CSS-in-JavaScript*
-
-## Table of Contents
-
-1. [Naming](#naming)
-1. [Ordering](#ordering)
-1. [Nesting](#nesting)
-1. [Inline](#inline)
-1. [Themes](#themes)
-
-## Naming
-
-    - Use camelCase for object keys (i.e. "selectors").
-
-        > Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase.
-
-        ```js
-        // bad
-        {
-            'bermuda-triangle': {
-                display: 'none',
-            },
-        }
-
-        // good
-        {
-            bermudaTriangle: {
-                display: 'none',
-            },
-        }
-        ```
-
-    - Use an underscore for modifiers to other styles.
-
-        > Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
-
-        ```js
-        // bad
-        {
-            bruceBanner: {
-                color: 'pink',
-                transition: 'color 10s',
-            },
-
-            bruceBannerTheHulk: {
-                color: 'green',
-            },
-        }
-
-        // good
-        {
-            bruceBanner: {
-                color: 'pink',
-                transition: 'color 10s',
-            },
-
-            bruceBanner_theHulk: {
-                color: 'green',
-            },
-        }
-        ```
-
-    - Use `selectorName_fallback` for sets of fallback styles.
-
-        > Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.
-
-        ```js
-        // bad
-        {
-            muscles: {
-                display: 'flex',
-            },
-
-            muscles_sadBears: {
-                width: '100%',
-            },
-        }
-
-        // good
-        {
-            muscles: {
-                display: 'flex',
-            },
-
-            muscles_fallback: {
-                width: '100%',
-            },
-        }
-        ```
-
-    - Use a separate selector for sets of fallback styles.
-
-        > Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.
-
-        ```js
-        // bad
-        {
-            muscles: {
-                display: 'flex',
-            },
-
-            left: {
-                flexGrow: 1,
-                display: 'inline-block',
-            },
-
-            right: {
-                display: 'inline-block',
-            },
-        }
-
-        // good
-        {
-            muscles: {
-                display: 'flex',
-            },
-
-            left: {
-                flexGrow: 1,
-            },
-
-            left_fallback: {
-                display: 'inline-block',
-            },
-
-            right_fallback: {
-                display: 'inline-block',
-            },
-        }
-        ```
-
-    - Use device-agnostic names (e.g. "small", "medium", and "large") to name media query breakpoints.
-
-        > Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.
-
-        ```js
-        // bad
-        const breakpoints = {
-            mobile: '@media (max-width: 639px)',
-            tablet: '@media (max-width: 1047px)',
-            desktop: '@media (min-width: 1048px)',
-        };
-
-        // good
-        const breakpoints = {
-            small: '@media (max-width: 639px)',
-            medium: '@media (max-width: 1047px)',
-            large: '@media (min-width: 1048px)',
-        };
-        ```
-
-## Ordering
-
-    - Define styles after the component.
-
-        > Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.
-
-        ```jsx
-        // bad
-        const styles = {
-            container: {
-                display: 'inline-block',
-            },
-        };
-
-        function MyComponent({ styles }) {
-            return (
-                <div {...css(styles.container)}>
-                    Never doubt that a small group of thoughtful, committed citizens can
-                    change the world. Indeed, it’s the only thing that ever has.
-                </div>
-            );
-        }
-
-        export default withStyles(() => styles)(MyComponent);
-
-        // good
-        function MyComponent({ styles }) {
-            return (
-                <div {...css(styles.container)}>
-                    Never doubt that a small group of thoughtful, committed citizens can
-                    change the world. Indeed, it’s the only thing that ever has.
-                </div>
-            );
-        }
-
-        export default withStyles(() => ({
-            container: {
-                display: 'inline-block',
-            },
-        }))(MyComponent);
-        ```
-
-## Nesting
-
-    - Leave a blank line between adjacent blocks at the same indentation level.
-
-        > Why? The whitespace improves readability and reduces the likelihood of merge conflicts.
-
-        ```js
-        // bad
-        {
-            bigBang: {
-                display: 'inline-block',
-                '::before': {
-                    content: "''",
-                },
-            },
-            universe: {
-                border: 'none',
-            },
-        }
-
-        // good
-        {
-            bigBang: {
-                display: 'inline-block',
-
-                '::before': {
-                    content: "''",
-                },
-            },
-
-            universe: {
-                border: 'none',
-            },
-        }
-        ```
-
-## Inline
-
-    - Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.
-
-        > Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.
-
-        ```jsx
-        // bad
-        export default function MyComponent({ spacing }) {
-            return (
-                <div style={{ display: 'table', margin: spacing }} />
-            );
-        }
-
-        // good
-        function MyComponent({ styles, spacing }) {
-            return (
-                <div {...css(styles.periodic, { margin: spacing })} />
-            );
-        }
-        export default withStyles(() => ({
-            periodic: {
-                display: 'table',
-            },
-        }))(MyComponent);
-        ```
-
-## Themes
-
-    - Use an abstraction layer such as [react-with-styles](https://github.com/airbnb/react-with-styles) that enables theming. *react-with-styles gives us things like `withStyles()`, `ThemedStyleSheet`, and `css()` which are used in some of the examples in this document.*
-
-    > Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.
-
-    - Define colors only in themes.
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            chuckNorris: {
-                color: '#bada55',
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ color }) => ({
-            chuckNorris: {
-                color: color.badass,
-            },
-        }))(MyComponent);
-        ```
-
-    - Define fonts only in themes.
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            towerOfPisa: {
-                fontStyle: 'italic',
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ font }) => ({
-            towerOfPisa: {
-                fontStyle: font.italic,
-            },
-        }))(MyComponent);
-        ```
-
-    - Define fonts as sets of related styles.
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            towerOfPisa: {
-                fontFamily: 'Italiana, "Times New Roman", serif',
-                fontSize: '2em',
-                fontStyle: 'italic',
-                lineHeight: 1.5,
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ font }) => ({
-            towerOfPisa: {
-                ...font.italian,
-            },
-        }))(MyComponent);
-        ```
-
-    - Define base grid units in theme (either as a value or a function that takes a multiplier).
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            rip: {
-                bottom: '-6912px', // 6 feet
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ units }) => ({
-            rip: {
-                bottom: units(864), // 6 feet, assuming our unit is 8px
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ unit }) => ({
-            rip: {
-                bottom: 864 * unit, // 6 feet, assuming our unit is 8px
-            },
-        }))(MyComponent);
-        ```
-
-    - Define media queries only in themes.
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            container: {
-                width: '100%',
-
-                '@media (max-width: 1047px)': {
-                    width: '50%',
-                },
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ breakpoint }) => ({
-            container: {
-                width: '100%',
-
-                [breakpoint.medium]: {
-                    width: '50%',
-                },
-            },
-        }))(MyComponent);
-        ```
-
-    - Define tricky fallback properties in themes.
-
-        > Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.
-
-        ```js
-        // bad
-        export default withStyles(() => ({
-            .muscles {
-                display: 'flex',
-            },
-
-            .muscles_fallback {
-                'display ': 'table',
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ fallbacks }) => ({
-            .muscles {
-                display: 'flex',
-            },
-
-            .muscles_fallback {
-                [fallbacks.display]: 'table',
-            },
-        }))(MyComponent);
-
-        // good
-        export default withStyles(({ fallback }) => ({
-            .muscles {
-                display: 'flex',
-            },
-
-            .muscles_fallback {
-                [fallback('display')]: 'table',
-            },
-        }))(MyComponent);
-        ```
-
-    - Create as few custom themes as possible. Many applications may only have one theme.
-
-    - Namespace custom theme settings under a nested object with a unique and descriptive key.
-
-        ```js
-        // bad
-        ThemedStyleSheet.registerTheme('mySection', {
-            mySectionPrimaryColor: 'green',
-        });
-
-        // good
-        ThemedStyleSheet.registerTheme('mySection', {
-            mySection: {
-                primaryColor: 'green',
-            },
-        });
-        ```
-
----
-
-CSS puns adapted from [Saijo George](https://saijogeorge.com/css-puns/).

package/linters/.eslintrc

@@ -1,6 +0,0 @@
-// Use this file as a starting point for your project's .eslintrc.
-// Copy this file, and add rule overrides as needed.
-{
-    "extends": "eser"
-}
-

package/linters/.markdownlint.json

@@ -1,154 +0,0 @@
-{
-    "comment": "Be explicit by listing every available rule. https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md",
-    "comment": "Note that there will be numeric gaps, not every MD number is implemented in markdownlint.",
-
-    "comment": "MD001: Header levels should only increment by one level at a time.",
-    "header-increment": true,
-
-    "comment": "MD002: First header should be a top level header.",
-    "first-header-h1": true,
-
-    "comment": "MD003: Header style: start with hashes.",
-    "header-style": {
-      "style": "atx"
-    },
-
-    "comment": "MD004: Unordered list style",
-    "ul-style": {
-      "style": "dash"
-    },
-
-    "comment": "MD005: Consistent indentation for list items at the same level.",
-    "list-indent": true,
-
-    "comment": "MD006: Consider starting bulleted lists at the beginning of the line.",
-    "ul-start-left": false,
-
-    "comment": "MD007: Unordered list indentation: 4 spaces.",
-    "ul-indent": {
-      "indent": 4
-    },
-
-    "comment": "MD009: Disallow trailing spaces!",
-    "no-trailing-spaces": {
-      "br_spaces": 0,
-      "comment": "Empty lines inside list items should not be indented.",
-      "list_item_empty_lines": false
-    },
-
-    "comment": "MD010: No hard tabs, not even in code blocks.",
-    "no-hard-tabs": {
-      "code_blocks": true
-    },
-
-    "comment": "MD011: Prevent reversed link syntax",
-    "no-reversed-links": true,
-
-    "comment": "MD012: Disallow multiple consecutive blank lines.",
-    "no-multiple-blanks": {
-      "maximum": 1
-     },
-
-    "comment": "MD013: Line length",
-    "line-length": false,
-
-    "comment": "MD014: Disallow use of dollar signs($) before commands without showing output.",
-    "commands-show-output": true,
-
-    "comment": "MD018: Disallow space after hash on atx style header.",
-    "no-missing-space-atx": true,
-
-    "comment": "MD019: Disallow multiple spaces after hash on atx style header.",
-    "no-multiple-space-atx": true,
-
-    "comment": "MD020: No space should be inside hashes on closed atx style header.",
-    "no-missing-space-closed-atx": true,
-
-    "comment": "MD021: Disallow multiple spaces inside hashes on closed atx style header.",
-    "no-multiple-space-closed-atx": true,
-
-    "comment": "MD022: Headers should be surrounded by blank lines.",
-    "comment": "Some headers have preceeding HTML anchors. Unfortunate that we have to disable this, as it otherwise catches a real problem that trips up some Markdown renderers",
-    "blanks-around-headers": false,
-
-    "comment": "MD023: Headers must start at the beginning of the line.",
-    "header-start-left": true,
-
-    "comment": "MD024: Disallow multiple headers with the same content.",
-    "no-duplicate-header": true,
-
-    "comment": "MD025: Disallow multiple top level headers in the same document.",
-    "comment": "Gotta have a matching closing brace at the end.",
-    "single-h1": false,
-
-    "comment": "MD026: Disallow trailing punctuation in header.",
-    "comment": "You must have a semicolon after the ending closing brace.",
-    "no-trailing-punctuation": {
-      "punctuation" : ".,:!?"
-    },
-    "comment": "MD027: Dissalow multiple spaces after blockquote symbol",
-    "no-multiple-space-blockquote": true,
-
-    "comment": "MD028: Blank line inside blockquote",
-    "comment": "Some 'Why?' and 'Why not?' blocks are separated by a blank line",
-    "no-blanks-blockquote": false,
-
-    "comment": "MD029: Ordered list item prefix",
-    "ol-prefix": {
-      "style": "one"
-    },
-
-    "comment": "MD030: Spaces after list markers",
-    "list-marker-space": {
-      "ul_single": 1,
-      "ol_single": 1,
-      "ul_multi": 1,
-      "ol_multi": 1
-    },
-
-    "comment": "MD031: Fenced code blocks should be surrounded by blank lines",
-    "blanks-around-fences": true,
-
-    "comment": "MD032: Lists should be surrounded by blank lines",
-    "comment": "Some lists have preceeding HTML anchors. Unfortunate that we have to disable this, as it otherwise catches a real problem that trips up some Markdown renderers",
-    "blanks-around-lists": false,
-
-    "comment": "MD033: Disallow inline HTML",
-    "comment": "HTML is needed for explicit anchors",
-    "no-inline-html": false,
-
-    "comment": "MD034: No bare URLs should be used",
-    "no-bare-urls": true,
-
-    "comment": "MD035: Horizontal rule style",
-    "hr-style": {
-      "style": "consistent"
-    },
-
-    "comment": "MD036: Do not use emphasis instead of a header.",
-    "no-emphasis-as-header": false,
-
-    "comment": "MD037: Disallow spaces inside emphasis markers.",
-    "no-space-in-emphasis": true,
-
-    "comment": "MD038: Disallow spaces inside code span elements.",
-    "no-space-in-code": true,
-
-    "comment": "MD039: Disallow spaces inside link text.",
-    "no-space-in-links": true,
-
-    "comment": "MD040: Fenced code blocks should have a language specified.",
-    "fenced-code-language": true,
-
-    "comment": "MD041: First line in file should be a top level header.",
-    "first-line-h1": true,
-
-    "comment": "MD042: No empty links",
-    "no-empty-links": true,
-
-    "comment": "MD043: Required header structure.",
-    "required-headers": false,
-
-    "comment": "MD044: Proper names should have the correct capitalization.",
-    "proper-names": false
-}

package/packages/eslint-config-eser/.editorconfig

@@ -1,14 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf
-# editorconfig-tools is unable to ignore longs strings or urls
-max_line_length = off
-
-[*.md]
-trim_trailing_whitespace = false

package/packages/eslint-config-eser/.eslintrc

@@ -1,3 +0,0 @@
-{
-    "extends": "./index.js"
-}

package/packages/eslint-config-eser/README.md

@@ -1,19 +0,0 @@
-# [Eser: JavaScript Style Guide](https://github.com/eserozvataf/eser)
-
-This package consists of ESLint rule definitions for [eser](https://github.com/eserozvataf/eser).
-
-To use this package, execute:
-
-```sh
-npm install eslint eslint-plugin-import eslint-config-eser --save-dev
-```
-
-Then create an `.eslintrc` file:
-
-```json
-{
-    "extends": "eser"
-}
-```
-
-See [main repository](https://github.com/eserozvataf/eser) for further details.

package/packages/eslint-config-eser/index.js

@@ -1,20 +0,0 @@
-module.exports = {
-    'extends': [
-        './rules/best-practices',
-        './rules/errors',
-        './rules/node',
-        './rules/style',
-        './rules/variables',
-        './rules/es6',
-        './rules/imports',
-        './rules/strict',
-    ].map(require.resolve),
-
-    'parserOptions': {
-        ecmaVersion: 2018,
-        sourceType: 'module',
-    },
-
-    'rules': {
-    },
-};

package/packages/eslint-config-eser/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "eslint-config-eser",
-  "version": "2.1.9",
-  "description": "Eser's ESLint config, following our styleguide",
-  "main": "index.js",
-  "scripts": {
-    "cleanup": "rm -rf yarn.lock node_modules/",
-    "prelint": "# editorconfig-tools check *",
-    "lint": "eslint ./",
-    "lint:fix": "eslint --fix ./",
-    "test": "",
-    "test:coverage": ""
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/eserozvataf/eser"
-  },
-  "keywords": [
-    "eslint",
-    "eslintconfig",
-    "config",
-    "eser",
-    "airbnb",
-    "javascript",
-    "styleguide"
-  ],
-  "author": "Eser Ozvataf <eser@ozvataf.com> (https://twitter.com/eser)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/eserozvataf/eser/issues"
-  },
-  "homepage": "https://github.com/eserozvataf/eser",
-  "dependencies": {
-    "confusing-browser-globals": "^1.0.9"
-  },
-  "devDependencies": {
-    "editorconfig-tools": "^0.1.1",
-    "eslint": "^7.4.0",
-    "eslint-find-rules": "^3.5.0",
-    "eslint-plugin-import": "^2.22.0"
-  },
-  "peerDependencies": {
-    "eslint": "^7.4.0",
-    "eslint-plugin-import": "^2.22.0"
-  },
-  "engines": {
-    "node": ">= 6"
-  }
-}