add TS support for storybook preview tsx config extension #9309

bnn1 · 2023-10-17T15:47:34Z

This PR enables use of storybook preview files with .tsx extensions.

Todo:

~~tests~~
~~add config directory to web side tsconfig.json's include~~
~~add type comment annotation for js storybook preview files~~

fixes #9118

…x-support

…into 9118/storybook-tsx-support

…x-support

bnn1 · 2023-11-06T11:46:25Z

Hey @jtoar. I've done necessary changes. Please have a look.
upd: I need to fix one thing before merging this. Right now it will be a breaking change for ts users, they will be forced to rename their storybook.preview.js to .tsx for storybook to work properly. Will upload fix tomorrow. DONE

beardo01 · 2023-11-08T01:56:15Z

This would be great @bnn1! Does your Storybook work before changing the extension? Mine doesn't seem to display the Mantine UI correctly. If yours does, could you share an example of your setup? Cheers!

bnn1 · 2023-11-08T10:48:45Z

Hey @beardo01 👋 Yes, it does work for me. However you need to import the Mantine css file inside the storybook.preview.js file.

// storybook.preview.js
import '@mantine/core/styles.css'
// rest of the file

The complete file would look like this:

import * as React from 'react'

import { MantineProvider } from '@mantine/core'
import theme from 'config/mantine.config'
import '@mantine/core/styles.css'

/** @type { import("@storybook/csf").GlobalTypes } */
export const globalTypes = {}
/**
 * An example, no-op storybook decorator. Use a function like this to create decorators.
 * @param { import("@storybook/addons").StoryFn} StoryFn
 * @param { import("@storybook/addons").StoryContext} context
 * @returns StoryFn, unmodified.
 */
const _exampleDecorator = (StoryFn, _context) => {
  return <StoryFn />
}
const withMantine = (StoryFn) => {
  return (
    <MantineProvider theme={theme}>
      <StoryFn />
    </MantineProvider>
  )
}
export const decorators = [withMantine]

