From 147a6386625338e62e2413c33bc10c26da7358fd Mon Sep 17 00:00:00 2001 From: Ahmed Elewa Date: Sun, 24 Feb 2019 10:14:48 +0200 Subject: [PATCH] end docs --- docs/src/Layouts/Header.js | 7 +- docs/src/Layouts/menuItem.js | 4 +- docs/src/mdx/alert/Accent.js | 35 +++++ docs/src/mdx/alert/ApiArray.js | 35 +++++ docs/src/mdx/alert/Outline.js | 27 ++++ docs/src/mdx/alert/Size.js | 24 +++ docs/src/mdx/alert/Status.js | 27 ++++ docs/src/mdx/alert/overview.mdx | 25 ++++ docs/src/mdx/badge/ApiArray.js | 19 +++ docs/src/mdx/badge/Example.js | 20 +++ docs/src/mdx/badge/overview.mdx | 23 +++ docs/src/mdx/chat/ApiArray.js | 141 ++++++++++++++++++ docs/src/mdx/chat/Example.js | 40 +++++ docs/src/mdx/chat/messages.js | 73 +++++++++ docs/src/mdx/chat/overview.mdx | 95 ++++++++++++ .../guides/install-based-on-starter-kit.mdx | 6 +- docs/src/mdx/progress/ApiArray.js | 24 +++ docs/src/mdx/progress/Interactive.js | 69 +++++++++ docs/src/mdx/progress/Size.js | 20 +++ docs/src/mdx/progress/Status.js | 27 ++++ docs/src/mdx/progress/Value.js | 19 +++ docs/src/mdx/progress/overview.mdx | 27 ++++ docs/src/mdx/search/ApiArray.js | 28 ++++ docs/src/mdx/search/Example.js | 35 +++++ docs/src/mdx/search/overview.mdx | 15 ++ docs/src/mdx/spinner/ApiArray.js | 13 ++ docs/src/mdx/spinner/Button.js | 37 +++++ docs/src/mdx/spinner/Size.js | 19 +++ docs/src/mdx/spinner/Status.js | 27 ++++ docs/src/mdx/spinner/Tab.js | 41 +++++ docs/src/mdx/spinner/overview.mdx | 35 +++++ docs/src/mdx/toastr/overview.mdx | 8 + docs/src/mdx/user/ApiArray.js | 66 ++++++++ docs/src/mdx/user/Hide.js | 29 ++++ docs/src/mdx/user/Image.js | 33 ++++ docs/src/mdx/user/Size.js | 14 ++ docs/src/mdx/user/overview.mdx | 21 +++ docs/src/pages/components/alert.js | 23 +++ docs/src/pages/components/badge.js | 23 +++ docs/src/pages/components/chat.js | 27 ++++ docs/src/pages/components/progress.js | 26 ++++ docs/src/pages/components/search.js | 26 ++++ docs/src/pages/components/spinner.js | 26 ++++ docs/src/pages/components/user.js | 23 +++ package.json | 2 +- rollup.config.js | 2 +- src/components/Alert.js | 10 +- src/components/Badge.js | 5 + src/components/Chat/Form.js | 25 ++-- src/components/Chat/Messages.js | 11 +- src/components/Spinner.js | 10 +- src/components/User/style.js | 2 +- 52 files changed, 1416 insertions(+), 33 deletions(-) create mode 100644 docs/src/mdx/alert/Accent.js create mode 100644 docs/src/mdx/alert/ApiArray.js create mode 100644 docs/src/mdx/alert/Outline.js create mode 100644 docs/src/mdx/alert/Size.js create mode 100644 docs/src/mdx/alert/Status.js create mode 100644 docs/src/mdx/alert/overview.mdx create mode 100644 docs/src/mdx/badge/ApiArray.js create mode 100644 docs/src/mdx/badge/Example.js create mode 100644 docs/src/mdx/badge/overview.mdx create mode 100644 docs/src/mdx/chat/ApiArray.js create mode 100644 docs/src/mdx/chat/Example.js create mode 100644 docs/src/mdx/chat/messages.js create mode 100644 docs/src/mdx/chat/overview.mdx create mode 100644 docs/src/mdx/progress/ApiArray.js create mode 100644 docs/src/mdx/progress/Interactive.js create mode 100644 docs/src/mdx/progress/Size.js create mode 100644 docs/src/mdx/progress/Status.js create mode 100644 docs/src/mdx/progress/Value.js create mode 100644 docs/src/mdx/progress/overview.mdx create mode 100644 docs/src/mdx/search/ApiArray.js create mode 100644 docs/src/mdx/search/Example.js create mode 100644 docs/src/mdx/search/overview.mdx create mode 100644 docs/src/mdx/spinner/ApiArray.js create mode 100644 docs/src/mdx/spinner/Button.js create mode 100644 docs/src/mdx/spinner/Size.js create mode 100644 docs/src/mdx/spinner/Status.js create mode 100644 docs/src/mdx/spinner/Tab.js create mode 100644 docs/src/mdx/spinner/overview.mdx create mode 100644 docs/src/mdx/user/ApiArray.js create mode 100644 docs/src/mdx/user/Hide.js create mode 100644 docs/src/mdx/user/Image.js create mode 100644 docs/src/mdx/user/Size.js create mode 100644 docs/src/mdx/user/overview.mdx create mode 100644 docs/src/pages/components/alert.js create mode 100644 docs/src/pages/components/badge.js create mode 100644 docs/src/pages/components/chat.js create mode 100644 docs/src/pages/components/progress.js create mode 100644 docs/src/pages/components/search.js create mode 100644 docs/src/pages/components/spinner.js create mode 100644 docs/src/pages/components/user.js diff --git a/docs/src/Layouts/Header.js b/docs/src/Layouts/Header.js index 5b5af64d..413351b2 100644 --- a/docs/src/Layouts/Header.js +++ b/docs/src/Layouts/Header.js @@ -5,6 +5,9 @@ import { breakpointDown } from 'oah-ui/theme'; const SidebarIcon = styled(Actions)` display: none; + div { + height: auto; + } ${breakpointDown('md')` display: flex; `} @@ -14,8 +17,10 @@ const HeaderStyle = styled.div` display: flex; width: 100%; justify-content: space-between; + align-items: center; .left { display: flex; + align-items: center; width: 100%; } ${breakpointDown('sm')` @@ -60,7 +65,7 @@ export default function Header(props) { size="MD" actions={[ { - content:

OAH UI

+ content:

OAH UI

}, { content: ( diff --git a/docs/src/Layouts/menuItem.js b/docs/src/Layouts/menuItem.js index 4bd7fd75..46092215 100644 --- a/docs/src/Layouts/menuItem.js +++ b/docs/src/Layouts/menuItem.js @@ -159,11 +159,11 @@ export default [ }, { title: 'Badge', - link: '/components/progress' + link: '/components/badge' }, { title: 'Chat UI', - link: '/components/Chat' + link: '/components/chat' } ] }, diff --git a/docs/src/mdx/alert/Accent.js b/docs/src/mdx/alert/Accent.js new file mode 100644 index 00000000..1e49ce7d --- /dev/null +++ b/docs/src/mdx/alert/Accent.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { Card, CardBody, Alert } from 'oah-ui'; + +function Accent() { + return ( + +
Alert Accent
+ + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + + ); +} + +export default Accent; diff --git a/docs/src/mdx/alert/ApiArray.js b/docs/src/mdx/alert/ApiArray.js new file mode 100644 index 00000000..11533a08 --- /dev/null +++ b/docs/src/mdx/alert/ApiArray.js @@ -0,0 +1,35 @@ +export const alertProps = [ + { + name: 'size', + type: 'string', + description: 'Size of the component, XXS | XS | SM | MD | LG | XL | XXL' + }, + { + name: 'status', + type: 'string', + description: + 'Field status (adds specific styles): Info, Success, Warning, Danger, Primary, Active, Disabled' + }, + { + name: 'accent', + type: 'string', + description: + 'Alert accent (color of the top border): Info, Success, Warning, Danger, Primary, Active, Disabled' + }, + { + name: 'outline', + type: 'string', + description: + 'Alert outline (color of the border): Info, Success, Warning, Danger, Primary, Active, Disabled' + }, + { + name: 'closable', + type: 'boolean', + description: 'Shows close icon' + }, + { + name: 'onClose()', + type: 'function', + description: 'Callback when close button clicked' + } +]; diff --git a/docs/src/mdx/alert/Outline.js b/docs/src/mdx/alert/Outline.js new file mode 100644 index 00000000..e28b49cb --- /dev/null +++ b/docs/src/mdx/alert/Outline.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Card, CardBody, Alert } from 'oah-ui'; + +function Outline() { + return ( + +
Alert Outline
+ + {[ + 'Info', + 'Success', + 'Danger', + 'Primary', + 'Warning', + 'Disabled', + 'Active' + ].map(key => ( + + You have been successfully authenticated! + + ))} + + + ); +} + +export default Outline; diff --git a/docs/src/mdx/alert/Size.js b/docs/src/mdx/alert/Size.js new file mode 100644 index 00000000..88e39fe6 --- /dev/null +++ b/docs/src/mdx/alert/Size.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { Card, CardBody, Alert } from 'oah-ui'; + +function Accent() { + return ( + +
Alert Size
+ + + You have been successfully authenticated! + + + You have been successfully authenticated! + + + + You have been successfully authenticated! + + + + ); +} + +export default Accent; diff --git a/docs/src/mdx/alert/Status.js b/docs/src/mdx/alert/Status.js new file mode 100644 index 00000000..22c298a6 --- /dev/null +++ b/docs/src/mdx/alert/Status.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Card, CardBody, Alert } from 'oah-ui'; + +function Status() { + return ( + +
Alert Status
+ + {[ + 'Info', + 'Success', + 'Danger', + 'Primary', + 'Warning', + 'Disabled', + 'Active' + ].map(key => ( + + You have been successfully authenticated! + + ))} + + + ); +} + +export default Status; diff --git a/docs/src/mdx/alert/overview.mdx b/docs/src/mdx/alert/overview.mdx new file mode 100644 index 00000000..59a27ae4 --- /dev/null +++ b/docs/src/mdx/alert/overview.mdx @@ -0,0 +1,25 @@ +## Alert + +Colored alerts could be simply configured by providing a `status` property: + +[Status](demo://Status.js) + +#Usage + +```js +import { Alert } from 'oah-ui'; +//or +import Alert from 'oah-ui/Alert'; +``` + +It is also possible to assign an `accent` property for a slight alert highlight + +[Accent](demo://Accent.js) + +And `outline` property: + +[Outline](demo://Outline.js) + +`size` property + +[Size](demo://Size.js) diff --git a/docs/src/mdx/badge/ApiArray.js b/docs/src/mdx/badge/ApiArray.js new file mode 100644 index 00000000..4464cccf --- /dev/null +++ b/docs/src/mdx/badge/ApiArray.js @@ -0,0 +1,19 @@ +export const badgeProps = [ + { + name: 'position', + type: 'string', + description: + 'Can be set to one of predefined positions: topRight, topLeft, bottomRight, bottomLeft, topStart, topEnd, bottomStart, bottomEnd' + }, + { + name: 'status', + type: 'string', + description: + '(adds specific styles): Info, Success, Danger, Primary, Warning.' + }, + { + name: 'children', + type: 'string', + description: 'component content' + } +]; diff --git a/docs/src/mdx/badge/Example.js b/docs/src/mdx/badge/Example.js new file mode 100644 index 00000000..44b1680a --- /dev/null +++ b/docs/src/mdx/badge/Example.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { Card, CardBody, Badge } from 'oah-ui'; + +function Example() { + return ( + +
+ + New + + + +99 + +
+ Card body. + + ); +} + +export default Example; diff --git a/docs/src/mdx/badge/overview.mdx b/docs/src/mdx/badge/overview.mdx new file mode 100644 index 00000000..7c0e988a --- /dev/null +++ b/docs/src/mdx/badge/overview.mdx @@ -0,0 +1,23 @@ +## Badge + +Badge is a simple labeling component. It can be used to add additional information to any content or highlight unread items. + +Element is absolute positioned, so parent should be [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position). It means parent position should be set to anything except `static`, e.g. `relative`, `absolute`, `fixed`, or `sticky`. + +### Usage + +```js +import { Badge } from 'oah-ui'; +//or +import Badge from 'oah-ui/Badge'; +``` + +Badge with default position and status(color): + +```jsx +badge text +``` + +For example, badge can be placed into `Card` header: + +[Example](demo://Example.js) diff --git a/docs/src/mdx/chat/ApiArray.js b/docs/src/mdx/chat/ApiArray.js new file mode 100644 index 00000000..33d5ba29 --- /dev/null +++ b/docs/src/mdx/chat/ApiArray.js @@ -0,0 +1,141 @@ +export const chatProps = [ + { + name: 'size', + type: 'string', + description: + 'Size of the component, XXS | XS | SM | MD | LG | XL | XXL default: LG' + }, + { + name: 'status', + type: 'string', + description: + 'Field status (adds specific styles): Info, Success, Warning, Danger, Primary default: Primary' + }, + { + name: 'title', + type: 'string', + description: 'text in top of chat' + } +]; + +export const messagesProps = [ + { + name: 'mapKey', + type: 'string', + description: 'Google Map Api key' + }, + { + name: 'messages', + type: 'array of object ↓', + description: + 'this props array contain object of all props under this line ↓' + }, + { + name: 'sender', + type: 'string', + description: 'message sender name' + }, + { + name: 'message', + type: 'string', + description: 'message content' + }, + { + name: 'date', + type: 'date', + description: 'time of send message send it with your format' + }, + { + name: 'files', + type: 'array of file', + description: + 'this array of file object {url: `file url`, icon: `file icon class`, type: `type of file`}' + }, + { + name: 'quote', + type: 'string', + description: 'Quoted message text' + }, + { + name: 'latitude', + type: 'number', + description: 'Map latitude' + }, + { + name: 'longitude', + type: 'number', + description: 'Map longitude' + }, + { + name: 'avatar', + type: 'string', + description: 'Message send avatar' + }, + { + name: 'reply', + type: 'boolean', + description: 'Determines if a message is a reply' + }, + { + name: 'type', + type: 'string', + description: 'Message type, available options text|file|map|quote' + } +]; + +export const fromProps = [ + { + name: 'imgDropTypes', + type: 'array', + description: + 'array of available image type default: [\'image/png\', \'image/jpeg\', \'image/gif\']' + }, + { + name: 'message', + type: 'string', + description: 'Predefined message text' + }, + { + name: 'buttonTitle', + type: 'string', + description: 'Send button title default: Send' + }, + { + name: 'buttonIcon', + type: 'string', + description: 'Send button icon class' + }, + { + name: 'showButton', + type: 'boolean', + description: 'Show send button default: true' + }, + { + name: 'dropFiles', + type: 'boolean', + description: 'user can drop files in input default: false' + }, + { + name: 'placeholder', + type: 'string', + description: 'placeholder of input default: Type a message' + }, + { + name: 'fileOverPlaceholder', + type: 'string', + description: + 'when user try to drop file will see fileOverPlaceholder of input default: Drop file to send' + }, + { + name: 'filesIcon', + type: 'string', + description: + 'image will see small preview but another file types need small icon you can send css class here' + }, + { + name: 'onSend()', + type: 'function', + description: + 'Callback with data object { message: `text`, files: `array of files` }' + } +]; diff --git a/docs/src/mdx/chat/Example.js b/docs/src/mdx/chat/Example.js new file mode 100644 index 00000000..f71fcfe2 --- /dev/null +++ b/docs/src/mdx/chat/Example.js @@ -0,0 +1,40 @@ +import { Chat, ChatForm, ChatMessages } from 'oah-ui'; +import React, { useState } from 'react'; +import defaultMessages from './messages'; + +export default function ChatPage() { + const [messages, setMessages] = useState(defaultMessages); + + const onSendHandle = v => { + const files = !v.files + ? [] + : v.files.map(file => { + return { + url: file.src, + type: file.type, + icon: 'icon ion-ios-document' + }; + }); + const newMessage = { + message: v.message, + date: new Date().toLocaleTimeString(), + reply: true, + type: files.length ? 'file' : 'text', + files, + sender: 'Ahmed Elywa', + avatar: 'https://i.gifer.com/no.gif' + }; + setMessages([...messages, newMessage]); + }; + + return ( + + + onSendHandle(v)} + dropFiles + filesIcon="icon ion-ios-document" + /> + + ); +} diff --git a/docs/src/mdx/chat/messages.js b/docs/src/mdx/chat/messages.js new file mode 100644 index 00000000..66def666 --- /dev/null +++ b/docs/src/mdx/chat/messages.js @@ -0,0 +1,73 @@ +export default [ + { + message: + 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + reply: false, + date: new Date().toLocaleTimeString(), + sender: 'Ahmed Elywa', + avatar: 'https://i.gifer.com/no.gif' + }, + { + message: + 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + reply: true, + date: new Date().toLocaleTimeString(), + sender: 'Ahmed Elywa', + avatar: 'https://i.gifer.com/no.gif' + }, + { + message: 'Hello, how are you?', + reply: false, + date: new Date().toLocaleTimeString(), + sender: 'Ahmed Elywa', + avatar: '' + }, + { + message: 'Hey looks at that pic I just found!', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'file', + files: [ + { + url: 'https://i.gifer.com/no.gif', + type: 'image/jpeg' + } + ], + sender: 'Ahmed Elywa', + avatar: '' + }, + { + message: 'What do you mean by that?', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'quote', + quote: + 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + sender: 'Ahmed Elywa', + avatar: '' + }, + { + message: 'Attached is an archive I mentioned', + reply: true, + date: new Date().toLocaleTimeString(), + type: 'file', + files: [ + { + url: 'https://i.gifer.com/no.gif', + icon: 'icon ion-ios-document' + } + ], + sender: 'Ahmed Elywa', + avatar: '' + }, + { + message: 'Meet me there', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'map', + latitude: 30.789901, + longitude: 30.999093, + sender: 'Ahmed Elywa', + avatar: '' + } +]; diff --git a/docs/src/mdx/chat/overview.mdx b/docs/src/mdx/chat/overview.mdx new file mode 100644 index 00000000..876e2f5e --- /dev/null +++ b/docs/src/mdx/chat/overview.mdx @@ -0,0 +1,95 @@ +## Chat + +Conversational UI collection - a set of components for chat-like UI construction. + +#### Main features: + +- different message types support (text, image, file, file group, map, etc) + +- drag & drop for images and files with preview + +- different UI styles + +### Usage + +```js +import { Chat, ChatForm, ChatMessages } from 'oah-ui'; +//or +import { Chat, ChatForm, ChatMessages } from 'oah-ui/Chat'; +``` + +Enjoy the conversation and the beautiful UI. + +[Example](demo://Example.js) + +#### Map key + +for map message type you need to pass map api key you can get from [Googal Maps](https://cloud.google.com/maps-platform/) + +## Messages type + +#### file + +like this object + +```js +{ + message: 'Hey looks at that pic I just found!', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'file', + files: [ + { + url: 'https://i.gifer.com/no.gif', + type: 'image/jpeg' + } + ], + sender: 'Ahmed Elywa', + avatar: '' + } +``` + +### map + +```js +{ + message: 'Meet me there', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'map', + latitude: 30.789901, + longitude: 30.999093, + sender: 'Ahmed Elywa', + avatar: '' +} +``` + +### quote + +```jsx +{ + message: 'What do you mean by that?', + reply: false, + date: new Date().toLocaleTimeString(), + type: 'quote', + quote: + 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + sender: 'Ahmed Elywa', + avatar: '' +} +``` + +### text + +by default it work as text + +```js +{ + message: + 'Hello, how are you? This should be a very long message so that we can test how it fit into the screen.', + reply: false, + date: new Date().toLocaleTimeString(), + sender: 'Ahmed Elywa', + avatar: 'https://i.gifer.com/no.gif' +} +``` diff --git a/docs/src/mdx/guides/install-based-on-starter-kit.mdx b/docs/src/mdx/guides/install-based-on-starter-kit.mdx index 8b50d798..cad0558c 100644 --- a/docs/src/mdx/guides/install-based-on-starter-kit.mdx +++ b/docs/src/mdx/guides/install-based-on-starter-kit.mdx @@ -65,8 +65,4 @@ npm run build || yarn build ``` This will clear up your `public` folder (where release files are located) and generate a release build. -Now you can copy the sources from the `public` folder and use it with any backend framework or simply [put it under a web server](/guides/server-deployment). - -## Related Articles - -- [Deploying to production server](/guides/server-deployment) +Now you can copy the sources from the `public` folder and use it with any backend frameworks diff --git a/docs/src/mdx/progress/ApiArray.js b/docs/src/mdx/progress/ApiArray.js new file mode 100644 index 00000000..f6bcda3a --- /dev/null +++ b/docs/src/mdx/progress/ApiArray.js @@ -0,0 +1,24 @@ +export const progressProps = [ + { + name: 'status', + type: 'string', + description: + 'adds specific styles first letter capital: Primary, Info, Success, Warning, Danger, Default.' + }, + { + name: 'size', + type: 'string', + description: + 'Size of the component available sizes: SM, MD, LG, XL default: MD' + }, + { + name: 'value', + type: 'number', + description: 'Progress bar value in percent (0 - 100)' + }, + { + name: 'displayValue', + type: 'number', + description: 'Displays value inside progress bar' + } +]; diff --git a/docs/src/mdx/progress/Interactive.js b/docs/src/mdx/progress/Interactive.js new file mode 100644 index 00000000..94a4adf7 --- /dev/null +++ b/docs/src/mdx/progress/Interactive.js @@ -0,0 +1,69 @@ +import React, { useState, useEffect } from 'react'; +import { Card, CardBody, Actions, Progress } from 'oah-ui'; +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + align-items: center; + .bar { + flex: 1; + } +`; +function Interactive() { + const [value, setValue] = useState(25); + const [status, setStatus] = useState('Danger'); + + useEffect( + () => { + if (value <= 25) { + setStatus('Danger'); + } else if (value <= 50) { + setStatus('Warning'); + } else if (value <= 75) { + setStatus('Info'); + } else { + setStatus('Success'); + } + }, + [value] + ); + + const setProgressValue = newValue => { + setValue(Math.min(Math.max(newValue, 0), 100)); + }; + return ( + +
Progress Bar Interactive
+ + + setProgressValue(value - 25) } + } + ]} + /> + + setProgressValue(value + 25) } + } + ]} + /> + + + + ); +} + +export default Interactive; diff --git a/docs/src/mdx/progress/Size.js b/docs/src/mdx/progress/Size.js new file mode 100644 index 00000000..fadfbb37 --- /dev/null +++ b/docs/src/mdx/progress/Size.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { Card, CardBody, Progress } from 'oah-ui'; + +function Size() { + const style = { marginBottom: '1rem' }; + return ( + +
Progress Bar Size
+ + {['XS', 'SM', 'MD', 'LG', 'XL'].map((key, index) => ( + + {key} + + ))} + + + ); +} + +export default Size; diff --git a/docs/src/mdx/progress/Status.js b/docs/src/mdx/progress/Status.js new file mode 100644 index 00000000..e1678ade --- /dev/null +++ b/docs/src/mdx/progress/Status.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Card, CardBody, Progress } from 'oah-ui'; + +function Status() { + const style = { marginBottom: '1rem' }; + return ( + +
Progress Bar Status
+ + {['Info', 'Success', 'Danger', 'Primary', 'Warning', 'Default'].map( + (key, index) => ( + + {key} + + ) + )} + + + ); +} + +export default Status; diff --git a/docs/src/mdx/progress/Value.js b/docs/src/mdx/progress/Value.js new file mode 100644 index 00000000..33e46354 --- /dev/null +++ b/docs/src/mdx/progress/Value.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Card, CardBody, Progress } from 'oah-ui'; + +function Value() { + const style = { marginBottom: '1rem' }; + return ( + +
Progress Bar Value
+ + + + Custom value + + + + ); +} + +export default Value; diff --git a/docs/src/mdx/progress/overview.mdx b/docs/src/mdx/progress/overview.mdx new file mode 100644 index 00000000..c0677791 --- /dev/null +++ b/docs/src/mdx/progress/overview.mdx @@ -0,0 +1,27 @@ +## Progress + +Progress Bar is a component for indicating progress. + +### Usage + +```jsx +import { Progress } from 'oah-ui'; +//or +import Progress from 'oah-ui/ProgressBar'; +``` + +Progress bar background could be configured by providing a `status` property: + +[Status](demo://Status.js) + +Progress bar size (height and font-size) could be configured by providing a `size` property: + +[Size](demo://Size.js) + +`displayValue` property shows current value inside progress bar. It's also possible to add custom text inside: + +[Value](demo://Value.js) + +Progress bar supports `width` and `background-color` transition: + +[Interactive](demo://Interactive.js) diff --git a/docs/src/mdx/search/ApiArray.js b/docs/src/mdx/search/ApiArray.js new file mode 100644 index 00000000..20cfb1b3 --- /dev/null +++ b/docs/src/mdx/search/ApiArray.js @@ -0,0 +1,28 @@ +export const searchProps = [ + { + name: 'hint', + type: 'string', + description: 'Hint showing under the input field to improve user experience' + }, + { + name: 'placeholder', + type: 'string', + description: 'Search input placeholder' + }, + { + name: 'type', + type: 'string', + description: + 'Search design type, available types are modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half' + }, + { + name: 'submit()', + type: 'function', + description: 'Callback with input value when pres Enter' + }, + { + name: 'onChange()', + type: 'function', + description: 'Callback with input value when it changed' + } +]; diff --git a/docs/src/mdx/search/Example.js b/docs/src/mdx/search/Example.js new file mode 100644 index 00000000..501da1f0 --- /dev/null +++ b/docs/src/mdx/search/Example.js @@ -0,0 +1,35 @@ +import { Row, Col, Card, CardBody, Search } from 'oah-ui'; +import React, { useState } from 'react'; + +export default function SearchPage() { + const [value, setValue] = useState(''); + const submitHandle = sentValue => setValue(sentValue); + return ( + + {[ + 'rotate-layout', + 'modal-zoomin', + 'modal-move', + 'modal-drop', + 'modal-half', + 'curtain', + 'column-curtain' + ].map(key => ( + + +
{key} Search
+ + submitHandle(v)} + type={key} + placeholder="Search..." + hint="Hit Enter to search" + /> + +
You Search for: {value}
+ + + ))} + + ); +} diff --git a/docs/src/mdx/search/overview.mdx b/docs/src/mdx/search/overview.mdx new file mode 100644 index 00000000..b0dbc1fb --- /dev/null +++ b/docs/src/mdx/search/overview.mdx @@ -0,0 +1,15 @@ +## Search + +Beautiful full-page search control. + +### Usage + +```js +import { Search } from 'oah-ui'; +//or +import Search from 'oah-ui/Search'; +``` + +Several animation types are available: modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half + +[Example](demo://Example.js) diff --git a/docs/src/mdx/spinner/ApiArray.js b/docs/src/mdx/spinner/ApiArray.js new file mode 100644 index 00000000..c8042ac3 --- /dev/null +++ b/docs/src/mdx/spinner/ApiArray.js @@ -0,0 +1,13 @@ +export const spinnerProps = [ + { + name: 'size', + type: 'string', + description: 'Size of the component, XXS | XS | SM | MD | LG | XL | XXL' + }, + { + name: 'status', + type: 'string', + description: + 'Field status (adds specific styles): Info, Success, Warning, Danger, Primary, Active, Disabled' + } +]; diff --git a/docs/src/mdx/spinner/Button.js b/docs/src/mdx/spinner/Button.js new file mode 100644 index 00000000..da67915f --- /dev/null +++ b/docs/src/mdx/spinner/Button.js @@ -0,0 +1,37 @@ +import React, { useState } from 'react'; +import { Card, CardBody, Spinner, Button, Col, Row } from 'oah-ui'; + +function ButtonTest() { + const [show, setShow] = useState(false); + + const onClick = () => { + setShow(true); + setTimeout(() => { + setShow(false); + }, 3000); + }; + + return ( + + + + {['Primary', 'Success', 'Danger'].map(key => ( + + + + ))} + + + + ); +} + +export default ButtonTest; diff --git a/docs/src/mdx/spinner/Size.js b/docs/src/mdx/spinner/Size.js new file mode 100644 index 00000000..549607f8 --- /dev/null +++ b/docs/src/mdx/spinner/Size.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Row, Col, Card, CardBody, Spinner } from 'oah-ui'; + +function Size() { + return ( + + {['XXS', 'XS', 'SM', 'MD', 'LG', 'XL', 'XXL'].map(key => ( + + + Some card content. + Loading... + + + ))} + + ); +} + +export default Size; diff --git a/docs/src/mdx/spinner/Status.js b/docs/src/mdx/spinner/Status.js new file mode 100644 index 00000000..c54a4989 --- /dev/null +++ b/docs/src/mdx/spinner/Status.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Row, Col, Card, CardBody, Spinner } from 'oah-ui'; + +function Status() { + return ( + + {[ + 'Info', + 'Success', + 'Danger', + 'Primary', + 'Warning', + 'Disabled', + 'Active' + ].map(key => ( + + + Some card content. + Loading... + + + ))} + + ); +} + +export default Status; diff --git a/docs/src/mdx/spinner/Tab.js b/docs/src/mdx/spinner/Tab.js new file mode 100644 index 00000000..a0eac32a --- /dev/null +++ b/docs/src/mdx/spinner/Tab.js @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { Card, Spinner, Tabs, Tab } from 'oah-ui'; + +function TabTest() { + const [showTab, setShowTab] = useState(false); + const [activeTab, setActiveTab] = useState(0); + + const onSelect = i => { + setShowTab(true); + setActiveTab(i); + setTimeout(() => { + setShowTab(false); + }, 3000); + }; + return ( + + onSelect(i)}> + +
+

