https://github.com/bwhtdev/sb-ng-demo

Storybook.js Angular Demo Project (w/ Tailwind CSS)
https://github.com/bwhtdev/sb-ng-demo

angular storybookjs tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Storybook.js Angular Demo Project (w/ Tailwind CSS)

• Host: GitHub
• URL: https://github.com/bwhtdev/sb-ng-demo
• Owner: bwhtdev
• Created: 2023-02-03T04:05:21.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T19:08:06.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T01:03:58.330Z (about 2 months ago)
• Topics: angular, storybookjs, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://bradscottwhite.github.io/sb-ng-demo/
• Size: 2.57 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# sb-ng-demo

Tutorial on my blog: https://blog.bradwhite.io/get-started-with-storybookjs-and-angular-w-tailwind-css

### Instructions

###### SETUP NG APP

- Create Angular app:

`ng n sb-ng-demo`

- Move into root directory:

`cd sb-ng-demo`

###### INSTALL TAILWIND

- Install Tailwind CSS:

`npm i -D tailwindcss postcss autoprefixer`

- Initialize Tailwind:

`npx tailwindcss init`

- Configure content of template paths in `tailwind.config.js`:

```

content: [ './src/**/*.{html,ts}' ]

```

- Add Tailwind directives to global styles in `src/styles.css`:

```

@tailwind base;

@tailwind components;

@tailwind utilities;

```

###### SETUP STORYBOOK

- Install Storybook.js:

`npx sb init`

- Initialize Storybook:

`npm run storybook`

###### CREATE COMPONENT

- Generate button component:

`ng g c btn`

- Add color param to button in `src/app/btn/btn.component.ts`:

```

import { Component, Input } from '@angular/core'; // Import input decorator

@Component({

  selector: 'app-btn',

  templateUrl: './btn.component.html',

  styleUrls: ['./btn.component.css']

})

export class BtnComponent {

  // Add input decorator

  @Input()

  color?: string; // Add color param

}

```

- Add a simple button template in `src/app/btn/btn.component.html`:

```

  

```

- NOTE: the `` tag is for the button's inner text

###### CREATE STORY FOR COMPONENT

- Create a story for the button component at `src/app/stories/Btn.stories.ts`:

```

import { Story, Meta } from '@storybook/angular/types-6-0';

import { BtnComponent as Btn } from '../app/btn/btn.component'; // Import btn component

export default {

  title: 'Component/Button', // Name the story

  component: Btn,

  argTypes: {}

} as Meta;

const Template: Story = (args: Btn) => ({

  props: args,

  // This is our template for our btn:

  template: `

    

      This is a template test.

    `,

});

// This displays a simple example of the component

export const SimpleExample = Template.bind({});

// This displays the component with the color as primary

export const Primary = Template.bind({});

Primary.args = {

  color: 'primary'

} as Partial;

```

###### RUN APP

- Serve app:

`ng run start`