UI componentes based on Platzily design system
Home Page: https://platzily.github.io/platzily-ui
License: MIT License
This part of the documentation assumes that you have docker-compose installed
On the root of the project run the following command
cat .env.example > .envFill all the environment variables on the .env file
yarn start:databaseWait for the databases to fill and run the following command
yarn devNow you should have
The users should be allowed to import the icons described by Platzily-UI design system. Platzily use Hero Icons as it icons provider. So @platzily-ui/icons will be a package providing a wrapper to call these icons.
It will work this way
import { Fragment } from 'react';
import { Link } from '@platzily-ui/icons';
export default function Icons() {
return (
<Fragment>
<Link width="3rem" height="3rem"/>
</Fragment>
);
}Icons should be done using forward ref.
The necesity to use icons in the Platzily UI.
We need a logo for Platzily
Create a logo for platzily
Logo dedicated to Platzily
Have an identity as Platzily.
The Button component will be used like this:
import { Button } from '@platzily-ui/components';
// import Button from '@platzily-ui/components/Button'; Can by called like this either.
export default function MyButton() {
const handleClick = () => {
// My function
}
return (
<Button onClick={ handleClick }>
MyButtonName
</Button>
)
}
The Button component will be used by the user to trigger a fuction in the UI.
The user will import the Button component and it will have to receive all available props for an button HTML element.
As the user could need to give the button a ref, it must be done using React.forwardRef API.
The Button should have this states:
An button is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Input element.
Update Colors of Theme by default to that it agree with Figma
Is the representation of an item into the list component
List item is a sub component from List component and have to be always into that.
import { ListItem } from '@platzily-ui/components';
// import ListItem from '@platzily-ui/components/ListItem'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<List>
<ListItem> Item </ListItem>
</List>
</p>
)
}The user need some items to fill a list component.
Paper is a basic component that can be used as a container and define default options about spacing, effects and styles.
Paper is a container of other components and a basic div with some props to change style options.
import { Paper } from '@platzily-ui/components';
// import Paper from '@platzily-ui/components/Paper'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Paper>
content
</Paper>
</p>
)
}Have a basic component to use like a container
Card is a specific component to use with elements that require a header and a content.
Card is a container that have tow important sections header and content and is used to define detail information about and specific element.
import { Card } from '@platzily-ui/components';
// import Card from '@platzily-ui/components/Card'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Card >
<CardHeader>header</CardHeader>
<CardContent>content</CardContent>
</Card>
</p>
)
}It's necessary to show some information with a header to describe the content.
The Table component lets the user to visualize data in an easy way.
In a responsive way
And support actions and pagination.
The table will be used like this:
import { Table } from '@platzily-ui/components'
const rows = [
{ name: 'Bruce', job: 'Batman' },
{ name: 'Clark', job: 'Superman' },
{ name: 'Alonso', job: 'Firefighter' }
]
const columns = [
{
title: 'Name' // The title shown in the head of the column,
accessor: 'name' // the key to access the object in the data
},
{
title: 'Job' // The title shown in the head of the column,
accessor: 'job' // the key to access the object in the data
},
{
title: 'Actions',
Cell: ({ row, column }) => ( // You could pass a key called `Cell` to, it needs to be a function returning a component, and receive as prop, row and column
<div>
<button>Action 1</button>
<button>Action 2</button>
</div>
)
}
]
const MyComponent = () => {
return (
<Table
rows={rows}
columns={columns}
page={0} // actual page
onPageChange={() => {}} // function to be called when page change
/>
)
}The component receive as props
The component mus be tested using unit testing
A way to present data to the user.
The MenuItem is the li inside the ul of the Menu component
In this case the MenuItems are
and
They are in charge of handling the styles of hover, focused, etc.
They can receive anything as children.
The component needs to be tested using unit testing.
A easy way to stylize the options inside the Menu.
The Input component will be used like this:
import { useState } from 'react';
import { Input } from '@platzily-ui/components';
// import Input from '@platzily-ui/components/Input'; Can by called like this either.
export default function MyForm() {
const [state, setState] = useState({
name: ''
})
const handleInputChange = (event) => setState({ name: event.target.value })
return (
<form>
<Input
value={state.name}
onChange={handleInputChange}
/>
</form>
)
}
The Input component will be used by the user to pass information in the UI.
The user will import the Input component and it will have to receive all available props for an input HTML element.
As the user could need to give the Input a ref, it must be done using React.forwardRef API.
The Input should have this states:
An Input is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Input element.
Is the component to control all text forms in the UI.
The Typography component will be used like this:
import { Typography } from '@platzily-ui/components';
// import Typography from '@platzily-ui/components/Typography'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Typography
variant="h1"
component="h1"
>
text
</Typography>
</p>
)
}The component will be used to set anyone text in the UI.
It should allow change between different variants of texts used in HTML (h1 -h6)
The user will import the Typography component and it will have to receive all available props for an h or p tags HTML element.
The user could assign the alignment in each Typography component.
The user could define if the text wrap or no wrap the content.
The user could chose the emphasize of text.
As the user could need to give the Typography a ref, it must be done using React.forwardRef API.
Hand over to the user the possibility to standardize the text over their UI and use this text in different layout parts, assigning some properties in order to customize the text content.
Paper is a basic component that can be used as a container and define default options about spacing, effects and styles.
Paper is a container of other components and a basic div with some props to change style options.
import { Paper } from '@platzily-ui/components';
// import Paper from '@platzily-ui/components/Paper'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Paper>
content
</Paper>
</p>
)
}Have a basic component to use like a container
The Header component will be used like this:
import { Header } from '@platzily-ui/components';
// import Header from '@platzily-ui/components/Header'; Can by called like this either.
export default function MyHeader({ children }) {
return (
<Header position='fixed' color='secondary'>
{children}
</ Header>
)
}The Header component will be used with container for others components of the UI
As the user could need to give the Header a ref, it must be done using React.forwardRef API.
The Header must use the element HMTL of <header>
The user will import the Header component and it will have to receive all available props:
An Header is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Header element.
The Input component will be used like this:
import { useState } from 'react';
import { Input } from '@platzily-ui/components';
// import Input from '@platzily-ui/components/Input'; Can by called like this either.
export default function MyForm() {
const [state, setState] = useState({
name: ''
})
const handleInputChange = (event) => setState({ name: event.target.value })
return (
<form>
<Input
value={state.name}
onChange={handleInputChange}
/>
</form>
)
}
The Input component will be used by the user to pass information in the UI.
The user will import the Input component and it will have to receive all available props for an input HTML element.
As the user could need to give the Input a ref, it must be done using React.forwardRef API.
The Input should have this states:
An Input is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Input element.
Applications based on Platzily UI needs a way to move between pages, this is why the drawer component is needed. It a provides a way to layout subcomponents that can have the responsibility of moving the user through pages.
The drawer will be called by the end users like this:
import { Drawer } from '@platzily-ui/components'
const MyComponent = () => {
return (
<Drawer/>
)
}And it will be receive the following props:
Providing a way to move through the differente modules of an app.
The Button component will be used like this:
import { Button } from '@platzily-ui/components';
// import Button from '@platzily-ui/components/Button'; Can by called like this either.
export default function MyButton() {
const handleClick = () => {
// My function
}
return (
<Button onClick={ handleClick }>
MyButtonName
</Button>
)
}
The Button component will be used by the user to trigger a fuction in the UI.
The user will import the Button component and it will have to receive all available props for an button HTML element.
As the user could need to give the button a ref, it must be done using React.forwardRef API.
The Button should have this states:
An button is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Input element.
The Menu component is a component that attach to a ref and creates a menu refered to it.
It can receive anything as child, for example in the picture above is shown a Header showing the user info, but it will receive mostly MenuItems component, the Menu is inside a Paper component, it renders a ul element and the MenuItems would be the li elements inside.
It will be used like this:
import { Fragment, useRef } from 'react'
import { Menu, MenuItem } from '@platzily-ui/components'
const MyComponent = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = !!anchorEl;
const handleClick = (open) => (event) => { setAnchorEl(open ? event.currentTarget : null); };
return (
<Fragment>
<button
ref={ref}
onClick={handleClick(true)}
>
Open Menu
</button>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClick(false)}
>
<MenuItem onClick={handleClick(false)}>option 1</MenuItem>
<MenuItem onClick={handleClick(false)>option 2</MenuItem>
<MenuItem onClick={handleClick(false)>option 3</MenuItem>
</Menu>
</Fragment>
)
}The component must be tested using unit testing.
A way to provide a one in many selection path to the user.
The Table component lets the user to visualize data in an easy way.
In a responsive way
And support actions and pagination.
The table will be used like this:
import { Table } from '@platzily-ui/components'
const rows = [
{ name: 'Bruce', job: 'Batman' },
{ name: 'Clark', job: 'Superman' },
{ name: 'Alonso', job: 'Firefighter' }
]
const columns = [
{
title: 'Name' // The title shown in the head of the column,
accessor: 'name' // the key to access the object in the data
},
{
title: 'Job' // The title shown in the head of the column,
accessor: 'job' // the key to access the object in the data
},
{
title: 'Actions',
Cell: ({ row, column }) => ( // You could pass a key called `Cell` to, it needs to be a function returning a component, and receive as prop, row and column
<div>
<button>Action 1</button>
<button>Action 2</button>
</div>
)
}
]
const MyComponent = () => {
return (
<Table
rows={rows}
columns={columns}
page={0} // actual page
onPageChange={() => {}} // function to be called when page change
/>
)
}The component receive as props
The component mus be tested using unit testing
A way to present data to the user.
Applications based on Platzily UI needs a way to move between pages, this is why the drawer component is needed. It a provides a way to layout subcomponents that can have the responsibility of moving the user through pages.
The drawer will be called by the end users like this:
import { Drawer } from '@platzily-ui/components'
const MyComponent = () => {
return (
<Drawer/>
)
}And it will be receive the following props:
Providing a way to move through the differente modules of an app.
The idea is to configure, Issues and PR templates, guidelines, and contribution documentation.
We need functions that help to manipulate the colors as add alpha to colors or convert hex-color to rgb-color
import { addAlphaColor } from '@platzily-ui/styling'
const useStyleSheet = createStyleSheet(
(theme, props) => {
return {
primaryButton: {
backgroundColor: props.color || theme.palette.tertiary.main,
color: theme.palette.primary.main,
'&:hover': {
color: '#FFFFFF',
backgroundColor: addAlphaColor(props.color || theme.palette.tertiary.main, 0.6)
},
'&:focus': {
backgroundColor: addAlphaColor(props.color || theme.palette.tertiary.main, 0.6)
},
};
},
{ key: 'button' },
);
}To create different components we needed that some colors could add alpha channel to better the control of colors
Footer is a component to contains some relevant information about the platform or business and regularly have contact information too.
Is a final section of the page and could contains other elements.-components.
import { Footer } from '@platzily-ui/components';
// import Footer from '@platzily-ui/components/Footer'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Footer
fixed
>
Copyright
</Footer>
</p>
)
}Have a section to the user put specific information about business contact or business information.
This component is used to create group of text and show that items like a list. Its component support list items with different content: images-icons, text, inputs and have interactions.
The list is the container of list items.
import { List } from '@platzily-ui/components';
// import List from '@platzily-ui/components/List'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<List>
<ListItem>item 1</ListItem>
</List>
</p>
)
}The list component contains list items components, between this components and container have a standard space and the user could change the size and background.
The elements into the list (list items) have adjusted to the container heigh and show and scroll with a great style (round borders and small size).
In general a menu component need list to being able to work and the user could build anyone elements type into a group in order to show this elements like a list.
Based on the UI desktop, we will design the mobile interface to develop the components parallel to the different responsive views
There must be a mock that can be used by the rest of the teams where is a mobile version of the Login page.
Platzily UI must be optimized to be used in any device and size. This is why the Login module should respond in a good way when visiting the login path.
useOutsideClick is a hook inspired in https://github.com/Sphinx-Society/kaizen-web-client/blob/master/src/client/hooks/useOutsideClick/useOutsideClick.js and it will allow achieve behavior for Modals and Menus that when clicked outside the can close. This hooks is meant to be used insided the components package and not to be exposed.
it will be used like this:
import { useRef } from 'react'
import { useOutsideClick } from '@platzily-ui/components/useOutsideClick'
const MyComponent = () => {
const ref = useRef()
const onClose = () => alert('click was done outside')
useOutsideClick(ref, onClose)
return (
<div ref={ref}></div>
)
}The hook must be tested using unit testing
A way to manage a friendly way to click outside a component.
The ButtonsGroupo component is a component that works like a one of many choice to the user, these choices are all in the same context but the user can select only one. For example, selecting:
In the dashboard module.
The component will be used like this:
import { ButtonGroup } from '@platzily-ui/components'
const MyComponent = () => {
const actions = [
{ // extends ButtonsProps object and
selected: true || false // it applies the selected styles to the button
}
]
return (
<ButtonsGroup
actions={actions}
/>
)
}The component must be tested using unit testing
A way to let the user decide between any qty of contexts
The module 'prop-types' missing in the library when is not install in the project.
The module 'prop-types' should be installed in the lib without be install in the project
Steps:
npm audit fiximport { ThemeProvider } from '@platzily-ui/styling' If user install the lib and will not install the module 'PropTypes'. The User could not run the app
| Tech | Version |
|---|---|
| Platzily UI | v0.1.0 |
| Browser (Chrome) | Brave |
| OS (Linux, Windows) | Ubuntu 21.10 |
| Further comments? |
There is a need of styling the components imported, this api will provide that functionality. This API includes:
// index.js
import React from 'react'
import { render } from 'react-dom'
import { ThemeProvider } from 'platzily-ui'
import theme from './theme'
import App from './App'
render(
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>,
document.getElementById('container')
)// components/MyAwesomeComponent.js
import { Fragment } from 'react'
import { createStyleSheet, Text } from 'platzily-ui'
const useStyleSheet = createStyleSheet((theme, props) => ({
title: {
color: theme.palette.primary
},
subtitle: {
color: props.color
}
}))
export function MyAwesomeComponent(props) {
const classes = useStyleSheet(props)
return (
<Fragment>
<Text className={classes.title}>Title</Text>
<Text className={classes.subtitle}>Subtitle</Text>
</Fragment>
)
}A way to let the user style their components.
There is a Spike template inside the .github folder, however is not been taken by Github to use it, there must be a format issue blocking Github to use the template.
The tempalte should be shown as Bug and Feature Request
Steps:
| Tech | Version |
|---|---|
| Platzily UI | v0.1.0 |
| Browser (Chrome) | N/A |
| OS (Linux, Windows) | N/A |
| Further comments? | N/A |
The Header component will be used like this:
import { Header } from '@platzily-ui/components';
// import Header from '@platzily-ui/components/Header'; Can by called like this either.
export default function MyHeader({ children }) {
return (
<Header position='fixed' color='secondary'>
{children}
</ Header>
)
}The Header component will be used with container for others components of the UI
As the user could need to give the Header a ref, it must be done using React.forwardRef API.
The Header must use the element HMTL of <header>
The user will import the Header component and it will have to receive all available props:
An Header is a basic component in any UI, so it make sense for Platzily-UI to have its own implementation of an Header element.
The Chart component provided an user friendly way of rendering a chart inside a card.
We'll expose two types of charts, wave and population. We'll use Echarts to achieve this component, and will use the same schema that echarts uses. This component is an layer between echarts and the project using platzily ui. As echarts is a really heavy library we'll take only what we need. These are the links resulted from the research.
The person in charge of building this component can take information from the links above.
The component will be used like this.
import { Chart } from '@platzily-ui/components'
const options = {} // here will be the schema resulted from the implementation
const MyComponent = () => {
return (
<Chart type={'wave' || 'population'} options={options} />
)
}Have in mind that we do not have to expose the same schema as echarts, we could expose a minimalist schema of this and take abstration of some fields that could be inherent to Platzily UI design system.
The component must be tested using unit testing.
A way to provide to the user an easy way to render data as charts.
The Modal component is a way to provide the user information that do have another context but not necessarily needs the user to go to another module.
It will be used this way:
import { Modal } from '@platily-ui/components'
const MyComponent = () => {
return (
<Modal>
<p>Title</p>
<div> Content </div>
</Modal>
)
}As dialog is still experimental we'll be using div as root tag, the component shoudl receive:
to provide the user information that do have another context but not necessarily needs the user to go to another module.
The portal component handle the abstraction of working with React Portals
It will be used mostly inside the components library and it is not meant to be exposed to external use
It will be used this way:
import { useState, useRef } from 'react'
import { Portal } from '@platzily-ui/components'
export default function MyComponent() {
const [show, setShow] = useState(false);
const container = useRef(null);
const handleClick = () => {
setShow(!show);
};
return (
<div>
<button onClick={handleClick}>
{show ? 'Unmount children' : 'Mount children'}
</button>
<div>
It looks like I will render here.
{show ? (
<Portal container={container.current}>
<span>But I actually render here!</span>
</Portal>
) : null}
</div>
<div ref={container} />
</div>
);
}The component needs to be tested using unit testing.
A way to provide a component that handles the React Portal logic.
The Chart component provided an user friendly way of rendering a chart inside a card.
We'll expose two types of charts, wave and population. We'll use Echarts to achieve this component, and will use the same schema that echarts uses. This component is an layer between echarts and the project using platzily ui. As echarts is a really heavy library we'll take only what we need. These are the links resulted from the research.
The person in charge of building this component can take information from the links above.
The component will be used like this.
import { Chart } from '@platzily-ui/components'
const options = {} // here will be the schema resulted from the implementation
const MyComponent = () => {
return (
<Chart type={'wave' || 'population'} options={options} />
)
}Have in mind that we do not have to expose the same schema as echarts, we could expose a minimalist schema of this and take abstration of some fields that could be inherent to Platzily UI design system.
The component must be tested using unit testing.
A way to provide to the user an easy way to render data as charts.
useWindowDimensions is a hook exposed from styling api, to let the user manage mediaqueries it is inspired from https://github.com/Sphinx-Society/kaizen-web-client/blob/master/src/client/hooks/useWindowDimensions/useWindowDimensions.js
It will be used like this:
import { useWindowDimensions, useTheme } from '@platzily-ui/styling'
const MyComponent = () => {
const { width } = useWindowDimensions();
const theme = useTheme()
const isMobile = width < theme.breakpoints.mobile + 1;
if (isMobile) {
return (
<MobileUI/>
)
}
return <NotMobileUI/>
}It could be combined with createStyleSheet too
import { useWindowDimensions, createStyleSheet, useTheme } from '@platzily-ui/styling'
const baseStyles = {}
const mobileStyles = {}
const notMobileStyles = {}
const useStyleSheet = createStyleSheet((_, props) => ({
root: {
...baseStyles,
...(props.isMobile ? { ...mobileStyles } : { ...notMobileStyles })
}
}))
const MyComponent = () => {
const { width } = useWindowDimensions();
const theme = useTheme()
const isMobile = width < theme.breakpoints.mobile + 1;
const { classes } = useStyleSheet({ isMobile })
return <MobileAndNotMobileUI className={classes.root}/>
}The hook must be tested
A way to provide an user friendly way to manage mediaqueries
Is the representation of an item into the list component
List item is a sub component from List component and have to be always into that.
import { ListItem } from '@platzily-ui/components';
// import ListItem from '@platzily-ui/components/ListItem'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<List>
<ListItem> Item </ListItem>
</List>
</p>
)
}The user need some items to fill a list component.
This component is used to create group of text and show that items like a list. Its component support list items with different content: images-icons, text, inputs and have interactions.
The list is the container of list items.
import { List } from '@platzily-ui/components';
// import List from '@platzily-ui/components/List'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<List>
<ListItem>item 1</ListItem>
</List>
</p>
)
}The list component contains list items components, between this components and container have a standard space and the user could change the size and background.
The elements into the list (list items) have adjusted to the container heigh and show and scroll with a great style (round borders and small size).
In general a menu component need list to being able to work and the user could build anyone elements type into a group in order to show this elements like a list.
Card is a specific component to use with elements that require a header and a content.
Card is a container that have tow important sections header and content and is used to define detail information about and specific element.
import { Card } from '@platzily-ui/components';
// import Card from '@platzily-ui/components/Card'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Card >
<CardHeader>header</CardHeader>
<CardContent>content</CardContent>
</Card>
</p>
)
}It's necessary to show some information with a header to describe the content.
We need a Spike's template
Created Spike Template for future Spike in the project
Spike Template that will help to structure better future Spikes
Explain better the Spike decided for the team
The Modal component is a way to provide the user information that do have another context but not necessarily needs the user to go to another module.
It will be used this way:
import { Modal } from '@platily-ui/components'
const MyComponent = () => {
return (
<Modal>
<p>Title</p>
<div> Content </div>
</Modal>
)
}As dialog is still experimental we'll be using div as root tag, the component shoudl receive:
to provide the user information that do have another context but not necessarily needs the user to go to another module.
The ButtonsGroupo component is a component that works like a one of many choice to the user, these choices are all in the same context but the user can select only one. For example, selecting:
In the dashboard module.
The component will be used like this:
import { ButtonGroup } from '@platzily-ui/components'
const MyComponent = () => {
const actions = [
{ // extends ButtonsProps object and
selected: true || false // it applies the selected styles to the button
}
]
return (
<ButtonsGroup
actions={actions}
/>
)
}The component must be tested using unit testing
A way to let the user decide between any qty of contexts
Is the component to control all text forms in the UI.
The Typography component will be used like this:
import { Typography } from '@platzily-ui/components';
// import Typography from '@platzily-ui/components/Typography'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Typography
variant="h1"
component="h1"
>
text
</Typography>
</p>
)
}The component will be used to set anyone text in the UI.
It should allow change between different variants of texts used in HTML (h1 -h6)
The user will import the Typography component and it will have to receive all available props for an h or p tags HTML element.
The user could assign the alignment in each Typography component.
The user could define if the text wrap or no wrap the content.
The user could chose the emphasize of text.
As the user could need to give the Typography a ref, it must be done using React.forwardRef API.
Hand over to the user the possibility to standardize the text over their UI and use this text in different layout parts, assigning some properties in order to customize the text content.
Based on the UI desktop, we will design the mobile interface to develop the components parallel to the different responsive views
There must be a mock that can be used by the rest of the teams where is a mobile version of the Dashboard page.
Platzily UI must be optimized to be used in any device and size. This is why the Login module should respond in a good way when visiting the Dashboard path.
The Menu component is a component that attach to a ref and creates a menu refered to it.
It can receive anything as child, for example in the picture above is shown a Header showing the user info, but it will receive mostly MenuItems component, the Menu is inside a Paper component, it renders a ul element and the MenuItems would be the li elements inside.
It will be used like this:
import { Fragment, useRef } from 'react'
import { Menu, MenuItem } from '@platzily-ui/components'
const MyComponent = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = !!anchorEl;
const handleClick = (open) => (event) => { setAnchorEl(open ? event.currentTarget : null); };
return (
<Fragment>
<button
ref={ref}
onClick={handleClick(true)}
>
Open Menu
</button>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClick(false)}
>
<MenuItem onClick={handleClick(false)}>option 1</MenuItem>
<MenuItem onClick={handleClick(false)>option 2</MenuItem>
<MenuItem onClick={handleClick(false)>option 3</MenuItem>
</Menu>
</Fragment>
)
}The component must be tested using unit testing.
A way to provide a one in many selection path to the user.
Based on the UI desktop, we will design the mobile interface to develop the components parallel to the different responsive views
There must be a mock that can be used by the rest of the teams where is a mobile version of the Register page.
Platzily UI must be optimized to be used in any device and size. This is why the Register module should respond in a good way when visiting the login path.
Footer is a component to contains some relevant information about the platform or business and regularly have contact information too.
Is a final section of the page and could contains other elements.-components.
import { Footer } from '@platzily-ui/components';
// import Footer from '@platzily-ui/components/Footer'; Can by called like this either.
export default function MyComponent() {
return (
<p>
<Footer
fixed
>
Copyright
</Footer>
</p>
)
}Have a section to the user put specific information about business contact or business information.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.