foliage - npm Package Compare versions

Comparing version 0.106.0 to 0.200.0

dist/index.d.ts

 import { DOMTag, spec } from 'forest';
 export declare function StyledRoot(): void;
-declare type Cb = () => void;
-export declare type Component = ((config: Spec | Cb) => void) & {
+declare type Callback = () => void;
+export declare type FunctionComponent = (config: Spec | Callback) => void;
+export declare type Component = FunctionComponent & {
     STYLED_ID: string;
 };
 export declare type Spec = Parameters<typeof spec>[0] & {
-    fn?: Cb;
+    fn?: Callback;
 };
@@ -10,0 +11,0 @@ declare type Creator = (content: TemplateStringsArray, ...interpolations: (string | Component | number)[]) => Component;

package.json

 {
   "name": "foliage",
-  "version": "0.106.0",
+  "version": "0.200.0",
   "description": "Styled Components for forest",
@@ -10,3 +10,3 @@ "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "commit": "git-cz",
@@ -23,3 +23,3 @@ "lint": "eslint ./",
   "repository": {
-    "url": "https://github.com/sergeysova/foliage"
+    "url": "https://github.com/foliage-ui/foliage"
   },
@@ -44,19 +44,26 @@ "files": ["dist"],
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-typescript": "^7.10.1",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/types": "^7.12.17",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@eslint-kit/eslint-config-base": "^2.1.2",
+    "@eslint-kit/eslint-config-base": "^3.0.0",
     "@eslint-kit/eslint-config-node": "^2.0.0",
     "@eslint-kit/eslint-config-prettier": "^2.0.0",
-    "@eslint-kit/eslint-config-typescript": "^3.1.2",
+    "@eslint-kit/eslint-config-typescript": "^3.2.0",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.5",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
     "@typescript-eslint/parser": "^4.4.1",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-tester": "^10.0.0",
+    "change-case": "^4.1.2",
     "commitizen": "^4.1.2",
     "cz-conventional-changelog": "^3.2.0",
-    "effector": "^21.8.3",
-    "eslint": "^7.11.0",
-    "forest": "^0.19.6",
+    "effector": "^22.1.0",
+    "eslint": "7.10.0",
+    "forest": "^0.20.2",
     "husky": "^4.2.5",
@@ -67,6 +74,9 @@ "jest": "^26.0.1",
     "prettier": "^2.0.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sharec-sova-config": "^0.1.0",
     "terser-webpack-plugin": "^3.0.2",
     "ts-loader": "^7.0.5",
-    "typescript": "^4.1.5",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.4.2",
     "typescript-styled-plugin": "^0.15.0",
@@ -81,8 +91,15 @@ "webpack": "^4.43.0",
   "dependencies": {
+    "autoprefixer": "^10.2.4",
+    "csso": "^4.2.0",
+    "postcss": "^8.2.6",
+    "postcss-nested": "^5.0.3",
     "stylis": "^4.0.0"
   },
   "peerDependencies": {
-    "effector": "^21.8.3",
-    "forest": "^0.19.6"
+    "effector": "^22.1.0",
+    "forest": "^0.20.2"
+  },
+  "browserslist": {
+    "development": ["last 1 ie version", "last 5 chrome version"]
   }
 }

README.md

 # foliage 🍃
 
-[NPM](https://npmjs.org/package/foliage)
-[GitHub](https://github.com/sergeysova/foliage)
+<!-- [NPM](https://npmjs.org/package/foliage) -->
 
-## Usage
+[GitHub](https://github.com/effector/foliage) [dev.to](https://dev.to/foliage)
 
-[Edit on Stackblitz](https://stackblitz.com/edit/foliage-forest)
+## Usage with React
 
+> Work in progress. Most of this examples are just concept
+
+<!-- [Edit on Stackblitz](https://stackblitz.com/edit/foliage-forest) -->
+
 ```ts
-import { using } from 'forest';
-import { styled, StyledRoot } from 'foliage';
+import { css, component } from 'foliage-react';
 
-const Block = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: white;
-  box-shadow: rgba(0, 0, 0, 0.17) 0px 2px 20px;
-  box-sizing: border-box;
-  min-height: 100vh;
-  margin-bottom: 160px;
-  background: linear-gradient(20deg, rgb(219, 112, 147), rgb(218, 163, 87));
-`;
-
-const Button = styled.a`
+const button = css`
   display: inline-block;
@@ -34,31 +22,196 @@ border-radius: 3px;
   width: 11rem;
-  background: transparent;
-  color: white;
   border: 2px solid white;
-  text-decoration: none;
+`;
 
-  &[data-fill='true'] {
-    background: white;
-    color: palevioletred;
+export const Button = component('a', button, {
+  defaults: { color: 'default' },
+  variants: {
+    color: {
+      primary: css`
+        background: white;
+        color: black;
+      `,
+      default: css`
+        background: transparent;
+        color: white;
+      `,
+    },
+  },
+});
+```
+
+### Extending styles
+
+```ts
+import { css, component } from 'foliage-react';
+
+const button = css`
+  color: palevioletred;
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
+`;
+
+export const Button = component('button', button);
+
+const tomato = css`
+  color: tomato;
+  border-color: tomato;
+`;
+
+export const TomatoButton = component('button', [button, tomato]);
+```
+
+### Pseudoelement, pseudoselectors, and nesting
+
+```tsx
+import { css, component } from 'foliage-react';
+
+const thing = css`
+  color: blue;
+
+  &:hover {
+    color: red; // <Thing> when hovered
   }
+
+  & ~ & {
+    background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it
+  }
+
+  & + & {
+    background: lime; // <Thing> next to <Thing>
+  }
+
+  &.something {
+    background: orange; // <Thing> tagged with an additional CSS class ".something"
+  }
+
+  .something-else & {
+    border: 1px solid; // <Thing> inside another element labeled ".something-else"
+  }
 `;
 
-function App() {
-  Block({
-    fn() {
-      Button({
-        text: 'Google',
-        attr: { href: 'https://google.com' },
-        data: { fill: true },
-      });
-      Button({
-        text: 'Yandex',
-        attr: { href: 'https://yandex.ru' },
-      });
-    },
-  });
-}
+export const Thing = component('div', thing, { attrs: { tabIndex: 0 } });
 
-using(document.querySelector('#root'), App);
-using(document.querySelector('head'), StyledRoot);
+const Example = () => (
+  <>
+    <Thing>Hello world!</Thing>
+    <Thing>How ya doing?</Thing>
+    <Thing className="something">The sun is shining...</Thing>
+    <div>Pretty nice day today.</div>
+    <Thing>Don't you think?</Thing>
+    <div className="something-else">
+      <Thing>Splendid.</Thing>
+    </div>
+  </>
+);
 ```
+
+### Animations
+
+```ts
+import { css, keyframes, component } from 'foliage-react';
+
+const rotate = keyframes`
+  from { transform: rotate(0deg) }
+  to { transform: rotate(360deg) }
+`;
+
+const block = css`
+  display: inline-block;
+  animation: ${rotate} 2s linear infinite;
+  padding: 2rem 1rem;
+  font-size: 1.2rem;
+`;
+
+export const Block = component('div', block);
+```
+
+### Theming
+
+```tsx
+import { css, keyframes, createGlobalStyle, Global } from 'foliage-react';
+const theme = {
+  main: '--theme-main',
+};
+
+const button = css`
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border-radius: 3px;
+
+  /* Color the border and text with theme.main */
+  color: var(${theme.main});
+  border: 2px solid var(${theme.main});
+`;
+
+const Button = component('button', button);
+
+const primaryTheme = createGlobalStyle`
+  :root {
+    ${theme.main}: palevioletred;
+  }
+`;
+
+const secondaryTheme = createGlobalStyle`
+  :root {
+    ${theme.main}: mediumseagreen;
+  }
+`;
+
+const Example = () => (
+  <>
+    <Global styles={primaryTheme} />
+    <Button />
+  </>
+);
+```
+
+### Composable components
+
+```tsx
+import { css, component } from 'foliage-react';
+
+const baseStyles = css`
+  color: white;
+  background-color: mediumseagreen;
+  border-radius: 4px;
+`;
+
+export const Button = component('button', baseStyles, {
+  variants: {
+    color: {
+      gray: css`
+        background-color: gainsboro;
+      `,
+      blue: css`
+        background-color: dodgerblue;
+      `,
+    },
+    size: {
+      md: css`
+        height: 26px;
+      `,
+      lg: css`
+        height: 36px;
+      `,
+    },
+  },
+  compound: [
+    {
+      color: 'blue',
+      size: 'lg',
+      css: css`
+        background-color: purple;
+      `,
+    },
+  ],
+  defaults: {
+    color: 'gray',
+    size: 'md',
+  },
+});
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23400

increased by17.88%

Number of package files

7

increased by16.67%

Lines of code

36

increased by5.88%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

217

increased by239.06%

Worsened metrics

Dependency count

7

increased by133.33%

Dev dependency count

39

increased by34.48%

Dependency changes

• + Addedautoprefixer@^10.2.4

• + Addedcsso@^4.2.0

• + Addedpostcss@^8.2.6

• + Addedpostcss-nested@^5.0.3

• + Addedautoprefixer@10.4.20(transitive)

• + Addedbrowserslist@4.24.3(transitive)

• + Addedcaniuse-lite@1.0.30001690(transitive)

• + Addedcss-tree@1.1.3(transitive)

• + Addedcssesc@3.0.0(transitive)

• + Addedcsso@4.2.0(transitive)

• + Addedeffector@22.8.8(transitive)

• + Addedelectron-to-chromium@1.5.76(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedforest@0.20.3(transitive)

• + Addedfraction.js@4.3.7(transitive)

• + Addedmdn-data@2.0.14(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addednormalize-range@0.1.2(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedpostcss-nested@5.0.6(transitive)

• + Addedpostcss-selector-parser@6.1.2(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedupdate-browserslist-db@1.1.1(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• - Removedeffector@21.8.12(transitive)

• - Removedforest@0.19.6(transitive)