Merge pull request #14 from nginformatica/feat/design-system-colors

Feat/design system colors

.eslintrc.js

@@ -100,11 +100,26 @@ const rulesImport = {
                     group: 'external',
                     position: 'before'
                 },
+                {
+                    pattern: 'styled-components',
+                    group: 'external',
+                    position: 'before'
+                },
                 {
                     pattern: './styles',
                     group: 'index',
                     position: 'after'
                 },
+                {
+                    pattern: '../commonStyles',
+                    group: 'index',
+                    position: 'after'
+                },
+                {
+                    pattern: '../../commonStyles',
+                    group: 'index',
+                    position: 'after'
+                },
                 {
                     pattern: 'flipper-ui/theme',
                     group: 'index',
@@ -127,7 +142,6 @@ const rulesTypescript = {
     '@typescript-eslint/no-confusing-void-expression': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
 
-    '@typescript-eslint/ban-types': 'warn',
     '@typescript-eslint/no-var-requires': 'warn',
     '@typescript-eslint/no-unsafe-argument': 'warn',
     '@typescript-eslint/no-non-null-assertion': 'warn',

.gitignore

@@ -1,2 +1,4 @@
 /node_modules/
 /docs
+.yalc/
+yalc.lock

.storybook/main.ts

@@ -8,8 +8,6 @@ const config: StorybookConfig = {
     ],
     addons: [
         '@storybook/addon-essentials',
-        '@storybook/addon-styling-webpack',
-        '@storybook/addon-themes',
         '@storybook/addon-webpack5-compiler-babel'
     ]
 }

.storybook/preview.tsx

@@ -1,31 +1,26 @@
 import React from 'react'
 import { Preview } from '@storybook/react'
-import { withThemeFromJSXProvider } from '@storybook/addon-themes'
-import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import { ThemeProvider } from 'styled-components'
 import { ThemeProviderFlipper, muiThemeOptions, theme } from 'flipper-ui/theme'
 
-const GlobalStyles = createGlobalStyle`
-  body {
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  }
-`
-
-export const decorators = [
-    withThemeFromJSXProvider({
-        GlobalStyles
-    })
-]
-
 const preview: Preview = {
     parameters: {
         options: {
             storySort: {
                 order: [
-                    'Getting Started', ['Welcome', 'Introduction'],
+                    'Comece por aqui',
+                    ['Bem-vindo!', 'Introdução'],
+                    'Foundations',
+                    [
+                        'Cores',
+                        ['Guia de Uso', 'Sistema de Cores', 'Papéis de Cores'],
+                        'Ícones',
+                        'Tipografia'
+                    ],
                     'Web',
-                    ['Introduction', 'Usage Guide', 'Design', 'Components'],
+                    ['Introdução', 'Guia de Uso'],
                     'Mobile',
-                    ['Introduction', 'Usage Guide', 'Design', 'Components']
+                    ['Introdução', 'Guia de Uso']
                 ]
             }
         },

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ng-design-system",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"description": "The Design System for the NG Saas Products",
 	"author": "NG",
 	"license": "MIT",
@@ -15,42 +15,38 @@
 	},
 	"dependencies": {},
 	"devDependencies": {
-		"@babel/cli": "7.24.6",
-		"@babel/core": "7.24.6",
-		"@babel/plugin-transform-runtime": "7.24.6",
-		"@babel/preset-env": "7.24.6",
-		"@babel/preset-react": "7.24.6",
-		"@babel/preset-typescript": "7.24.6",
-		"@storybook/addon-essentials": "8.1.5",
-		"@storybook/addon-styling-webpack": "1.0.0",
-		"@storybook/addon-themes": "8.1.5",
-		"@storybook/blocks": "8.1.5",
-		"@storybook/react": "8.1.5",
-		"@storybook/react-webpack5": "8.1.5",
+		"@babel/cli": "7.25.7",
+		"@babel/core": "7.25.7",
+		"@babel/plugin-transform-runtime": "7.25.7",
+		"@babel/preset-env": "7.25.7",
+		"@babel/preset-react": "7.25.7",
+		"@babel/preset-typescript": "7.25.7",
+		"@storybook/addon-essentials": "8.3.4",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
-		"@stylistic/eslint-plugin": "1.5.4",
-		"@types/react": "18.3.3",
+		"@storybook/blocks": "8.3.4",
+		"@storybook/react": "8.3.4",
+		"@storybook/react-webpack5": "8.3.4",
+		"@stylistic/eslint-plugin": "2.8.0",
+		"@types/react": "18.3.11",
 		"@types/react-dom": "18.3.0",
-		"@typescript-eslint/eslint-plugin": "7.2.0",
-		"@typescript-eslint/parser": "7.2.0",
-		"amazing-react-charts": "1.0.9",
-		"babel-loader": "9.1.3",
+		"@typescript-eslint/eslint-plugin": "8.8.0",
+		"@typescript-eslint/parser": "8.8.0",
+		"amazing-react-charts": "1.1.2",
+		"babel-loader": "9.2.1",
 		"babel-plugin-import": "1.13.8",
 		"eslint": "8.57.0",
 		"eslint-config-prettier": "9.1.0",
-		"eslint-import-resolver-typescript": "3.6.1",
-		"eslint-plugin-import": "2.29.1",
-		"eslint-plugin-prettier": "5.1.3",
-		"eslint-plugin-react": "7.34.2",
-		"flipper-ui": "0.32.0",
-		"prettier": "3.3.0",
+		"eslint-import-resolver-typescript": "3.6.3",
+		"eslint-plugin-import": "2.31.0",
+		"eslint-plugin-prettier": "5.2.1",
+		"eslint-plugin-react": "7.37.1",
+		"flipper-ui": "0.34.7",
+		"prettier": "3.3.3",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"react-router": "6.23.1",
-		"react-router-dom": "6.23.1",
-		"storybook": "8.1.5",
-		"styled-components": "6.1.11",
-		"typescript": "5.4.5",
-		"webpack": "5.91.0"
+		"storybook": "8.3.4",
+		"styled-components": "6.1.13",
+		"typescript": "5.6.2",
+		"webpack": "5.95.0"
 	}
 }

src/commonStyles.ts

@@ -0,0 +1,62 @@
+import { default as styled } from 'styled-components'
+import { theme } from 'flipper-ui/theme'
+
+const { gray, neutral, primary } = theme.colors
+
+export const Content = styled.div``
+
+export const Flex = styled.div`
+    display: flex;
+`
+
+export const FlexBetween = styled(Flex)`
+    align-items: center;
+    justify-content: space-between;
+`
+
+export const Wrapper = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+    padding: 3.5rem;
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    background-color: ${neutral[100]};
+`
+
+export const OrdenateList = styled.ol``
+
+export const ListItems = styled.li`
+    padding-bottom: 12px;
+`
+
+export const Description = styled.p`
+    line-height: 24px;
+`
+
+export const ContentBold = styled.div`
+    font-weight: 700;
+`
+
+export const ContainerTitle = styled(ContentBold)`
+    font-size: 24px;
+    color: ${gray[800]};
+`
+
+export const ContainerContent = styled.div`
+    font-size: 16px;
+    color: ${gray[900]};
+`
+
+export const FigmaRedirect = styled.a`
+    text-decoration: none;
+    font-size: 14px;
+    color: ${primary.light};
+    transition: font-size 0.5s ease-in-out;
+
+    &:hover {
+        font-size: 15px;
+    }
+`