Initial Storybook setup #110

jojopirker · 2022-12-28T08:08:06Z

These changes enable to use npm run storybook to start storybook as mentioned in #102.
There is an example story for the header.
Maybe should be moved to the components folder when doing #99.

What is not finished:

DataMocking
fokus only on components/ rather than pages/

What is finished:

TailwindCSS and ChakraUI integration

Storybook can be started using `npm run storybook`

fozziethebeat · 2022-12-28T08:16:50Z

website/src/stories/Header.stories.jsx

+import React from 'react';
+import { SessionContext } from 'next-auth/react';
+
+


style nit, can you delete this newline?

fozziethebeat · 2022-12-28T08:17:00Z

website/src/stories/Header.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SessionContext } from 'next-auth/react';


Style nit, can you order these alphabetically?

fozziethebeat · 2022-12-28T08:17:23Z

website/src/stories/Header.stories.jsx

+import { SessionContext } from 'next-auth/react';
+
+
+import { Header } from '../components/Header';


Is it possible to import from src/components/Header? If not, that's okay

moved them into the same folder, think thats inline with #99

fozziethebeat · 2022-12-28T08:18:08Z

Great first step! I have a few small requested changes then I'll merge this in.

Moved component files into their own directory and moved stories next to them. Fixed a bug with loading images

jojopirker · 2022-12-28T09:01:26Z

Deleted the empty lines :)

I also moved the files so its more inline with future structure.

AbdBarho · 2022-12-28T09:19:51Z

would make sense the have the stories in another folder? i.e. not between all the components? maybe in src/stories/...

I am suggesting this because stories are more of "write and forget", otherwise the files would be in the way all the time.

@jojopirker @fozziethebeat what do you think?

fozziethebeat · 2022-12-28T10:28:59Z

would make sense the have the stories in another folder? i.e. not between all the components? maybe in src/stories/...

I am suggesting this because stories are more of "write and forget", otherwise the files would be in the way all the time.

@jojopirker @fozziethebeat what do you think?

This is definitely a matter of preference and probably past experiences.

I like how RedwoodJS put the test and stories in the same directory as the component so that when you make changes to the component you're reminded to check the story or test and don't have to go find the corresponding file in some other parallel directory structure. Let's try this for now and then re-evaluate.

fozziethebeat

Looks good after a few tiny changes and running prettier.

fozziethebeat · 2022-12-28T10:30:12Z

website/src/pages/index.tsx

@@ -7,7 +7,7 @@ import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
-import { Hero } from "src/components/Hero";
+import { Hero } from "sr../components/Header/Header


This looks wrong, I think you meant to change line 9

fozziethebeat · 2022-12-28T10:30:54Z

website/src/components/Header/Header.stories.jsx

+  title: 'Example/Header',
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout


we can probably delete this in the code. If people get confused we can add explanations in a README.

fozziethebeat · 2022-12-28T10:31:21Z

website/src/components/Header/Header.tsx

-import { Avatar } from "./Avatar";
-import { Container } from "./Container";
-import { NavLinks } from "./NavLinks";
+import { Avatar } from "../Avatar/Avatar";


Can these be absolute imports (src/components/Avatar/Avatar)?

fozziethebeat

Holding off on the approval until the merge fixes are in. I'd like to make sure those are all addressed and no new issues get introduced.

jojopirker · 2022-12-28T11:53:45Z

Should include all the fixes now.

AbdBarho

Thanks!
Could you please also resolve the merge conflicts so we can merge this?

website/src/pages/create/summarize_story.tsx

website/src/pages/evaluate/rate_summary.tsx

some imports did not work after merging

AbdBarho

