wip: Rafael jereissate/card

.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
+
+

src/components/Avatar/avatar.css

@@ -0,0 +1,4 @@
+
+img{
+  width: 50px;
+}

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<AvatarProps>;
+
+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 '
+  }
+};
+

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 `
+    <img src="${imgSrc}" class="avatar" alt="${descricao}" />
+  `
+}

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;
+}
+
+

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<CardProps>;
+
+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 '
+  }
+};
+

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 `<div class="card">
+    <div class="header">
+        ${avatar({imgSrc: img, descricao: 'profile picture ' + nome})}
+    </div>
+    <div class="body">
+        <p class="nome">Nome: ${nome}</p>
+        <p class="cargo">Cargo: ${cargo}</p>
+    </div>
+</div>
+    `
+}

src/main.js

@@ -10,19 +10,21 @@ const app = $('#app');
 
 app.innerHTML = `
   <div>
-    ${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"})}
+
 
     <h1>Vite + TypeScript</h1>
-
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
     ${counter()}
     ${counter()}
-    
+
     <p class="read-the-docs">
       Click on the Vite and TypeScript logos to learn more
     </p>
-  </div>
+    </div>
 `
-
 setupCounter($('#counter'));
-