-
Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.
Here you'll find all the core components you need to create a delightful webapp.
diff --git a/docs/babel.config.js b/docs/babel.config.js
deleted file mode 100644
index e52d572838..0000000000
--- a/docs/babel.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
- presets: ['next/babel'],
- plugins: [
- [
- 'styled-components',
- {
- ssr: true,
- topLevelImportPaths: [
- '@xstyled/styled-components',
- '@xstyled/styled-components/no-tags',
- '@xstyled/styled-components/native',
- '@xstyled/styled-components/primitives',
- ],
- },
- ],
- ],
-}
diff --git a/docs/components/App.js b/docs/components/App.js
deleted file mode 100644
index 1de3ff5f94..0000000000
--- a/docs/components/App.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createTheme, WuiProvider } from '@welcome-ui/core'
-import { MDXProvider } from '@mdx-js/react'
-import { welcomeTheme } from '@welcome-ui/themes.welcome'
-import { darkTheme } from '@welcome-ui/themes.dark'
-import { welcomeDarkTheme } from '@welcome-ui/themes.welcome-dark'
-import { Notifications } from '@welcome-ui/toast'
-
-import { useThemeContext } from '../context/theme'
-
-import { Layouts } from './Layouts'
-import { MDXComponents } from './Mdx'
-import { Head } from './Head'
-import { GlobalStyle } from './GlobalStyle'
-
-const coreTheme = createTheme()
-
-const getTheme = themeStorage => {
- if (themeStorage === 'welcome') {
- return welcomeTheme
- } else if (themeStorage === 'dark') {
- return darkTheme
- } else if (themeStorage === 'welcomeDark') {
- return welcomeDarkTheme
- } else {
- return coreTheme
- }
-}
-
-export function App({ component: Component, pageProps }) {
- const themeStorage = useThemeContext()
- const initialTheme = welcomeTheme
- const [globalTheme, setGlobalTheme] = useState(initialTheme)
-
- useEffect(() => {
- setGlobalTheme(getTheme(themeStorage))
- }, [themeStorage])
-
- return (
-
-
- {children}
-
-
-
- {title}
-
-
-
- {description}
-
-
- )
-}
-
-export function Components() {
- return (
- - components - - ), - number: '50+', - icon:
- stars - - ), - number: '440+', - icon:
- Downloads - - ), - number: '650+', - icon:
- {JSON.stringify(values, 0, 2)}
-
- )}
- - {component?.split(',')?.[0]} -
- {description &&
- {description}
-
- {authors?.map(({ name, url }, idx) => (
-
-
- {authors?.map(({ name }, idx) => (
- <>
- {idx !== 0 && ', '}
- {name}
-
- ))}
-
-
- {date.toDateString()}
-
-
-
- {`import { Link as RouterLink } from 'react-router-dom'
-
-
- Introduction
- Components
- Breadcrumb
- `}
-
-
-## Last child clickable
-
-By default we removed clickable the last child. You can change this by set to false `lastChildNotClickable`
-
-```jsx
-{`require('@welcome-ui/icons.font/fonts/welcome-icon-font.css')`}
-
-Here is an example on how to use css class to display icons:
-
-```jsx row
-
-
-
-```
-
-## Available icons
-
-**Note**: You can click on an icon to copy its name.
-
-### Arrows
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'arrows', isIconFont: true })
-}
-```
-
-### Actions
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'actions', isIconFont: true })
-}
-```
-
-### Miscellaneous
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'miscellaneous', isIconFont: true })
-}
-```
-
-### WTF
-
-```jsx withCode=false
-function() {
- return IconsList({ name: "wtf", isIconFont: true })
-}
-```
-
-### Files
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'files', isIconFont: true })
-}
-```
-
-### Player
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'player', isIconFont: true })
-}
-```
-
-### Avatar
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'avatar', isIconFont: true })
-}
-```
-
-### Markdown
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'markdown', isIconFont: true })
-}
-```
-
-### Table
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'table', isIconFont: true })
-}
-```
-
-### Brands
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'brands', isIconFont: true })
-}
-```
-
-## Packages
-
-### Dependencies
-
-This is a text in a div tag (won't add an underline)
-
-This is a div with data-wui-link prop
-
-
-{`import { Link as RouterLink } from 'react-router-dom'
-
-
- Jobs
-`}
-
-
-## Properties
-
-
- {`[
- { name: 'bold', title: 'Bold' },
- { name: 'italic', title: 'Italic' },
- { name: 'strikethrough', title: 'Strikethrough' },
- { name: 'link', title: 'Link' },
- { name: 'divider' },
- { name: 'heading_1', title: 'Heading 1' },
- { name: 'heading_2', title: 'Heading 2' },
- { name: 'divider' },
- { name: 'unordered_list', title: 'Unordered list' },
- { name: 'ordered_list', title: 'Ordered list' },
- { name: 'divider' },
- { name: 'code', title: 'Code' },
- { name: 'quote', title: 'Quote' },
- { name: 'divider' },
- { name: 'emoji', icon: '🙂', title: 'Emoji' }
-]`}
-
-
-## Actions
-
-You can add some actions on the bottom of the textarea with `actions` childrens. We calculate automatically the height of actions.
-
-```jsx
-function () {
- const [value, setValue] = React.useState('')
-
- const handleChange = event => {
- setValue(event.target.value)
- }
-
- return (
- - -
Change range with `rangeDisplay`, by default it is `5`. - -```jsx -function() { - const [page, setPage] = React.useState(1) - - return ( -
- Quisque sapien ligula, rutrum quis aliquam nec, convallis sit amet erat.
- Mauris auctor blandit porta. -
- Quisque sapien ligula, rutrum quis aliquam nec, convallis sit amet erat.
- Mauris auctor blandit porta. -
-
- 
-
- {item.Title} ({item.Year})
-
- )
- }
- placeholder="Search a movie"
- itemToString={item => item && item.Title}
- onChange={handleChange}
- value={value}
- search={async function asyncSearch(s) {
- const response = await fetch(`https://www.omdbapi.com?apikey=41514363&s=${s}`)
- const data = await response.json()
- return data.Search
- }}
- />
- )
-}
-```
-
-## With option groups
-
-To use option groups, you must provide two additional props: `groupsEnabled` that allow nested options and `renderGroupHeader` that renders the header of a specific group
-
-```jsx
-function () {
- const [value, setValue] = React.useState('')
-
- const handleChange = (newValue) => {
- setValue(newValue)
- }
-
- return (
-
-
-
-
- {item.Title} ({item.Year})
-
- )
- }
- placeholder="Search a movie or series"
- itemToString={item => item && item.Title}
- groupsEnabled
- renderGroupHeader={({ label, options }) => (
-
- {`{
- Search: [
- {Title: "Big Fish", Year: "2003", imdbID: "tt0319061", Type: "movie",…},
- {Title: "A Fish Called Wanda", Year: "1988", imdbID: "tt0095159", Type: "movie",…},
- {Title: "Fish Tank", Year: "2009", imdbID: "tt1232776", Type: "movie",…},
- {Title: "Rumble Fish", Year: "1983", imdbID: "tt0086216", Type: "movie",…},
- {Title: "Cold Fish", Year: "2010", imdbID: "tt1632547", Type: "movie",…},
- ],
- totalResults: "895",
- Response: "True"
-}`}
-
-
-We could pass the following prop to the `Search` component:
-
-
- {`search={async function asyncSearch(query) {
- const response = await fetch('https://www.omdbapi.com?apikey=' + YOUR_API_KEY + '&s=' + query)
- const data = await response.json()
- return data.Search
-}}`}
-
-
-To use option groups, you should return the results as follows:
-
-
- {`[
- {label: 'My first group label', options: [movie1, movie2]}
- {label: 'My second group label', options: [serie1, serie2]}
-]`}
-
-
-### renderItem
-
-A component that renders each of the results in the list e.g.
-
-{`renderItem={item => {item.Title} ({item.Year})}`}
-
-### itemToString
-
-A function that converts a selected result to a string e.g.
-
-{`itemToString={item => item && item.Title}`}
-
-### All properties
-
-The rest of the props are below:
-
-
-
-
-
-
-Foo
- Bar
- Baz
-Foo
- Bar
- Baz
-Foo
- Bar
- Baz
-
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- Tab 4
- {`export default ${themeValues().space}`}
-
-## Borders
-
-By default, we have a border radius on components. You can remove it by set to 0 the radii borders. You can also configure the width of the border.
-
-{`export default ${themeValues().radii}`}
-
-## Breakpoints (screens)
-
-We use [screens from xstyled](https://xstyled.dev/docs/responsive-design/). Default sizes from the core theme are below. (Note: values are taken from [this article](https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a)).
-
-{`export default ${themeValues().screens}`}
-
-### Usage
-
-```jsx column
-{`export default ${themeValues().fonts}`}
-
-{themeTag()}
-
-You can check all our theme objects on each packages/component on file `theme.js`.
-
-### How to customize the component
-
-The entry is always in plurial (tags, buttons, etc.)
-
-```jsx live=false
-import React from 'react'
-import { createTheme, WuiProvider } from '@welcome-ui/core'
-import { Button } from '@welcome-ui/button'
-
-const yourTheme = {
- tags: {
- variants: {
- default: {
- backgroundColor: '#010101',
- color: '#FFF',
- },
- primary: {
- backgroundColor: '#FFF000',
- color: '#000',
- },
- },
- sizes: {
- sm: {
- padding: 10,
- height: 10,
- fontSize: 12,
- },
- md: {
- padding: 10,
- height: 14,
- fontSize: 14,
- },
- },
- },
-}
-const theme = createTheme(yourTheme)
-
-export default function Root() {
- return (
- These will be merged with the default theme. - -
{themeValues()}
-
-