while installing locally, I get the following in the console:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/react@1.6.22
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"18.2.0" from the root project
npm WARN   128 more (@chakra-ui/accordion, @chakra-ui/alert, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.15
npm WARN   node_modules/@storybook/addon-docs
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN   node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.15
npm WARN     node_modules/@storybook/addon-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"18.2.0" from the root project
npm WARN   128 more (@chakra-ui/accordion, @chakra-ui/alert, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.15
npm WARN   node_modules/@storybook/react
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.15
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   react-dom@"18.2.0" from the root project
npm WARN   40 more (@chakra-ui/modal, @chakra-ui/portal, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.15
npm WARN   node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.15
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inspector@5.1.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   react@"18.2.0" from the root project
npm WARN   128 more (@chakra-ui/accordion, @chakra-ui/alert, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/react-inspector
npm WARN   react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.15
npm WARN   node_modules/@storybook/addon-actions
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN   node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.15
npm WARN     node_modules/@storybook/addon-actions
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies

Is this expected? storybook already has react 18 support, not sure why it is complaining here.

website/.storybook/main.js

website/.storybook/preview.js

fozziethebeat

This looks pretty good. Please make sure the merge with header.tsx works smoothly and nothing gets dropped.

jojopirker · 2022-12-29T09:29:06Z

merged the previous changes... i also moved all the files of the header into /components/header so they are all in one place, and added and index file in the folder for better import

AbdBarho · 2022-12-29T09:30:18Z

merged the previous changes... i also moved all the files of the header into /components/header so they are all in one place, and added and index file in the folder for better import

Thanks! I see a docker-compose 2.yaml file, this was not intended right?

jojopirker · 2022-12-29T09:36:11Z

yup... i still need to learn how to properly merge with git^^

…2050) These `.jsx` components were added in #110, and they are the only ones that are still written in JavaScript in this project. Signed-off-by: Eng Zer Jun <engzerjun@gmail.com>

jojopirker added 2 commits December 28, 2022 09:00

Storybook setup

81a64ae

Storybook can be started using `npm run storybook`

merge

0cc5077

jojopirker requested review from fozziethebeat, k-nearest-neighbor and AbdBarho as code owners December 28, 2022 08:08

Merge branch 'LAION-AI:main' into main

17db1f2

fozziethebeat approved these changes Dec 28, 2022

View reviewed changes

fozziethebeat added the website label Dec 28, 2022

fozziethebeat assigned jojopirker Dec 28, 2022

jojopirker added 2 commits December 28, 2022 09:58

moved files and bugfix

94192f1

Moved component files into their own directory and moved stories next to them. Fixed a bug with loading images

Merge branch 'main' of https://github.com/jojopirker/Open-Assistant

54e1a1b

Merge branch 'LAION-AI:main' into main

37f8a69

fozziethebeat approved these changes Dec 28, 2022

View reviewed changes

fozziethebeat self-requested a review December 28, 2022 10:49

fozziethebeat requested changes Dec 28, 2022

View reviewed changes

jojopirker added 3 commits December 28, 2022 12:22

prettier and bugfix

45d58be

prettier and bugfix

73b0349

Absolute Import in Header.tsx

cdb3002

AbdBarho reviewed Dec 28, 2022

View reviewed changes

website/src/pages/create/summarize_story.tsx Outdated Show resolved Hide resolved

website/src/pages/evaluate/rate_summary.tsx Outdated Show resolved Hide resolved

jojopirker added 3 commits December 28, 2022 13:27

Merge remote-tracking branch 'upstream/main'

19f7e16

Merge branch 'LAION-AI:main' into main

3eae936

import fix

52001a2

some imports did not work after merging

yk linked an issue Dec 28, 2022 that may be closed by this pull request

Setup Storybook for website #102

Closed

jojopirker added 2 commits December 28, 2022 13:33

Merge branch 'main' of https://github.com/jojopirker/Open-Assistant

427ce74

Storybook update for chakra ui to properly work

265d6aa

Prettier main.js

b11dc62

AbdBarho reviewed Dec 28, 2022

View reviewed changes

website/.storybook/main.js Show resolved Hide resolved

website/.storybook/main.js Show resolved Hide resolved

website/.storybook/preview.js Show resolved Hide resolved

website/.storybook/preview.js Show resolved Hide resolved

jojopirker added 3 commits December 28, 2022 15:44

comment in preview.js about hacky solution

ba37de1

webpack final update and prettier update to preview

3844e78

Updated website/readme to include storybook description

15a21a9

fozziethebeat approved these changes Dec 29, 2022

View reviewed changes

merge and moved files into components/header

aad1502

jojopirker requested review from yk and andreaskoepf as code owners December 29, 2022 09:23

prettier...

4e9959e

Delete docker-compose 2.yaml

d3a1b0a

AbdBarho approved these changes Dec 29, 2022

View reviewed changes

AbdBarho merged commit cb317eb into LAION-AI:main Dec 29, 2022

Juneezee mentioned this pull request Mar 12, 2023

refactor(website): convert Header and Loading stories to TypeScript #2050

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial Storybook setup #110

Initial Storybook setup #110

jojopirker commented Dec 28, 2022

fozziethebeat Dec 28, 2022

fozziethebeat Dec 28, 2022

fozziethebeat Dec 28, 2022

jojopirker Dec 28, 2022

fozziethebeat commented Dec 28, 2022

jojopirker commented Dec 28, 2022

AbdBarho commented Dec 28, 2022

fozziethebeat commented Dec 28, 2022

fozziethebeat left a comment

fozziethebeat Dec 28, 2022

fozziethebeat Dec 28, 2022

fozziethebeat Dec 28, 2022

fozziethebeat left a comment

jojopirker commented Dec 28, 2022

AbdBarho left a comment

AbdBarho left a comment

fozziethebeat left a comment

jojopirker commented Dec 29, 2022

AbdBarho commented Dec 29, 2022

jojopirker commented Dec 29, 2022

		import React from 'react';
		import { SessionContext } from 'next-auth/react';

		@@ -0,0 +1,26 @@
		import React from 'react';
		import { SessionContext } from 'next-auth/react';

		import { SessionContext } from 'next-auth/react';


		import { Header } from '../components/Header';

Initial Storybook setup #110

Initial Storybook setup #110

Conversation

jojopirker commented Dec 28, 2022

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

jojopirker Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat commented Dec 28, 2022

jojopirker commented Dec 28, 2022

AbdBarho commented Dec 28, 2022

fozziethebeat commented Dec 28, 2022

fozziethebeat left a comment

Choose a reason for hiding this comment

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat Dec 28, 2022

Choose a reason for hiding this comment

fozziethebeat left a comment

Choose a reason for hiding this comment

jojopirker commented Dec 28, 2022

AbdBarho left a comment

Choose a reason for hiding this comment

AbdBarho left a comment

Choose a reason for hiding this comment

fozziethebeat left a comment

Choose a reason for hiding this comment

jojopirker commented Dec 29, 2022

AbdBarho commented Dec 29, 2022

jojopirker commented Dec 29, 2022