norma-library 0.5.50 → 0.5.51

package/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -2,11 +2,8 @@
 <p align="center">
   <img width="120" height="120" src="https://www.olos.com.br/wp-content/uploads/2023/03/cropped-selo-olos-1-180x180.png" alt="Olos logo">
 </p>
-
 <h1 align="center">Norma DS </h1>
-
 <div align="center">
-
 Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
@@ -22,7 +19,7 @@ Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and
 
 </div>
 
-## The Setup
+## Configurações
 
 - [React v18](https://react.dev/)
 - [TypeScript](https://www.typescriptlang.org/)
@@ -33,10 +30,15 @@ Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and
 - Build the library with [Rollup][rollup-url]
 - Automated release with [changesets][changesets-url]
 
-# Documentation
-
-# Contributing
-
-# Changelog
-
-# License
+# Documentação
+
+### Instalação
+Para instalação das dependencias:
+``` 
+npm install
+```
+### Execução do projeto
+Para utilizar o Storybook:
+```
+npm run storybook
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.50",
+  "version": "0.5.51",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {
@@ -12,11 +12,9 @@
     "build-docz": "docz build",
     "serve-docz": "docz build && docz serve",
     "clean-docz": "npx rimraf .docz && npx rimraf build/docz",
-    "pre-commit": "npx lint-staged",
     "prepare": "husky install",
     "prettier": "npx prettier \"./**/*.{js,json,ts,tsx}\" --write",
-    "tar": "tar -cvf norma-library.tar ./storybook-static",
-    "commit": "git-cz"
+    "tar": "tar -cvf norma-library.tar ./storybook-static"
   },
   "author": "José Roberto Miguel Filho",
   "module": "dist/esm/index.js",
@@ -38,16 +36,8 @@
     "@emotion/styled-base": "^11.0.0",
     "@mdx-js/loader": "^2.3.0",
     "@mui/lab": "^5.0.0-alpha.145",
-    "@storybook/addon-essentials": "^7.5.0-alpha.1",
-    "@storybook/addon-interactions": "^7.5.0-alpha.1",
-    "@storybook/addon-links": "^7.5.0-alpha.1",
-    "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.1",
-    "@storybook/react": "^7.4.0",
     "@storybook/react-webpack5": "^7.5.0-alpha.1",
-    "@storybook/testing-library": "^0.2.1-next.0",
-    "@types/react": "^18.2.21",
     "autoprefixer": "^10.4.15",
     "camelcase": "^8.0.0",
     "chalk": "^5.3.0",
@@ -64,19 +54,30 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.5.0-alpha.1",
     "storybook-addon-dark-mode-toggle": "^0.0.6",
     "storybook-dark-mode": "^3.0.1",
     "style-loader": "^3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.2.2"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "prepare-commit-msg": "exec < /dev/tty && npx cz --hook || true",
-      "pre-commit": "lint-staged"
-    }
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "storybook": "^7.5.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
   },
   "lint-staged": {
     "*.{md,mdx}": [

package/src/components/Card.tsx

@@ -5,23 +5,13 @@ import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
 const CardStyled = styled(MuiCard)<{
   borderColor?: ColorVariant;
 }>(({ borderColor }) => ({
   padding: 16,
   borderRadius: 5,
   boxShadow: '0px 2px 8px #00000053',
-  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
+  borderLeft: borderColor ? `7px solid ${palette[borderColor]}` : 'none',
 }));
 
 export const Card = ({
@@ -29,7 +19,7 @@ export const Card = ({
   border,
   color = 'inherit',
   ...props
-}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
+}: CardBaseProps & { border?: boolean; }) => {
   
   return (
     <CardStyled borderColor={border ? color : undefined} {...props}>

package/src/helpers/colors.ts

@@ -6,7 +6,6 @@ export const getPalette = () => {
     primaryLight: '#FFDB9F',
     primaryMedium: '#FFA84C',
     primaryDark: '#B74608',
-
     inherit: 'rgb(102, 102, 102)',
     secondary: 'rgb(67, 187, 242)',
     error: 'rgb(214, 54, 67)',

package/src/stories/Card.stories.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Card } from '../components/Card';
 import type { Meta, StoryObj } from '@storybook/react';
+import { palette } from '../helpers';
 import { ColorVariant } from '../types';
 
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
-
 const meta = {
   title: 'Layout/Card',
   component: Card,
@@ -31,8 +30,8 @@ export const BasicBordered = () => (
 
 export const BasicBorderedColors = () => (
   <>
-    {colors.map((color, key) => (
-      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color} key={key}>
+    {Object.keys(palette).map((color, key) => (
+      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color as ColorVariant} key={key}>
         Card with border {color}
       </Card>
     ))}

package/src/types/index.ts

@@ -19,13 +19,15 @@ import {
   TableProps as MuiTableProps,
 } from '@mui/material';
 
+import { palette } from '../helpers';
+
 import { TimelineProps as MuiTimeLineProps } from '@mui/lab';
 
 import { SwitchBaseProps as MuiSwitchBaseProps } from '@mui/material/internal/SwitchBase';
 
 import { iconsSVG } from '../components/Svgs';
 
-export type ColorVariant = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+export type ColorVariant = keyof typeof palette;
 
 export type TextFieldColorVariant = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';