feat: storybook setup, chromatic setup and typography stories #3015

devilkiller-ag · 2024-06-01T07:22:18Z

Description
This PR adds Storybook and Chromatic to the AsyncAPI Website for developing a UI kit for the website. Additionally, for testing the setup I have included the stories for the Typography (Headings, and Paragraph).

Here is the published storybook.

netlify · 2024-06-01T07:22:41Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`50c7ee6`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/668929abe0d3ee000881e761
😎 Deploy Preview	https://deploy-preview-3015--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

asyncapi-bot · 2024-06-01T07:25:25Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	37
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🟠 PWA	56

Lighthouse ran on https://deploy-preview-3015--asyncapi-website.netlify.app/

akshatnema

Do mention about the storybook setup and how to run storybook locally, in the README file.

akshatnema · 2024-06-03T17:05:28Z

package.json

+    "storybook": "storybook dev -p 6006",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "build-storybook": "storybook build"
  },


Make the script commands according to the pattern followed, like build:storybook. Follow the same for all the scripts added.

akshatnema · 2024-06-03T17:06:06Z

package.json

+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
  }


Add the eslint config in the eslintrc file only.

akshatnema · 2024-06-03T17:07:19Z

.github/workflows/chromatic.yml

@@ -0,0 +1,24 @@
+# .github/workflows/chromatic.yml


Have you tested this workflow in your forked repo? If yes, kindly share the workflow run link.

Yes it's working

Can you provide the link when you executed in your forked repo?

https://github.com/devilkiller-ag/asyncapi-website/actions/runs/9373475111/job/25807339881

akshatnema · 2024-06-03T17:07:56Z

.github/workflows/chromatic.yml

+
+name: 'Chromatic'
+
+on: push


I think it should be done at the PR level. So, you should run this workflow as per pull_request_target.

akshatnema · 2024-06-03T17:08:47Z

.github/workflows/chromatic.yml

+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci


I think installing the dependencies require npm i command.

Rectified this

.github/workflows/chromatic.yml

akshatnema · 2024-06-03T17:10:11Z

.storybook/main.ts

+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["..\\public"],


Shouldn't we provide directory name as ../public for all users?

Rectified this

akshatnema · 2024-06-03T17:10:59Z

.storybook/preview-head.html

+<style>
+  body {
+    font-family: 'Work Sans', sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+  }
+</style>


Better to have preview.css file in this folder and import the CSS file here.

akshatnema · 2024-06-03T17:15:10Z

Got this error while trying to initiate the storybook locally. Do correct the relative path, so that it runs for all OS.

…ebsite

devilkiller-ag · 2024-06-04T07:24:13Z

Got this error while trying to initiate the storybook locally. Do correct the relative path, so that it runs for all OS.

Rectified this.

akshatnema · 2024-06-10T05:40:58Z

I can't understand this point. Can you please explain a bit more? We aren't using any extra styling in the storybook. All the styles that we see are the same as defined in the component. We just render the component as it is in the storybook without modifying anything.

If you look into the console inside storybook preview, they aren't any Tailwind styles applied to it. Why it is not able to get Tailwind classes properties?

akshatnema · 2024-06-10T06:13:29Z

But, for this storybook needs the variable's description above each variable defined in the prop type interface instead of the current format[which is: variable description is defined in the JSDoc of function.]

@devilkiller-ag Can you please demonstrate this in Heading stories component, so that we are aware about it, how to resolve it.

devilkiller-ag · 2024-06-10T12:00:06Z

@devilkiller-ag Can you please demonstrate this in Heading stories component, so that we are aware about it, how to resolve it.

Done. We will also have to disable eslint lines-around-comment as currently it's displaying an error: Expected line before comment. for JSDoc comments above each interface property.

Here is how it looks after update (Notice the change in description of all props in the table and the description of Heading page):

Here is how it looked before:

akshatnema · 2024-06-13T05:35:05Z

package.json

@@ -107,8 +110,17 @@
    "yaml": "^2.3.4"
  },
  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",


Remove chromatic library for now. We will look into it's use case after further discussions.

akshatnema · 2024-06-13T05:35:14Z

package.json

-    "generate:tools": "node scripts/build-tools.js"
+    "generate:tools": "node scripts/build-tools.js",
+    "dev:storybook": "storybook dev -p 6006",
+    "chromatic": "chromatic --exit-zero-on-changes",


Suggested change

"chromatic": "chromatic --exit-zero-on-changes",

akshatnema · 2024-06-13T05:35:46Z

components/typography/Paragraph.tsx

 * @param {string} props.textColor contains text color for the paragraph. 'text-gray-700' is by default
 * @param {string} props.fontWeight contains class name for applying font weight in the paragraph
 * @param {string} props.className contains additional classes that should be added to the component


Add these comments as part of interface comments only.

akshatnema · 2024-06-15T09:21:22Z

chromatic.config.json

Remove this file.

.storybook/main.ts

akshatnema · 2024-06-16T03:56:03Z

