From adf3ed2b6268ef8b8d45665e15c9fa2d909cc151 Mon Sep 17 00:00:00 2001 From: Andres Date: Thu, 28 Dec 2023 12:27:18 +0100 Subject: [PATCH] chore: add header component --- package.json | 132 ++++++++++---------- src/components/ui/header/header.module.scss | 0 src/components/ui/header/header.stories.tsx | 17 +++ src/components/ui/header/header.tsx | 11 ++ src/components/ui/header/index.ts | 1 + src/components/ui/index.ts | 1 + 6 files changed, 97 insertions(+), 65 deletions(-) create mode 100644 src/components/ui/header/header.module.scss create mode 100644 src/components/ui/header/header.stories.tsx create mode 100644 src/components/ui/header/header.tsx create mode 100644 src/components/ui/header/index.ts diff --git a/package.json b/package.json index 24bd56d..77b27b6 100644 --- a/package.json +++ b/package.json @@ -1,67 +1,69 @@ { - "name": "example", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview", - "format": "prettier --write src", - "lint": "eslint . --ext .jsx,.js,.tsx,.ts --no-error-on-unmatched-pattern --fix && stylelint --fix src/{,*/}*.{scss,css} --allow-empty-input", - "storybook": "storybook dev -p 6006", - "sb": "storybook dev -p 6006", - "build-storybook": "storybook build" - }, - "dependencies": { - "@fontsource/roboto": "^5.0.8", - "@hookform/resolvers": "^3.3.3", - "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-dialog": "^1.0.5", - "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-radio-group": "^1.1.3", - "@radix-ui/react-slider": "^1.1.2", - "@radix-ui/react-tabs": "^1.0.4", - "@reduxjs/toolkit": "^2.0.1", - "@storybook/theming": "^7.6.6", - "clsx": "^2.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.49.2", - "react-redux": "^9.0.4", - "react-router-dom": "^6.21.1", - "react-toastify": "^9.1.3", - "remeda": "^1.33.0", - "storybook-addon-react-router-v6": "^2.0.10", - "zod": "^3.22.4" - }, - "devDependencies": { - "@hookform/devtools": "^4.3.1", - "@it-incubator/eslint-config": "^1.0.2", - "@it-incubator/prettier-config": "^0.1.2", - "@it-incubator/stylelint-config": "^0.1.5", - "@storybook/addon-essentials": "^7.6.6", - "@storybook/addon-interactions": "^7.6.6", - "@storybook/addon-links": "^7.6.6", - "@storybook/blocks": "^7.6.6", - "@storybook/react": "^7.6.6", - "@storybook/react-vite": "^7.6.6", - "@storybook/testing-library": "^0.2.2", - "@types/node": "^20.10.5", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", - "@typescript-eslint/eslint-plugin": "^6.16.0", - "@typescript-eslint/parser": "^6.16.0", - "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.56.0", - "eslint-plugin-myPlugin": "file:eslint", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.5", - "eslint-plugin-storybook": "^0.6.15", - "sass": "^1.69.5", - "storybook": "^7.6.6", - "stylelint": "^15.10.3", - "typescript": "^5.3.3", - "vite": "5.0.10" - } + "name": "example", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "format": "prettier --write src", + "format:file": "prettier --write", + "lint": "eslint . --ext .jsx,.js,.tsx,.ts --no-error-on-unmatched-pattern --fix && stylelint --fix src/{,*/}*.{scss,css} --allow-empty-input", + "lint:file": "eslint --fix", + "storybook": "storybook dev -p 6006", + "sb": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "@fontsource/roboto": "^5.0.8", + "@hookform/resolvers": "^3.3.3", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-radio-group": "^1.1.3", + "@radix-ui/react-slider": "^1.1.2", + "@radix-ui/react-tabs": "^1.0.4", + "@reduxjs/toolkit": "^2.0.1", + "@storybook/theming": "^7.6.6", + "clsx": "^2.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-hook-form": "^7.49.2", + "react-redux": "^9.0.4", + "react-router-dom": "^6.21.1", + "react-toastify": "^9.1.3", + "remeda": "^1.33.0", + "storybook-addon-react-router-v6": "^2.0.10", + "zod": "^3.22.4" + }, + "devDependencies": { + "@hookform/devtools": "^4.3.1", + "@it-incubator/eslint-config": "^1.0.2", + "@it-incubator/prettier-config": "^0.1.2", + "@it-incubator/stylelint-config": "^0.1.5", + "@storybook/addon-essentials": "^7.6.6", + "@storybook/addon-interactions": "^7.6.6", + "@storybook/addon-links": "^7.6.6", + "@storybook/blocks": "^7.6.6", + "@storybook/react": "^7.6.6", + "@storybook/react-vite": "^7.6.6", + "@storybook/testing-library": "^0.2.2", + "@types/node": "^20.10.5", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", + "@typescript-eslint/eslint-plugin": "^6.16.0", + "@typescript-eslint/parser": "^6.16.0", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-myPlugin": "file:eslint", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "eslint-plugin-storybook": "^0.6.15", + "sass": "^1.69.5", + "storybook": "^7.6.6", + "stylelint": "^15.10.3", + "typescript": "^5.3.3", + "vite": "5.0.10" + } } diff --git a/src/components/ui/header/header.module.scss b/src/components/ui/header/header.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ui/header/header.stories.tsx b/src/components/ui/header/header.stories.tsx new file mode 100644 index 0000000..a022f54 --- /dev/null +++ b/src/components/ui/header/header.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { Header } from './' + +const meta = { + component: Header, + parameters: { layout: 'fullscreen' }, + tags: ['autodocs'], + title: 'Components/Header', +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} diff --git a/src/components/ui/header/header.tsx b/src/components/ui/header/header.tsx new file mode 100644 index 0000000..ab38367 --- /dev/null +++ b/src/components/ui/header/header.tsx @@ -0,0 +1,11 @@ +import s from './header.module.scss' + +export type HeaderProps = { + avatar?: string + name?: string + onLogout?: () => void +} + +export const Header = ({}: HeaderProps) => { + return
Header
+} diff --git a/src/components/ui/header/index.ts b/src/components/ui/header/index.ts new file mode 100644 index 0000000..c73f6da --- /dev/null +++ b/src/components/ui/header/index.ts @@ -0,0 +1 @@ +export * from './header' diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 63527e7..7a09a1c 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -1,3 +1,4 @@ +export * from './header' export * from './button' export * from './card' export * from './typography'