Code snippets for solid #21207

webblocksapp · 2023-02-22T20:14:23Z

What I did

After mergin this PR, Frontpage PR can be merged.
Added documentation code snippets for SolidJS, there are still pending some code snippets to add for:
-- Mocking GraphQL queries with MSW addon
-- Setup the testing addon for your framework
Added the file docs/sync.js for synchronizing docs with frontpage repo due to link-monorepo-docs command is not working.
Updated /docs/contribute/new-snippets.md with new steps for updating code snippets in frontpage, due to link-monorepo-docs is unusable.

How to test

Follow /docs/contribute/new-snippets.md guide to setup frontpage and the monorepo docs synchronization.

Checklist

Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
Make sure to add/update documentation regarding your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Maintainers

If this PR should be tested against many or all sandboxes,
make sure to add the ci:merged or ci:daily GH label to it.
Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

…olid

kylegach · 2023-02-28T16:01:41Z

docs/sync.js

@@ -0,0 +1,74 @@
+/**


@shilman — Is there any issue with including a script file inside the docs directory? If not, I'm thinking we could merge this for now, then move it to the root (possibly as a task command?) later.

Maybe I can do this improvement by converting the sync.js file into a storybook task.

kylegach · 2023-02-28T16:06:22Z

docs/sync.js

+const run = async () => {
+  let frontpageDocsPath = '/src/content/docs'
+
+  const frontpageAbsPath = await askQuestion('Provide the frontpage project absolute path:')


I tested this with a relative path ../../frontpage and it works fine. Suggest asking for a relative path, as the absolute path can be unwieldy and is seldom known off-hand.

Perfect, I will update the command message for asking for a relative path. Also docs.

kylegach · 2023-02-28T16:08:44Z

docs/contribute/new-snippets.md

+Then change your current directory path to the docs folder. Synchronize the documentation file changes with the Storybook website by running the script `sync.js`.
+
+```shell
+cd docs && node sync.js


Probably worth pointing out that this is an ongoing process, so they should run it in a separate terminal window.

May be by converting the sync.js into a task will simplify more the docs.

kylegach · 2023-02-28T17:44:01Z

docs/snippets/solid/button-group-story.ts-4-9.mdx

+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+


I'm surprised that the pretty-docs check (which runs prettier linting on docs snippets) passed with empty lines like this. Mind removing them (I see them throughout these snippets)?

@kylegach, it's from the pr that Kasper pushed for the initial React snippets. I've already updated them on my end and they should fixed shortly.

@webblocksapp can you follow up on Kyle's feedback and remove the empty lines in the examples as the remainder snippets were already fixed to factor in this issue?

kylegach · 2023-02-28T17:47:56Z

docs/snippets/solid/button-story-click-handler-args.js.mdx

@@ -0,0 +1,26 @@
+```js


For snippets that contain JSX, we should use jsx for the language.

(I realize this is also incorrect for our React—and likely other–snippets. ☹️)

kylegach · 2023-02-28T17:54:29Z

docs/snippets/solid/component-story-custom-args-complex.js.mdx

+
+export const ExampleStory = {
+  render: (args) => {
+    const [someFunctionResult, setSomeFunctionResult] = createSignal();


I'm not very familiar with SolidJS. Is there someone from the community that could review the SolidJS-specific parts of this work?

I can do the review of the code snippets on a separate sandbox project, so I can attach a link to this PR with the sample repo so you can test from those implementations. Let me know if this works for you.

kylegach

Wow! 🙌 What a huge effort. Thank you, @webblocksapp!

I left a few comments, but the main thought is that I'm not actually qualified to review the SolidJS-specific aspects of this work. I'm OK to ship this as-is and revise from there, but I advise finding another community member with SolidJS experience to review.

webblocksapp · 2023-03-25T03:12:11Z

Hi @jonniebigodes and @kylegach,

I hope this message finds you well. I wanted to bring your attention to some recent updates that I just pushed to the repository. Most of the code snippets have been thoroughly tested in a sandbox repository using Storybook, giving us greater confidence that these examples are working as intended. If you'd like to check it out, the sandbox repository can be found here.

In addition, we've added a new command at yarn task for synchronizing docs, which will make it easier for developers to get involved and contribute to the frontpage docs. You can find the documentation for this command at docs/contribute/new-snippets.md.

I suggest that we consider this approach as a first iteration for the SolidJS documentation and seek feedback from the community to gather insights and make necessary improvements in the future.

After this PR revision and merge, you can move forward with the Frontpage PR.

Thank you for your time and consideration.
Good weekend!

…olid

jonniebigodes

@webblocksapp Sorry for the wait on this, but as you may have heard, Storybook 7 is out and now I've had some time to review this pull request in more detail and with that I left some small items for you to address so that we can merge this and the companion pull request and start documenting the SolidJS framework.

Let me know once you've addressed this and we'll go from there.

Hope you have a great weekend.

Stay safe

jonniebigodes · 2023-04-14T17:53:59Z

docs/snippets/solid/button-group-story.ts-4-9.mdx

+   * to learn how to generate automatic titles
+   */
+  title: 'ButtonGroup',
+