components/typography/Paragraph.stories.tsx

+
+type Story = StoryObj<typeof Paragraph>;
+
+export const Paragraphs: Story = {


Are we using these objects/functions anywhere else? If not, then why are we exporting it?

No, we aren't using it manually. But storybook needs to have stories exported (Resource 1 | Resource 2). If we don't have stories exported they won't show up in the storybook.

akshatnema · 2024-06-16T03:56:59Z

components/typography/Paragraph.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';


Why there are no warnings for ESLint in these files for adding Jsdoc comments?

I didn't get this point, I haven't added any JSDoc in this file.

…ebsite

akshatnema · 2024-07-06T11:49:56Z

/rtm

devilkiller-ag added 6 commits May 30, 2024 23:27

installed storybook

b918193

removed bolierplate storybook code

a111d63

added stories for headings

9d73b60

setup autodocs with custom template

08f4cfd

added chromatic workflow

1fca89c

added stories for paragraph

06683d8

devilkiller-ag requested review from derberg, akshatnema, magicmatatjahu, anshgoyalevil, Mayaleeeee and asyncapi-bot-eve as code owners June 1, 2024 07:22

asyncapi-bot requested a review from sambhavgupta0705 June 1, 2024 07:22

devilkiller-ag and others added 2 commits June 1, 2024 12:57

Merge branch 'master' into master

fbd3fac

added color pallete

5d1eeb6

akshatnema requested changes Jun 3, 2024

View reviewed changes

devilkiller-ag and others added 2 commits June 4, 2024 12:15

Merge branch 'asyncapi:master' into master

2dd1848

Merge branch 'master' of https://github.com/devilkiller-ag/asyncapi-w…

397b277

…ebsite

devilkiller-ag added 2 commits June 4, 2024 13:09

added suggusted changes

b819469

Experimenting chromatic workflow

1ca5032

asyncapi-bot requested review from BhaswatiRoy, J0SAL, TRohit20 and VaishnaviNandakumar June 4, 2024 19:46

devilkiller-ag added 2 commits June 5, 2024 01:21

added suggusted changes

b4b240c

removed error causing design token

4d71250

added suggested changes

4aa483e

akshatnema added the gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code label Jun 10, 2024

updated headings jsdoc according to the requirements of storybook

1ded72b

retified tailwind css

91a3c5b

devilkiller-ag requested a review from akshatnema June 10, 2024 12:21

devilkiller-ag and others added 3 commits June 11, 2024 17:07

fix eslint issues and removed chromatic

828d4bb

Merge remote-tracking branch 'upstream/master'

e1e5a2f

Merge branch 'master' into master

36766ed

akshatnema requested changes Jun 15, 2024

View reviewed changes

removed chromatic related code

4373a18

devilkiller-ag requested a review from akshatnema June 15, 2024 17:58

Merge branch 'master' into master

fa87688

akshatnema reviewed Jun 16, 2024

View reviewed changes

.storybook/main.ts Outdated Show resolved Hide resolved

Update .storybook/main.ts

0d29b55

akshatnema reviewed Jun 16, 2024

View reviewed changes

devilkiller-ag added 2 commits June 16, 2024 14:34

Updated readme file withstorybook commands

aee9ad8

Merge branch 'master' of https://github.com/devilkiller-ag/asyncapi-w…

3cf06f8

…ebsite

devilkiller-ag requested a review from quetzalliwrites as a code owner June 16, 2024 10:32

devilkiller-ag requested a review from akshatnema June 16, 2024 10:41

devilkiller-ag and others added 4 commits June 17, 2024 22:21

Merge branch 'master' into master

e8c54e1

Merge branch 'master' into master

569dc20

resolved merge conflicts

9359a2d

Merge branch 'master' into master

50c7ee6

akshatnema approved these changes Jul 6, 2024

View reviewed changes

asyncapi-bot added the ready-to-merge label Jul 6, 2024

asyncapi-bot merged commit 3267eda into asyncapi:master Jul 6, 2024
15 checks passed


		type Story = StoryObj<typeof Paragraph>;

		export const Paragraphs: Story = {

		@@ -0,0 +1,41 @@
		import type { Meta, StoryObj } from '@storybook/react';

feat: storybook setup, chromatic setup and typography stories #3015

feat: storybook setup, chromatic setup and typography stories #3015

Conversation

devilkiller-ag commented Jun 1, 2024

netlify bot commented Jun 1, 2024 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

asyncapi-bot commented Jun 1, 2024 • edited Loading

akshatnema left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshatnema commented Jun 3, 2024

devilkiller-ag commented Jun 4, 2024

akshatnema commented Jun 10, 2024

akshatnema commented Jun 10, 2024

devilkiller-ag commented Jun 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshatnema commented Jul 6, 2024

netlify bot commented Jun 1, 2024 •

edited

Loading

asyncapi-bot commented Jun 1, 2024 •

edited

Loading

devilkiller-ag commented Jun 10, 2024 •

edited

Loading