This is being addressed in another PR (#9388)

beardo01 · 2023-11-09T01:05:22Z

Hey @beardo01 👋 Yes, it does work for me. However you need to import the Mantine css file inside the storybook.preview.js file.

Ahhh, of course you do. This fixed it for me too. Regardless, looking forward to these PRs being merged. Thanks for your hard work. If you're on the Discord I might shoot you a message to ask about your use of Mantine Forms over the built in Redwood Forms. Let me know your username if you're happy to chat that through.

bnn1 · 2023-11-09T23:34:06Z

@beardo01 I'm on discord, my username is barbarys. You can also find me in this channel https://discord.com/channels/679514959968993311/1141095558669410456 the latest message is from me (Barys) 👋

__fixtures__/test-project/package.json

…x-support

bnn1 · 2023-12-02T10:01:02Z

@dac09 all done. please have a look

dac09 · 2023-12-05T09:24:10Z

packages/cli/src/lib/merge/index.js

@@ -212,7 +212,8 @@ function mergeAST(baseAST, extAST, strategy = {}) {
 export function merge(base, extension, strategy) {
  function parseReact(code) {
    return parse(code, {
-      presets: ['@babel/preset-react'],
+      filename: 'merged.tsx',


Suggested change

filename: 'merged.tsx',

filename: 'merged.tsx', // required to prevent babel error. The .tsx is relevant

dac09 · 2023-12-05T09:25:25Z

packages/testing/config/storybook/main.js

-      : './preview.example.js'
+    let userPreviewPath = './preview.example.js'
+
+    if (fs.existsSync(redwoodProjectPaths.storybookPreviewConfig)) {


I believe resolveFile will handle this. If the file doesn't exist, it the value will be null

Suggested change

if (fs.existsSync(redwoodProjectPaths.storybookPreviewConfig)) {

if (redwoodProjectPaths.storybookPreviewConfig) {

dac09 · 2023-12-05T09:26:44Z

I've tested both ts and js projects manually, everything's working. I'll add unit tests.

Thanks @bnn1, appreciate alll the effort into this one! Final few comments, will merge once the unit tests are in :)

Tobbe · 2023-12-17T22:44:13Z

@bnn1 I'm going through our open PRs and found this one. If I'm reading the comments correctly we're still missing some unit tests here. Are you still interested in writing those, so we can get this merged?

No pressure! Just let us know what you want to do 🙂

bnn1 · 2023-12-18T12:54:56Z

Hey @Tobbe. Yess I'm interested in finishing this pr. I'll do that as soon as I can. I hope we are not time restricted there?

Tobbe · 2023-12-18T12:58:29Z

@bnn1 Thanks for your reply. It would be great if we could get this done before the end of the year. Is that something you could commit to, you think?

bnn1 · 2023-12-24T13:24:49Z

@Tobbe I started working on the unit tests and it got me thinking: we are not actually merging files, we are merging file contents - strings, so file extension should not be relevant for the merge function to work as we are passing it strings and not file references. Did I misunderstand @dac09?

Tobbe · 2023-12-24T17:36:31Z

@bnn1 Thanks for getting started on the tests! Don't be afraid to push a WIP-commit to the PR if you get stuck or need any other kind of help.

This is 100% just a guess, but maybe the file name is needed to let babel know what "mode" to run in. What presets to use etc. If the filename ends with .tsx or .jsx it might know to handle the <MyComponent> syntax for example.

bnn1 · 2023-12-24T19:19:33Z

@Tobbe I don't understand what tests you need 😅. As I understand, the idea was to test that merge works for .jsx and .tsx files but merge function isn't dependent on file extension. @dac09 could you please clarify what you meant when we talked about tests?

Tobbe · 2023-12-24T19:30:06Z

For those tests a few different ones that call merge with one or two strings with JSX should be all we need I think

bnn1 · 2023-12-24T20:40:18Z

@Tobbe I added the tests. Please see if they will do: https://github.com/redwoodjs/redwood/pull/9309/files#diff-d47690ed0113a3cfad51e049e7670643b6278ca2e283103e12e81d8279484b82

dac09

Thanks so much @bnn1 :)

…redwood into fix/enhance-error-apollo-suspense * 'fix/enhance-error-apollo-suspense' of github.com:dac09/redwood: (92 commits) chore(deps): update dependency @types/yargs to v17.0.32 (redwoodjs#9759) Make it easier to find useMatch docs (redwoodjs#9756) chore(unit tests): Use side-effect import to fix TS errors (redwoodjs#9754) fix(context): Refactor context (redwoodjs#9371) docs: Replaced deprecated <Set private> with PrivateSet within router.md (redwoodjs#9749) add TS support for storybook preview tsx config extension (redwoodjs#9309) fix(studio): Fix windows path issues (redwoodjs#9752) redwoodjs#9620: Update studio to support variable components (Mailer) (redwoodjs#9639) chore(tasks): Add comparison view to nmHoisting visualisation (redwoodjs#9751) chore(cli): make fs modules used in the CLI consistent (redwoodjs#9746) chore(tooling): Make sure console boxen print on a new line chore(CI): fix publish release candidate feat(CLI): add check node version middleware, rm `.nvmrc`, yarn engines (redwoodjs#9728) docs: added some clarification on serverless functions getting executed in a non-serverless environment (redwoodjs#9742) Fix sshExec() errors not displaying (redwoodjs#9743) chore(tooling): Add missing word in release tooling output Update Metadata docs (redwoodjs#9744) chore(CI): update test project fixture and CRWA for deploy target CI repo (redwoodjs#9730) chore(tooling): add script for getting nested dependency data (redwoodjs#9734) Trusted Documents docs: Proofreading corrections (redwoodjs#9737) ...

…ath-aliases * 'main' of github.com:redwoodjs/redwood: (92 commits) chore(deps): update dependency @types/yargs to v17.0.32 (redwoodjs#9759) Make it easier to find useMatch docs (redwoodjs#9756) chore(unit tests): Use side-effect import to fix TS errors (redwoodjs#9754) fix(context): Refactor context (redwoodjs#9371) docs: Replaced deprecated <Set private> with PrivateSet within router.md (redwoodjs#9749) add TS support for storybook preview tsx config extension (redwoodjs#9309) fix(studio): Fix windows path issues (redwoodjs#9752) redwoodjs#9620: Update studio to support variable components (Mailer) (redwoodjs#9639) chore(tasks): Add comparison view to nmHoisting visualisation (redwoodjs#9751) chore(cli): make fs modules used in the CLI consistent (redwoodjs#9746) chore(tooling): Make sure console boxen print on a new line chore(CI): fix publish release candidate feat(CLI): add check node version middleware, rm `.nvmrc`, yarn engines (redwoodjs#9728) docs: added some clarification on serverless functions getting executed in a non-serverless environment (redwoodjs#9742) Fix sshExec() errors not displaying (redwoodjs#9743) chore(tooling): Add missing word in release tooling output Update Metadata docs (redwoodjs#9744) chore(CI): update test project fixture and CRWA for deploy target CI repo (redwoodjs#9730) chore(tooling): add script for getting nested dependency data (redwoodjs#9734) Trusted Documents docs: Proofreading corrections (redwoodjs#9737) ...

…p-prebuild * 'main' of github.com:redwoodjs/redwood: (1608 commits) Docker: Update to work with corepack and yarn v4 (redwoodjs#9764) [RFC]: useRoutePaths (redwoodjs#9755) Adds a note about the two commands you will use with your schema to the top of the schema file (redwoodjs#8589) docs: Supertokens.md: Fix typo (redwoodjs#9765) Fix supertokens docs & integration issues (redwoodjs#9757) fix(apollo): Enhance error differently for Suspense Cells (redwoodjs#9640) SSR smoke-test: Use <Metadata /> (redwoodjs#9763) chore(deps): update dependency @types/qs to v6.9.11 (redwoodjs#9761) chore(ci): Better error handling in detectChanges.mjs (redwoodjs#9762) fix(path-alias): Fix aliasing of paths using ts/jsconfig (redwoodjs#9574) chore(deps): update dependency @types/yargs to v17.0.32 (redwoodjs#9759) Make it easier to find useMatch docs (redwoodjs#9756) chore(unit tests): Use side-effect import to fix TS errors (redwoodjs#9754) fix(context): Refactor context (redwoodjs#9371) docs: Replaced deprecated <Set private> with PrivateSet within router.md (redwoodjs#9749) add TS support for storybook preview tsx config extension (redwoodjs#9309) fix(studio): Fix windows path issues (redwoodjs#9752) chore(tasks): Add comparison view to nmHoisting visualisation (redwoodjs#9751) chore(cli): make fs modules used in the CLI consistent (redwoodjs#9746) ...

Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>

bnn1 added 10 commits October 5, 2023 22:31

feat: update storybook paths

120702e

Merge branch 'main' of github.com:bnn1/redwood into 9118/storybook-ts…

d5b9929

…x-support

feat: create storybook tsx templates

26cb17f

feat: update storybook template paths

737feba

feat: remove storybook js templates

2fabf18

Merge branch 'main' of github.com:bnn1/redwood into 9118/storybook-ts…

2ca7f25

…x-support

feat: add support for ts/tsx files

a20e396

feat: use tsx storybook template

3953f32

feat: read tsx storybook preview config if the project is ts

a373973

fix: failing tests

1e3bf75

bnn1 marked this pull request as draft October 18, 2023 22:43

revert: ts support for storybook manager and config files

1904f2a

bnn1 changed the title ~~[DRAFT] 9118/storybook tsx support~~ add TS support for storybook preview tsx config extension Oct 18, 2023

bnn1 and others added 7 commits October 19, 2023 02:53

Merge branch 'redwoodjs:main' into 9118/storybook-tsx-support

b57d724

Merge branch 'main' of github.com:bnn1/redwood into 9118/storybook-ts…

19b6d79

…x-support

revert: type annotations for js storybook preview files

8a292c0

Merge branch '9118/storybook-tsx-support' of github.com:bnn1/redwood …

bc74dcf

…into 9118/storybook-tsx-support

Merge branch 'main' of github.com:bnn1/redwood into 9118/storybook-ts…

3f713a4

…x-support

feat: include 'config' directory in web tsconfig

40aabfd

fix: regenerate fixtures, crwa, fix comment type

a476d18

bnn1 marked this pull request as ready for review November 6, 2023 11:46

fix: add backward compatibility for ts users

2c5e9d0

bnn1 mentioned this pull request Nov 7, 2023

9316/update mantine setup #9388

Merged

dac09 self-assigned this Nov 27, 2023

dac09 self-requested a review November 27, 2023 07:39

dac09 reviewed Nov 27, 2023

View reviewed changes

__fixtures__/test-project/package.json Outdated Show resolved Hide resolved

bnn1 added 3 commits December 1, 2023 19:47

Merge branch 'main' of github.com:bnn1/redwood into 9118/storybook-ts…

6e124df

…x-support

fix: pr

36a0323

fix: failing tests

de828f0

dac09 reviewed Dec 5, 2023

View reviewed changes

Merge branch 'main' into 9118/storybook-tsx-support

44bdd24

Merge branch 'redwoodjs:main' into 9118/storybook-tsx-support

b1926bb

fix: pr suggestions

79ef0f0

feat: jsx/tsx/ts merge tests

a0f91f6

Merge branch 'main' into 9118/storybook-tsx-support

a91cc77

dac09 approved these changes Dec 25, 2023

View reviewed changes

dac09 enabled auto-merge (squash) December 25, 2023 05:52

dac09 merged commit ffb0a99 into redwoodjs:main Dec 25, 2023
31 of 32 checks passed

Tobbe pushed a commit that referenced this pull request Jan 1, 2024

add TS support for storybook preview tsx config extension (#9309)

eb70971

Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>

jtoar modified the milestones: next-release, v7.0.0 Jan 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add TS support for storybook preview tsx config extension #9309

add TS support for storybook preview tsx config extension #9309

bnn1 commented Oct 17, 2023 •

edited

Loading

bnn1 commented Nov 6, 2023 •

edited

Loading

beardo01 commented Nov 8, 2023

bnn1 commented Nov 8, 2023 •

edited

Loading

beardo01 commented Nov 9, 2023

bnn1 commented Nov 9, 2023

bnn1 commented Dec 2, 2023

dac09 Dec 5, 2023

dac09 Dec 5, 2023

dac09 commented Dec 5, 2023 •

edited

Loading

Tobbe commented Dec 17, 2023

bnn1 commented Dec 18, 2023

Tobbe commented Dec 18, 2023

bnn1 commented Dec 24, 2023

Tobbe commented Dec 24, 2023

bnn1 commented Dec 24, 2023

Tobbe commented Dec 24, 2023

bnn1 commented Dec 24, 2023

dac09 left a comment

	filename: 'merged.tsx',
	filename: 'merged.tsx', // required to prevent babel error. The .tsx is relevant

	if (fs.existsSync(redwoodProjectPaths.storybookPreviewConfig)) {
	if (redwoodProjectPaths.storybookPreviewConfig) {

add TS support for storybook preview tsx config extension #9309

add TS support for storybook preview tsx config extension #9309

Conversation

bnn1 commented Oct 17, 2023 • edited Loading

bnn1 commented Nov 6, 2023 • edited Loading

beardo01 commented Nov 8, 2023

bnn1 commented Nov 8, 2023 • edited Loading

beardo01 commented Nov 9, 2023

bnn1 commented Nov 9, 2023

bnn1 commented Dec 2, 2023

dac09 Dec 5, 2023

Choose a reason for hiding this comment

dac09 Dec 5, 2023

Choose a reason for hiding this comment

dac09 commented Dec 5, 2023 • edited Loading

Tobbe commented Dec 17, 2023

bnn1 commented Dec 18, 2023

Tobbe commented Dec 18, 2023

bnn1 commented Dec 24, 2023

Tobbe commented Dec 24, 2023

bnn1 commented Dec 24, 2023

Tobbe commented Dec 24, 2023

bnn1 commented Dec 24, 2023

dac09 left a comment

Choose a reason for hiding this comment

bnn1 commented Oct 17, 2023 •

edited

Loading

bnn1 commented Nov 6, 2023 •

edited

Loading

bnn1 commented Nov 8, 2023 •

edited

Loading

dac09 commented Dec 5, 2023 •

edited

Loading