paku - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

lib/components/button/button.js

@@ -8,6 +8,14 @@ "use strict";
 const button_styles_1 = require("./button.styles");
-const Button = ({ customStyle, children, ...props }) => {
-    return (react_1.default.createElement(button_styles_1.ButtonBase, Object.assign({ customStyle: customStyle }, props), children));
+const Button = ({ variant = 'primary', outline, block, customStyle, children, icon, iconRight, iconOnly, ...props }) => {
+    const renderIcon = () => {
+        if (icon) {
+            return icon;
+        }
+        return null;
+    };
+    return (react_1.default.createElement(button_styles_1.ButtonStyled, Object.assign({ variant: variant, customStyle: customStyle, outline: outline, block: block, iconRight: iconRight, iconOnly: iconOnly }, props),
+        renderIcon(),
+        react_1.default.createElement("span", null, children)));
 };
 exports.default = Button;
 //# sourceMappingURL=button.js.map

lib/components/button/button.styles.d.ts

 /// <reference types="react" />
-import { IButtonBase } from './button.types';
-export declare const ButtonBase: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IButtonBase, object>;
+/// <reference types="@emotion/core" />
+import { IButtonStyled } from './button.types';
+export declare const ButtonStyled: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IButtonStyled, object>;

lib/components/button/button.styles.js

@@ -5,26 +5,112 @@ "use strict";
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
-const theme_1 = __importDefault(require("../../theme"));
-exports.ButtonBase = styled_1.default.button({
+const tokens_1 = require("../../tokens");
+const commonStyles_1 = require("../../utils/commonStyles");
+const transition_1 = __importDefault(require("../../utils/transition"));
+const setSize = (size) => {
+    switch (size) {
+        case 'small':
+            return {
+                padding: '6px 9px',
+                fontSize: 12,
+            };
+        case 'large':
+            return {
+                padding: '10px 15px',
+                fontSize: 16,
+            };
+        default:
+            return {
+                padding: '8px 12px',
+                fontSize: 14,
+            };
+    }
+};
+const isBlock = (block) => {
+    if (block) {
+        return {
+            width: '100%',
+            justifyContent: 'center',
+        };
+    }
+    return {
+        width: 'auto',
+    };
+};
+const isDisabled = (variant, disabled) => {
+    if (disabled) {
+        return {
+            color: `${tokens_1.Color[variant].main}80`,
+            backgroundColor: tokens_1.Color[variant].disabled,
+            cursor: 'not-allowed',
+            '&:hover': {
+                backgroundColor: tokens_1.Color[variant].disabled,
+            },
+            '&:active': {
+                backgroundColor: tokens_1.Color[variant].disabled,
+            },
+            '&:focus': {
+                backgroundColor: tokens_1.Color[variant].disabled,
+                boxShadow: 'initial',
+            },
+        };
+    }
+    return {};
+};
+const withIcon = (iconOnly, iconRight) => {
+    let finalStyle = {
+        '& > svg': {
+            marginRight: 10,
+        },
+    };
+    if (iconRight) {
+        finalStyle = {
+            ...finalStyle,
+            flexDirection: 'row-reverse',
+            '& > svg': {
+                marginLeft: 10,
+            },
+        };
+    }
+    if (iconOnly) {
+        finalStyle = {
+            '& > svg': {
+                marginTop: 2,
+                marginBottom: 2,
+            },
+            '& > span': {
+                display: 'none',
+            },
+        };
+    }
+    return finalStyle;
+};
+exports.ButtonStyled = styled_1.default.button(({ variant, block, size, outline, disabled, iconOnly, iconRight }) => ({
+    ...tokens_1.Typography.base,
     appearance: 'unset',
-    padding: '10px 14px',
-    fontSize: 16,
-    borderRadius: 3,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: tokens_1.Radius.normal,
     outline: 'none',
     cursor: 'pointer',
-    border: '1px solid #ccc',
-    transition: 'box-shadow .1s linear',
+    border: '1px solid transparent',
+    color: tokens_1.Color[variant].text,
+    backgroundColor: tokens_1.Color[variant].main,
+    transition: transition_1.default(['box-shadow', 'background-color', 'color', 'border-color'], '.1s linear'),
     '&:hover': {
-        borderColor: '#3498db',
-        boxShadow: '0 0 0 1px #3498db',
-        ...((theme_1.default === null || theme_1.default === void 0 ? void 0 : theme_1.default.button) && (theme_1.default === null || theme_1.default === void 0 ? void 0 : theme_1.default.button['&:hover'])),
+        backgroundColor: tokens_1.Color[variant].hover,
     },
-    i: {
-        color: '#000',
-        ...(_a = theme_1.default === null || theme_1.default === void 0 ? void 0 : theme_1.default.button) === null || _a === void 0 ? void 0 : _a.i,
+    '&:active': {
+        backgroundColor: tokens_1.Color[variant].active,
     },
-    ...theme_1.default === null || theme_1.default === void 0 ? void 0 : theme_1.default.button,
-}, ({ customStyle }) => ({ ...customStyle }));
+    '&:focus': {
+        boxShadow: `0 0 0 4px ${tokens_1.Color[variant].outline}`,
+    },
+    ...withIcon(iconOnly, iconRight),
+    ...isBlock(block),
+    ...setSize(size),
+    ...commonStyles_1.isOutline(variant, outline),
+    ...isDisabled(variant, disabled),
+}), ({ customStyle }) => ({ ...customStyle }));
 //# sourceMappingURL=button.styles.js.map

lib/components/button/button.types.d.ts

 /// <reference types="react" />
-export interface IButton extends React.HTMLAttributes<HTMLButtonElement> {
-    customStyle?: any;
+import { TVariants, TCustomStyle, TSize } from '../../utils/types';
+interface IButtonBase {
+    customStyle?: TCustomStyle;
+    size?: TSize;
+    block?: boolean;
+    outline?: boolean | 'withColor';
+    icon?: React.ReactNode;
+    iconRight?: boolean;
+    iconOnly?: boolean;
+    disabled?: boolean;
 }
-export interface IButtonBase {
-    customStyle?: any;
+export interface IButton extends React.HTMLAttributes<HTMLButtonElement>, IButtonBase {
+    variant?: TVariants;
+}
+export interface IButtonStyled extends IButtonBase {
+    variant: TVariants;
     as?: React.ElementType;
 }
+export {};

lib/components/index.d.ts

@@ -0,1 +1,6 @@
+export { default as Badge } from './badge';
 export { default as Button } from './button';
+export { default as Checkbox } from './checkbox';
+export { Container, Row, Col } from './grid';
+export { default as Select } from './select';
+export { default as Tabs } from './tabs';

lib/components/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var badge_1 = require("./badge");
+exports.Badge = badge_1.default;
 var button_1 = require("./button");
 exports.Button = button_1.default;
+var checkbox_1 = require("./checkbox");
+exports.Checkbox = checkbox_1.default;
+var grid_1 = require("./grid");
+exports.Container = grid_1.Container;
+exports.Row = grid_1.Row;
+exports.Col = grid_1.Col;
+var select_1 = require("./select");
+exports.Select = select_1.default;
+var tabs_1 = require("./tabs");
+exports.Tabs = tabs_1.default;
 //# sourceMappingURL=index.js.map

lib/index.d.ts

@@ -1,2 +0,1 @@
-export { default as Theme } from './theme';
 export * from './components';

lib/index.js

@@ -6,5 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var theme_1 = require("./theme");
-exports.Theme = theme_1.default;
 __export(require("./components"));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "paku",
-  "version": "0.0.14",
-  "description": "",
+  "version": "0.0.15",
+  "description": "Design System with customizable styles, build on React and Emotion.",
   "main": "lib/index.js",
@@ -10,4 +10,9 @@ "types": "lib/index.d.ts",
     "build": "rm -rf ./lib && tsc",
-    "build-storybook": "build-storybook",
-    "test": "jest"
+    "build-storybook": "build-storybook -o public",
+    "now": "build-storybook -o public && now",
+    "now-prod": "build-storybook -o public && now --prod",
+    "test": "jest",
+    "test-reset": "find . -name '*.snap' -delete",
+    "test-report": "jest --json --outputFile=./.storybook/jest-test-reports.json",
+    "lint": "eslint . --ext .tsx"
   },
@@ -25,3 +30,13 @@ "repository": {
   "homepage": "https://github.com/GifaEriyanto/paku#readme",
-  "dependencies": {},
+  "peerDependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
+  },
+  "dependencies": {
+    "react-icons": "^3.9.0",
+    "react-select": "^3.1.0",
+    "react-window": "^1.8.5"
+  },
   "devDependencies": {
@@ -31,2 +46,4 @@ "@babel/core": "^7.8.6",
     "@babel/preset-typescript": "^7.8.3",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@storybook/addon-a11y": "^5.3.14",
@@ -36,4 +53,5 @@ "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-info": "^5.3.14",
+    "@storybook/addon-jest": "^5.3.14",
     "@storybook/addon-knobs": "^5.3.14",
-    "@storybook/addon-links": "^5.3.14",
+    "@storybook/addon-viewport": "^5.3.17",
     "@storybook/addons": "^5.3.14",
@@ -44,2 +62,3 @@ "@storybook/react": "^5.3.14",
     "@testing-library/react-hooks": "^3.2.1",
+    "@types/faker": "^4.1.11",
     "@types/jest": "^25.1.3",
@@ -49,6 +68,17 @@ "@types/node": "^13.9.0",
     "@types/react-dom": "^16.9.5",
+    "@types/react-select": "^3.0.11",
+    "@types/react-window": "^1.8.1",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-emotion": "^10.0.33",
     "babel-preset-react-app": "^9.1.1",
-    "file-system": "^2.2.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-typescript": "^7.0.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "faker": "^4.1.0",
     "jest": "^25.1.0",
@@ -55,0 +85,0 @@ "react": "^16.13.0",

README.md

 # paku
 
-[WIP] Design System with basic style.
+[WIP] Design System with customizable styles, build on React and Emotion.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

245180

increased by2895.48%

Number of package files

211

increased by711.54%

Lines of code

6131

increased by6156.12%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased byInfinity%

Dev dependency count

43

increased by53.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-icons@^3.9.0

• + Addedreact-select@^3.1.0

• + Addedreact-window@^1.8.5

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/generator@7.24.7(transitive)

• + Added@babel/helper-environment-visitor@7.24.7(transitive)

• + Added@babel/helper-function-name@7.24.7(transitive)

• + Added@babel/helper-hoist-variables@7.24.7(transitive)

• + Added@babel/helper-module-imports@7.24.7(transitive)

• + Added@babel/helper-split-export-declaration@7.24.7(transitive)

• + Added@babel/helper-string-parser@7.24.7(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@babel/parser@7.24.7(transitive)

• + Added@babel/runtime@7.24.7(transitive)

• + Added@babel/template@7.24.7(transitive)

• + Added@babel/traverse@7.24.7(transitive)

• + Added@babel/types@7.24.7(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/core@10.3.1(transitive)

• + Added@emotion/css@10.0.27(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/styled@10.3.0(transitive)

• + Added@emotion/styled-base@10.3.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.4.15(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedcamelcase@5.3.1(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcsstype@2.6.213.1.3(transitive)

• + Addeddebug@4.3.5(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.14.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@2.5.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedms@2.1.2(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-icons@3.11.0(transitive)

• + Addedreact-input-autosize@3.0.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-select@3.2.0(transitive)

• + Addedreact-transition-group@4.4.5(transitive)

• + Addedreact-window@1.8.10(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedyaml@1.10.2(transitive)