reactjs pattern library components #91
Conversation
packages/components/.gitignore
Outdated
| @@ -0,0 +1 @@ | |||
| /dist/ | |||
There was a problem hiding this comment.
how about standardising with the rest of the packages and using build/ for builds
README.md
Outdated
| @@ -17,6 +17,7 @@ We hope that those tools will be useful for creation of interesting applications | |||
| | [`@joincivil/core`][core-url] | [](https://www.npmjs.com/package/@joincivil/core) | JS library for interacting with Civil ecosystem | | |||
| | [`@joincivil/tslint-rules`](/packages/tslint-rules) | [](https://www.npmjs.com/package/@joincivil/tslint-rules) | Linting rules for Civil's Typescript packages | | |||
| | [`@joincivil/utils`](/packages/utils) | [](https://www.npmjs.com/package/@joincivil/utils) | Utilities shared between Civil projects used during runtime | | |||
| | [`@joincivil/components`](/packages/components) | [](https://www.npmjs.com/package/@joincivil/components) | ReactJS components used in Civil webapps | | |||
There was a problem hiding this comment.
what's the difference between the components from dapp? Move them from dapp, or merge this package with dapp?
There was a problem hiding this comment.
dapp could use components from this library. mostly this is for civil-web and editor
packages/components/package.json
Outdated
| "build": "tsc", | ||
| "lint": "tslint --exclude \"**/storyFixtures/**\" --project ./", | ||
| "clean": "rimraf build/", | ||
| "prepublish": "yarn build", |
There was a problem hiding this comment.
Use npm-run-all package and do run-s build to make it work with all managers and systems
|
|
||
| import { colors, fonts } from "./styleConstants"; | ||
|
|
||
| export interface ButtonProps { |
There was a problem hiding this comment.
are any of those required?
If so you can use:
interface ButtonProps {
className: string;
...
}
interface ButtonOptions extends Partial<ButtonProps> {
onClick?(ev: any): any;
}
packages/components/src/Button.tsx
Outdated
| disabled?: boolean; | ||
| inputRef?: any; | ||
| name?: string; | ||
| onClick?(ev: any): any; |
There was a problem hiding this comment.
if the result is not important you can use onClick?(ev: any): void and it will work
| background-color: ${colors.accent.CIVIL_BLUE_FADED}; | ||
| color: ${colors.basic.WHITE}; | ||
| } | ||
| :disabled { |
| constructor(props: FullScreenModalProps) { | ||
| super(props); | ||
| this.state = {}; | ||
| if (typeof document !== "undefined") { |
There was a problem hiding this comment.
why not document !== undefined?
There was a problem hiding this comment.
if document is not defined this would throw an error "document is not defined", whereas if you do typeof document it returns the string "undefined"
| CIVIL_BLUE_1: "#2B56FF", | ||
| }, | ||
| accent: { | ||
| CIVIL_YELLOW: "#FF120", // Civil-wide accent color |
There was a problem hiding this comment.
I would enjoy more descriptive names telling what scenarios are they used in
There was a problem hiding this comment.
I copied these from the styled guide. feel free to color (heh) this in a bit more @juliahimmel !
|
|
|
what's the status of this PR? |
|
waiting for @walfly to review |
dankins
force-pushed
the
dankins/components
branch
from
6d140f8
to
dadd1e1
Compare
Pull Request Test Coverage Report for Build 3243
💛 - Coveralls |
No description provided.