In this lesson, we'll create the most basic component we will use in later lessons.

As I previously mentioned, we won't focus on CSS in this course.
Please paste my styles into your repository to make our code look nice.

/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --button: #38bdf8;
  --button-hover: #0ea5e9;
  --primary: #38bdf8;
  --red: #ef4444;
  --disabled: #d4d4d4;
  --shadow: #bae6fd;
  --border: #e5e5e5;
  --border-width-sm: 1px;
  --border-width: 2px;
  --border-width-lg: 4px;
  --radius: 5px;
  --size-1: 5px;
  --size-2: 10px;
  --size-3: 15px;
  --font-small: 12px;
  --font-regular: 14px;
}

* {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-regular);
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

label {
  font-size: var(--font-small);
  font-weight: bold;
  display: block;
  margin-bottom: var(--size-1);
}

input {
  padding: var(--size-2) var(--size-3);
  border-radius: var(--radius);
  border: var(--border-width) solid var(--border);
  outline: none;
}

input:hover,
input:active,
input:focus {
  border-color: var(--primary);
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 38px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

hr {
  border-top: 1px solid var(--border);
  margin: var(--size-3) 0;
}

.margin-top {
  margin-top: var(--size-3);
}

shared-button button {
  background: none;
  border: none;
  outline: none;
  color: white;
  padding: 0;
  margin: 0;
}

shared-button {
  display: inline-block;
  padding: var(--size-2) var(--size-3);
  background: var(--button);
  transition: background-color .2s;
  border: var(--border-width) solid var(--button);
  border-radius: var(--radius);
  cursor: pointer;
}

shared-button:hover {
  background: var(--button-hover);
  border: var(--border-width) solid var(--button-hover);

}

shared-card {
  display: flex;
  flex-direction: column;
  border: var(--border-width-sm) solid var(--border);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
}

shared-card img {
  width: 100%;
  flex-grow: 1;
}

shared-card .card-body {
  padding: var(--size-3);
}

.card-active {
  box-shadow: 0 0 var(--size-3) var(--shadow);
}

shared-list shared-list-item + shared-list-item {
  border-top: var(--border-width) solid var(--border);
}

shared-list-item {
  display: block;
  padding: var(--size-1);
}

shared-room-background {
  display: block;
  width: 100%;
  height: 100%;
}

shared-room-background .image {
  width: 100%;
  height: 100%;
  background-size: cover;
}

shared-room-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--size-3);
}

shared-room-list shared-card {
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.text-center {
  text-align: center;
}

.add-room-button {
  width: 100%;
  height: 100%;
}

.add-room-button .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

shared-room-timeline-list shared-list-item {
  display: flex;
  justify-content: space-between;
}

shared-room-timeline-list .live {
  color: var(--red);
  font-weight: bold;
}

shared-room-timeline-list .past {
  text-decoration: line-through;
  color: var(--disabled);
}

admin-room-list,
admin-room-edit,
room-list {
  display: block;
  margin: var(--size-3) auto;
  width: 1200px;
}

.background-list {
  display: grid;
  gap: var(--size-3);
  grid-template-columns: repeat(6, 1fr);
}

.background-list shared-room-background {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
}

.input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-3);
}

.selected-background {
  border: var(--border-width-lg) solid var(--primary);
}

.room-name {
  width: 50%;
}

room-details {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
}

room-details shared-room-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

room-details .back-button {
  position: absolute;
  top: var(--size-3);
  left: var(--size-3);
}

room-details .bottom-row {
  position: absolute;
  display: flex;
  gap: var(--size-3);
  padding: var(--size-3);
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 80vh;
}

room-details .bottom-row shared-card {
  flex-grow: 1;
}

To make it work with Storybook,
place these styles in 

 to look in the code block below.
It's a simple Webpack trick to use 

 which is not a standard thing for Angular application
and import a CSS file as a global style.

import '!style-loader!css-loader!../src/styles.css';

We have a few buttons in our design specification.
The button component is relatively simple.
In fact, it's just a wrapper for the native button element.

Let's start with a standard cleanup.
Go to 

 and remove the automatically generated module.
We don't need that because we're going to use a new Angular feature, standalone components.

In the same directory, create a file called 

First, create an empty component with an empty template. You can use a generator if you want.

.
Next,
I'm creating a new Angular component called 


which I will use as a wrapper in my Storybook story.

import {Component} from "@angular/core";
import {ButtonComponent} from "shared/components/button";

@Component({
  selector: 'storybook-button',
  template: `
    <div style="margin-bottom: 15px;">
        <shared-button>Click me!</shared-button>
    </div>
    <div>
        <shared-button>
          ← 
        </shared-button>
    </div>

  `,
  imports: [
    ButtonComponent
  ],
  standalone: true
})
export class StorybookButtonComponent {

}

In this wrapper component, I'm placing all planned usages of the component.
Of course, we need to configure a story,
so next to file 

import {Meta} from '@storybook/angular';
import {StorybookButtonComponent} from "./storybook-button.component";

