Merge pull request #17 from nginformatica/feat/add-icons

Feat/add icons
nginformatica · Dec 16, 2024 · 6314c44 · 6314c44
2 parents ddca517 + 670c49e
commit 6314c44
Show file tree

Hide file tree

Showing 17 changed files with 1,615 additions and 850 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -1,16 +1,5 @@
 module.exports = {
-    plugins: [
-        '@babel/plugin-transform-runtime',
-        [
-            'import',
-            {
-                libraryName: '@mui/icons-material',
-                libraryDirectory: '',
-                camel2DashComponentName: false
-            },
-            'icons'
-        ]
-    ],
+    plugins: ['@babel/plugin-transform-runtime'],
     presets: [
         '@babel/preset-env',
         '@babel/preset-react',

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -10,11 +10,12 @@ const preview: Preview = {
                 order: [
                     'Comece por aqui',
                     ['Bem-vindo!', 'Introdução'],
-                    'Foundations',
+                    'Estilos',
                     [
                         'Cores',
                         ['Guia de Uso', 'Sistema de Cores', 'Papéis de Cores'],
-                        'Ícones',
+                        'Iconografia',
+                        ['Guia de Uso', 'Ícones @mui', 'Ícones Específicos'],
                         'Tipografia'
                     ],
                     'Web',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ng-design-system",
-	"version": "1.0.9",
+	"version": "1.1.0",
 	"description": "The Design System for the NG Saas Products",
 	"author": "NG",
 	"license": "MIT",
@@ -15,39 +15,39 @@
 	},
 	"dependencies": {},
 	"devDependencies": {
-		"@babel/cli": "7.25.9",
+		"@babel/cli": "7.26.4",
 		"@babel/core": "7.26.0",
 		"@babel/plugin-transform-runtime": "7.25.9",
 		"@babel/preset-env": "7.26.0",
-		"@babel/preset-react": "7.25.9",
+		"@babel/preset-react": "7.26.3",
 		"@babel/preset-typescript": "7.26.0",
-		"@storybook/addon-essentials": "8.4.2",
+		"@storybook/addon-essentials": "8.4.7",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
-		"@storybook/blocks": "8.4.2",
-		"@storybook/react": "8.4.2",
-		"@storybook/react-webpack5": "8.4.2",
-		"@stylistic/eslint-plugin": "2.10.1",
+		"@storybook/blocks": "8.4.7",
+		"@storybook/react": "8.4.7",
+		"@storybook/react-webpack5": "8.4.7",
+		"@stylistic/eslint-plugin": "2.12.1",
 		"@types/react": "18.3.12",
 		"@types/react-dom": "18.3.1",
-		"@typescript-eslint/eslint-plugin": "8.14.0",
-		"@typescript-eslint/parser": "8.14.0",
-		"amazing-react-charts": "1.1.7",
+		"@typescript-eslint/eslint-plugin": "8.18.0",
+		"@typescript-eslint/parser": "8.18.0",
+		"amazing-react-charts": "1.2.0",
 		"babel-loader": "9.2.1",
-		"babel-plugin-import": "1.13.8",
-		"eslint": "9.14.0",
+		"date-fns": "4.1.0",
+		"eslint": "9.17.0",
 		"eslint-config-prettier": "9.1.0",
-		"eslint-import-resolver-typescript": "3.6.3",
+		"eslint-import-resolver-typescript": "3.7.0",
 		"eslint-plugin-import": "2.31.0",
 		"eslint-plugin-prettier": "5.2.1",
 		"eslint-plugin-react": "7.37.2",
-		"flipper-ui": "0.35.0",
-		"prettier": "3.3.3",
+		"flipper-ui": "0.35.2",
+		"prettier": "3.4.2",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"storybook": "8.4.2",
+		"storybook": "8.4.7",
 		"styled-components": "6.1.13",
-		"typescript": "5.6.3",
-		"typescript-eslint": "8.14.0",
-		"webpack": "5.96.1"
+		"typescript": "5.7.2",
+		"typescript-eslint": "8.18.0",
+		"webpack": "5.97.1"
 	}
 }
diff --git a/src/commonStyles.ts b/src/commonStyles.ts
@@ -1,19 +1,27 @@
 import { default as styled } from 'styled-components'
 import { theme } from 'flipper-ui/theme'
 
-const { gray, neutral, primary } = theme.colors
+const { gray, neutral, lightBlue } = theme.colors
 
 export const Content = styled.div``
 
 export const Flex = styled.div`
     display: flex;
 `
 
+export const FlexColumn = styled(Flex)`
+    flex-direction: column;
+`
+
 export const FlexBetween = styled(Flex)`
     align-items: center;
     justify-content: space-between;
 `
 
+export const FlexBetweenColumn = styled(FlexBetween)`
+    flex-direction: column;
+`
+
 export const Wrapper = styled.div`
     position: absolute;
     top: 0;
@@ -53,10 +61,11 @@ export const ContainerContent = styled.div`
 export const FigmaRedirect = styled.a`
     text-decoration: none;
     font-size: 14px;
-    color: ${primary.light};
-    transition: font-size 0.5s ease-in-out;
+    font-weight: bold;
+    color: ${lightBlue[600]};
+    transition: color 0.4s ease-in-out;
 
     &:hover {
-        font-size: 15px;
+        color: ${lightBlue[800]};
     }
 `
diff --git a/src/design/colors/ColorRoles.tsx b/src/design/colors/ColorRoles.tsx
@@ -28,7 +28,7 @@ const { feedback, criticality, primary, secondary, action, priority } =
 export const ColorRoles = () => {
     return (
         <Wrapper>
-            <ContainerTitle>COLOR ROLES</ContainerTitle>
+            <ContainerTitle>PAPÉIS DE CORES</ContainerTitle>
             <hr />
             <FigmaRedirect
                 href='https://www.figma.com/design/X7IRemjcDX38XcunlLKuVn/Foundations?node-id=0-1&t=j30FU4pxY1hsVu3m-1'

diff --git a/src/design/colors/ColorSystem.tsx b/src/design/colors/ColorSystem.tsx
@@ -67,7 +67,7 @@ export const ColorSystem = () => {
 
     return (
         <Wrapper>
-            <ContainerTitle>COLOR SYSTEM</ContainerTitle>
+            <ContainerTitle>SISTEMA DE CORES</ContainerTitle>
             <hr />
             <FigmaRedirect
                 href='https://www.figma.com/design/X7IRemjcDX38XcunlLKuVn/Foundations?node-id=0-1&t=j30FU4pxY1hsVu3m-1'

diff --git a/src/design/colors/docs/ColorRoles.mdx b/src/design/colors/docs/ColorRoles.mdx
@@ -1,7 +1,7 @@
 import { Meta, Unstyled } from '@storybook/blocks';
 import { ColorRoles } from '../ColorRoles';
 
-<Meta title="Foundations/Cores/Papéis de Cores" />
+<Meta title="Estilos/Cores/Papéis de Cores" />
 
 <Unstyled>
     <ColorRoles />

diff --git a/src/design/colors/docs/ColorSystem.mdx b/src/design/colors/docs/ColorSystem.mdx
@@ -1,7 +1,7 @@
 import { Meta, Unstyled } from '@storybook/blocks';
 import { ColorSystem } from '../ColorSystem';
 
-<Meta title="Foundations/Cores/Sistema de Cores" />
+<Meta title="Estilos/Cores/Sistema de Cores" />
 
 <Unstyled>
     <ColorSystem />

diff --git a/src/design/colors/docs/UsageGuide.mdx b/src/design/colors/docs/UsageGuide.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Foundations/Cores/Guia de Uso" />
+<Meta title="Estilos/Cores/Guia de Uso" />
 
 ## Guia de Uso