@webblocksapp can you follow up on Kyle's feedback and remove the empty lines in the examples as the remainder snippets were already fixed to factor in this issue?

docs/snippets/solid/button-story-auto-docs.ts.mdx

docs/snippets/solid/button-story-decorator.ts.mdx

docs/snippets/solid/button-story-default-export-with-component.ts-4-9.mdx

docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx

docs/snippets/solid/list-story-with-unchecked-children.js.mdx

docs/snippets/solid/mdx-canvas-multiple-stories.mdx.mdx

docs/snippets/solid/storybook-preview-global-decorator.js.mdx

docs/snippets/solid/your-component-with-decorator.js.mdx

docs/writing-stories/introduction.md

webblocksapp · 2023-04-18T21:15:41Z

Hi @jonniebigodes, I wanted to let you know that I've addressed the feedback from the code review. Feel free to let me know if you have some other findings. Thanks!

shilman

Hi @webblocksapp !! I tried out the sync-docs task. It's a really cool idea.

I had a couple minor comments about the experience:

I ran it on an unsynced frontpage project. It errored because the src/content/docs directory didn't exist yet. If the src/content directory exists but there is no docs directory, it should create a docs directory for you.
I manually created the docs directory. However it was empty. Then every time I updated the monorepo it copied the changes over to the new docs directory. However, the rest of the content was not copied over, so the workflow wasn't really working. If you are creating the the docs directory per the previous point, maybe the task should copy over the entire contents on initialization?

Another thought is... would it be simpler to just use symbolic links instead & update the documentation accordingly, rather than creating a new task?

jonniebigodes

@webblocksapp, thanks for addressing the feedback so promptly. Appreciate it 🙏 ! From my end, I just need for you to look into a small item regarding the ts-4-9 variants of the snippets, you already addressed it in some, but I was wondering if you could take another pass at them and adjust accordingly. Also, when you have a chance, can you take a look at the feedback from @shilman so that we can get this one merged and update the documentation?

Looking forward to hearing from you.

Hope you have a great week.

docs/snippets/solid/button-group-story.ts-4-9.mdx

webblocksapp · 2023-04-24T14:11:39Z

Hi @shilman, thxs for your feedback!

Another thought is... would it be simpler to just use symbolic links instead & update the documentation accordingly, rather than creating a new task?

Currently storybook frontpage repo has a command for creating a symbolic link, but this solution is not workable, so this command will be removed with the associated frontpage PR. I had this conversation with @kylegach at wg-solid Storybook Discord channel, the issue is that gatsby is not able to find node_modules of the symlinked packages. So for this reason I started this initiative of building a command for synching docs.

Related to points 1 and 2, you are right. The synchronization docs command only is working for individual files. It's not doing an initial copy of the docs folder at frontpage repo before starting the watcher for checking file changes. But I think it would be better to complete the synchronization flow. so the final idea could be that every time the sync docs command is executed, the frontpage docs folder would be recreated from scratch, and then start the file watcher for updating changes.

Please, let me know if this final solution sounds good, so I can add it to the command.

shilman · 2023-04-24T14:25:31Z

@webblocksapp your solution sounds great to me. thanks for taking care of this!! 🙏

webblocksapp · 2023-04-24T20:00:41Z

Hello @jonniebigodes and @shilman, I wanted to let you know that I've just pushed new updates to the code based on your feedback. Please take a look and let me know if there's anything else that needs to be refined. Thank you!

…olid

jonniebigodes · 2023-04-27T13:14:23Z

@webblocksapp I've just checked, and all is good on my end. Thanks once again for addressing the feedback so promptly. Appreciate it 🙏 ! I'll check with the team, and if there's nothing blocking it, we can finally merge this one and the associated pull request in the frontpage repository to get the documentation updated and improve the UX for contributions.

Hope you have a fantastic day.

Stay safe

shilman

Thanks for addressing my feedback @webblocksapp !! Amazing job on this PR 👏

jonniebigodes · 2023-04-27T15:04:47Z

@webblocksapp going to merge this. Once again, thanks for the amazing job with the contribution 🎉

Code snippets for solid

webblocksapp added 19 commits February 18, 2023 17:09

Added solid to frameworks list.

60cd3ae

Added helper script for synchronizing docs with frontpage repo.

e998e3b

Added basic button story docs.

ab4e73e

Updated setup.md

1eaba3e

Added introduction code snippets.

ed4944c

Added args code snippets

9028e55

Added parameters code snippets.

a6c0e0a

Added decorators code snippets.

6165143

Added loaders code snippets.

399450e

Added code snippets for pages and screens.

3cd2232

Snippets for multiple components docs

2627ae3

Added docs-page code snippets.

69edbd2

Added code snippets for sharing.

27efa18

Added essentials code snippets.

277e230

Addons code snippets.

e83d5ae

Added docs code snippets.

697ae4a

Added api and contribute snippets.

d7ccdb4

Updated contribute code snippets guide.

cb72c9b