Content 1

+ {showTab && } +
+ + +
+

Content 2

+ {showTab && } +
+ + +
+

Content 3

+ {showTab && } +
+ + + + ); +} + +export default TabTest; diff --git a/docs/src/mdx/spinner/overview.mdx b/docs/src/mdx/spinner/overview.mdx new file mode 100644 index 00000000..04a95c86 --- /dev/null +++ b/docs/src/mdx/spinner/overview.mdx @@ -0,0 +1,35 @@ +## Spinner + +Styled spinner + +
+
Note
+
+ Spinner Component has css absolute position So you need to make his parent + css relative position like you see in example +
+
+ +### Usage + +```jsx +import { Spinner } from 'oah-ui'; +//or +import Spinner from 'oah-ui/Spinner'; +``` + +Could be colored using `status` property + +[Status](demo://Status.js) + +Available in different sizes with `size` property: + +[Size](demo://Size.js) + +It is also possible to place it into the `button`: + +[Button](demo://Button.js) + +Or tabs: + +[Tab](demo://Tab.js) diff --git a/docs/src/mdx/toastr/overview.mdx b/docs/src/mdx/toastr/overview.mdx index 313eb6a2..c10fa6db 100644 --- a/docs/src/mdx/toastr/overview.mdx +++ b/docs/src/mdx/toastr/overview.mdx @@ -6,6 +6,14 @@ You can play with this example: [Test](demo://Test.js) +### Usage + +```js +import { Toastr } from 'oah-ui'; +//or +import Toastr from 'oah-ui/Toastr'; +``` + In Toastr Component there is Default setup ```jsx diff --git a/docs/src/mdx/user/ApiArray.js b/docs/src/mdx/user/ApiArray.js new file mode 100644 index 00000000..d50c70fc --- /dev/null +++ b/docs/src/mdx/user/ApiArray.js @@ -0,0 +1,66 @@ +export const userProps = [ + { + name: 'name', + type: 'string', + description: 'Specifies a name to be shown on the right of a user picture' + }, + { + name: 'title', + type: 'string', + description: + 'Specifies a title (written in a smaller font) to be shown under the name' + }, + { + name: 'onlyPicture', + type: 'boolean', + description: + 'Whether to show only a picture or also show the name and title' + }, + { + name: 'image', + type: 'string', + description: + 'Absolute path to a user picture. Or base64 image User name initials (JD for John Doe) will be shown if no picture specified' + }, + { + name: 'color', + type: 'string', + description: 'Color of the area shown when no picture specified' + }, + { + name: 'inverse', + type: 'string', + description: 'Makes colors inverse based on current theme' + }, + { + name: 'showInitials', + type: 'boolean', + description: + 'Whether to show a user initials (if no picture specified) or not' + }, + { + name: 'size', + type: 'string', + description: + 'Size of the component available sizes: SM, MD, LG, XL default: MD' + }, + { + name: 'badge', + type: 'object', + description: `accept object with three keys + 'status': (adds specific styles): Info, Success, Danger, Primary, Warning. + 'position': Can be set to one of predefined positions: + topRight, topLeft, bottomRight, bottomLeft, topStart, topEnd, bottomStart, bottomEnd + 'title': accept badge contain` + }, + { + name: 'className', + type: 'string', + description: 'You can pass any css class to modify title style' + }, + { + name: 'style', + type: 'object', + description: 'You can pass any css object to modify title style' + } +]; diff --git a/docs/src/mdx/user/Hide.js b/docs/src/mdx/user/Hide.js new file mode 100644 index 00000000..1d731326 --- /dev/null +++ b/docs/src/mdx/user/Hide.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Card, CardBody, User } from 'oah-ui'; + +function Hide() { + return ( + <> + +
only Picture
+ + + + + +
hide title
+ + + + + +
hide name
+ + + + + + ); +} + +export default Hide; diff --git a/docs/src/mdx/user/Image.js b/docs/src/mdx/user/Image.js new file mode 100644 index 00000000..7fbb5985 --- /dev/null +++ b/docs/src/mdx/user/Image.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Card, CardBody, User } from 'oah-ui'; + +function Image() { + return ( + <> + +
User avatar image set as link
+ + + + + +
User avatar with custom background color
+ + + + + +
User avatar image not set and showInitials disabled
+ + + + + + ); +} + +export default Image; diff --git a/docs/src/mdx/user/Size.js b/docs/src/mdx/user/Size.js new file mode 100644 index 00000000..2ee461f8 --- /dev/null +++ b/docs/src/mdx/user/Size.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { Card, CardBody, User } from 'oah-ui'; + +function Size() { + return ['SM', 'MD', 'LG', 'XL'].map(key => ( + + + + + + )); +} + +export default Size; diff --git a/docs/src/mdx/user/overview.mdx b/docs/src/mdx/user/overview.mdx new file mode 100644 index 00000000..5c8ca1a6 --- /dev/null +++ b/docs/src/mdx/user/overview.mdx @@ -0,0 +1,21 @@ +## User (Avatar) + +Represents a component showing a user avatar (picture) with a user name on the right. + +[Size](demo://Size.js) + +### Usage + +```js +import { User } from 'oah-ui'; +//or +import User from 'oah-ui/User'; +``` + +You can hide unnecessary captions (name, title or both): + +[Hide](demo://Hide.js) + +You can set custom avatar background-image, user image (as link or BASE64 string) and disable user initials: + +[Image](demo://Image.js) diff --git a/docs/src/pages/components/alert.js b/docs/src/pages/components/alert.js new file mode 100644 index 00000000..cc5a018a --- /dev/null +++ b/docs/src/pages/components/alert.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/alert/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { alertProps } from '../../mdx/alert/ApiArray'; + +export default function AlertPage() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/badge.js b/docs/src/pages/components/badge.js new file mode 100644 index 00000000..3f739a75 --- /dev/null +++ b/docs/src/pages/components/badge.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/badge/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { badgeProps } from '../../mdx/badge/ApiArray'; + +export default function BadgePage() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/chat.js b/docs/src/pages/components/chat.js new file mode 100644 index 00000000..bff0f575 --- /dev/null +++ b/docs/src/pages/components/chat.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/chat/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { chatProps, messagesProps, fromProps } from '../../mdx/chat/ApiArray'; + +export default function ChatPage() { + return ( + + + + + + <> + + + + + + + + + ); +} diff --git a/docs/src/pages/components/progress.js b/docs/src/pages/components/progress.js new file mode 100644 index 00000000..0a1fd6d8 --- /dev/null +++ b/docs/src/pages/components/progress.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/progress/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { progressProps } from '../../mdx/progress/ApiArray'; + +export default function ProgressPage() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/search.js b/docs/src/pages/components/search.js new file mode 100644 index 00000000..05788cb2 --- /dev/null +++ b/docs/src/pages/components/search.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/search/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { searchProps } from '../../mdx/search/ApiArray'; + +export default function SearchPage() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/spinner.js b/docs/src/pages/components/spinner.js new file mode 100644 index 00000000..a6ed89aa --- /dev/null +++ b/docs/src/pages/components/spinner.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/spinner/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { spinnerProps } from '../../mdx/spinner/ApiArray'; + +export default function SpinnerPage() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/user.js b/docs/src/pages/components/user.js new file mode 100644 index 00000000..902b90d0 --- /dev/null +++ b/docs/src/pages/components/user.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Row, Col } from 'oah-ui'; +import SEO from '../../components/SEO'; +import Switch from '../../components/Switch'; +import Overview from '../../mdx/user/overview.mdx'; +import ApiTable from '../../components/ApiTable'; +import StyleTable from '../../components/StyleTable'; +import { userProps } from '../../mdx/user/ApiArray'; + +export default function UserPage() { + return ( + + + + + + + + + + + ); +} diff --git a/package.json b/package.json index e393e548..9fee33c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oah-ui", - "version": "0.0.0-31", + "version": "0.1.0", "description": "React Styled Components with bootstrap grid system", "main": "index.js", "repository": "https://github.com/oahtech/oah-ui.git", diff --git a/rollup.config.js b/rollup.config.js index 0dd845bb..770b3510 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,7 +17,7 @@ const plugins = [ commonjs() ]; -const dir = 'docs/node_modules/oah-ui'; //'dist'; // +const dir = 'dist'; //'docs/node_modules/oah-ui'; const folders = []; const files = []; [ diff --git a/src/components/Alert.js b/src/components/Alert.js index 13bc78f5..c76d1c6c 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -7,7 +7,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; -import { size, statusArray } from './types'; +import { size, colorState } from './types'; const AlertStyle = styled.div` ${({ theme, size, status, accent, outline, closable }) => css` @@ -85,12 +85,12 @@ function Alert(props) { ); } -const status = PropTypes.oneOf([...statusArray, 'Active', 'Disabled']); + Alert.propTypes = { size, - status, - accent: status, - outline: status, + status: colorState, + accent: colorState, + outline: colorState, closable: PropTypes.bool, onClose: PropTypes.func }; diff --git a/src/components/Badge.js b/src/components/Badge.js index 72a43a96..76293761 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -36,6 +36,11 @@ const Badge = styled.span` } }} `; +Badge.defaultProps = { + position: 'topEnd', + status: 'Primary' +}; + Badge.propTypes = { position, status: colorState diff --git a/src/components/Chat/Form.js b/src/components/Chat/Form.js index c47dbe78..1515b494 100644 --- a/src/components/Chat/Form.js +++ b/src/components/Chat/Form.js @@ -3,21 +3,24 @@ import PropTypes from 'prop-types'; import { FormStyle } from './style'; function ChatForm(props) { - const [message, setMessage] = useState(''); + const [message, setMessage] = useState(props.message); const [files, setFiles] = useState([]); const [fileOver, setFileOver] = useState(false); const formRef = useRef(); - useEffect(() => { - formRef.current.addEventListener('drop', onDropFile); - formRef.current.addEventListener('dragover', onDragOver); - formRef.current.addEventListener('dragleave', onDragLeave); - return () => { - formRef.current.removeEventListener('drop', onDropFile); - formRef.current.removeEventListener('dragover', onDragOver); - formRef.current.removeEventListener('dragleave', onDragLeave); - }; - }, [files]); + useEffect( + () => { + formRef.current.addEventListener('drop', onDropFile); + formRef.current.addEventListener('dragover', onDragOver); + formRef.current.addEventListener('dragleave', onDragLeave); + return () => { + formRef.current.removeEventListener('drop', onDropFile); + formRef.current.removeEventListener('dragover', onDragOver); + formRef.current.removeEventListener('dragleave', onDragLeave); + }; + }, + [files] + ); const onDragOver = () => { setFileOver(true); diff --git a/src/components/Chat/Messages.js b/src/components/Chat/Messages.js index 982a0758..7e6107fa 100644 --- a/src/components/Chat/Messages.js +++ b/src/components/Chat/Messages.js @@ -9,9 +9,12 @@ import { MessageStyle } from './style'; function Messages(props) { const scrollRef = useRef(); - useEffect(() => { - scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight); - }, [props.messages]); + useEffect( + () => { + scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight); + }, + [props.messages] + ); const getMessageComponent = msg => { switch (msg.type) { case 'file': @@ -93,6 +96,7 @@ function Messages(props) { ); } Messages.propTypes = { + mapKey: PropTypes.string, messages: PropTypes.arrayOf( PropTypes.shape({ sender: PropTypes.string, @@ -109,6 +113,7 @@ Messages.propTypes = { latitude: PropTypes.number, longitude: PropTypes.number, avatar: PropTypes.string, + reply: PropTypes.bool, type: PropTypes.oneOf(['text', 'file', 'map', 'quote']) }) ) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index 06f7c16b..f0451908 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -5,9 +5,8 @@ */ import styled, { css, keyframes } from 'styled-components'; -import PropTypes from 'prop-types'; import React from 'react'; -import { size, statusArray } from './types'; +import { size, colorState } from './types'; const spin = keyframes` 0% { @@ -70,9 +69,14 @@ function Spinner(props) { ); } +Spinner.defaultProps = { + size: 'MD', + status: 'Primary' +}; + Spinner.propTypes = { size, - status: PropTypes.oneOf([...statusArray, 'Active', 'Disabled']) + status: colorState }; export default Spinner; diff --git a/src/components/User/style.js b/src/components/User/style.js index 7b680966..54f9f99f 100644 --- a/src/components/User/style.js +++ b/src/components/User/style.js @@ -28,7 +28,7 @@ const UserStyle = styled.div` css` height: ${theme[`userSize${size}`]}; width: ${theme[`userSize${size}`]}; - ${size === 'Small' && 'font-size: 80%;'} + ${size === 'SM' && 'font-size: 70%;'} `} &.background {