;
21 |
22 | export const Primary: Story = {
23 | args: {
24 | variant: 'primary',
25 | children: 'Button'
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/src/assets/svgs/book.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/smartphone.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/user-check.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/globe.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/rows.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/warning-triangle.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import type { StorybookConfig } from '@storybook/react-webpack5';
2 | import { managerHead } from './manager-head';
3 |
4 | const config: StorybookConfig = {
5 | stories: [
6 | '../src/stories/Introduction.mdx',
7 | '../src/stories/fundamentals/**/*.mdx',
8 | '../src/**/*.mdx',
9 | '../src/**/*.stories.@(ts|tsx)'
10 | ],
11 | addons: [
12 | '@storybook/addon-webpack5-compiler-swc',
13 | '@storybook/addon-essentials',
14 | '@storybook/addon-a11y'
15 | ],
16 | framework: {
17 | name: '@storybook/react-webpack5',
18 | options: {}
19 | },
20 | staticDirs: ['.'],
21 | managerHead: (head) => `${head} ${managerHead}`
22 | };
23 |
24 | export default config;
25 |
--------------------------------------------------------------------------------
/src/assets/svgs/battery-low.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/box.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/columns.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/file-text.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/indent-left.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/indent-right.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/projector.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/zoom-in.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/percentage.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/shopping-cart.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/calendar.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/inbox.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/chart.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/plug.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/archive.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/ticket.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/svgs/maximize.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/minimize.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/battery-charging.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/annotation-warning.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/folder-plus.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/components/atoms/Button/Button.styles.ts:
--------------------------------------------------------------------------------
1 | import styled from '@emotion/styled';
2 |
3 | export const ButtonUI = styled.button`
4 | border: 0;
5 | cursor: pointer;
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 |
10 | color: ${({ theme }) => theme.color.white};
11 | background-color: ${({ theme }) => theme.color.blue[700]};
12 | padding: ${({ theme }) => `${theme.spacing[3]} ${theme.spacing[4]}`};
13 | font-family: ${({ theme }) => theme.typography.fontFamily.sans};
14 | font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
15 | font-size: ${({ theme }) => theme.typography.fontSize.body.md};
16 | height: ${({ theme }) => theme.spacing[11]};
17 | border-radius: ${({ theme }) => theme.border.radius.small};
18 | `;
19 |
--------------------------------------------------------------------------------
/src/assets/svgs/eye-off.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call-forward.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/floppy-disc.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/wallet.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/user-plus.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/music.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call-hang-up.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/user-cross.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/camera.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svgs/battery-medium.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/help-circle.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/stream-to-tv.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/themes/index.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import { globalStyles } from './styles/global';
3 | import { resetStyles } from './styles/reset';
4 | import { border, outline } from './tokens/border';
5 | import { breakpoint } from './tokens/breakpoint';
6 | import { color } from './tokens/color';
7 | import { elevation } from './tokens/elevation';
8 | import { opacity } from './tokens/opacity';
9 | import { spacing } from './tokens/spacing';
10 | import { typography } from './tokens/typography';
11 |
12 | export const designTokens = {
13 | border,
14 | outline,
15 | breakpoint,
16 | color,
17 | elevation,
18 | opacity,
19 | spacing,
20 | typography
21 | } as const;
22 |
23 | export const theme = { ...designTokens };
24 |
25 | export const styles = css`
26 | ${resetStyles}
27 | ${globalStyles(theme)}
28 | `;
29 |
--------------------------------------------------------------------------------
/src/themes/tokens/border.ts:
--------------------------------------------------------------------------------
1 | const borderStyles = {
2 | none: 'none',
3 | solid: 'solid',
4 | dashed: 'dashed',
5 | dotted: 'dotted',
6 | double: 'double'
7 | } as const;
8 |
9 | const borderWidths = {
10 | none: '0px',
11 | hairline: '1px',
12 | thin: '2px',
13 | thick: '4px',
14 | heavy: '8px'
15 | } as const;
16 |
17 | export const border = {
18 | style: borderStyles,
19 | width: borderWidths,
20 | radius: {
21 | sharp: '0px',
22 | small: '4px',
23 | medium: '8px',
24 | large: '16px',
25 | pill: '40px',
26 | circle: '100%'
27 | }
28 | } as const;
29 |
30 | export const outline = {
31 | style: borderStyles,
32 | width: borderWidths,
33 | offset: {
34 | none: '0px',
35 | hairline: '1px',
36 | thin: '2px',
37 | thick: '4px',
38 | heavy: '8px'
39 | }
40 | } as const;
41 |
--------------------------------------------------------------------------------
/src/assets/svgs/scissors.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/headphones.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/zip-file.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call-cross.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call-incoming.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/phone-call-outgoing.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/target.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/assets/svgs/dollar.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/wifi.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/microphone-mute.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/clipboard.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/hard-drive.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/server.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/.storybook/manager-head.ts:
--------------------------------------------------------------------------------
1 | import { globalStyles } from '../src/themes/styles/global';
2 | import { theme } from '../src/themes';
3 |
4 | export const managerHead = `
5 |
6 |
7 |
8 |
9 |
13 |
14 |
22 | `;
23 |
--------------------------------------------------------------------------------
/src/assets/svgs/emoji-sad.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/emoji-happy.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/battery-full.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/briefcase.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/truck.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/building.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/grid-masonry.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## 📝 Descrição
2 |
3 |
4 |
5 | ## 🔍 Passos para Reproduzir
6 |
7 |
8 |
9 | ## ✔️ Resultado Esperado
10 |
11 |
12 |
13 | ## ❌ Resultado Atual
14 |
15 |
16 |
17 | ## 📸 Registros e Capturas de Tela
18 |
19 |
20 |
21 | ## 🔗 Referências
22 |
23 |
24 |
25 | ## 📋 Notas Adicionais
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/assets/svgs/users.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/video-camera-off.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/svgs/help.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Devtranslate
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/src/assets/svgs/settings-sliders.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/assets/svgs/wifi-no-connection.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## 📝 Descrição
2 |
3 |
4 |
5 | ## 🧪 Como Testar
6 |
7 |
8 |
9 | ## 📸 Registros e Capturas de Tela
10 |
11 |
12 |
13 | ## 🔗 Referências
14 |
15 |
16 |
17 | ## 📋 Notas Adicionais
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/assets/svgs/annotation-dots.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/broadcast.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/assets/svgs/spinner.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/.storybook/theme.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'storybook/internal/theming';
2 | import { theme } from '../src/themes';
3 |
4 | export default create({
5 | base: 'light',
6 |
7 | // Branding
8 | brandTitle: 'Devtranslate UI',
9 | brandImage: './logo.svg',
10 |
11 | // Colors
12 | colorPrimary: theme.color.blueGray[700],
13 | colorSecondary: theme.color.red[400],
14 |
15 | // UI Colors
16 | appBg: theme.color.gray[50],
17 | appContentBg: theme.color.white,
18 | appPreviewBg: theme.color.white,
19 | appBorderColor: theme.color.gray[200],
20 |
21 | // Text Colors
22 | textColor: theme.color.gray[700],
23 | textInverseColor: theme.color.gray[100],
24 | textMutedColor: theme.color.gray[500],
25 |
26 | // Toolbar Colors
27 | barTextColor: theme.color.gray[500],
28 | barHoverColor: theme.color.red[400],
29 | barSelectedColor: theme.color.red[400],
30 | barBg: theme.color.gray[50],
31 |
32 | // Form Colors
33 | inputBg: theme.color.white,
34 | inputBorder: theme.color.gray[200],
35 | inputTextColor: theme.color.gray[700],
36 |
37 | // Fonts
38 | fontBase: theme.typography.fontFamily.sans,
39 | fontCode: theme.typography.fontFamily.mono
40 | });
41 |
--------------------------------------------------------------------------------
/src/assets/svgs/film.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "module": "ESNext",
5 | "moduleResolution": "node",
6 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
7 | "jsx": "react-jsx",
8 | "jsxImportSource": "@emotion/react",
9 | "declaration": true,
10 | "declarationMap": true,
11 | "emitDeclarationOnly": false,
12 | "sourceMap": true,
13 | "outDir": "dist",
14 | "declarationDir": "dist",
15 | "allowSyntheticDefaultImports": true,
16 | "esModuleInterop": true,
17 | "forceConsistentCasingInFileNames": true,
18 | "resolveJsonModule": true,
19 | "strict": true,
20 | "noImplicitAny": true,
21 | "noImplicitReturns": true,
22 | "noUnusedLocals": true,
23 | "noUnusedParameters": true,
24 | "exactOptionalPropertyTypes": true,
25 | "noImplicitOverride": true,
26 | "noPropertyAccessFromIndexSignature": true,
27 | "noUncheckedIndexedAccess": false,
28 | "skipLibCheck": true,
29 | "incremental": true,
30 | "isolatedModules": true,
31 | "preserveValueImports": false,
32 | "typeRoots": ["./src/types"],
33 | "baseUrl": "."
34 | },
35 | "include": ["src/**/*"],
36 | "exclude": ["**/*.stories.*", "**/*.test.*"]
37 | }
38 |
--------------------------------------------------------------------------------
/src/assets/svgs/message.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/themes/tokens/typography.ts:
--------------------------------------------------------------------------------
1 | export const typography = {
2 | fontFamily: {
3 | sans: '"Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
4 | mono: '"Consolas", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
5 | },
6 | fontSize: {
7 | display: {
8 | lg: '6rem',
9 | md: '5rem',
10 | sm: '4.5rem'
11 | },
12 | heading: {
13 | xxl: '4rem',
14 | xl: '3.5rem',
15 | lg: '3rem',
16 | md: '2.5rem',
17 | sm: '2rem',
18 | xs: '1.5rem',
19 | xxs: '1.25rem'
20 | },
21 | body: {
22 | xl: '1.125rem',
23 | lg: '1rem',
24 | md: '0.875rem',
25 | sm: '0.75rem',
26 | xs: '0.625rem'
27 | }
28 | },
29 | lineHeight: {
30 | loose: 2.0,
31 | relaxed: 1.6,
32 | snug: 1.4,
33 | tight: 1.2,
34 | none: 1.0
35 | },
36 | fontWeight: {
37 | heavy: 900,
38 | bold: 700,
39 | medium: 500,
40 | regular: 400,
41 | light: 300
42 | },
43 | letterSpacing: {
44 | loose: '24%',
45 | relaxed: '16%',
46 | snug: '8%',
47 | tight: '4%',
48 | none: '0%'
49 | }
50 | } as const;
51 |
--------------------------------------------------------------------------------
/src/assets/svgs/grid.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/assets/svgs/trending-up.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/trending-down.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/svgs/router.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/assets/svgs/building-store.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | 💾 Devtranslate UI
6 | Repositório oficial dos componentes do Devtranslate
7 |
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
16 | 
17 |
18 |
19 | 
20 |
21 |
22 |
23 |
24 |
25 | ## ✏️ Sumário
26 |
27 | - [Visão Geral do Projeto](#visão-geral-do-projeto)
28 | - [Documentação](#documentação)
29 | - [Licença](#licença)
30 |
31 | ### Visão Geral do Projeto
32 |
33 | ### Documentação
34 |
35 | ## 📄 Licença
36 |
37 | [MIT](LICENSE.md) © Devtranslate
38 |
--------------------------------------------------------------------------------
/src/assets/svgs/sun.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/assets/svgs/cpu.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/assets/svgs/face-id.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import packageJson from './package.json' with { type: 'json' };
2 | import resolve from '@rollup/plugin-node-resolve';
3 | import commonjs from '@rollup/plugin-commonjs';
4 | import typescript from '@rollup/plugin-typescript';
5 | import dts from 'rollup-plugin-dts';
6 | import terser from '@rollup/plugin-terser';
7 | import peerDepsExternal from 'rollup-plugin-peer-deps-external';
8 |
9 | export default [
10 | {
11 | input: 'src/index.ts',
12 | output: [
13 | {
14 | file: packageJson.main,
15 | format: 'cjs',
16 | sourcemap: true,
17 | exports: 'named',
18 | interop: 'auto'
19 | },
20 | {
21 | file: packageJson.module,
22 | format: 'esm',
23 | sourcemap: true,
24 | exports: 'named'
25 | }
26 | ],
27 | plugins: [
28 | peerDepsExternal(),
29 | resolve({
30 | browser: true,
31 | preferBuiltins: false
32 | }),
33 | commonjs(),
34 | typescript({
35 | tsconfig: './tsconfig.json'
36 | }),
37 | terser({
38 | format: {
39 | comments: false
40 | },
41 | compress: {
42 | drop_console: true,
43 | drop_debugger: true
44 | }
45 | })
46 | ]
47 | },
48 | {
49 | input: 'src/index.ts',
50 | output: [{
51 | file: packageJson.types,
52 | format: 'esm'
53 | }],
54 | plugins: [
55 | dts()
56 | ]
57 | }
58 | ];
59 |
--------------------------------------------------------------------------------
/.storybook/manager.ts:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/manager-api';
2 | import type { API } from '@storybook/manager-api';
3 | import theme from './theme';
4 |
5 | interface StoryData {
6 | title?: string;
7 | name?: string;
8 | }
9 |
10 | const getCurrentStoryData = (api: API): StoryData | null => {
11 | try {
12 | return api.getCurrentStoryData();
13 | } catch {
14 | return null;
15 | }
16 | };
17 |
18 | const formatPageTitle = (storyData: StoryData | null): string => {
19 | const PAGE_TITLE = 'Devtranslate UI';
20 |
21 | if (!storyData) {
22 | return PAGE_TITLE;
23 | }
24 |
25 | const { title, name } = storyData;
26 |
27 | if (title && name) {
28 | const componentName = title.split('/').pop();
29 | const storyName = name !== 'Docs' ? name : '';
30 | return `${componentName} ${storyName}`.trim() + ` | ${PAGE_TITLE}`;
31 | }
32 |
33 | if (name) {
34 | return `${name} | ${PAGE_TITLE}`;
35 | }
36 |
37 | return PAGE_TITLE;
38 | };
39 |
40 | addons.register('PageTitleAddon', (api) => {
41 | const titleElement = document.querySelector('title');
42 |
43 | if (!titleElement) {
44 | return;
45 | }
46 |
47 | const observer = new MutationObserver(() => {
48 | if (document.title.endsWith('Storybook')) {
49 | const storyData = getCurrentStoryData(api);
50 | document.title = formatPageTitle(storyData);
51 | }
52 | });
53 |
54 | observer.observe(titleElement, {
55 | childList: true,
56 | subtree: true,
57 | characterData: true
58 | });
59 | });
60 |
61 | addons.setConfig({ theme });
62 |
--------------------------------------------------------------------------------
/.storybook/preview.tsx:
--------------------------------------------------------------------------------
1 | import { css, Global, ThemeProvider } from '@emotion/react';
2 | import type { StoryFn, StoryContext } from '@storybook/react';
3 | import { styles, theme } from '../src/themes';
4 | import previewTheme from './theme';
5 |
6 | export default {
7 | parameters: {
8 | controls: {
9 | matchers: {
10 | color: /(background|color)$/i,
11 | date: /Date$/i
12 | }
13 | },
14 | viewport: {
15 | viewports: {
16 | mobile: {
17 | name: 'Mobile',
18 | styles: { width: theme.breakpoint.xs.min, height: '667px' }
19 | },
20 | tablet: {
21 | name: 'Tablet',
22 | styles: { width: theme.breakpoint.sm.min, height: '1024px' }
23 | },
24 | desktop: {
25 | name: 'Desktop',
26 | styles: { width: theme.breakpoint.md.min, height: '768px' }
27 | },
28 | widescreen: {
29 | name: 'Widescreen',
30 | styles: { width: theme.breakpoint.lg.min, height: '1024px' }
31 | },
32 | ultrawide: {
33 | name: 'Ultra Wide (4K)',
34 | styles: { width: theme.breakpoint.xl.min, height: '1080px' }
35 | }
36 | }
37 | },
38 | backgrounds: {
39 | default: 'Claro',
40 | values: [
41 | { name: 'Claro', value: theme.color.gray[50] },
42 | { name: 'Escuro', value: theme.color.gray[900] }
43 | ]
44 | },
45 | docs: {
46 | theme: previewTheme
47 | }
48 | }
49 | };
50 |
51 | const withThemeProvider = (storyFn: StoryFn, context: StoryContext) => {
52 | return (
53 |
54 |
55 | {storyFn(context.args, context)}
56 |
57 | );
58 | };
59 |
60 | export const decorators = [withThemeProvider];
61 |
--------------------------------------------------------------------------------
/src/assets/svgs/keyboard.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/assets/svgs/dots.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/themes/styles/reset.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | /*
4 | CSS Reset based on Eric Meyer's Reset CSS v2.0
5 | http://meyerweb.com/eric/tools/css/reset/
6 | */
7 |
8 | export const resetStyles = css`
9 | html,
10 | body,
11 | div,
12 | span,
13 | applet,
14 | object,
15 | iframe,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6,
22 | p,
23 | blockquote,
24 | pre,
25 | a,
26 | abbr,
27 | acronym,
28 | address,
29 | big,
30 | cite,
31 | code,
32 | del,
33 | dfn,
34 | em,
35 | img,
36 | ins,
37 | kbd,
38 | q,
39 | s,
40 | samp,
41 | small,
42 | strike,
43 | strong,
44 | sub,
45 | sup,
46 | tt,
47 | var,
48 | b,
49 | u,
50 | i,
51 | center,
52 | dl,
53 | dt,
54 | dd,
55 | ol,
56 | ul,
57 | li,
58 | fieldset,
59 | form,
60 | label,
61 | legend,
62 | table,
63 | caption,
64 | tbody,
65 | tfoot,
66 | thead,
67 | tr,
68 | th,
69 | td,
70 | article,
71 | aside,
72 | canvas,
73 | details,
74 | embed,
75 | figure,
76 | figcaption,
77 | footer,
78 | header,
79 | hgroup,
80 | menu,
81 | nav,
82 | output,
83 | ruby,
84 | section,
85 | summary,
86 | time,
87 | mark,
88 | audio,
89 | video {
90 | margin: 0;
91 | padding: 0;
92 | border: 0;
93 | font-size: 100%;
94 | font: inherit;
95 | vertical-align: baseline;
96 | }
97 | /* HTML5 display-role reset for older browsers */
98 | article,
99 | aside,
100 | details,
101 | figcaption,
102 | figure,
103 | footer,
104 | header,
105 | hgroup,
106 | menu,
107 | nav,
108 | section {
109 | display: block;
110 | }
111 | body {
112 | line-height: 1;
113 | }
114 | ol,
115 | ul {
116 | list-style: none;
117 | }
118 | blockquote,
119 | q {
120 | quotes: none;
121 | }
122 | blockquote:before,
123 | blockquote:after,
124 | q:before,
125 | q:after {
126 | content: '';
127 | content: none;
128 | }
129 | table {
130 | border-collapse: collapse;
131 | border-spacing: 0;
132 | }
133 | `;
134 |
--------------------------------------------------------------------------------
/src/assets/svgList.js:
--------------------------------------------------------------------------------
1 | export default {"icons":["airplay-to-tv","annotation-dots","annotation-warning","announcement","archive","arrow-down-left","arrow-down-right","arrow-down","arrow-left","arrow-right","arrow-up-left","arrow-up-right","arrow-up","at-sign","badge","bank","battery-charging","battery-full","battery-low","battery-medium","battery","bell-off","bell","book","bookmark","box","briefcase","broadcast","building-store","building","calendar-minus","calendar-plus","calendar","camera-off","camera","chart","check-circle","check","chevron-down","chevron-left","chevron-right","chevron-up","clipboard","clock","close-circle","close","cloud","code","columns horizontal","columns-vertical","columns","copy","cpu","crop","cursor","dashboard","dollar","dots-horizontal","dots-vertical","dots","download","edit","emoji-happy","emoji-sad","eye-off","eye","face-id","fast-forward","file-minus","file-plus","file-text","file","film","filter","flag","floppy-disc","folder-minus","folder-plus","folder","globe","grid-masonry","grid","hard-drive","hashtag","headphones","heart","help-circle","help","home","inbox","indent-left","indent-right","information","key","keyboard","layers","link","lock-unlocked","lock","log-in","log-out","mail","map","maximize","menu","message","microphone-mute","microphone","minimize","minus-circle","minus","monitor-2","monitor","moon","mouse","music","paintbucket","pause","percentage","phone-call-cross","phone-call-forward","phone-call-hang-up","phone-call-incoming","phone-call-outgoing","phone-call","phone","photo","picture-in-picture","pie-chart","pill","pin-tack","pin","play","plug","plus-circle","plus","print","projector","redo","rewind","router","rows","scissors","search","send","server","settings-sliders","settings","share","shield-cross","shield-tick","shield-warning","shield","shopping-bag","shopping-basket","shopping-cart","skip-back","skip-forward","smartphone","speaker","spinner","star","sticker","stop","stream-to-tv","sun","table-columns","table-rows","tablet","tag","target","ticket","trash","trending-down","trending-up","triangle","truck","undo","union","upload","user-check","user-cross","user-minus","user-plus","user","users-minus","users-plus","users","video-camera-off","video-camera","video","virus","wallet","warning-triangle","wifi-no-connection","wifi","zip-file","zoom-in","zoom-out"]}
--------------------------------------------------------------------------------
/src/assets/svgs/virus.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/themes/tokens/color.ts:
--------------------------------------------------------------------------------
1 | export const color = {
2 | black: '#000000',
3 | white: '#FFFFFF',
4 | red: {
5 | 50: '#FEF2F2',
6 | 100: '#FEE2E2',
7 | 200: '#FECACA',
8 | 300: '#FCA5A5',
9 | 400: '#F87171',
10 | 500: '#EF4444',
11 | 600: '#DC2626',
12 | 700: '#B91C1C',
13 | 800: '#991B1B',
14 | 900: '#7F1D1D'
15 | },
16 | orange: {
17 | 50: '#FFF7ED',
18 | 100: '#FFEDD5',
19 | 200: '#FED7AA',
20 | 300: '#FDBA74',
21 | 400: '#FB923C',
22 | 500: '#F97316',
23 | 600: '#EA580C',
24 | 700: '#C2410C',
25 | 800: '#9A3412',
26 | 900: '#7C2D12'
27 | },
28 | yellow: {
29 | 50: '#FFFBEB',
30 | 100: '#FEF3C7',
31 | 200: '#FDE68A',
32 | 300: '#FCD34D',
33 | 400: '#FBBF24',
34 | 500: '#F59E0B',
35 | 600: '#DD7F04',
36 | 700: '#BB6608',
37 | 800: '#8A4609',
38 | 900: '#78350F'
39 | },
40 | green: {
41 | 50: '#ECFDF5',
42 | 100: '#D1FAE5',
43 | 200: '#A7F3D0',
44 | 300: '#6EE7B7',
45 | 400: '#34D399',
46 | 500: '#10B981',
47 | 600: '#059669',
48 | 700: '#047857',
49 | 800: '#065F46',
50 | 900: '#064E3B'
51 | },
52 | blue: {
53 | 50: '#EFF6FF',
54 | 100: '#DBEAFE',
55 | 200: '#BFDBFE',
56 | 300: '#93C5FD',
57 | 400: '#60A5FA',
58 | 500: '#3B82F6',
59 | 600: '#2563EB',
60 | 700: '#1D4ED8',
61 | 800: '#1E40AF',
62 | 900: '#1E3A8A'
63 | },
64 | purple: {
65 | 50: '#F5F3FF',
66 | 100: '#EDE9FE',
67 | 200: '#DDD6FE',
68 | 300: '#C4B5FD',
69 | 400: '#A78BFA',
70 | 500: '#8B5CF6',
71 | 600: '#7C3AED',
72 | 700: '#6D28D9',
73 | 800: '#5B21B6',
74 | 900: '#4C1D95'
75 | },
76 | pink: {
77 | 50: '#FDF2F8',
78 | 100: '#FCE7F3',
79 | 200: '#FBCFE8',
80 | 300: '#F9A8D4',
81 | 400: '#F472B6',
82 | 500: '#EC4899',
83 | 600: '#DB2777',
84 | 700: '#BE185D',
85 | 800: '#9D174D',
86 | 900: '#500724'
87 | },
88 | blueGray: {
89 | 50: '#F8FAFC',
90 | 100: '#F1F5F9',
91 | 200: '#E2E8F0',
92 | 300: '#CBD5E1',
93 | 400: '#94A3B8',
94 | 500: '#64748B',
95 | 600: '#475569',
96 | 700: '#334155',
97 | 800: '#1E293B',
98 | 900: '#0F172A'
99 | },
100 | gray: {
101 | 50: '#FAFAFA',
102 | 100: '#F4F4F5',
103 | 200: '#E4E4E7',
104 | 300: '#D4D4D8',
105 | 400: '#A1A1AA',
106 | 500: '#71717A',
107 | 600: '#52525B',
108 | 700: '#3F3F46',
109 | 800: '#27272A',
110 | 900: '#18181B'
111 | }
112 | } as const;
113 |
--------------------------------------------------------------------------------
/src/assets/svgs/settings.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "node": true
6 | },
7 | "extends": [
8 | "plugin:react/recommended",
9 | "plugin:react-hooks/recommended",
10 | "plugin:@typescript-eslint/recommended",
11 | "plugin:prettier/recommended",
12 | "plugin:storybook/recommended"
13 | ],
14 | "parser": "@typescript-eslint/parser",
15 | "parserOptions": {
16 | "ecmaFeatures": {
17 | "jsx": true
18 | },
19 | "ecmaVersion": "latest",
20 | "sourceType": "module",
21 | "project": "./tsconfig.json"
22 | },
23 | "plugins": [
24 | "react",
25 | "@typescript-eslint",
26 | "simple-import-sort",
27 | "unused-imports",
28 | "import",
29 | "prettier"
30 | ],
31 | "rules": {
32 | "react/react-in-jsx-scope": "off",
33 | "prettier/prettier": ["error", { "endOfLine": "auto" }],
34 | "import/order": [
35 | "error",
36 | {
37 | "groups": [
38 | "builtin",
39 | "external",
40 | "index",
41 | "sibling",
42 | "parent",
43 | "internal",
44 | "object",
45 | "type"
46 | ]
47 | }
48 | ],
49 | "@typescript-eslint/no-use-before-define": [
50 | "error",
51 | { "functions": false, "classes": true, "variables": true, "typedefs": true }
52 | ],
53 | "import/no-extraneous-dependencies": [
54 | "error",
55 | {
56 | "devDependencies": [".storybook/**", "src/**/*.stories.@(js|jsx|ts|tsx)"]
57 | }
58 | ],
59 | "import/prefer-default-export": "off",
60 | "react/function-component-definition": [
61 | 2,
62 | {
63 | "namedComponents": "arrow-function",
64 | "unnamedComponents": "arrow-function"
65 | }
66 | ],
67 | "no-prototype-builtins": "off",
68 | "import/no-default-export": "off",
69 | "import/no-unresolved": "error",
70 | "dot-notation": "off",
71 | "@typescript-eslint/dot-notation": ["error", {}],
72 | "@typescript-eslint/explicit-function-return-type": "off",
73 | "react/destructuring-assignment": "off",
74 | "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
75 | "no-use-before-define": ["error", { "functions": false, "classes": true, "variables": true }],
76 | "import/extensions": [
77 | "error",
78 | "ignorePackages",
79 | {
80 | "js": "never",
81 | "jsx": "never",
82 | "ts": "never",
83 | "tsx": "never"
84 | }
85 | ],
86 | "jest/no-disabled-tests": "warn",
87 | "jest/no-focused-tests": "error",
88 | "jest/no-identical-title": "error",
89 | "jest/prefer-to-have-length": "warn",
90 | "jest/valid-expect": "error",
91 | "no-unused-vars": "off",
92 | "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
93 | "simple-import-sort/imports": [
94 | "error",
95 | {
96 | "groups": [
97 | ["^react", "^@?\\w"],
98 | ["^\\u0000"],
99 | ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
100 | ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"]
101 | ]
102 | }
103 | ],
104 | "arrow-body-style": ["error", "as-needed"],
105 | "unused-imports/no-unused-imports": ["error"],
106 | "sort-imports": "off",
107 | "import/first": "error",
108 | "import/newline-after-import": "error",
109 | "import/no-duplicates": "error"
110 | },
111 | "settings": {
112 | "import/parsers": {
113 | "@typescript-eslint/parser": [".ts", ".tsx"]
114 | },
115 | "import/resolver": {
116 | "typescript": {
117 | "alwaysTryTypes": true
118 | }
119 | },
120 | "react": {
121 | "version": "detect"
122 | }
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@devtranslate/ui",
3 | "version": "0.0.1",
4 | "description": "Devtranslate UI Components",
5 | "private": false,
6 | "author": "Larissa Mourullo ",
7 | "license": "MIT",
8 | "main": "dist/index.cjs.js",
9 | "module": "dist/index.esm.js",
10 | "types": "dist/index.d.ts",
11 | "type": "module",
12 | "exports": {
13 | ".": {
14 | "types": "./dist/index.d.ts",
15 | "import": "./dist/index.esm.js",
16 | "require": "./dist/index.cjs.js"
17 | }
18 | },
19 | "files": [
20 | "dist"
21 | ],
22 | "sideEffects": false,
23 | "engines": {
24 | "node": ">=22.20.0",
25 | "npm": ">=10.9.3"
26 | },
27 | "keywords": [
28 | "react",
29 | "ui",
30 | "react-components",
31 | "accessible",
32 | "components",
33 | "emotion",
34 | "library",
35 | "design-system"
36 | ],
37 | "repository": {
38 | "type": "git",
39 | "url": "git+https://github.com/devtranslate/ui.git",
40 | "directory": "."
41 | },
42 | "homepage": "https://github.com/devtranslate/ui#readme",
43 | "bugs": {
44 | "url": "https://github.com/devtranslate/ui/issues"
45 | },
46 | "scripts": {
47 | "prepare": "husky",
48 | "build": "rollup -c",
49 | "lint:code": "tsc --noEmit && eslint . && prettier --check .",
50 | "lint:fix": "tsc --noEmit && eslint --fix . && prettier --write .",
51 | "storybook": "storybook dev -p 4000",
52 | "build-storybook": "storybook build",
53 | "svg:list": "node scripts/generateSvgList",
54 | "svg:store": "node scripts/generateSvgStore",
55 | "svg:generate": "npm run svg:list && npm run svg:store"
56 | },
57 | "peerDependencies": {
58 | "@emotion/react": ">=11.14.0",
59 | "@emotion/styled": ">=11.14.1",
60 | "react": ">=19.2.0",
61 | "react-dom": ">=19.2.0"
62 | },
63 | "devDependencies": {
64 | "@commitlint/cli": "20.1.0",
65 | "@commitlint/config-conventional": "20.0.0",
66 | "@emotion/babel-plugin": "11.13.5",
67 | "@emotion/react": "11.14.0",
68 | "@emotion/styled": "11.14.1",
69 | "@rollup/plugin-commonjs": "28.0.6",
70 | "@rollup/plugin-node-resolve": "16.0.1",
71 | "@rollup/plugin-terser": "0.4.4",
72 | "@rollup/plugin-typescript": "12.1.4",
73 | "@storybook/addon-a11y": "8.6.14",
74 | "@storybook/addon-essentials": "8.6.14",
75 | "@storybook/addon-webpack5-compiler-swc": "3.0.0",
76 | "@storybook/blocks": "8.6.14",
77 | "@storybook/react": "8.6.14",
78 | "@storybook/react-webpack5": "8.6.14",
79 | "@types/react": "19.2.0",
80 | "@typescript-eslint/eslint-plugin": "8.45.0",
81 | "@typescript-eslint/parser": "8.45.0",
82 | "commitizen": "4.3.1",
83 | "eslint": "9.36.0",
84 | "eslint-config-prettier": "10.1.8",
85 | "eslint-import-resolver-typescript": "4.4.4",
86 | "eslint-plugin-import": "2.32.0",
87 | "eslint-plugin-jsx-a11y": "6.10.2",
88 | "eslint-plugin-prettier": "5.5.4",
89 | "eslint-plugin-react": "7.37.5",
90 | "eslint-plugin-react-hooks": "6.1.0",
91 | "eslint-plugin-simple-import-sort": "12.1.1",
92 | "eslint-plugin-storybook": "0.12.0",
93 | "eslint-plugin-unused-imports": "4.2.0",
94 | "git-cz": "4.9.0",
95 | "husky": "9.1.7",
96 | "lint-staged": "16.2.3",
97 | "prettier": "3.6.2",
98 | "react": "19.2.0",
99 | "react-dom": "19.2.0",
100 | "rollup": "4.52.3",
101 | "rollup-plugin-dts": "6.2.3",
102 | "rollup-plugin-peer-deps-external": "2.2.4",
103 | "storybook": "8.6.14",
104 | "svgstore": "3.0.1",
105 | "tslib": "2.8.1",
106 | "typescript": "5.9.3"
107 | },
108 | "publishConfig": {
109 | "access": "public"
110 | },
111 | "config": {
112 | "commitizen": {
113 | "path": "git-cz"
114 | }
115 | },
116 | "lint-staged": {
117 | ".{ts,tsx}": "eslint --fix",
118 | ".{ts,tsx,css}": "prettier --write"
119 | },
120 | "pre-commit": [
121 | "npm prettier-format",
122 | "npm lint"
123 | ],
124 | "overrides": {
125 | "tmp": "0.2.4"
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/.storybook/logo.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------