export default {
  title: 'ButtonComponent',
  component: StorybookButtonComponent,
} as Meta<StorybookButtonComponent>;

export const Component = {
  render: (args: StorybookButtonComponent) => ({
    props: args,
  })
};

At this point, we have everything we need to create our component.
We have an empty component where we can place our code and a quick preview in Storybook.

This way of creating components has a huge advantage
because it allows you to focus only on a smart piece of application.
You won't be distracted by anything, and it's easier to create a perfect component.
In addition, as an extra benefit, you automatically document your work.

After all my changes, the code looks like this.

---
title: Adding common components. Card, Button, Input, List, ListItem
description: Using previously configured Storybook in this lesson we will create and prepare a few common components that later we’ll use in apps.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.08-components?ref_type=heads
privateVideoUrl: https://stream.mux.com/wa2F7zORI2FJIgH9u8xiZnsBQjgQYwU7S3eOvqaIdJE.m3u8
---

In this lesson, we'll create the most basic component we will use in later lessons.

## Styles

As I previously mentioned, we won't focus on CSS in this course.
Please paste my styles into your repository to make our code look nice.

```css { actualFilename=../../../manuscript/code/04.08-components/apps/storybook/src/styles.css endChar=4200 endLine=261 startChar=0 startLine=1 statedFilename=apps/storybook/src/styles.css url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.08/.../../manuscript/code/04.08-components/apps/storybook/src/styles.css }
/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --button: #38bdf8;
  --button-hover: #0ea5e9;
  --primary: #38bdf8;
  --red: #ef4444;
  --disabled: #d4d4d4;
  --shadow: #bae6fd;
  --border: #e5e5e5;
  --border-width-sm: 1px;
  --border-width: 2px;
  --border-width-lg: 4px;
  --radius: 5px;
  --size-1: 5px;
  --size-2: 10px;
  --size-3: 15px;
  --font-small: 12px;
  --font-regular: 14px;
}

* {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-regular);
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

label {
  font-size: var(--font-small);
  font-weight: bold;
  display: block;
  margin-bottom: var(--size-1);
}

input {
  padding: var(--size-2) var(--size-3);
  border-radius: var(--radius);
  border: var(--border-width) solid var(--border);
  outline: none;
}

input:hover,
input:active,
input:focus {
  border-color: var(--primary);
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 38px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

hr {
  border-top: 1px solid var(--border);
  margin: var(--size-3) 0;
}

.margin-top {
  margin-top: var(--size-3);
}

shared-button button {
  background: none;
  border: none;
  outline: none;
  color: white;
  padding: 0;
  margin: 0;
}

shared-button {
  display: inline-block;
  padding: var(--size-2) var(--size-3);
  background: var(--button);
  transition: background-color .2s;
  border: var(--border-width) solid var(--button);
  border-radius: var(--radius);
  cursor: pointer;
}

shared-button:hover {
  background: var(--button-hover);
  border: var(--border-width) solid var(--button-hover);

}

shared-card {
  display: flex;
  flex-direction: column;
  border: var(--border-width-sm) solid var(--border);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
}

shared-card img {
  width: 100%;
  flex-grow: 1;
}

shared-card .card-body {
  padding: var(--size-3);
}

.card-active {
  box-shadow: 0 0 var(--size-3) var(--shadow);
}

shared-list shared-list-item + shared-list-item {
  border-top: var(--border-width) solid var(--border);
}

shared-list-item {
  display: block;
  padding: var(--size-1);
}

shared-room-background {
  display: block;
  width: 100%;
  height: 100%;
}

shared-room-background .image {
  width: 100%;
  height: 100%;
  background-size: cover;
}

shared-room-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--size-3);
}

shared-room-list shared-card {
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.text-center {
  text-align: center;
}

.add-room-button {
  width: 100%;
  height: 100%;
}

.add-room-button .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

shared-room-timeline-list shared-list-item {
  display: flex;
  justify-content: space-between;
}

shared-room-timeline-list .live {
  color: var(--red);
  font-weight: bold;
}

shared-room-timeline-list .past {
  text-decoration: line-through;
  color: var(--disabled);
}

admin-room-list,
admin-room-edit,
room-list {
  display: block;
  margin: var(--size-3) auto;
  width: 1200px;
}

.background-list {
  display: grid;
  gap: var(--size-3);
  grid-template-columns: repeat(6, 1fr);
}

.background-list shared-room-background {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
}

.input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-3);
}

.selected-background {
  border: var(--border-width-lg) solid var(--primary);
}

.room-name {
  width: 50%;
}

room-details {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
}

room-details shared-room-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

room-details .back-button {
  position: absolute;
  top: var(--size-3);
  left: var(--size-3);
}

room-details .bottom-row {
  position: absolute;
  display: flex;
  gap: var(--size-3);
  padding: var(--size-3);
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 80vh;
}

room-details .bottom-row shared-card {
  flex-grow: 1;
}
```

