├── .prettierrc ├── dist ├── assets │ ├── icons │ │ ├── css.png │ │ ├── html.png │ │ ├── twitch.png │ │ ├── twitter.png │ │ └── youtube.png │ ├── images │ │ ├── logo.png │ │ └── icons.png │ └── fonts │ │ ├── FiraCode │ │ ├── static │ │ │ ├── FiraCode-Bold.ttf │ │ │ ├── FiraCode-Light.ttf │ │ │ ├── FiraCode-Medium.ttf │ │ │ ├── FiraCode-Regular.ttf │ │ │ └── FiraCode-SemiBold.ttf │ │ └── FiraCode-VariableFont_wght.ttf │ │ └── PressStart2P │ │ └── PressStart2P-Regular.ttf ├── Styles │ ├── Settings │ │ ├── Colors │ │ │ ├── palette.js │ │ │ └── index.js │ │ ├── index.js │ │ └── Gaps │ │ │ └── index.js │ ├── Generic │ │ ├── index.js │ │ └── Reset │ │ │ └── index.js │ ├── Tools │ │ ├── Frame │ │ │ └── index.js │ │ ├── BoxShadow │ │ │ └── index.js │ │ ├── TextShadow │ │ │ └── index.js │ │ └── Cursor │ │ │ └── index.js │ ├── Elements │ │ ├── Text │ │ │ └── index.js │ │ ├── Form │ │ │ └── index.js │ │ ├── index.js │ │ └── Base │ │ │ └── index.js │ └── index.js ├── components │ ├── Loading │ │ └── index.js │ ├── Line │ │ └── index.js │ ├── Action │ │ └── index.js │ ├── Field │ │ ├── index.js │ │ ├── Textarea │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── Fieldset │ │ │ └── index.js │ │ ├── Select │ │ │ └── styles.js │ │ ├── Email │ │ │ └── index.js │ │ ├── Text │ │ │ └── index.js │ │ └── Checkbox │ │ │ └── index.js │ ├── Timer │ │ ├── index.js │ │ └── styles.js │ ├── VideoPlayer │ │ ├── Fullscreen │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── PlayAndPause │ │ │ └── index.js │ │ ├── VideoPlayerTimer │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── VideoPlayerProgressBar │ │ │ └── index.js │ │ ├── Audio │ │ │ └── index.js │ │ ├── VideoDescription │ │ │ └── index.js │ │ └── PlaybackRate │ │ │ └── index.js │ ├── FiredLabs │ │ └── index.js │ ├── Countdown │ │ └── styles.js │ ├── ActionCard │ │ ├── index.js │ │ └── styles.js │ ├── ListActionImage │ │ ├── styles.js │ │ └── index.js │ ├── ListTags │ │ ├── index.js │ │ └── styles.js │ ├── ContentDay │ │ └── Option │ │ │ └── index.js │ ├── ListCovers │ │ ├── index.js │ │ └── styles.js │ ├── Container │ │ └── index.js │ ├── FloatingButton │ │ └── index.js │ ├── Tag │ │ └── index.js │ ├── TitleLive │ │ ├── index.js │ │ └── styles.js │ ├── Cover │ │ └── styles.js │ ├── Icons │ │ └── index.js │ ├── Modal │ │ └── index.js │ ├── Profile │ │ └── index.js │ ├── ListContentDay │ │ └── index.js │ └── ProgressBar │ │ └── index.js └── index.js ├── src ├── lib │ ├── assets │ │ ├── icons │ │ │ ├── css.png │ │ │ ├── html.png │ │ │ ├── twitch.png │ │ │ ├── twitter.png │ │ │ └── youtube.png │ │ ├── images │ │ │ ├── icons.png │ │ │ └── logo.png │ │ └── fonts │ │ │ ├── FiraCode │ │ │ ├── static │ │ │ │ ├── FiraCode-Bold.ttf │ │ │ │ ├── FiraCode-Light.ttf │ │ │ │ ├── FiraCode-Medium.ttf │ │ │ │ ├── FiraCode-Regular.ttf │ │ │ │ └── FiraCode-SemiBold.ttf │ │ │ └── FiraCode-VariableFont_wght.ttf │ │ │ └── PressStart2P │ │ │ └── PressStart2P-Regular.ttf │ ├── index.js │ ├── Styles │ │ ├── Generic │ │ │ ├── index.js │ │ │ └── Reset │ │ │ │ └── index.js │ │ ├── Tools │ │ │ ├── index.js │ │ │ ├── Frame │ │ │ │ └── index.js │ │ │ ├── BoxShadow │ │ │ │ └── index.js │ │ │ ├── TextShadow │ │ │ │ └── index.js │ │ │ ├── Cursor │ │ │ │ └── index.js │ │ │ └── Typograph │ │ │ │ └── index.js │ │ ├── Settings │ │ │ ├── index.js │ │ │ ├── Gaps │ │ │ │ └── index.js │ │ │ └── Colors │ │ │ │ ├── palette.js │ │ │ │ └── index.js │ │ ├── index.js │ │ └── Elements │ │ │ ├── index.js │ │ │ ├── Text │ │ │ └── index.js │ │ │ ├── Form │ │ │ └── index.js │ │ │ └── Base │ │ │ └── index.js │ └── components │ │ ├── Action │ │ └── index.js │ │ ├── Line │ │ └── index.js │ │ ├── Field │ │ ├── Textarea │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── index.js │ │ ├── Select │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── Fieldset │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── styles.js │ │ ├── Email │ │ │ └── index.js │ │ ├── Text │ │ │ └── index.js │ │ └── Checkbox │ │ │ └── index.js │ │ ├── FiredLabs │ │ └── index.js │ │ ├── ListCovers │ │ ├── styles.js │ │ └── index.js │ │ ├── ListTags │ │ ├── styles.js │ │ └── index.js │ │ ├── Countdown │ │ └── styles.js │ │ ├── VideoPlayer │ │ ├── Fullscreen │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── PlayAndPause │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── VideoPlayerTimer │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── VideoDescription │ │ │ ├── styles.js │ │ │ └── index.js │ │ ├── Audio │ │ │ └── index.js │ │ ├── VideoPlayerProgressBar │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── IconPlayer │ │ │ └── index.js │ │ ├── PlaybackRate │ │ │ ├── index.js │ │ │ └── style.js │ │ ├── Controls │ │ │ └── styles.js │ │ └── styles.js │ │ ├── Loading │ │ ├── index.js │ │ └── styles.js │ │ ├── ListActionImage │ │ ├── styles.js │ │ └── index.js │ │ ├── Image │ │ └── index.js │ │ ├── Timer │ │ ├── index.js │ │ └── styles.js │ │ ├── ActionCard │ │ ├── styles.js │ │ └── index.js │ │ ├── Icons │ │ └── index.js │ │ ├── Container │ │ └── index.js │ │ ├── Cover │ │ ├── styles.js │ │ └── index.js │ │ ├── TitleLive │ │ ├── styles.js │ │ └── index.js │ │ ├── Tag │ │ └── index.js │ │ ├── ContentDay │ │ ├── Option │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── index.js │ │ ├── FloatingButton │ │ └── index.js │ │ ├── Live │ │ └── index.js │ │ ├── Form │ │ └── index.js │ │ ├── Heading │ │ └── index.js │ │ ├── Modal │ │ ├── index.js │ │ └── styles.js │ │ ├── ListContentDay │ │ ├── index.js │ │ └── styles.js │ │ ├── Profile │ │ ├── index.js │ │ └── styles.js │ │ ├── Description │ │ └── index.js │ │ ├── Title │ │ └── index.js │ │ ├── Section │ │ └── index.js │ │ ├── ActionImage │ │ ├── styles.js │ │ └── index.js │ │ ├── Box │ │ ├── index.js │ │ └── styles.js │ │ ├── ProgressBar │ │ ├── index.js │ │ └── styles.js │ │ └── Table │ │ └── styles.js └── stories │ ├── assets │ ├── alura.png │ ├── negros.png │ ├── thumb.png │ ├── marcobruno.png │ └── curso-html-css.png │ ├── FiredLabs.stories.js │ ├── Live.stories.js │ ├── Loading.stories.js │ ├── Timer.stories.js │ ├── VideoPlayer │ └── Elements │ │ ├── Fullscreen.stories.js │ │ ├── PlayAndPause.stories.js │ │ ├── Audio.stories.js │ │ ├── VideoPlayerTimer.stories.js │ │ ├── VideoDescription.stories.js │ │ ├── VideoPlayerProgressBar.stories.js │ │ ├── PlaybackRate.stories.js │ │ ├── Playlist.stories.js │ │ └── Controls.stories.js │ ├── ActionCard.stories.js │ ├── FloatingButton.stories.js │ ├── Action.stories.js │ ├── Field │ ├── Textarea.stories.js │ ├── Select.stories.js │ ├── Text.stories.js │ ├── Fieldset.stories.js │ ├── Email.stories.js │ └── Checkbox.stories.js │ ├── Countdown.stories.js │ ├── ListTags.stories.js │ ├── Table.stories.js │ ├── TitleLive.stories.js │ ├── components │ └── Wrapper │ │ └── index.js │ ├── Tag.stories.js │ ├── Form.stories.js │ ├── Image.stories.js │ ├── Profile.stories.js │ ├── Modal.stories.js │ ├── Description.stories.js │ ├── Icons.stories.js │ ├── Container.stories.js │ ├── ProgressBar.stories.js │ ├── Cover.stories.js │ ├── Heading.stories.js │ ├── ListCovers.stories.js │ ├── ActionImage.stories.js │ ├── Button.stories.js │ ├── Title.stories.js │ ├── Box.stories.js │ └── Section.stories.js ├── .vscode └── settings.json ├── babel.config.js ├── .storybook ├── preview-head.html ├── main.js └── preview.js ├── .gitignore ├── .eslintrc └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "none", 4 | "semi": false 5 | } -------------------------------------------------------------------------------- /dist/assets/icons/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/icons/css.png -------------------------------------------------------------------------------- /dist/assets/icons/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/icons/html.png -------------------------------------------------------------------------------- /dist/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/images/logo.png -------------------------------------------------------------------------------- /dist/assets/icons/twitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/icons/twitch.png -------------------------------------------------------------------------------- /dist/assets/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/icons/twitter.png -------------------------------------------------------------------------------- /dist/assets/icons/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/icons/youtube.png -------------------------------------------------------------------------------- /dist/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/images/icons.png -------------------------------------------------------------------------------- /src/lib/assets/icons/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/icons/css.png -------------------------------------------------------------------------------- /src/lib/assets/icons/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/icons/html.png -------------------------------------------------------------------------------- /src/stories/assets/alura.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/stories/assets/alura.png -------------------------------------------------------------------------------- /src/stories/assets/negros.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/stories/assets/negros.png -------------------------------------------------------------------------------- /src/stories/assets/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/stories/assets/thumb.png -------------------------------------------------------------------------------- /src/lib/assets/icons/twitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/icons/twitch.png -------------------------------------------------------------------------------- /src/lib/assets/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/icons/twitter.png -------------------------------------------------------------------------------- /src/lib/assets/icons/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/icons/youtube.png -------------------------------------------------------------------------------- /src/lib/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/images/icons.png -------------------------------------------------------------------------------- /src/lib/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/images/logo.png -------------------------------------------------------------------------------- /src/stories/assets/marcobruno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/stories/assets/marcobruno.png -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | export * from './Styles' 2 | export * from './components' 3 | export * from './Styles/Settings/Colors/palette' 4 | -------------------------------------------------------------------------------- /src/stories/assets/curso-html-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/stories/assets/curso-html-css.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll": true 4 | }, 5 | "editor.formatOnSave": true 6 | } -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/static/FiraCode-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/static/FiraCode-Bold.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/static/FiraCode-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/static/FiraCode-Light.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/static/FiraCode-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/static/FiraCode-Medium.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/static/FiraCode-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/static/FiraCode-Regular.ttf -------------------------------------------------------------------------------- /src/lib/Styles/Generic/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Reset from './Reset' 3 | 4 | const Generic = () => 5 | 6 | export default Generic 7 | -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/static/FiraCode-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/static/FiraCode-Bold.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/FiraCode-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/FiraCode-VariableFont_wght.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/FiraCode/static/FiraCode-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/FiraCode/static/FiraCode-SemiBold.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/PressStart2P/PressStart2P-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/dist/assets/fonts/PressStart2P/PressStart2P-Regular.ttf -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/static/FiraCode-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/static/FiraCode-Light.ttf -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/static/FiraCode-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/static/FiraCode-Medium.ttf -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/static/FiraCode-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/static/FiraCode-Regular.ttf -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/static/FiraCode-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/static/FiraCode-SemiBold.ttf -------------------------------------------------------------------------------- /src/lib/assets/fonts/PressStart2P/PressStart2P-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/PressStart2P/PressStart2P-Regular.ttf -------------------------------------------------------------------------------- /src/lib/Styles/Tools/index.js: -------------------------------------------------------------------------------- 1 | export * from './Typograph' 2 | export * from './BoxShadow' 3 | export * from './TextShadow' 4 | export * from './Frame' 5 | export * from './Cursor' 6 | -------------------------------------------------------------------------------- /src/lib/assets/fonts/FiraCode/FiraCode-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firedlabs/design-system/HEAD/src/lib/assets/fonts/FiraCode/FiraCode-VariableFont_wght.ttf -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | 4 | const presets = ["@babel/preset-env", "@babel/preset-react"]; 5 | 6 | return { 7 | presets, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/lib/components/Action/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Link } from '../../Styles/Tools' 3 | 4 | const Action = styled.a` 5 | ${Link}; 6 | ` 7 | 8 | export default Action 9 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/lib/components/Line/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Line = styled.hr` 4 | border: 0.5rem dashed var(--color-third); 5 | margin: var(--gap-big) 0; 6 | ` 7 | 8 | export default Line 9 | -------------------------------------------------------------------------------- /src/lib/components/Field/Textarea/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Input } from '../styles' 3 | 4 | export const TextareaStyles = styled(Input).attrs({ as: 'textarea' })` 5 | height: 300px; 6 | ` 7 | -------------------------------------------------------------------------------- /src/lib/Styles/Tools/Frame/index.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | 3 | export const Container = css` 4 | display: block; 5 | width: 95%; 6 | max-width: 1340px; 7 | margin-right: auto; 8 | margin-left: auto; 9 | ` 10 | -------------------------------------------------------------------------------- /src/lib/components/FiredLabs/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import logo from '../../assets/images/logo.png' 3 | 4 | const FiredLabs = styled.img.attrs({ src: logo, alt: 'Logo da FiredLabs' })`` 5 | 6 | export default FiredLabs 7 | -------------------------------------------------------------------------------- /src/lib/components/ListCovers/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Item = styled.li` 4 | margin-right: var(--gap-big); 5 | ` 6 | 7 | export const ListCoversStyle = styled.ol` 8 | display: flex; 9 | ` 10 | -------------------------------------------------------------------------------- /src/stories/FiredLabs.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FiredLabs } from '../lib' 3 | 4 | export default { 5 | title: 'Components/FiredLabs', 6 | component: FiredLabs 7 | } 8 | 9 | export const Default = () => 10 | -------------------------------------------------------------------------------- /src/lib/Styles/Settings/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Gaps from './Gaps' 3 | import Colors from './Colors' 4 | 5 | const Settings = () => ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | 12 | export default Settings 13 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-links', 5 | '@storybook/addon-essentials', 6 | '@storybook/preset-create-react-app' 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /src/lib/Styles/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Settings from './Settings' 3 | import Generic from './Generic' 4 | import Elements from './Elements' 5 | 6 | export const Styles = () => ( 7 | <> 8 | 9 | 10 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /src/lib/Styles/Elements/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Base from './Base' 3 | import Form from './Form' 4 | import Text from './Text' 5 | 6 | const Elements = () => ( 7 | <> 8 | 9 |
10 | 11 | 12 | ) 13 | 14 | export default Elements 15 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { Styles } from '../src/lib' 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' }, 5 | layout: 'centered' 6 | } 7 | 8 | export const decorators = [ 9 | (Story) => ( 10 | <> 11 | 12 | 13 | 14 | ) 15 | ] 16 | -------------------------------------------------------------------------------- /src/lib/Styles/Elements/Text/index.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components' 2 | import { Cursor } from '../../Tools' 3 | 4 | const Text = createGlobalStyle` 5 | a { 6 | text-decoration: none; 7 | } 8 | a:hover { 9 | ${Cursor.hover}; 10 | } 11 | ` 12 | 13 | export default Text 14 | -------------------------------------------------------------------------------- /src/lib/Styles/Elements/Form/index.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components' 2 | import { Cursor } from '../../Tools' 3 | 4 | const Form = createGlobalStyle` 5 | button { 6 | border: none; 7 | 8 | &:hover { 9 | ${Cursor.hover}; 10 | } 11 | } 12 | ` 13 | 14 | export default Form 15 | -------------------------------------------------------------------------------- /src/lib/components/ListTags/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Item = styled.li` 4 | margin: var(--gap-smallest) calc(var(--gap-smallest) / 2) 0; 5 | ` 6 | 7 | export const ListTagsStyle = styled.ul` 8 | display: flex; 9 | flex-wrap: wrap; 10 | align-items: center; 11 | ` 12 | -------------------------------------------------------------------------------- /src/stories/Live.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Live } from '../lib' 3 | 4 | export default { 5 | title: 'Components/Live', 6 | component: Live 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | children: 'Live' 14 | } 15 | -------------------------------------------------------------------------------- /src/lib/Styles/Settings/Gaps/index.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components' 2 | 3 | const Gaps = createGlobalStyle` 4 | :root { 5 | --gap-smallest: 1rem; 6 | --gap-small: 1.5rem; 7 | --gap-medium: 2rem; 8 | --gap-big: 4rem; 9 | --gap-biggest: 8rem; 10 | } 11 | ` 12 | 13 | export default Gaps 14 | -------------------------------------------------------------------------------- /src/lib/Styles/Tools/BoxShadow/index.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | 3 | const small = css` 4 | box-shadow: 0.5rem 0.5rem 0px var(--color-black-first); 5 | ` 6 | 7 | const medium = css` 8 | box-shadow: 1rem 1rem 0px var(--color-black-first); 9 | ` 10 | 11 | export const BoxShadow = { 12 | small, 13 | medium 14 | } 15 | -------------------------------------------------------------------------------- /src/stories/Loading.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Loading } from '../lib' 3 | 4 | export default { 5 | title: 'Components/Loading', 6 | component: Loading 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | active: true 14 | } 15 | -------------------------------------------------------------------------------- /src/stories/Timer.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Timer } from '../lib' 3 | 4 | export default { 5 | title: 'Components/Timer', 6 | component: Timer 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | time: '00', 14 | label: 'DIAS' 15 | } 16 | -------------------------------------------------------------------------------- /src/stories/VideoPlayer/Elements/Fullscreen.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Fullscreen } from '../../../lib' 3 | 4 | export default { 5 | title: 'Components/VideoPlayer/Elements/Fullscreen', 6 | component: Fullscreen 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | -------------------------------------------------------------------------------- /src/lib/components/Countdown/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { TimerStyles } from '../Timer/styles' 3 | 4 | export const CountdownStyles = styled.div` 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | & > ${TimerStyles}:not(:last-child) { 10 | margin-right: var(--gap-big); 11 | } 12 | ` 13 | -------------------------------------------------------------------------------- /src/stories/ActionCard.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ActionCard } from '../lib' 3 | 4 | export default { 5 | title: 'Components/ActionCard', 6 | component: ActionCard 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | children: 'Usuários' 14 | } 15 | -------------------------------------------------------------------------------- /src/stories/VideoPlayer/Elements/PlayAndPause.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { PlayAndPause } from '../../../lib' 3 | 4 | export default { 5 | title: 'Components/VideoPlayer/Elements/PlayAndPause', 6 | component: PlayAndPause 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | -------------------------------------------------------------------------------- /src/stories/FloatingButton.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FloatingButton } from '../lib' 3 | 4 | export default { 5 | title: 'Components/FloatingButton', 6 | component: FloatingButton 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | children: '+' 14 | } 15 | -------------------------------------------------------------------------------- /src/lib/components/Field/index.js: -------------------------------------------------------------------------------- 1 | import Email from './Email' 2 | import Text from './Text' 3 | import Textarea from './Textarea' 4 | import Select from './Select' 5 | import Checkbox from './Checkbox' 6 | import Fieldset from './Fieldset' 7 | 8 | const Field = { 9 | Email, 10 | Text, 11 | Textarea, 12 | Select, 13 | Checkbox, 14 | Fieldset 15 | } 16 | 17 | export default Field 18 | -------------------------------------------------------------------------------- /src/lib/components/VideoPlayer/Fullscreen/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { IconPlayerWrapper, IconPlayer } from '../IconPlayer' 3 | 4 | export const IconFullcreen = styled(IconPlayer).attrs(({ active }) => ({ 5 | icon: active ? 'nofullscreen' : 'fullscreen' 6 | }))` 7 | opacity: 1; 8 | ` 9 | 10 | export const FullscreenStyle = styled(IconPlayerWrapper)`` 11 | -------------------------------------------------------------------------------- /src/lib/Styles/Settings/Colors/palette.js: -------------------------------------------------------------------------------- 1 | export const palette = { 2 | colorFirst: '#F25A70', 3 | colorSecond: '#7C5E99', 4 | colorThird: '#FFF', 5 | 6 | colorBlackFirst: '#000', 7 | colorBlackSecond: '#1E1E1E', 8 | colorBlackThird: '#3A4042', 9 | colorBlackFourth: '#828282', 10 | 11 | colorError: '#BA1F33', 12 | colorWarning: '#CEB02A', 13 | colorSuccess: '#62C370' 14 | } 15 | -------------------------------------------------------------------------------- /src/lib/components/Field/Select/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { Cursor } from '../../../Styles/Tools' 3 | import { Input } from '../styles' 4 | 5 | export const Option = styled.option`` 6 | 7 | export const SelectStyle = styled(Input).attrs({ as: 'select' })` 8 | ${Cursor.hover}; 9 | 10 | &:read-only { 11 | background-color: var(--color-third); 12 | } 13 | ` 14 | -------------------------------------------------------------------------------- /src/stories/Action.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Action } from '../lib' 3 | 4 | export default { 5 | title: 'Components/Action', 6 | component: Action 7 | } 8 | 9 | const Template = (args) => 10 | 11 | export const Default = Template.bind({}) 12 | Default.args = { 13 | children: 'https://twitch.tv/marcobrunodev', 14 | href: 'https://twitch.tv/marcobrunodev' 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/lib/components/Loading/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { LoadingStyle, Square } from './styles' 4 | 5 | function Loading({ active }) { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | 13 | Loading.propTypes = { 14 | active: PropTypes.bool.isRequired 15 | } 16 | 17 | export default Loading 18 | -------------------------------------------------------------------------------- /src/lib/components/ListActionImage/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { ActionImageStyle } from '../ActionImage/styles' 3 | 4 | const ListActionImageStyle = styled.ul` 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: center; 8 | 9 | & > ${ActionImageStyle} { 10 | margin: 0 var(--gap-small) calc(var(--gap-small) * 2); 11 | } 12 | ` 13 | 14 | export default ListActionImageStyle 15 | -------------------------------------------------------------------------------- /src/stories/Field/Textarea.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Field } from '../../lib' 3 | 4 | export default { 5 | title: 'Components/Field/Textarea', 6 | component: Field.Textarea, 7 | parameters: { 8 | layout: 'padded' 9 | } 10 | } 11 | 12 | const Template = (args) => 13 | 14 | export const Default = Template.bind({}) 15 | Default.args = { 16 | label: 'Descrição' 17 | } 18 | -------------------------------------------------------------------------------- /src/stories/VideoPlayer/Elements/Audio.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Audio } from '../../../lib' 3 | 4 | export default { 5 | title: 'Components/VideoPlayer/Elements/Audio', 6 | component: Audio 7 | } 8 | 9 | const Template = (args) =>