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..e39339c --- /dev/null +++ b/src/components/Avatar/avatar.css @@ -0,0 +1,4 @@ + +img{ + width: 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..7b50d4c --- /dev/null +++ b/src/components/Avatar/avatar.stories.ts @@ -0,0 +1,31 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import { avatar } from './indice'; +import type {AvatarProps} from './indice'; + +// 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: { + link: {description: 'endereço para o link do logo'}, + 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 Primary: Story = { + args: { + link: 'github.com', + imgSrc: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', + descricao: 'Octocat from Github ' + } +}; + diff --git a/src/components/Avatar/indice.js b/src/components/Avatar/indice.js new file mode 100644 index 0000000..3a477e9 --- /dev/null +++ b/src/components/Avatar/indice.js @@ -0,0 +1,15 @@ +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} + ` +} diff --git a/src/components/Card/FotoPerfil.jpg b/src/components/Card/FotoPerfil.jpg new file mode 100644 index 0000000..cd03a3d Binary files /dev/null and b/src/components/Card/FotoPerfil.jpg differ diff --git a/src/components/Card/card.css b/src/components/Card/card.css new file mode 100644 index 0000000..691e747 --- /dev/null +++ b/src/components/Card/card.css @@ -0,0 +1,31 @@ + +div.header > img{ + width: 70%; + border-radius: 50%; + + } + +div.header{ + display: flex; + justify-content: center; +} +div { + padding: 1% 1% 1%; +} + +div.body { + display: flex; + justify-content: center; + font-family: cursive; +} + +.card { + display: grid; + border-style: solid; + border-color:black; + border-radius: 10px; + margin-right: 75%; + background-color:cornsilk; +} + + \ No newline at end of file diff --git a/src/components/Card/card.stories.ts b/src/components/Card/card.stories.ts new file mode 100644 index 0000000..890a88a --- /dev/null +++ b/src/components/Card/card.stories.ts @@ -0,0 +1,32 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import {card} from './index'; +import type {CardProps} from './index'; +import fotoPerfil from './FotoPerfil.jpg' +// 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: {description: 'nome do profile'}, + cargo: {description: 'cargo do profile'}, + img: {description: 'endereço para a imagem'} + + } +} 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: 'Rafael Leite', + img: fotoPerfil, + cargo: 'Saco de pancada de problemas de codigos ' + } +}; + diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 0000000..bc14c71 --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,25 @@ +import { avatar } from '../Avatar/indice' +import './card.css' + +/** + * @typedef {Object} CardProps + * @property {string} CardProps.img - some description here + * @property {string} CardProps.nome - some description here + * @property {string} CardProps.cargo - some description here + * + * + * @param {CardProps} props + */ + +export function card({nome, cargo, img}){ + return `
+
+ ${avatar({imgSrc: img, descricao: 'profile picture ' + nome})} +
+
+

Nome: ${nome}

+

Cargo: ${cargo}

+
+
+ ` +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 21f2513..4d7e967 100644 --- a/src/main.js +++ b/src/main.js @@ -10,19 +10,21 @@ const app = $('#app'); app.innerHTML = `
- ${logo({link: "https://vitejs.dev", imgSrc: viteLogo, descricao: "Vite logo"})} - ${logo({link: "https://www.typescriptlang.org/", imgSrc: typescriptLogo, descricao: "TypeScript logo"})} + + ${logo({link: "https://vitejs.dev",imgSrc: viteLogo,descricao: "Vite logo"})} + ${logo({link: "https://www.typescriptlang.org/",imgSrc: typescriptLogo,descricao: "TypeScript logo"})} +

Vite + TypeScript

- +
+ +
${counter()} ${counter()} - +

Click on the Vite and TypeScript logos to learn more

-
+ ` - setupCounter($('#counter')); -