To make it work with Storybook,
place these styles in `apps/storybook/src/styles.css`
and then modify the file `apps/storybook/.storybook/preview.ts` to look in the code block below.
It's a simple Webpack trick to use `style-loader` which is not a standard thing for Angular application
and import a CSS file as a global style.

```typescript { actualFilename=../../../manuscript/code/04.08-components/apps/storybook/.storybook/preview.ts endChar=53 endLine=2 startChar=0 startLine=1 statedFilename=apps/storybook/src/styles.css url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.08/.../../manuscript/code/04.08-components/apps/storybook/.storybook/preview.ts }
import '!style-loader!css-loader!../src/styles.css';
```

## `ButtonComponent`

We have a few buttons in our design specification.
The button component is relatively simple.
In fact, it's just a wrapper for the native button element.

Let's start with a standard cleanup.
Go to `libs/components/button/src/lib` and remove the automatically generated module.
We don't need that because we're going to use a new Angular feature, standalone components.

In the same directory, create a file called `button.component.ts`.
Now, we can focus on component code.

First, create an empty component with an empty template. You can use a generator if you want.

Then, let's switch to the Storybook.
In `apps/storybook/src/app/`, I'm creating a new directory `button`.
Next,
I'm creating a new Angular component called `StorybookButtonComponent`
which I will use as a wrapper in my Storybook story.

```typescript { actualFilename=../../../manuscript/code/04.08-components/apps/storybook/src/app/button/storybook-button.component.ts endChar=544 endLine=25 startChar=0 startLine=1 statedFilename=apps/storybook/src/app/button/storybook-button.component.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.08/.../../manuscript/code/04.08-components/apps/storybook/src/app/button/storybook-button.component.ts }
import {Component} from "@angular/core";
import {ButtonComponent} from "shared/components/button";

@Component({
  selector: 'storybook-button',
  template: `
    <div style="margin-bottom: 15px;">
        <shared-button>Click me!</shared-button>
    </div>
    <div>
        <shared-button>
          ← 
        </shared-button>
    </div>

galczo5

Using previously configured Storybook in this lesson we will create and prepare a few common components that later we’ll use in apps.

Adding common components. Card, Button, Input, List, ListItem

In this lesson, we will create the most of reusable components that we will

Before we start, we need to add styles to our new Storybook application

and then configure Storybook application to use them.

To do this, go to styles.css and paste styles that I provided.

In the next step, go to that Storybook directory in Storybook application, open

and import that style, adding Style Loader and CSS Loader.

The thing that you see on the screen right now is inline Webpack configuration

So it will compile size CSS to CSS and then we'll add it to Storybook instance.

If Style Loader is not installed, you can simply add it using yarn at -D, Style

So you will get additional line in FilePacketJSON called Style Loader.

To do this, we need to execute comment. Yarn and X Storybook as a target for

It looks strange because we repeat Storybook word, but this is how it works.

We have target Storybook for application Storybook.

So let's again execute it and check if it works.

As you can see, Storybook started in 15 seconds.

So let's check how it looks like in the browser.

So let's start by creating the first one for a button component.

And I will first create Story and then I will start implementing my component.

So in app directory in StorybookedSource, I'm creating a new directory called "

And then I will create a new file called "button_stories.ts".

Okay, so I will implement the Story and then I will walk you through the code

I'm importing meta from Storybook Angular and I'm importing Storybook button

that I have just created as convenient way of presenting Storybook components.

So we have a meta of button component that is using Storybook button component

very simple component function at the end.

The main of code is in Storybook button component.ts.

So I have a new component that I'm using to present everything that I want in

So I have a blog here and I'm using "shirt component" with "click me" text

And then I have a second blog where I have my shirt component with Unicode

This component, this Storybook button component is used only for presentation

Both of them, they have button works text inside.

So it's because our button is not implemented yet.

So now we can go to our "leap" directory, "shirt components" button, "source"

of "leap", we have our component and we need to edit it.

So I'm going to do this right now and again, I will walk you through the code.

I've removed most of the files that were unnecessary for this component and I

to put everything in one file so it's easier to read.

So we have a standalone component with without style encapsulation, we've

button" and it's a simple button from native HTML with ng-content inside.

Every that most of the styles come from that global styles.css file that I

So let's check how it looks like after the change.

First one is with "click me" text and second one with arrow.

So button component is done and we can go to the next component which is card

I have card stories.ts file that is very simple, it's only meta and again a

And then I have my storybook card component that I'm using to present

As you can see, it's a simple blog with "shirt cards" inside.

We can check how it looks like after the change.

So we have our card component and at the moment it looks empty.

So my implementation is a bit more complicated than a button.

So first of all, let's start with the template.

And then I have a blog with "class card" body and then ng-content.

So basically card is a blog where you can have an image as a heading and then

And the second input is active so card can be active and not active.

So let's check how it works on the storybook.

And as you can see, we have all the options here.

We have basic card without any additional classes and so on.

We have a card that has component inside of the content.

And we have an active card with that shadow.

Please remember that all these styles, everything that I want to show on the

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript