diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 00202a10..6e007e3b 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,12 +1,24 @@ # Changelog +## 1.0.0-alpha.24 + +- Update layout for button to center elements. + +## 1.0.0-alpha.23 + +- Remove padding on modal content component. + +## 1.0.0-alpha.22 + +- Implement and export `Modal` component. + ## 1.0.0-alpha.21 -- Format library with `@blockstack/prettier-config` and enforce with CircleCI +- Format library with `@blockstack/prettier-config` and enforce with CircleCI. ## 1.0.0-alpha.20 -- Export more from the library, including types +- Export more from the library, including types. ## 1.0.0-alpha.19 diff --git a/packages/ui/package.json b/packages/ui/package.json index c5e5edd3..98c9c680 100755 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,61 +1,67 @@ { "name": "@blockstack/ui", "description": "Blockstack UI components built using React and styled-components with styled-system.", - "version": "1.0.0-alpha.21", + "version": "1.0.0-alpha.24", "author": "Blockstack (https://blockstack.com/)", + "bundlesize": [ + { + "path": "./dist/**/*.js", + "maxSize": "13 kB" + } + ], "dependencies": { - "@styled-system/css": "5.0.23", - "@types/color": "^3.0.0", - "@types/styled-components": "^4.1.20", - "@types/styled-system": "^5.1.3", + "@styled-system/css": "5.1.4", + "@types/color": "^3.0.1", + "@types/styled-components": "^4.4.2", + "@types/styled-system": "^5.1.4", "@types/styled-system__css": "^5.0.4", "color": "3.1.2", "prop-types": "^15.7.2", "react-spring": "8.0.27", - "styled-system": "5.1.2", + "styled-system": "5.1.4", "use-dark-mode": "2.3.1", "use-events": "^1.4.1" }, "devDependencies": { - "@babel/cli": "7.7.0", - "@babel/core": "7.7.0", - "@babel/plugin-proposal-class-properties": "7.7.0", - "@babel/plugin-proposal-object-rest-spread": "7.6.2", - "@babel/plugin-transform-object-assign": "7.2.0", - "@babel/plugin-transform-runtime": "7.6.2", - "@babel/preset-env": "7.7.1", - "@babel/preset-react": "7.7.0", - "@babel/preset-typescript": "^7.7.0", - "@blockstack/prettier-config": "^0.0.4", - "@typescript-eslint/eslint-plugin": "^2.6.1", - "@typescript-eslint/parser": "^2.6.1", - "babel-plugin-module-resolver": "3.2.0", + "@babel/cli": "7.8.0", + "@babel/core": "7.8.0", + "@babel/plugin-proposal-class-properties": "7.8.0", + "@babel/plugin-proposal-object-rest-spread": "7.8.0", + "@babel/plugin-transform-object-assign": "7.8.0", + "@babel/plugin-transform-runtime": "7.8.0", + "@babel/preset-env": "7.8.2", + "@babel/preset-react": "7.8.0", + "@babel/preset-typescript": "^7.8.0", + "@blockstack/prettier-config": "^0.0.5", + "@typescript-eslint/eslint-plugin": "^2.16.0", + "@typescript-eslint/parser": "^2.16.0", + "babel-plugin-module-resolver": "4.0.0", "babel-plugin-react-remove-properties": "0.3.0", "babel-plugin-transform-react-remove-prop-types": "0.4.24", "bundlesize": "^0.18.0", "cross-env": "6.0.3", - "dtslint": "^1.0.3", - "eslint": "^6.6.0", + "dtslint": "^2.0.5", + "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", - "eslint-config-prettier": "^6.5.0", + "eslint-config-prettier": "^6.9.0", "eslint-import-resolver-typescript": "^2.0.0", - "eslint-plugin-import": "^2.16.0", - "eslint-plugin-prettier": "^3.1.0", - "eslint-plugin-react": "^7.14.3", + "eslint-plugin-import": "^2.20.0", + "eslint-plugin-prettier": "^3.1.2", + "eslint-plugin-react": "^7.17.0", "fs-extra": "8.1.0", - "glob": "7.1.5", + "glob": "7.1.6", "path": "0.12.7", - "prettier": "^1.18.2", - "react": "^16.11.0", - "react-dom": "^16.11.0", + "prettier": "^1.19.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", "rimraf": "3.0.0", "shx": "^0.3.2", - "styled-components": "^4.4.1", - "ts-node": "^8.4.1", - "tsdx": "^0.11.0", + "styled-components": "^5.0.0", + "ts-node": "^8.6.2", + "tsdx": "^0.12.3", "tslint": "^5.20.1", "tslint-config-prettier": "^1.18.0", - "typescript": "^3.7.2" + "typescript": "^3.7.4" }, "homepage": "https://waffle.blockstack.design/", "husky": { diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx index ca5d47ef..41e0b4c4 100644 --- a/packages/ui/src/button/index.tsx +++ b/packages/ui/src/button/index.tsx @@ -72,11 +72,19 @@ const Button = forwardRef, ButtonProps>( {...styles} {...bind} > - + {isLoading && ( diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index c0593b5e..26325724 100755 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -12,6 +12,7 @@ export * from './input-element'; export * from './input-addon'; export * from './form-label'; export * from './form-control'; +export * from './modal'; export * from './spinner'; export * from './stack'; export * from './visually-hidden'; diff --git a/packages/ui/src/modal/index.tsx b/packages/ui/src/modal/index.tsx new file mode 100644 index 00000000..32b562f7 --- /dev/null +++ b/packages/ui/src/modal/index.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { Box } from '../box'; +import { Flex } from '../flex'; +import { ModalContextTypes, ModalProps, WrapperComponentProps } from './types'; + +const ModalContext = React.createContext({ + isOpen: false, +}); + +const useModalState = () => React.useContext(ModalContext); + +const ModalContent: React.FC = ({ children, ...rest }) => ( + + {children} + +); + +const Header = ({ component }: WrapperComponentProps) => + component ? ( + + {component} + + ) : null; + +const Footer = ({ component }: WrapperComponentProps) => + component ? ( + + {component} + + ) : null; + +const Modal: React.FC = ({ + footerComponent: FooterComponent = null, + headerComponent: HeaderComponent = null, + isOpen = false, + children, + noAnimation = false, + ...rest +}) => { + return ( + + +
+ + {children} + +