Formatted with prettier.

724ade7

webblocksapp mentioned this pull request Feb 22, 2023

Solid frontpage integration storybookjs/frontpage#490

Merged

jonniebigodes self-assigned this Feb 23, 2023

jonniebigodes added the documentation label Feb 23, 2023

Merge remote-tracking branch 'upstream/next' into code-snippets-for-s…

288b791

…olid

kylegach reviewed Feb 28, 2023

View reviewed changes

kylegach approved these changes Feb 28, 2023

View reviewed changes

Updated new-snippets.md

adebb35

webblocksapp added 2 commits April 12, 2023 08:36

Merge remote-tracking branch 'upstream/next' into code-snippets-for-s…

20e59da

…olid

Applied prettier.

f499005

TylerAPfledderer mentioned this pull request Apr 14, 2023

feat: Add Visual Testing Playgrounds chakra-ui/ark#762

Closed

3 tasks

jonniebigodes requested changes Apr 14, 2023

View reviewed changes

webblocksapp added 2 commits April 18, 2023 16:07

Code review changes.

2ac455c

Removed version from docs url.

7701ee3

shilman reviewed Apr 21, 2023

View reviewed changes

jonniebigodes requested changes Apr 24, 2023

View reviewed changes

docs/snippets/solid/button-group-story.ts-4-9.mdx Outdated Show resolved Hide resolved

webblocksapp added 3 commits April 24, 2023 10:45

Improved sync docs command.

297abc5

Updated sync docs task documentation

755048b

Removed ts-4-9 variants empty lines.

9c4fa67

webblocksapp added 2 commits April 24, 2023 15:02

Fixed prettier issue.

f9d80b9

Merge remote-tracking branch 'upstream/next' into code-snippets-for-s…

b269aa8

…olid

jonniebigodes approved these changes Apr 27, 2023

View reviewed changes

Merge branch 'next' into code-snippets-for-solid

b6c362e

shilman approved these changes Apr 27, 2023

View reviewed changes

jonniebigodes added patch:yes Bugfix & documentation PR that need to be picked to main branch and removed ci: do not merge labels Apr 27, 2023

jonniebigodes merged commit 330c365 into storybookjs:next Apr 27, 2023

shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label May 3, 2023

shilman pushed a commit that referenced this pull request May 3, 2023

Merge pull request #21207 from webblocksapp/code-snippets-for-solid

05e4ee9

Code snippets for solid

dannyhw mentioned this pull request Feb 5, 2024

React Native: Fix errors on compose story #25906

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code snippets for solid #21207

Code snippets for solid #21207

webblocksapp commented Feb 22, 2023 •

edited

Loading

kylegach Feb 28, 2023

webblocksapp Mar 6, 2023

kylegach Feb 28, 2023

webblocksapp Mar 6, 2023 •

edited

Loading

kylegach Feb 28, 2023

webblocksapp Mar 6, 2023

kylegach Feb 28, 2023 •

edited

Loading

jonniebigodes Feb 28, 2023 •

edited

Loading

jonniebigodes Apr 14, 2023

kylegach Feb 28, 2023

kylegach Feb 28, 2023

webblocksapp Mar 6, 2023

kylegach left a comment

webblocksapp commented Mar 25, 2023 •

edited

Loading

jonniebigodes left a comment

jonniebigodes Apr 14, 2023

webblocksapp commented Apr 18, 2023

shilman left a comment

jonniebigodes left a comment

webblocksapp commented Apr 24, 2023 •

edited

Loading

shilman commented Apr 24, 2023

webblocksapp commented Apr 24, 2023

jonniebigodes commented Apr 27, 2023

shilman left a comment

jonniebigodes commented Apr 27, 2023

Code snippets for solid #21207

Code snippets for solid #21207

Conversation

webblocksapp commented Feb 22, 2023 • edited Loading

What I did

How to test

Checklist

Maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

webblocksapp Mar 6, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kylegach Feb 28, 2023 • edited Loading

Choose a reason for hiding this comment

jonniebigodes Feb 28, 2023 • 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

kylegach left a comment

Choose a reason for hiding this comment

webblocksapp commented Mar 25, 2023 • edited Loading

jonniebigodes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

webblocksapp commented Apr 18, 2023

shilman left a comment

Choose a reason for hiding this comment

jonniebigodes left a comment

Choose a reason for hiding this comment

webblocksapp commented Apr 24, 2023 • edited Loading

shilman commented Apr 24, 2023

webblocksapp commented Apr 24, 2023

jonniebigodes commented Apr 27, 2023

shilman left a comment

Choose a reason for hiding this comment

jonniebigodes commented Apr 27, 2023

webblocksapp commented Feb 22, 2023 •

edited

Loading

webblocksapp Mar 6, 2023 •

edited

Loading

kylegach Feb 28, 2023 •

edited

Loading

jonniebigodes Feb 28, 2023 •

edited

Loading

webblocksapp commented Mar 25, 2023 •

edited

Loading

webblocksapp commented Apr 24, 2023 •

edited

Loading