From 7544a17534defaab64b69485a7d8571518bd0890 Mon Sep 17 00:00:00 2001 From: George Barreira Date: Fri, 17 Nov 2023 14:19:26 +0000 Subject: [PATCH 1/2] adicionado pastas avatar e card --- .gitpod.yml | 11 +++++++++ src/components/avatar/avatar.css | 4 ++++ src/components/avatar/avatar.stories.ts | 28 ++++++++++++++++++++++ src/components/avatar/index.js | 16 +++++++++++++ src/components/card/card.css | 0 src/components/card/card.stories.ts | 30 ++++++++++++++++++++++++ src/components/card/index.js | 31 +++++++++++++++++++++++++ 7 files changed, 120 insertions(+) create mode 100644 .gitpod.yml create mode 100644 src/components/avatar/avatar.css create mode 100644 src/components/avatar/avatar.stories.ts create mode 100644 src/components/avatar/index.js create mode 100644 src/components/card/card.css create mode 100644 src/components/card/card.stories.ts create mode 100644 src/components/card/index.js diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..9e083d8 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,11 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +tasks: + - init: npm install && npm run build + command: npm run dev + + diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css new file mode 100644 index 0000000..2cf451e --- /dev/null +++ b/src/components/avatar/avatar.css @@ -0,0 +1,4 @@ +img.avatar { + width: 50px; + border-radius: 50px; +} \ No newline at end of file diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts new file mode 100644 index 0000000..ba120ea --- /dev/null +++ b/src/components/avatar/avatar.stories.ts @@ -0,0 +1,28 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import { avatar } from './index'; +import type {AvatarProps} from './index'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/Avatar', + tags: ['autodocs'], + render: (args) => { + return avatar(args); + }, + argTypes: { + imgSrc: {description: 'endereço para a imgaem do logo'}, + descricao: {description: 'descrição da imagem do logo'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const meuperfil: Story = { + args: { + imgSrc: 'https://avatars.githubusercontent.com/u/133207241?v=4', + descricao: 'Picture Profile ' + } +}; \ No newline at end of file diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js new file mode 100644 index 0000000..de4650a --- /dev/null +++ b/src/components/avatar/index.js @@ -0,0 +1,16 @@ +import './avatar.css' + + +/** + +*@typedef {Object} AvatarProps +*@property {string} AvatarProps.imgSrc - some description here +*@property {string} AvatarProps.descricao - some description here +*@param {AvatarProps} props + +*/ +export function avatar({imgSrc, descricao}) { + return ` + ${descricao} + ` +} \ No newline at end of file diff --git a/src/components/card/card.css b/src/components/card/card.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts new file mode 100644 index 0000000..0b43725 --- /dev/null +++ b/src/components/card/card.stories.ts @@ -0,0 +1,30 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import { card } from './index'; +import type {CardProps} from './index'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/Card', + tags: ['autodocs'], + render: (args) => { + return card(args); + }, + argTypes: { + nome: {desciption: 'nome do profile'}, + cargo: {desciption: 'cargo do profile'}, + img: {desciption: 'endereço para a imagem do logo'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + nome: 'Mansueto', + cargo: 'Back-end', + img: 'https://avatars.githubusercontent.com/u/133207241?v=4' + } +}; \ No newline at end of file diff --git a/src/components/card/index.js b/src/components/card/index.js new file mode 100644 index 0000000..325e401 --- /dev/null +++ b/src/components/card/index.js @@ -0,0 +1,31 @@ +import { avatar } from '../avatar'; +import './card.css' + + +/** + * @typedef {Object} CardProps + * @property {string} CardProps.nome - some description here + * @property {string} CardProps.cargo - some description here + * @property {string} CardProps.img - some description here + * @param {CardProps} props + */ + +/** + * @param {*} param0 + * @returns + */ + +export function card({nome, cargo, img}) { + return ` +
+
+ ${avatar({imgSrc: img, descricao: 'profile picture from' + nome})} + +
+
+

Nome: ${nome}

+

Cargo: ${cargo}

+
+ +
` ; + } \ No newline at end of file From ed9a94343732c9164da1486de0a12bf668f7f382 Mon Sep 17 00:00:00 2001 From: AbraaoAlves Date: Fri, 24 Nov 2023 07:51:17 -0300 Subject: [PATCH 2/2] fix: remove duplicate story title --- src/components/cards/card.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index bdb4032..5538259 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -3,7 +3,7 @@ import type { CardProps } from './index'; import { card } from './index'; // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export const meta = { - title: 'App/card', + title: 'App/cards', tags: ['autodocs'], render: (args) => { return card(args);