├── .babelrc
├── .gitignore
├── LICENSE.md
├── README.md
├── docs
├── App.js
├── entry.js
└── index.html
├── index.js
├── package.json
├── src
├── atoms
│ ├── Avatar.js
│ ├── ButtonGroup.js
│ ├── Collapse.js
│ ├── InputGroup.js
│ ├── StyleReset.js
│ ├── Tab.js
│ ├── anchor
│ │ └── Anchor.js
│ ├── button
│ │ ├── Button.js
│ │ └── Button.style.js
│ ├── checkbox
│ │ ├── Checkbox.js
│ │ └── Switch.js
│ ├── collapse
│ │ └── Collapse.js
│ ├── div
│ │ ├── Div.js
│ │ └── Div.style.js
│ ├── dropdown
│ │ ├── Dropdown.js
│ │ └── DropdownMenu.style.js
│ ├── grid
│ │ ├── Col.js
│ │ ├── Col.style.js
│ │ ├── Container.js
│ │ └── Row.js
│ ├── icon
│ │ ├── Icon.js
│ │ ├── Icon.style.js
│ │ └── iconPaths.js
│ ├── image
│ │ ├── Image.js
│ │ └── Image.style.js
│ ├── input
│ │ ├── Input.js
│ │ ├── Input.style.js
│ │ └── Textarea.js
│ ├── label
│ │ └── Label.js
│ ├── modal
│ │ └── Modal.js
│ ├── notification
│ │ └── Notification.js
│ ├── radiobox
│ │ └── Radiobox.js
│ ├── sidedrawer
│ │ └── SideDrawer.js
│ ├── tag
│ │ └── Tag.js
│ └── text
│ │ ├── Text.js
│ │ └── Text.style.js
├── core
│ ├── THEME.js
│ └── ThemeContext.js
├── functions
│ ├── currentDevice.js
│ └── scrollTo.js
├── index.js
└── style-functions
│ ├── arrayKeyMapToObject.js
│ ├── deviceQuerry.js
│ ├── findBorder.js
│ ├── findDirection.js
│ ├── findRoundedDirection.js
│ ├── makeResponsive.js
│ └── mergeObjects.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /node_modules
3 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Atomize React License
2 |
3 | Copyright (c) 2019
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 |
7 | Atomize Code
8 |
9 |
10 |
11 | UI Design System for React JS
12 |
13 | [](https://www.npmjs.org/package/atomize) [](http://npmjs.com/atomize) [](http://makeapullrequest.com)
14 |
15 |
16 |
17 | [](http://atomizecode.com)
18 |
19 | ## Features
20 |
21 | - UI design system for web apps.
22 | - Elegant and beautiful React components
23 |
24 | ## Environment Support
25 |
26 | - Modern browsers and Internet Explorer 9+
27 | - Server-side Rendering
28 | - [Electron](http://electron.atom.io/)
29 |
30 | | [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron |
31 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
32 | | IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
33 |
34 | ## Install
35 |
36 | ```bash
37 | npm install atomize react-transition-group
38 | ```
39 |
40 | ```bash
41 | yarn add atomize react-transition-group
42 | ```
43 |
44 | ## Usage
45 |
46 | ```jsx
47 | import { Button } from "atomize";
48 | ReactDOM.render(, mountNode);
49 | ```
50 |
51 | ## Links
52 |
53 | - [Home page](http://atomizecode.com/)
54 | - [Getting Started](https://atomizecode.com/docs/react/setup)
55 | - [Showcase](https://atomizecode.com/docs/react/showcase)
56 | - [Contributing](https://atomizecode.com/docs/react/contributing)
57 | - [Theme Setup](https://atomizecode.com/docs/react/theme)
58 | - [Atoms](https://atomizecode.com/docs/react/atoms)
59 | - [Molecules](https://atomizecode.com/docs/react/molecules)
60 | - [Functions](https://atomizecode.com/docs/react/functions)
61 |
62 | ## Examples
63 |
64 | - [Search Box](https://codesandbox.io/s/search-box-0fc6c)
65 | - [Star Rating](https://codesandbox.io/s/star-rating-64ex1)
66 | - [Login Form](https://codesandbox.io/s/login-form-atomize-ezs4u)
67 | - [Payment Card](https://codesandbox.io/s/payment-card-42b3c)
68 | - [Pokedex](https://warpokex.ri7nz.now.sh/) | [Repository](https://github.com/ri7nz/Warpokex)
69 |
70 | ## Development
71 |
72 | To clone locally:
73 |
74 | ```bash
75 | $ git clone git@github.com:Proksh/atomize.git
76 | $ cd atomize
77 | $ npm install // or yarn
78 | $ npm start
79 | ```
80 |
81 | Open your browser and visit http://localhost:8080
82 |
83 | ## Contributing [](http://makeapullrequest.com)
84 |
85 | Read our [contributing guide](https://atomizecode.com/docs/react/contributing) and let's build a better atomize together.
86 |
--------------------------------------------------------------------------------
/docs/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Provider as StyletronProvider, DebugEngine } from "styletron-react";
3 | import { Client as Styletron } from "styletron-engine-atomic";
4 |
5 | const debug =
6 | process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();
7 |
8 | // 1. Create a client engine instance
9 | const engine = new Styletron();
10 |
11 | import { Div, StyleReset, ThemeProvider } from "atomize";
12 |
13 | const theme = {
14 | colors: {
15 | black900: "#1d1d1e"
16 | }
17 | };
18 |
19 | class App extends Component {
20 | render() {
21 | return (
22 |
23 |
24 |
25 |
38 | Start from here
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
46 | export default App;
47 |
--------------------------------------------------------------------------------
/docs/entry.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "react-dom";
3 | import App from "./App";
4 |
5 | render(, document.querySelector("#app"));
6 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Atomize
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./dist");
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "atomize",
3 | "version": "1.0.21",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "files": [
7 | "dist"
8 | ],
9 | "scripts": {
10 | "start": "webpack-dev-server",
11 | "docs": "NODE_ENV=production webpack -p",
12 | "build": "babel src -d dist",
13 | "clean": "rm -rf dist",
14 | "dist": "yarn run clean && yarn run build"
15 | },
16 | "devDependencies": {
17 | "@babel/cli": "^7.4.4",
18 | "@babel/core": "^7.4.5",
19 | "@babel/preset-env": "^7.4.5",
20 | "@babel/preset-react": "^7.0.0",
21 | "babel-loader": "^8.0.6",
22 | "prism-react-renderer": "^0.1.6",
23 | "react": "^16.8.6",
24 | "react-dom": "^16.8.6",
25 | "react-transition-group": "^4.1.1",
26 | "styletron-engine-atomic": "^1.4.0",
27 | "styletron-react": "^5.2.0",
28 | "webpack": "^4.32.2",
29 | "webpack-cli": "^3.3.2",
30 | "webpack-dev-server": "^3.4.1"
31 | },
32 | "peerDependencies": {
33 | "react": ">= 16",
34 | "react-dom": ">= 16",
35 | "react-transition-group": ">= 4",
36 | "styletron-engine-atomic": "^1.4.0",
37 | "styletron-react": "^5.2.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/atoms/Avatar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Div from './Div';
4 | import Icon from './Icon';
5 |
6 | const Avatar = ({ children, iconProp, status, ...rest}) => {
7 | return
9 | {!rest.bgImg && (children ? children : )}
10 | { status && }
18 |
19 | }
20 |
21 | Avatar.defaultProps = {
22 | bg: "brand700",
23 | pos: "relative",
24 | textColor: "white",
25 | d: "flex",
26 | align: "center",
27 | justify: "center",
28 | h: "40px",
29 | w: "40px",
30 | rounded: "circle",
31 | textWeight: "500",
32 | bgSize: "cover"
33 | }
34 |
35 | export default Avatar;
36 |
--------------------------------------------------------------------------------
/src/atoms/ButtonGroup.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { themeVars, colorVar } from "../constants/_variables";
4 | import { functions } from "../functions/_functions";
5 |
6 | import Div from "./Div";
7 |
8 | const BaseButtonGroup = styled.div`
9 | display: flex;
10 | ${props => props.d && functions.makeResponsive("display", props.d)};
11 | ${props =>
12 | props.justify &&
13 | functions.makeResponsive("justify-content", props.justify)};
14 | ${props =>
15 | props.align && functions.makeResponsive("align-items", props.align)};
16 | ${props =>
17 | props.flexDir && functions.makeResponsive("flex-direction", props.flexDir)};
18 | ${props =>
19 | props.flexGrow && functions.makeResponsive("flex-grow", props.flexGrow)};
20 | ${props =>
21 | props.flexWrap && functions.makeResponsive("flex-wrap", props.flexWrap)};
22 | ${props => props.m && functions.findDirection("margin", props.m)};
23 | ${props => props.p && functions.findDirection("padding", props.p)};
24 | ${props => props.rounded && functions.findRoundedDirection(props.rounded)};
25 | ${props => props.border && functions.findDirection("border", props.border)};
26 | ${props =>
27 | props.borderColor &&
28 | functions.makeResponsive("border-color", colorVar[props.borderColor])};
29 | ${props => props.h && functions.makeResponsive("height", props.h)};
30 | ${props => props.maxH && functions.makeResponsive("max-height", props.maxH)};
31 | ${props => props.minH && functions.makeResponsive("min-height", props.minH)};
32 | ${props => props.w && functions.makeResponsive("width", props.w)};
33 | ${props => props.maxW && functions.makeResponsive("max-width", props.maxW)};
34 | ${props => props.minW && functions.makeResponsive("min-width", props.minW)};
35 | ${props => props.cursor && functions.makeResponsive("cursor", props.cursor)};
36 | ${props =>
37 | props.bg && functions.makeResponsive("background", colorVar[props.bg])};
38 | ${props =>
39 | props.textColor &&
40 | functions.makeResponsive("color", colorVar[props.textColor])};
41 | ${props =>
42 | props.textWeight && functions.makeResponsive("weight", props.textWeight)};
43 | ${props =>
44 | props.textAlign && functions.makeResponsive("align", props.textAlign)};
45 | ${props =>
46 | props.shadow && `box-shadow: ${themeVars["shadows"][props.shadow]}`};
47 |
48 | button {
49 | margin-left: -1px;
50 | touch-action: manipulation;
51 | border-radius: 0;
52 |
53 | :hover {
54 | z-index: 2;
55 | }
56 | :nth-child(1) {
57 | border-top-left-radius: ${props => themeVars["rounded"][props.rounded]};
58 | border-bottom-left-radius: ${props =>
59 | themeVars["rounded"][props.rounded]};
60 | }
61 | :last-child {
62 | border-top-right-radius: ${props => themeVars["rounded"][props.rounded]};
63 | border-bottom-right-radius: ${props =>
64 | themeVars["rounded"][props.rounded]};
65 | }
66 | }
67 |
68 | :hover {
69 | ${props =>
70 | props.hoverBg &&
71 | functions.makeResponsive("background", colorVar[props.hoverBg])};
72 | ${props =>
73 | props.hoverTextColor &&
74 | functions.makeResponsive("color", colorVar[props.hoverTextColor])};
75 | ${props =>
76 | props.hoverBorderColor &&
77 | functions.makeResponsive(
78 | "border-color",
79 | colorVar[props.hoverBorderColor]
80 | )};
81 | ${props =>
82 | props.hoverShadow &&
83 | `box-shadow: ${themeVars["shadows"][props.hoverShadow]}`};
84 | }
85 | `;
86 |
87 | const ButtonGroup = ({ ...rest }) => {
88 | return {rest.children};
89 | };
90 |
91 | ButtonGroup.defaultProps = {
92 | flexWrap: "wrap",
93 | rounded: "md"
94 | };
95 |
96 | export default ButtonGroup;
97 |
--------------------------------------------------------------------------------
/src/atoms/Collapse.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Transition } from "react-transition-group";
3 |
4 | import Div from "./Div";
5 |
6 | export default class Collapse extends Component {
7 | constructor() {
8 | super();
9 |
10 | this.state = {
11 | defaultHeight: 0
12 | };
13 |
14 | this.innerDiv = React.createRef();
15 | this.onEntering = this.onEntering.bind(this);
16 | this.onExiting = this.onExiting.bind(this);
17 | }
18 |
19 | /**
20 | * Set State for Height on Enter
21 | */
22 | onEntering() {
23 | this.setState({ defaultHeight: this.innerDiv.current.clientHeight });
24 |
25 | // Start Function if recieved a onEntering Props
26 | const { onEntering } = this.props;
27 | if (onEntering) onEntering();
28 | }
29 |
30 | /**
31 | * Set State for Height on Exit
32 | */
33 | onExiting() {
34 | this.setState({ defaultHeight: this.innerDiv.current.clientHeight });
35 |
36 | // Start Function if recieved a onExiting Props
37 | const { onExiting } = this.props;
38 | if (onExiting) onExiting();
39 | }
40 |
41 | render() {
42 | const { defaultHeight } = this.state;
43 | const { p, children, isOpen, ...rest } = this.props;
44 |
45 | /**
46 | * Duration for the transition
47 | */
48 | const duration = 400;
49 |
50 | /**
51 | * Default Style for Backlayer
52 | */
53 | const defaultStyle = {
54 | transition: `height ${duration}ms ease-in-out`,
55 | height: 0,
56 | opacity: 0
57 | };
58 |
59 | /**
60 | * Trasition Styles for Backlayer
61 | */
62 | const transitionStyles = {
63 | entering: { opacity: 0, height: 0 },
64 | entered: { opacity: 1, height: defaultHeight },
65 | exiting: { opacity: 0, height: 0 },
66 | exited: { opacity: 0, height: 0 }
67 | };
68 |
69 | return (
70 |
76 | {state => (
77 |
87 | )}
88 |
89 | );
90 | }
91 | }
92 |
93 | Collapse.defaultProps = {
94 | m: { y: 0 },
95 | p: { y: 0 },
96 | overflow: "hidden"
97 | };
98 |
--------------------------------------------------------------------------------
/src/atoms/InputGroup.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { themeVars, colorVar } from "../constants/_variables";
4 | import { functions } from "../functions/_functions";
5 |
6 | const BaseInputGroup = styled.div`
7 | display: flex;
8 | ${props => props.d && functions.makeResponsive("display", props.d)};
9 | ${props =>
10 | props.justify &&
11 | functions.makeResponsive("justify-content", props.justify)};
12 | ${props =>
13 | props.align && functions.makeResponsive("align-items", props.align)};
14 | ${props =>
15 | props.flexDir && functions.makeResponsive("flex-direction", props.flexDir)};
16 | ${props =>
17 | props.flexGrow && functions.makeResponsive("flex-grow", props.flexGrow)};
18 | ${props =>
19 | props.flexWrap && functions.makeResponsive("flex-wrap", props.flexWrap)};
20 | ${props => props.m && functions.findDirection("margin", props.m)};
21 | ${props => props.p && functions.findDirection("padding", props.p)};
22 | ${props => props.rounded && functions.findRoundedDirection(props.rounded)};
23 | ${props => props.border && functions.findDirection("border", props.border)};
24 | ${props =>
25 | props.borderColor &&
26 | functions.makeResponsive("border-color", colorVar[props.borderColor])};
27 | ${props => props.h && functions.makeResponsive("height", props.h)};
28 | ${props => props.maxH && functions.makeResponsive("max-height", props.maxH)};
29 | ${props => props.minH && functions.makeResponsive("min-height", props.minH)};
30 | ${props => props.w && functions.makeResponsive("width", props.w)};
31 | ${props => props.maxW && functions.makeResponsive("max-width", props.maxW)};
32 | ${props => props.minW && functions.makeResponsive("min-width", props.minW)};
33 | ${props => props.cursor && functions.makeResponsive("cursor", props.cursor)};
34 | ${props =>
35 | props.bg && functions.makeResponsive("background", colorVar[props.bg])};
36 | ${props =>
37 | props.textColor &&
38 | functions.makeResponsive("color", colorVar[props.textColor])};
39 | ${props =>
40 | props.textWeight && functions.makeResponsive("weight", props.textWeight)};
41 | ${props =>
42 | props.textAlign && functions.makeResponsive("align", props.textAlign)};
43 | ${props =>
44 | props.shadow && `box-shadow: ${themeVars["shadows"][props.shadow]}`};
45 |
46 | div {
47 | margin-left: -1px;
48 | touch-action: manipulation;
49 | border-radius: 0;
50 |
51 | input {
52 | border-radius: 0;
53 | }
54 | :nth-child(1) input {
55 | border-top-left-radius: ${props => themeVars["rounded"][props.rounded]};
56 | border-bottom-left-radius: ${props =>
57 | themeVars["rounded"][props.rounded]};
58 | }
59 | :last-child input {
60 | border-top-right-radius: ${props => themeVars["rounded"][props.rounded]};
61 | border-bottom-right-radius: ${props =>
62 | themeVars["rounded"][props.rounded]};
63 | }
64 | }
65 |
66 | button {
67 | margin-left: -1px;
68 | touch-action: manipulation;
69 | border-radius: 0;
70 |
71 | :hover {
72 | z-index: 2;
73 | }
74 | :nth-child(1) {
75 | border-top-left-radius: ${props => themeVars["rounded"][props.rounded]};
76 | border-bottom-left-radius: ${props =>
77 | themeVars["rounded"][props.rounded]};
78 | }
79 | :last-child {
80 | border-top-right-radius: ${props => themeVars["rounded"][props.rounded]};
81 | border-bottom-right-radius: ${props =>
82 | themeVars["rounded"][props.rounded]};
83 | }
84 | }
85 |
86 | :hover {
87 | ${props =>
88 | props.hoverBg &&
89 | functions.makeResponsive("background", colorVar[props.hoverBg])};
90 | ${props =>
91 | props.hoverTextColor &&
92 | functions.makeResponsive("color", colorVar[props.hoverTextColor])};
93 | ${props =>
94 | props.hoverBorderColor &&
95 | functions.makeResponsive(
96 | "border-color",
97 | colorVar[props.hoverBorderColor]
98 | )};
99 | ${props =>
100 | props.hoverShadow &&
101 | `box-shadow: ${themeVars["shadows"][props.hoverShadow]}`};
102 | }
103 | `;
104 |
105 | const InputGroup = ({ ...rest }) => {
106 | return {rest.children};
107 | };
108 |
109 | InputGroup.defaultProps = {
110 | flexWrap: "wrap",
111 | rounded: "default"
112 | };
113 |
114 | export default InputGroup;
115 |
--------------------------------------------------------------------------------
/src/atoms/StyleReset.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { ThemeContext } from "../core/ThemeContext";
3 |
4 | class StyleReset extends Component {
5 | render() {
6 | return (
7 |
36 | );
37 | }
38 | }
39 |
40 | StyleReset.contextType = ThemeContext;
41 |
42 | export default StyleReset;
43 |
--------------------------------------------------------------------------------
/src/atoms/Tab.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Div from "./Div";
3 |
4 | const Tab = ({
5 | children,
6 | prefix,
7 | suffix,
8 | active,
9 | textColor,
10 | activeDir,
11 | activeLineBg,
12 | bg,
13 | ...rest
14 | }) => {
15 | return (
16 |
21 | {children}
22 |
35 |
30 | {isLoading ? (
31 |
32 | ) : (
33 |
42 | )}
43 |
{
157 | this.onHover(true);
158 | }}
159 | onMouseLeave={() => {
160 | this.onHover(false);
161 | }}
162 | zIndex={zIndex}
163 | pos="relative"
164 | >
165 |
(this.node = node)}
170 | onClick={this.handleClick}
171 | onKeyDown={this.onKeyDown}
172 | borderColor={showDropdown ? focusBorderColor : borderColor}
173 | bg={showDropdown ? focusBg : bg}
174 | {...rest}
175 | >
176 | {prefix}
177 | {children}
178 | {isLoading ? (
179 |
180 | ) : isOpen ? (
181 | openSuffix
182 | ) : (
183 | closeSuffix
184 | )}
185 |
186 |
192 | {state => (
193 |
208 | {menu}
209 |
210 | )}
211 |
212 |
14 | {props.children}
15 |
16 | );
17 | });
18 |
19 | Row.defaultProps = {
20 | d: "flex",
21 | flexWrap: "wrap"
22 | };
23 |
24 | export default Row;
25 |
--------------------------------------------------------------------------------
/src/atoms/icon/Icon.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { styled } from "styletron-react";
3 | import { ThemeContext } from "../../core/ThemeContext";
4 | import computeIconStyle from "./Icon.style";
5 | import { iconPaths } from "./iconPaths";
6 |
7 | const Icon = React.forwardRef((props, ref) => {
8 | const [hovered, setHover] = useState(0);
9 | return (
10 |
11 | {value => {
12 | const IconName = iconPaths[props.name];
13 | const output = computeIconStyle(props, value);
14 | return (
15 | setHover(1)}
17 | onMouseLeave={() => setHover(0)}
18 | ref={ref}
19 | viewBox="0 0 24 24"
20 | {...output[0]}
21 | $styleArray={output[1]}
22 | >
23 |
30 |
31 | );
32 | }}
33 |
34 | );
35 | });
36 |
37 | const BasicIcon = styled("svg", props => {
38 | return {
39 | ...props.$styleArray
40 | };
41 | });
42 |
43 | Icon.defaultProps = {
44 | size: "1.5rem",
45 | color: "black"
46 | };
47 |
48 | export default Icon;
49 |
--------------------------------------------------------------------------------
/src/atoms/icon/Icon.style.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "../../style-functions/makeResponsive";
2 | import findDirection from "../../style-functions/findDirection";
3 | import arrayKeyMapToObject from "../../style-functions/arrayKeyMapToObject";
4 |
5 | const computeIconStyle = (props, context) => {
6 | const {
7 | d,
8 | size,
9 | m,
10 | p,
11 | pos,
12 | transform,
13 | transformOrigin,
14 | order,
15 | top,
16 | bottom,
17 | left,
18 | right,
19 | cursor,
20 | name,
21 | color,
22 | hoverColor,
23 | zIndex,
24 | opacity,
25 | transition,
26 | ...rest
27 | } = props;
28 |
29 | const style = [
30 | { boxSizing: "border-box" },
31 | findDirection(m, "margin"),
32 | findDirection(p, "padding"),
33 | findDirection(size, "height"),
34 | findDirection(size, "width"),
35 | findDirection(size, "min-width"),
36 | findDirection(size, "min-height"),
37 | makeResponsive(d, "display"),
38 | makeResponsive(pos, "position"),
39 | makeResponsive(top, "top"),
40 | makeResponsive(bottom, "bottom"),
41 | makeResponsive(left, "left"),
42 | makeResponsive(right, "right"),
43 | makeResponsive(order, "order"),
44 | makeResponsive(cursor, "cursor"),
45 | makeResponsive(transform, "transform"),
46 | makeResponsive(transformOrigin, "transform-origin"),
47 | makeResponsive(zIndex, "z-index"),
48 | makeResponsive(opacity, "opacity"),
49 | {
50 | ":hover": {
51 | path: {
52 | ...makeResponsive(transition, "transition", context.transition),
53 | ...makeResponsive(hoverColor, "fill", context.colors)
54 | },
55 | circle: {
56 | ...makeResponsive(transition, "transition", context.transition),
57 | ...makeResponsive(hoverColor, "fill", context.colors)
58 | }
59 | }
60 | }
61 | ];
62 |
63 | return [rest, arrayKeyMapToObject(style)];
64 | };
65 |
66 | export default computeIconStyle;
67 |
--------------------------------------------------------------------------------
/src/atoms/icon/iconPaths.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const iconPaths = {
4 | Add: ({ color, ...rest }) => {
5 | return (
6 |
12 | );
13 | },
14 | AlertSolid: ({ color, ...rest }) => {
15 | return (
16 |
22 | );
23 | },
24 | Alert: ({ color, ...rest }) => {
25 | return (
26 |
32 | );
33 | },
34 | Attachment: ({ color, ...rest }) => {
35 | return (
36 |
42 | );
43 | },
44 | Back: ({ color, ...rest }) => {
45 | return (
46 |
52 | );
53 | },
54 | Bag: ({ color, ...rest }) => {
55 | return (
56 |
62 | );
63 | },
64 | Behance: ({ color, ...rest }) => {
65 | return (
66 |
72 | );
73 | },
74 | BookmarkSolid: ({ color, ...rest }) => {
75 | return (
76 |
82 | );
83 | },
84 | Bookmark: ({ color, ...rest }) => {
85 | return (
86 |
92 | );
93 | },
94 | Bulk: ({ color, ...rest }) => {
95 | return (
96 |
101 | );
102 | },
103 | CameraSolid: ({ color, ...rest }) => {
104 | return (
105 |
111 | );
112 | },
113 | Camera: ({ color, ...rest }) => {
114 | return (
115 |
121 | );
122 | },
123 | Card: ({ color, ...rest }) => {
124 | return (
125 |
131 | );
132 | },
133 | Checked: ({ color, ...rest }) => {
134 | return (
135 |
141 | );
142 | },
143 | CloseSolid: ({ color, ...rest }) => {
144 | return (
145 |
151 | );
152 | },
153 | Close: ({ color, ...rest }) => {
154 | return (
155 |
161 | );
162 | },
163 | Coin: ({ color, ...rest }) => {
164 | return (
165 |
171 | )
172 | },
173 | Cross: ({ color, ...rest }) => {
174 | return (
175 |
181 | );
182 | },
183 | DeleteSolid: ({ color, ...rest }) => {
184 | return (
185 |
191 | );
192 | },
193 | Delete: ({ color, ...rest }) => {
194 | return (
195 |
201 | );
202 | },
203 | Dot: ({ color, ...rest }) => {
204 | return (
205 |
206 | );
207 | },
208 | DownArrowCircle: ({ color, secColor, ...rest }) => {
209 | return (
210 |
211 |
212 |
217 |
218 | );
219 | },
220 | DownArrowSolid: ({ color, ...rest }) => {
221 | return (
222 |
228 | );
229 | },
230 | DownArrow: ({ color, ...rest }) => {
231 | return (
232 |
238 | );
239 | },
240 | Down: ({ color, ...rest }) => {
241 | return (
242 |
248 | );
249 | },
250 | Download: ({ color, ...rest }) => {
251 | return (
252 |
258 | );
259 | },
260 | Draft: ({ color, ...rest }) => {
261 | return (
262 |
268 | );
269 | },
270 | Dribbble: ({ color, ...rest }) => {
271 | return (
272 |
278 | );
279 | },
280 | EditSolid: ({ color, ...rest }) => {
281 | return (
282 |
288 | );
289 | },
290 | Edit: ({ color, ...rest }) => {
291 | return (
292 |
298 | );
299 | },
300 | Email: ({ color, ...rest }) => {
301 | return (
302 |
308 | );
309 | },
310 | Expand: ({ color, ...rest }) => {
311 | return (
312 |
318 | );
319 | },
320 | External: ({ color, ...rest }) => {
321 | return (
322 |
328 | );
329 | },
330 | EyeSolid: ({ color, ...rest }) => {
331 | return (
332 |
338 | );
339 | },
340 | Eye: ({ color, ...rest }) => {
341 | return (
342 |
348 | );
349 | },
350 | Facebook: ({ color, ...rest }) => {
351 | return (
352 |
358 | );
359 | },
360 | FolderSolid: ({ color, ...rest }) => {
361 | return (
362 |
368 | );
369 | },
370 | Folder: ({ color, ...rest }) => {
371 | return (
372 |
378 | );
379 | },
380 | Github: ({ color, ...rest }) => {
381 | return (
382 |
388 | );
389 | },
390 | HeartSolid: ({ color, ...rest }) => {
391 | return (
392 |
398 | );
399 | },
400 | Heart: ({ color, ...rest }) => {
401 | return (
402 |
408 | );
409 | },
410 | History: ({ color, ...rest }) => {
411 | return (
412 |
417 | );
418 | },
419 | HomeSolid2: ({ color, ...rest }) => {
420 | return (
421 |
427 | );
428 | },
429 | HomeSolid: ({ color, ...rest }) => {
430 | return (
431 |
437 | );
438 | },
439 | Home: ({ color, ...rest }) => {
440 | return (
441 |
447 | );
448 | },
449 | InfoSolid: ({ color, ...rest }) => {
450 | return (
451 |
457 | );
458 | },
459 | Info: ({ color, ...rest }) => {
460 | return (
461 |
467 | );
468 | },
469 | Instagram: ({ color, ...rest }) => {
470 | return (
471 |
477 | );
478 | },
479 | LeftArrowSolid: ({ color, ...rest }) => {
480 | return (
481 |
487 | );
488 | },
489 | LeftArrow: ({ color, ...rest }) => {
490 | return (
491 |
497 | );
498 | },
499 | LeftUp: ({ color, ...rest }) => {
500 | return (
501 |
507 | );
508 | },
509 | Link: ({ color, ...rest }) => {
510 | return (
511 |
517 | );
518 | },
519 | Linkedin: ({ color, ...rest }) => {
520 | return (
521 |
527 | );
528 | },
529 | Loading: ({ color, ...rest }) => {
530 | return (
531 |
537 |
546 |
547 | );
548 | },
549 | Loading2: ({ color, ...rest }) => {
550 | return (
551 | <>
552 |
553 |
561 |
562 |
563 |
571 |
572 |
573 |
581 |
582 |
583 | );
584 | },
585 | Loading3: ({ color, ...rest }) => {
586 | return (
587 | <>
588 |
589 |
596 |
597 |
598 |
605 |
606 |
607 |
614 |
615 |
616 | );
617 | },
618 | LocationSolid: ({ color, ...rest }) => {
619 | return (
620 |
626 | );
627 | },
628 | Location: ({ color, ...rest }) => {
629 | return (
630 |
636 | );
637 | },
638 | LockSolid: ({ color, ...rest }) => {
639 | return (
640 |
646 | );
647 | },
648 | Lock: ({ color, ...rest }) => {
649 | return (
650 |
655 | );
656 | },
657 | Logout: ({ color, ...rest }) => {
658 | return (
659 |
664 | );
665 | },
666 | LongLeft: ({ color, ...rest }) => {
667 | return (
668 |
674 | );
675 | },
676 | LongRight: ({ color, ...rest }) => {
677 | return (
678 |
684 | );
685 | },
686 | Mail: ({ color, ...rest }) => {
687 | return (
688 |
693 | );
694 | },
695 | MasterCard: ({ color, ...rest }) => {
696 | return (
697 |
698 |
702 |
706 |
710 |
711 | );
712 | },
713 | Menu: ({ color, ...rest }) => {
714 | return (
715 |
721 | );
722 | },
723 | MessageSolid: ({ color, ...rest }) => {
724 | return (
725 |
731 | );
732 | },
733 | Message: ({ color, ...rest }) => {
734 | return (
735 |
740 | );
741 | },
742 | Minus: ({ color, ...rest }) => {
743 | return (
744 |
750 | );
751 | },
752 | Money: ({ color, ...rest }) => {
753 | return(
754 |
760 | );
761 | },
762 | Next: ({ color, ...rest }) => {
763 | return (
764 |
771 | );
772 | },
773 | NotificationSolid: ({ color, ...rest }) => {
774 | return (
775 |
781 | );
782 | },
783 | Notification: ({ color, ...rest }) => {
784 | return (
785 |
791 | );
792 | },
793 | OptionsVertical: ({ color, ...rest }) => {
794 | return (
795 |
801 | );
802 | },
803 | Options: ({ color, ...rest }) => {
804 | return (
805 |
811 | );
812 | },
813 | Photo: ({ color, ...rest }) => {
814 | return (
815 |
821 | );
822 | },
823 | Pause: ({ color, ...rest }) => {
824 | return (
825 |
830 | );
831 | },
832 | Play: ({ color, ...rest }) => {
833 | return (
834 |
839 | );
840 | },
841 | PlayNext: ({ color, ...rest }) => {
842 | return (
843 |
849 | );
850 | },
851 | PlayPrev: ({ color, ...rest }) => {
852 | return (
853 |
859 | );
860 | },
861 | Plus: ({ color, ...rest }) => {
862 | return (
863 |
869 | );
870 | },
871 | Power: ({ color, ...rest }) => {
872 | return (
873 |
878 | );
879 | },
880 | Print: ({ color, ...rest }) => {
881 | return (
882 |
887 | );
888 | },
889 | QuestionSolid: ({ color, ...rest }) => {
890 | return (
891 |
896 | );
897 | },
898 | Question: ({ color, ...rest }) => {
899 | return (
900 |
906 | );
907 | },
908 | Refresh: ({ color, ...rest }) => {
909 | return (
910 |
916 | );
917 | },
918 | RemoveSolid: ({ color, ...rest }) => {
919 | return (
920 |
926 | );
927 | },
928 | Remove: ({ color, ...rest }) => {
929 | return (
930 |
936 | );
937 | },
938 | Rename: ({ color, ...rest }) => {
939 | return (
940 |
946 | );
947 | },
948 | RightArrowSolid: ({ color, ...rest }) => {
949 | return (
950 |
956 | );
957 | },
958 | RightArrow: ({ color, ...rest }) => {
959 | return (
960 |
966 | );
967 | },
968 | RightUp: ({ color, ...rest }) => {
969 | return (
970 |
976 | );
977 | },
978 | Search: ({ color, ...rest }) => {
979 | return (
980 |
986 | );
987 | },
988 | SettingsSolid: ({ color, ...rest }) => {
989 | return (
990 |
996 | );
997 | },
998 | Settings: ({ color, ...rest }) => {
999 | return (
1000 |
1006 | );
1007 | },
1008 | StarSolid: ({ color, ...rest }) => {
1009 | return (
1010 |
1016 | );
1017 | },
1018 | Status: ({ color, ...rest }) => {
1019 | return (
1020 |
1021 |
1022 |
1023 |
1031 |
1036 |
1041 |
1046 |
1051 |
1052 |
1057 |
1062 |
1063 |
1064 |
1065 |
1066 |
1067 |
1068 |
1073 |
1074 |
1075 |
1076 | );
1077 | },
1078 | Stop: ({ color, ...rest }) => {
1079 | return (
1080 |
1086 | );
1087 | },
1088 | Store: ({ color, ...rest }) => {
1089 | return (
1090 |
1095 | );
1096 | },
1097 | Success: ({ color, ...rest }) => {
1098 | return (
1099 |
1105 | );
1106 | },
1107 | TimestampSolid: ({ color, ...rest }) => {
1108 | return (
1109 |
1115 | );
1116 | },
1117 | Timestamp: ({ color, ...rest }) => {
1118 | return (
1119 |
1125 | );
1126 | },
1127 | Twitter: ({ color, ...rest }) => {
1128 | return (
1129 |
1135 | );
1136 | },
1137 | UpArrowSolid: ({ color, ...rest }) => {
1138 | return (
1139 |
1145 | );
1146 | },
1147 | UpArrow: ({ color, ...rest }) => {
1148 | return (
1149 |
1155 | );
1156 | },
1157 | Up: ({ color, ...rest }) => {
1158 | return (
1159 |
1165 | );
1166 | },
1167 | Upload: ({ color, ...rest }) => {
1168 | return (
1169 |
1175 | );
1176 | },
1177 | UserCircle: ({ color, ...rest }) => {
1178 | return (
1179 |
1185 | );
1186 | },
1187 | UserSolid: ({ color, ...rest }) => {
1188 | return (
1189 |
1195 | );
1196 | },
1197 | User: ({ color, ...rest }) => {
1198 | return (
1199 |
1205 | );
1206 | },
1207 | Visa: ({ color, ...rest }) => {
1208 | return (
1209 |
1210 |
1211 |
1215 |
1219 |
1223 |
1227 |
1231 |
1235 |
1236 | );
1237 | },
1238 | CBChecked: ({ color, ...rest }) => {
1239 | return (
1240 |
1245 | );
1246 | },
1247 | CBDisabled: ({ color, ...rest }) => {
1248 | return (
1249 |
1255 | );
1256 | },
1257 | CBIndetermine: ({ color, ...rest }) => {
1258 | return (
1259 |
1265 | );
1266 | },
1267 | CBUnchecked: ({ color, ...rest }) => {
1268 | return (
1269 |
1275 | );
1276 | },
1277 | RBChecked: ({ color, ...rest }) => {
1278 | return (
1279 |
1285 | );
1286 | },
1287 | RBUnchecked: ({ color, ...rest }) => {
1288 | return (
1289 |
1294 | );
1295 | }
1296 | };
1297 |
--------------------------------------------------------------------------------
/src/atoms/image/Image.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { styled } from "styletron-react";
3 | import { ThemeContext } from "../../core/ThemeContext";
4 | import computeImageStyle from "./Image.style";
5 |
6 | const Image = React.forwardRef((props, ref) => {
7 | return (
8 |
9 | {value => {
10 | const output = computeImageStyle(props, value);
11 | return ;
12 | }}
13 |
14 | );
15 | });
16 |
17 | const BaseImg = styled("img", props => {
18 | return {
19 | ...props.$styleArray
20 | };
21 | });
22 |
23 | Image.defaultProps = {
24 | w: "100%"
25 | };
26 |
27 | export default Image;
28 |
--------------------------------------------------------------------------------
/src/atoms/image/Image.style.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "../../style-functions/makeResponsive";
2 | import findDirection from "../../style-functions/findDirection";
3 | import arrayKeyMapToObject from "../../style-functions/arrayKeyMapToObject";
4 | import findRoundedDirection from "../../style-functions/findRoundedDirection";
5 | import findBorder from "../../style-functions/findBorder";
6 |
7 | const computeImageStyle = (props, context) => {
8 | const {
9 | d,
10 | pos,
11 | top,
12 | bottom,
13 | left,
14 | right,
15 | flexGrow,
16 | order,
17 | m,
18 | p,
19 | rounded,
20 | border,
21 | borderColor,
22 | h,
23 | maxH,
24 | minH,
25 | w,
26 | minW,
27 | maxW,
28 | cursor,
29 | shadow,
30 | transition,
31 | transform,
32 | transformOrigin,
33 | zIndex,
34 | opacity,
35 | hoverBorderColor,
36 | hoverShadow,
37 | theme,
38 | ...rest
39 | } = props;
40 |
41 | const style = [
42 | findRoundedDirection(rounded, context.rounded),
43 | findDirection(m, "margin"),
44 | findDirection(p, "padding"),
45 | makeResponsive(d, "display"),
46 | makeResponsive(pos, "position"),
47 | makeResponsive(top, "top"),
48 | makeResponsive(bottom, "bottom"),
49 | makeResponsive(left, "left"),
50 | makeResponsive(right, "right"),
51 | makeResponsive(flexGrow, "flex"),
52 | makeResponsive(order, "order"),
53 | makeResponsive(h, "height"),
54 | makeResponsive(maxH, "max-height"),
55 | makeResponsive(minH, "min-height"),
56 | makeResponsive(w, "width"),
57 | makeResponsive(minW, "min-width"),
58 | makeResponsive(maxW, "max-width"),
59 | makeResponsive(cursor, "cursor"),
60 | findBorder(border, borderColor, context.colors),
61 | makeResponsive(transform, "transform"),
62 | makeResponsive(transformOrigin, "transform-origin"),
63 | makeResponsive(shadow, "box-shadow", context.shadows),
64 | makeResponsive(transition, "transition", context.transition),
65 | makeResponsive(zIndex, "z-index"),
66 | makeResponsive(opacity, "opacity"),
67 | {
68 | ":hover": {
69 | ...makeResponsive(hoverBorderColor, "border-color", context.colors),
70 | ...makeResponsive(hoverShadow, "box-shadow", context.shadows)
71 | }
72 | }
73 | ];
74 |
75 | return [rest, arrayKeyMapToObject(style)];
76 | };
77 |
78 | export default computeImageStyle;
79 |
--------------------------------------------------------------------------------
/src/atoms/input/Input.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { styled } from "styletron-react";
3 | import { ThemeContext } from "../../core/ThemeContext";
4 | import computeInputStyle from "./Input.style";
5 | import Div from "../div/Div";
6 | import Icon from "../icon/Icon";
7 |
8 | const Input = React.forwardRef((props, ref) => {
9 | return (
10 |
11 | {value => {
12 | const output = computeInputStyle(props, value);
13 | const {
14 | children,
15 | prefix,
16 | isLoading,
17 | suffix,
18 | order,
19 | tag,
20 | ...rest
21 | } = output[0];
22 | return (
23 |
33 | {prefix}
34 |
35 | {suffix}
36 | {isLoading && (
37 |
45 | )}
46 |
47 | );
48 | }}
49 |
50 | );
51 | });
52 |
53 | const BasicInput = styled("input", props => {
54 | return {
55 | ...props.$styleArray
56 | };
57 | });
58 |
59 | Input.contextType = ThemeContext;
60 |
61 | Input.defaultProps = {
62 | tag: "input",
63 | d: "flex",
64 | p: { x: "0.75rem" },
65 | textSize: "body",
66 | rounded: "md",
67 | border: "1px solid",
68 | borderColor: "gray500",
69 | h: "2.5rem",
70 | w: "100%",
71 | bg: "white",
72 | textColor: "dark",
73 | textWeight: "500",
74 | focusBorderColor: "gray900",
75 | placeholderTextColor: "light",
76 | transition: "true"
77 | };
78 |
79 | export default Input;
80 |
--------------------------------------------------------------------------------
/src/atoms/input/Input.style.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "../../style-functions/makeResponsive";
2 | import findDirection from "../../style-functions/findDirection";
3 | import arrayKeyMapToObject from "../../style-functions/arrayKeyMapToObject";
4 | import findRoundedDirection from "../../style-functions/findRoundedDirection";
5 | import findBorder from "../../style-functions/findBorder";
6 |
7 | const computeDivStyle = (props, context) => {
8 | const {
9 | pos,
10 | top,
11 | bottom,
12 | left,
13 | right,
14 | justify,
15 | align,
16 | flexDir,
17 | flexGrow,
18 | flexWrap,
19 | order,
20 | p,
21 | rounded,
22 | border,
23 | borderColor,
24 | h,
25 | maxH,
26 | minH,
27 | w,
28 | minW,
29 | maxW,
30 | cursor,
31 | bg,
32 | bgImg,
33 | bgSize,
34 | bgRepeat,
35 | bgPos,
36 | textSize,
37 | textColor,
38 | textWeight,
39 | textAlign,
40 | textTransform,
41 | fontFamily,
42 | shadow,
43 | transition,
44 | transform,
45 | transformOrigin,
46 | zIndex,
47 | overflow,
48 | opacity,
49 | hoverBg,
50 | hoverTextColor,
51 | hoverBorderColor,
52 | hoverShadow,
53 | isOpen,
54 | hover,
55 | offset,
56 | size,
57 | targetHover,
58 | theme,
59 | focusBg,
60 | focusBorderColor,
61 | focusTextColor,
62 | focusShadow,
63 | placeholderTextColor,
64 | ...rest
65 | } = props;
66 |
67 | const style = [
68 | { boxSizing: "border-box" },
69 | findRoundedDirection(rounded, context.rounded),
70 | findDirection(p, "padding"),
71 | makeResponsive(pos, "position"),
72 | makeResponsive(top, "top"),
73 | makeResponsive(bottom, "bottom"),
74 | makeResponsive(left, "left"),
75 | makeResponsive(right, "right"),
76 | makeResponsive(justify, "justify-content"),
77 | makeResponsive(align, "align-items"),
78 | makeResponsive(flexDir, "flex-direction"),
79 | makeResponsive(flexGrow, "flex"),
80 | makeResponsive(flexWrap, "flex-wrap"),
81 | makeResponsive(order, "order"),
82 | makeResponsive(h, "height"),
83 | makeResponsive(maxH, "max-height"),
84 | makeResponsive(minH, "min-height"),
85 | makeResponsive(w, "width"),
86 | makeResponsive(minW, "min-width"),
87 | makeResponsive(maxW, "max-width"),
88 | makeResponsive(cursor, "cursor"),
89 | findBorder(border, borderColor, context.colors),
90 | makeResponsive(bg, "background", context.colors),
91 | bgImg ? { backgroundImage: `url(${bgImg}` } : undefined,
92 | makeResponsive(bgSize, "background-size"),
93 | makeResponsive(bgRepeat, "background-repeat"),
94 | makeResponsive(bgPos, "background-position"),
95 | makeResponsive(bgRepeat, "background-repeat"),
96 | makeResponsive(bgRepeat, "background-repeat"),
97 | makeResponsive(textColor, "color", context.colors),
98 | makeResponsive(textWeight, "font-weight"),
99 | makeResponsive(textAlign, "text-align"),
100 | makeResponsive(textTransform, "text-transform"),
101 | makeResponsive(fontFamily, "font-family", context.fontFamily),
102 | makeResponsive(transform, "transform"),
103 | makeResponsive(transformOrigin, "transform-origin"),
104 | makeResponsive(shadow, "box-shadow", context.shadows),
105 | makeResponsive(transition, "transition", context.transition),
106 | makeResponsive(textSize, "font-size", context.textSize.size),
107 | makeResponsive(textSize, "line-height", context.textSize.height),
108 | makeResponsive(zIndex, "z-index"),
109 | makeResponsive(overflow, "overflow"),
110 | makeResponsive(opacity, "opacity"),
111 | {
112 | ":hover": {
113 | ...makeResponsive(hoverBg, "background", context.colors),
114 | ...makeResponsive(hoverTextColor, "color", context.colors),
115 | ...makeResponsive(hoverBorderColor, "border-color", context.colors),
116 | ...makeResponsive(hoverShadow, "box-shadow", context.shadows)
117 | },
118 | ":focus": {
119 | ...makeResponsive(focusBg, "background", context.colors),
120 | ...makeResponsive(focusTextColor, "color", context.colors),
121 | ...makeResponsive(focusBorderColor, "border-color", context.colors),
122 | ...makeResponsive(focusShadow, "box-shadow", context.shadows)
123 | },
124 | "::placeholder": {
125 | ...makeResponsive(placeholderTextColor, "color", context.colors)
126 | },
127 | disabled: {
128 | color: context.colors[placeholderTextColor] || placeholderTextColor,
129 | cursor: "not-allowed",
130 | background: context.colors["gray200"]
131 | }
132 | }
133 | ];
134 |
135 | return [rest, arrayKeyMapToObject(style)];
136 | };
137 |
138 | export default computeDivStyle;
139 |
--------------------------------------------------------------------------------
/src/atoms/input/Textarea.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Input from "./Input";
3 | import Icon from "../icon/Icon";
4 |
5 | const Textarea = ({ isLoading, suffix, ...rest }) => {
6 | return (
7 |
19 | ) : (
20 | suffix
21 | )
22 | }
23 | {...rest}
24 | />
25 | );
26 | };
27 |
28 | Textarea.defaultProps = {
29 | d: "flex",
30 | p: { x: "0.75rem", y: "0.5rem" },
31 | textSize: "body",
32 | rounded: "md",
33 | border: "1px solid",
34 | borderColor: "gray500",
35 | h: "6.5rem",
36 | w: "100%",
37 | minW: "100%",
38 | bg: "white",
39 | textColor: "dark",
40 | textWeight: "500",
41 | focusBorderColor: "gray700"
42 | };
43 |
44 | export default Textarea;
45 |
--------------------------------------------------------------------------------
/src/atoms/label/Label.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Div from "../div/Div";
3 |
4 | const Label = React.forwardRef((props, ref) => {
5 | return ;
6 | });
7 |
8 | Label.defaultProps = {
9 | flexWrap: "wrap",
10 | textSize: "body",
11 | d: "flex",
12 | align: "flex-start",
13 | cursor: "pointer",
14 | tabIndex: "0"
15 | };
16 |
17 | export default Label;
18 |
--------------------------------------------------------------------------------
/src/atoms/modal/Modal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Transition } from "react-transition-group";
3 | import Div from "../div/Div";
4 |
5 | /**
6 | * Duration for the transition
7 | */
8 | const duration = 300;
9 |
10 | /**
11 | * Default Style for Backlayer
12 | */
13 | const defaultbackLayerStyle = {
14 | transition: `opacity ${duration}ms ease-in-out`,
15 | opacity: 0
16 | };
17 |
18 | /**
19 | * Trasition Styles for Backlayer
20 | */
21 | const backLayerTransitionStyles = {
22 | entering: { opacity: 0 },
23 | entered: { opacity: 0.4 },
24 | exiting: { opacity: 0 },
25 | exited: { opacity: 0 }
26 | };
27 |
28 | /**
29 | * Default Style for ModalContent
30 | */
31 | const defaultModalContentStyle = {
32 | transition: `opacity ${duration}ms ease-in-out`,
33 | opacity: 0,
34 | overflowY: "auto",
35 | overflowX: "hidden"
36 | };
37 |
38 | /**
39 | * Trasition Styles for ModalContent
40 | */
41 | const transitionModalContentStyles = {
42 | entering: { opacity: 0 },
43 | entered: { opacity: 1 },
44 | exiting: { opacity: 0 },
45 | exited: { opacity: 0 }
46 | };
47 |
48 | class Modal extends Component {
49 | constructor(props) {
50 | super(props);
51 |
52 | this.disableBodyScroll = this.disableBodyScroll.bind(this);
53 | this.enableBodyScroll = this.enableBodyScroll.bind(this);
54 | }
55 |
56 | /**
57 | * Disable the body scroll when Opened
58 | */
59 | disableBodyScroll() {
60 | document.querySelector("body").style.overflow = "hidden";
61 |
62 | // Start Function if recieved a onEntering Props
63 | const { onEntering } = this.props;
64 | if (onEntering) onEntering();
65 | }
66 |
67 | /**
68 | * Enable the body scroll when Closed
69 | */
70 | enableBodyScroll() {
71 | document.querySelector("body").style.overflow = "auto";
72 |
73 | // Start Function if recieved a onExiting Props
74 | const { onExiting } = this.props;
75 | if (onExiting) onExiting();
76 | }
77 |
78 | componentWillUnmount() {
79 | document.querySelector("body").style.overflow = "auto";
80 | }
81 |
82 | render() {
83 | const { children, isOpen, onClose, align, ...rest } = this.props;
84 |
85 | return (
86 |
93 | {state => (
94 | <>
95 |
109 |
127 |
{
129 | e.stopPropagation();
130 | }}
131 | bg="white"
132 | {...rest}
133 | zIndex="1"
134 | >
135 | {children}
136 |
137 |
65 | {prefix}
66 |
{children}
67 | {suffix}
68 |
124 |
{
126 | e.stopPropagation();
127 | }}
128 | {...rest}
129 | zIndex="1"
130 | >
131 | {children}
132 |
133 |
9 | {prefix}
10 | {children}
11 | {suffix}
12 |
13 | );
14 | });
15 |
16 | Tag.defaultProps = {
17 | tag: "span",
18 | d: "inline-flex",
19 | align: "center",
20 | textAlign: "center",
21 | justify: "center",
22 | bg: "gray300",
23 | textWeight: "500",
24 | rounded: "sm",
25 | p: { x: "0.5rem", y: "0.125rem" },
26 | textColor: "medium",
27 | textSize: "caption"
28 | };
29 |
30 | export default Tag;
31 |
--------------------------------------------------------------------------------
/src/atoms/text/Text.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { styled } from "styletron-react";
3 | import { ThemeContext } from "../../core/ThemeContext";
4 | import computeTextStyle from "./Text.style";
5 |
6 | const Text = React.forwardRef((props, ref) => {
7 | return (
8 |
9 | {value => {
10 | const output = computeTextStyle(props, value);
11 |
12 | return (
13 |
19 | );
20 | }}
21 |
22 | );
23 | });
24 |
25 | const BasicText = styled("p", props => {
26 | return {
27 | ...props.$styleArray
28 | };
29 | });
30 |
31 | Text.defaultProps = {
32 | tag: "p",
33 | m: "0",
34 | p: "0"
35 | };
36 |
37 | export default Text;
38 |
--------------------------------------------------------------------------------
/src/atoms/text/Text.style.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "../../style-functions/makeResponsive";
2 | import findDirection from "../../style-functions/findDirection";
3 | import arrayKeyMapToObject from "../../style-functions/arrayKeyMapToObject";
4 | import findRoundedDirection from "../../style-functions/findRoundedDirection";
5 | import findBorder from "../../style-functions/findBorder";
6 |
7 | const computeTextStyle = (props, context) => {
8 | const {
9 | d,
10 | pos,
11 | top,
12 | bottom,
13 | left,
14 | right,
15 | h,
16 | maxH,
17 | minH,
18 | justify,
19 | align,
20 | flexDir,
21 | flexGrow,
22 | flexWrap,
23 | order,
24 | rounded,
25 | border,
26 | borderColor,
27 | m,
28 | p,
29 | bg,
30 | textColor,
31 | textWeight,
32 | textAlign,
33 | textTransform,
34 | textDecor,
35 | textSize,
36 | transition,
37 | w,
38 | maxW,
39 | minW,
40 | fontFamily,
41 | opacity,
42 | hoverBg,
43 | hoverBorderColor,
44 | hoverTextColor,
45 | tag,
46 | theme,
47 | cursor,
48 | transform,
49 | transformOrigin,
50 | shadow,
51 | zIndex,
52 | overflow,
53 | hoverShadow,
54 | ...rest
55 | } = props;
56 |
57 | const style = [
58 | findRoundedDirection(rounded, context.rounded),
59 | findDirection(m, "margin"),
60 | findDirection(p, "padding"),
61 | makeResponsive(d, "display"),
62 | makeResponsive(pos, "position"),
63 | makeResponsive(top, "top"),
64 | makeResponsive(bottom, "bottom"),
65 | makeResponsive(left, "left"),
66 | makeResponsive(right, "right"),
67 | makeResponsive(justify, "justify-content"),
68 | makeResponsive(align, "align-items"),
69 | makeResponsive(flexDir, "flex-direction"),
70 | makeResponsive(flexGrow, "flex"),
71 | makeResponsive(flexWrap, "flex-wrap"),
72 | makeResponsive(order, "order"),
73 | makeResponsive(h, "height"),
74 | makeResponsive(maxH, "max-height"),
75 | makeResponsive(minH, "min-height"),
76 | makeResponsive(w, "width"),
77 | makeResponsive(minW, "min-width"),
78 | makeResponsive(maxW, "max-width"),
79 | makeResponsive(cursor, "cursor"),
80 | findBorder(border, borderColor, context.colors),
81 | makeResponsive(bg, "background", context.colors),
82 | makeResponsive(textColor, "color", context.colors),
83 | makeResponsive(textWeight, "font-weight"),
84 | makeResponsive(fontFamily, "font-family", context.fontFamily),
85 | makeResponsive(textAlign, "text-align"),
86 | makeResponsive(textTransform, "text-transform"),
87 | makeResponsive(textDecor, "text-decoration"),
88 | makeResponsive(transform, "transform"),
89 | makeResponsive(transformOrigin, "transform-origin"),
90 | makeResponsive(shadow, "box-shadow", context.shadows),
91 | makeResponsive(transition, "transition"),
92 | makeResponsive(textSize, "font-size", context.textSize.size),
93 | makeResponsive(textSize, "line-height", context.textSize.height),
94 | makeResponsive(zIndex, "z-index"),
95 | makeResponsive(overflow, "overflow"),
96 | makeResponsive(opacity, "opacity"),
97 | {
98 | ":hover": {
99 | ...makeResponsive(hoverBg, "background", context.colors),
100 | ...makeResponsive(hoverTextColor, "color", context.colors),
101 | ...makeResponsive(hoverBorderColor, "border-color", context.colors),
102 | ...makeResponsive(hoverShadow, "box-shadow", context.shadows)
103 | },
104 | ":visited": {
105 | ...makeResponsive(textColor, "color", context.colors)
106 | }
107 | }
108 | ];
109 |
110 | return [rest, arrayKeyMapToObject(style)];
111 | };
112 |
113 | export default computeTextStyle;
114 |
--------------------------------------------------------------------------------
/src/core/THEME.js:
--------------------------------------------------------------------------------
1 | const THEME = {
2 | colors: {
3 | black900: "#0A1F44",
4 | black800: "#14284B",
5 | black700: "#283A5B",
6 | black600: "#364766",
7 | black500: "#455571",
8 | black400: "#4E5D78",
9 | black300: "#596780",
10 | black200: "#627088",
11 | black100: "#717D92",
12 |
13 | gray900: "#8A94A6",
14 | gray800: "#98A1B1",
15 | gray700: "#A7AEBB",
16 | gray600: "#B0B7C3",
17 | gray500: "#C9CED6",
18 | gray400: "#E1E4E8",
19 | gray300: "#F1F2F4",
20 | gray200: "#F7F8F9",
21 | gray100: "#FAFBFB",
22 |
23 | brand900: "#FF584A",
24 | brand800: "#FE6C61",
25 | brand700: "#FF867E",
26 | brand600: "#FFA29B",
27 | brand500: "#FFBDB8",
28 | brand400: "#FFCAC6",
29 | brand300: "#FFD7D4",
30 | brand200: "#FFE4E3",
31 | brand100: "#FFEEED",
32 |
33 | success900: "#136A4A",
34 | success800: "#23825F",
35 | success700: "#36AB80",
36 | success600: "#6FCAA8",
37 | success500: "#A9DCC9",
38 | success400: "#D0EDDF",
39 | success300: "#EAF7F1",
40 | success200: "#F5FBF8",
41 | success100: "#FAFDFC",
42 |
43 | warning900: "#EF8511",
44 | warning800: "#F69D2C",
45 | warning700: "#F7AF22",
46 | warning600: "#FBC050",
47 | warning500: "#FBE0A1",
48 | warning400: "#FDEECB",
49 | warning300: "#FEF7E6",
50 | warning200: "#FEFAF1",
51 | warning100: "#FFFDF8",
52 |
53 | danger900: "#A32801",
54 | danger800: "#D13A06",
55 | danger700: "#F4541D",
56 | danger600: "#F7926F",
57 | danger500: "#FABEAA",
58 | danger400: "#FCD7CA",
59 | danger300: "#FDE8E1",
60 | danger200: "#FEF6F3",
61 | danger100: "#FFFBFA",
62 |
63 | info900: "#01408F",
64 | info800: "#026DD6",
65 | info700: "#0284FE",
66 | info600: "#4BA7FE",
67 | info500: "#83C3FE",
68 | info400: "#B3DAFF",
69 | info300: "#DCEEFF",
70 | info200: "#EEF7FF",
71 | info100: "#F8FBFF",
72 |
73 | white: "#FFFFFF",
74 | black: "#000000",
75 | transparent: "rgba(0,0,0,0)",
76 |
77 | disabled: "#B0B7C3",
78 | light: "#A7AAB0",
79 | medium: "#505256",
80 | dark: "#000000"
81 | },
82 | grid: {
83 | containerMaxWidth: {
84 | xs: "540px",
85 | sm: "720px",
86 | md: "960px",
87 | lg: "1156px",
88 | xl: "1200px"
89 | },
90 | gutterWidth: "16px",
91 | colCount: 12
92 | },
93 |
94 | shadows: {
95 | "0": "none",
96 | "1": "0 0 1px 0 rgba(8, 11, 14, 0.06), 0 1px 1px 0 rgba(8, 11, 14, 0.1)",
97 | "2": "0 0 1px 0 rgba(8, 11, 14, 0.06), 0 3px 3px -1px rgba(8, 11, 14, 0.1)",
98 | "3": "0 0 1px 0 rgba(8, 11, 14, 0.06), 0 6px 6px -1px rgba(8, 11, 14, 0.1)",
99 | "4":
100 | "0 0 1px 0 rgba(8, 11, 14, 0.06), 0 16px 16px -1px rgba(8, 11, 14, 0.1)",
101 | "5":
102 | "0 0 1px 0 rgba(8, 11, 14, 0.06), 0 32px 40px -1px rgba(8, 11, 14, 0.1)"
103 | },
104 |
105 | fontFamily: {
106 | primary:
107 | '"SF Pro Text", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
108 | secondary: "SF Pro Text",
109 | code: "monospace"
110 | },
111 |
112 | rounded: {
113 | "0": "0px",
114 | xs: "2px",
115 | sm: "4px",
116 | md: "6px",
117 | lg: "8px",
118 | xl: "12px",
119 | circle: "1000rem"
120 | },
121 |
122 | transition: {
123 | true: "all 0.4s ease-in-out"
124 | },
125 |
126 | textSize: {
127 | size: {
128 | tiny: "10px",
129 | caption: "12px",
130 | body: "14px",
131 | paragraph: "14px",
132 | subheader: "17px",
133 | title: "22px",
134 | heading: "26px",
135 | display1: "32px",
136 | display2: "40px",
137 | display3: "56px"
138 | },
139 | height: {
140 | tiny: "16px",
141 | caption: "20px",
142 | body: "24px",
143 | paragraph: "26px",
144 | subheader: "30px",
145 | title: "32px",
146 | heading: "40px",
147 | display1: "48px",
148 | display2: "48px",
149 | display3: "64px"
150 | }
151 | }
152 | };
153 |
154 | export default THEME;
155 |
--------------------------------------------------------------------------------
/src/core/ThemeContext.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import THEME from "./THEME";
3 | import merge from "../style-functions/mergeObjects";
4 | const ThemeContext = React.createContext(THEME);
5 |
6 | const ThemeProvider = ({ theme, children }) => {
7 | const customTheme = merge(THEME, theme);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | };
15 |
16 | export { ThemeContext, ThemeProvider };
17 |
--------------------------------------------------------------------------------
/src/functions/currentDevice.js:
--------------------------------------------------------------------------------
1 | const currentDevice = () => {
2 | const currentWidth = window.innerWidth;
3 | if (currentWidth < 576) {
4 | return 'xs';
5 | } else if (currentWidth < 768) {
6 | return 'sm';
7 | } else if (currentWidth < 960) {
8 | return 'md';
9 | } else if (currentWidth < 1280) {
10 | return 'lg';
11 | } else if (1900 < currentWidth) {
12 | return 'xl';
13 | } else {
14 | return "Couldn't find device";
15 | }
16 | };
17 |
18 | export default currentDevice;
19 |
--------------------------------------------------------------------------------
/src/functions/scrollTo.js:
--------------------------------------------------------------------------------
1 | const scrollTo = (goTo, offset = 0, goToNumber = 0, time = 600) => {
2 | var target = document.querySelectorAll(goTo)[goToNumber];
3 | var targetPosition = target.offsetTop - offset;
4 | var startPosition = window.scrollY;
5 | var distance = targetPosition - startPosition;
6 | var duration = time;
7 | var startTime = null;
8 |
9 | function animationScroll(currentTime) {
10 | if (startTime === null) startTime = currentTime;
11 | var timeElapsed = currentTime - startTime;
12 |
13 | var run = ease(timeElapsed, startPosition, distance, duration);
14 | window.scrollTo(0, run);
15 | if (timeElapsed < duration) requestAnimationFrame(animationScroll);
16 | }
17 |
18 | function ease(t, b, c, d) {
19 | t /= d / 2;
20 | if (t < 1) return (c / 2) * t * t + b;
21 | t--;
22 | return (-c / 2) * (t * (t - 2) - 1) + b;
23 | }
24 |
25 | requestAnimationFrame(animationScroll);
26 | };
27 |
28 | export default scrollTo;
29 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as StyleReset } from "./atoms/StyleReset";
2 | export { default as Container } from "./atoms/grid/Container";
3 | export { default as Row } from "./atoms/grid/Row";
4 | export { default as Col } from "./atoms/grid/Col";
5 | export { default as Div } from "./atoms/div/Div";
6 | export { iconPaths } from "./atoms/icon/iconPaths";
7 | export { default as Icon } from "./atoms/icon/Icon";
8 | export { default as Text } from "./atoms/text/Text";
9 | export { default as Button } from "./atoms/button/Button";
10 | export { default as Input } from "./atoms/input/Input";
11 | export { default as Textarea } from "./atoms/input/Textarea";
12 | export { default as Label } from "./atoms/label/Label";
13 | export { default as Checkbox } from "./atoms/checkbox/Checkbox";
14 | export { default as Radiobox } from "./atoms/radiobox/Radiobox";
15 | export { default as Switch } from "./atoms/checkbox/Switch";
16 | export { default as Image } from "./atoms/image/Image";
17 | export { default as Tag } from "./atoms/tag/Tag";
18 | export { default as Anchor } from "./atoms/anchor/Anchor";
19 | export { default as Collapse } from "./atoms/collapse/Collapse";
20 | export { default as Modal } from "./atoms/modal/Modal";
21 | export { default as SideDrawer } from "./atoms/sidedrawer/SideDrawer";
22 | export { default as Notification } from "./atoms/notification/Notification";
23 | export { default as Dropdown } from "./atoms/dropdown/Dropdown";
24 | // export { default as Avatar } from "./atoms/Avatar";
25 | // export { default as ButtonGroup } from "./atoms/ButtonGroup";
26 | // export { default as DropdownMenu } from "./atoms/DropdownMenu";
27 | // export { default as InputGroup } from "./atoms/InputGroup";
28 | // export { default as Tab } from "./atoms/Tab";
29 | export { default as scrollTo } from "./functions/scrollTo";
30 | export { default as currentDevice } from "./functions/currentDevice";
31 |
32 | export { ThemeProvider } from "./core/ThemeContext";
33 | // export { default as DefaultTheme } from "./styles/DefaultTheme";
34 |
--------------------------------------------------------------------------------
/src/style-functions/arrayKeyMapToObject.js:
--------------------------------------------------------------------------------
1 | const arrayKeyMapToObject = input => {
2 | var output = {};
3 |
4 | input.forEach(item => {
5 | openObject(item, output);
6 |
7 | function openObject(objectToOpen, setOpenObjectTo) {
8 | if (!objectToOpen) {
9 | return;
10 | }
11 | Object.keys(objectToOpen).map(key => {
12 | if (key === undefined) {
13 | return;
14 | } else if (typeof setOpenObjectTo[key] === "object") {
15 | openObject(objectToOpen[key], setOpenObjectTo[key]);
16 | } else {
17 | setOpenObjectTo[key] = objectToOpen[key];
18 | }
19 | });
20 | }
21 | });
22 |
23 | return output;
24 | };
25 |
26 | export default arrayKeyMapToObject;
27 |
--------------------------------------------------------------------------------
/src/style-functions/deviceQuerry.js:
--------------------------------------------------------------------------------
1 | const DEVICEQUERRY = {
2 | xs: "@media screen and (min-width: 0px)",
3 | sm: "@media screen and (min-width: 576px)",
4 | md: "@media screen and (min-width: 768px)",
5 | lg: "@media screen and (min-width: 992px)",
6 | xl: "@media screen and (min-width: 1200px)"
7 | };
8 |
9 | export default DEVICEQUERRY;
10 |
--------------------------------------------------------------------------------
/src/style-functions/findBorder.js:
--------------------------------------------------------------------------------
1 | // import makeResponsive from "./makeResponsive";
2 | import DEVICEQUERRY from "./deviceQuerry";
3 |
4 | import arrayKeyMapToObject from "./arrayKeyMapToObject";
5 |
6 | const findBorder = (border, borderColor, themeColors) => {
7 | if (!border) {
8 | return;
9 | }
10 |
11 | const property = "border";
12 |
13 | let style = [];
14 |
15 | if (
16 | typeof (
17 | border.x ||
18 | border.y ||
19 | border.b ||
20 | border.t ||
21 | border.l ||
22 | border.r
23 | ) === "undefined"
24 | ) {
25 | style.push(
26 | makeResponsiveBorder(border, property, themeColors, borderColor)
27 | );
28 | } else {
29 | // If x direction exist
30 | if (border.x != "undefined") {
31 | style.push(
32 | makeResponsiveBorder(
33 | border.x,
34 | `${property}-left`,
35 | themeColors,
36 | borderColor
37 | )
38 | );
39 | style.push(
40 | makeResponsiveBorder(
41 | border.x,
42 | `${property}-right`,
43 | themeColors,
44 | borderColor
45 | )
46 | );
47 | }
48 | // If y direction exist
49 | if (border.y != "undefined") {
50 | style.push(
51 | makeResponsiveBorder(
52 | border.y,
53 | `${property}-top`,
54 | themeColors,
55 | borderColor
56 | )
57 | );
58 | style.push(
59 | makeResponsiveBorder(
60 | border.y,
61 | `${property}-bottom`,
62 | themeColors,
63 | borderColor
64 | )
65 | );
66 | }
67 | // If t direction exist
68 | if (border.t != "undefined") {
69 | style.push(
70 | makeResponsiveBorder(
71 | border.t,
72 | `${property}-top`,
73 | themeColors,
74 | borderColor
75 | )
76 | );
77 | }
78 | // If l direction exist
79 | if (border.l != "undefined") {
80 | style.push(
81 | makeResponsiveBorder(
82 | border.l,
83 | `${property}-left`,
84 | themeColors,
85 | borderColor
86 | )
87 | );
88 | }
89 | // If r direction exist
90 | if (border.r != "undefined") {
91 | style.push(
92 | makeResponsiveBorder(
93 | border.r,
94 | `${property}-right`,
95 | themeColors,
96 | borderColor
97 | )
98 | );
99 | }
100 | // If b direction exist
101 | if (border.b != "undefined") {
102 | style.push(
103 | makeResponsiveBorder(
104 | border.b,
105 | `${property}-bottom`,
106 | themeColors,
107 | borderColor
108 | )
109 | );
110 | }
111 | }
112 |
113 | return arrayKeyMapToObject(style);
114 | };
115 |
116 | export default findBorder;
117 |
118 | const makeResponsiveBorder = (border, property, themeColors, borderColor) => {
119 | let style = {};
120 | if (!border) {
121 | return;
122 | }
123 |
124 | const defaultborderColor =
125 | (typeof borderColor === "string" &&
126 | borderColor &&
127 | (themeColors[borderColor] || borderColor)) ||
128 | (borderColor &&
129 | borderColor.xs &&
130 | (themeColors[borderColor.xs] || borderColor.xs)) ||
131 | "#000000";
132 |
133 | // Give style directly if not an object
134 | if (typeof border === "string") {
135 | if (border === "none") {
136 | style[property] = border;
137 | } else {
138 | style[property] = `${border} ${themeColors[borderColor] ||
139 | borderColor ||
140 | defaultborderColor}`;
141 | }
142 | }
143 |
144 | // Create an array for responsive border
145 | else if (typeof border === "object") {
146 | Object.keys(border).map(key => {
147 | if (key === "xs") {
148 | if (border[key] === "none") {
149 | style[property] = border[key];
150 | } else {
151 | style[property] = `${border[key]} ${themeColors[borderColor[key]] ||
152 | borderColor[key] ||
153 | defaultborderColor}`;
154 | }
155 | } else {
156 | if (border[key] === "none") {
157 | style[DEVICEQUERRY[key]] = {
158 | [property]: border[key]
159 | };
160 | } else {
161 | style[DEVICEQUERRY[key]] = {
162 | [property]: `${border[key]} ${themeColors[borderColor[key]] ||
163 | borderColor[key] ||
164 | defaultborderColor}`
165 | };
166 | }
167 | }
168 | });
169 | }
170 |
171 | return style;
172 | };
173 |
--------------------------------------------------------------------------------
/src/style-functions/findDirection.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "./makeResponsive";
2 | import arrayKeyMapToObject from "./arrayKeyMapToObject";
3 |
4 | const findDirection = (value, property, themeValues = {}) => {
5 | if (!value) {
6 | return;
7 | }
8 |
9 | let style = [];
10 |
11 | if (
12 | typeof (value.x || value.y || value.b || value.t || value.l || value.r) ===
13 | "undefined"
14 | ) {
15 | style.push(makeResponsive(value, property, themeValues));
16 | } else {
17 | // If x direction exist
18 | if (value.x != "undefined") {
19 | style.push(makeResponsive(value.x, `${property}-left`, themeValues));
20 | style.push(makeResponsive(value.x, `${property}-right`, themeValues));
21 | }
22 | // If y direction exist
23 | if (value.y != "undefined") {
24 | style.push(makeResponsive(value.y, `${property}-top`, themeValues));
25 | style.push(makeResponsive(value.y, `${property}-bottom`, themeValues));
26 | }
27 | // If t direction exist
28 | if (value.t != "undefined") {
29 | style.push(makeResponsive(value.t, `${property}-top`, themeValues));
30 | }
31 | // If l direction exist
32 | if (value.l != "undefined") {
33 | style.push(makeResponsive(value.l, `${property}-left`, themeValues));
34 | }
35 | // If r direction exist
36 | if (value.r != "undefined") {
37 | style.push(makeResponsive(value.r, `${property}-right`, themeValues));
38 | }
39 | // If b direction exist
40 | if (value.b != "undefined") {
41 | style.push(makeResponsive(value.b, `${property}-bottom`, themeValues));
42 | }
43 | }
44 |
45 | return arrayKeyMapToObject(style);
46 | };
47 |
48 | export default findDirection;
49 |
--------------------------------------------------------------------------------
/src/style-functions/findRoundedDirection.js:
--------------------------------------------------------------------------------
1 | import makeResponsive from "./makeResponsive";
2 | import arrayKeyMapToObject from "./arrayKeyMapToObject";
3 |
4 | const findRoundedDirection = (value, themeValues = {}) => {
5 | if (!value) {
6 | return;
7 | }
8 |
9 | let style = [];
10 |
11 | if (
12 | typeof (
13 | value.b ||
14 | value.t ||
15 | value.l ||
16 | value.r ||
17 | value.tl ||
18 | value.tr ||
19 | value.bl ||
20 | value.br
21 | ) === "undefined"
22 | ) {
23 | style.push(makeResponsive(value, "border-radius", themeValues));
24 | } else {
25 | // If l direction exist
26 | if (value.l != "undefined") {
27 | style.push(
28 | makeResponsive(value.l, "border-top-left-radius", themeValues)
29 | );
30 | style.push(
31 | makeResponsive(value.l, "border-bottom-left-radius", themeValues)
32 | );
33 | }
34 |
35 | // If r direction exist
36 | if (value.r != "undefined") {
37 | style.push(
38 | makeResponsive(value.r, "border-top-right-radius", themeValues)
39 | );
40 | style.push(
41 | makeResponsive(value.r, "border-bottom-right-radius", themeValues)
42 | );
43 | }
44 |
45 | // If t direction exist
46 | if (value.t != "undefined") {
47 | style.push(
48 | makeResponsive(value.t, "border-top-left-radius", themeValues)
49 | );
50 | style.push(
51 | makeResponsive(value.t, "border-top-right-radius", themeValues)
52 | );
53 | }
54 |
55 | // If b direction exist
56 | if (value.b != "undefined") {
57 | style.push(
58 | makeResponsive(value.b, "border-bottom-left-radius", themeValues)
59 | );
60 | style.push(
61 | makeResponsive(value.b, "border-bottom-right-radius", themeValues)
62 | );
63 | }
64 |
65 | // If tl direction exist
66 | if (value.tl != "undefined") {
67 | style.push(
68 | makeResponsive(value.tl, "border-top-left-radius", themeValues)
69 | );
70 | }
71 |
72 | // If tr direction exist
73 | if (value.tr != "undefined") {
74 | style.push(
75 | makeResponsive(value.tr, "border-top-right-radius", themeValues)
76 | );
77 | }
78 |
79 | // If bl direction exist
80 | if (value.bl != "undefined") {
81 | style.push(
82 | makeResponsive(value.bl, "border-bottom-left-radius", themeValues)
83 | );
84 | }
85 |
86 | // If br direction exist
87 | if (value.br != "undefined") {
88 | style.push(
89 | makeResponsive(value.br, "border-bottom-right-radius", themeValues)
90 | );
91 | }
92 | }
93 |
94 | return arrayKeyMapToObject(style);
95 | };
96 |
97 | export default findRoundedDirection;
98 |
--------------------------------------------------------------------------------
/src/style-functions/makeResponsive.js:
--------------------------------------------------------------------------------
1 | import DEVICEQUERRY from "./deviceQuerry";
2 |
3 | const makeResponsive = (value, property, themeValues = {}) => {
4 | let style = {};
5 | if (!value) {
6 | return;
7 | }
8 |
9 | // Give style directly if not an object
10 | if (
11 | typeof value === "string" ||
12 | typeof value === "number" ||
13 | typeof value === "boolean"
14 | ) {
15 | style[`${property}`] = themeValues[`${value}`] || `${value}`;
16 | }
17 |
18 | // Create an array for responsive value
19 | else if (typeof value === "object") {
20 | Object.keys(value).map(key => {
21 | if (key === "xs") {
22 | style[property] = themeValues[`${value[key]}`] || `${value[key]}`;
23 | } else {
24 | style[DEVICEQUERRY[key]] = {
25 | [property]: themeValues[`${value[key]}`] || `${value[key]}`
26 | };
27 | }
28 | });
29 | }
30 |
31 | return style;
32 | };
33 |
34 | export default makeResponsive;
35 |
--------------------------------------------------------------------------------
/src/style-functions/mergeObjects.js:
--------------------------------------------------------------------------------
1 | function mergeObjects() {
2 | var result = {},
3 | obj;
4 |
5 | for (var i = 0; i < arguments.length; i++) {
6 | obj = arguments[i];
7 | for (var key in obj) {
8 | if (Object.prototype.toString.call(obj[key]) === "[object Object]") {
9 | if (typeof result[key] === "undefined") {
10 | result[key] = {};
11 | }
12 | result[key] = mergeObjects(result[key], obj[key]);
13 | } else {
14 | result[key] = obj[key];
15 | }
16 | }
17 | }
18 | return result;
19 | }
20 |
21 | export default mergeObjects;
22 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const webpack = require("webpack");
3 |
4 | module.exports = {
5 | devtool: "cheap-eval-source-map",
6 | entry: "./docs/entry.js",
7 | output: {
8 | path: path.join(__dirname, "dist"),
9 | filename: "bundle.js"
10 | },
11 | resolve: {
12 | alias: {
13 | atomize: path.join(__dirname, "src")
14 | }
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.js$/,
20 | exclude: /node_modules/,
21 | loader: "babel-loader"
22 | }
23 | ]
24 | },
25 | plugins: [
26 | new webpack.DefinePlugin({
27 | "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
28 | })
29 | ],
30 | devServer: {
31 | contentBase: "docs/"
32 | }
33 | };
34 |
--------------------------------------------------------------------------------