theodorusclarence / expansion-pack Goto Github PK

Hi,

Im trying to use Nextjs with Storybook and Tailwindcss.
I have set this in the preview.js

const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

And in a component I have

<div className="flex-shrink-0 flex items-center">
             <Image
                    className="block lg:hidden h-8 w-auto"
                    src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
                    width="50"
                    height="30"
                    alt="Workflow"
                  />
            <Image
                    className="hidden lg:block h-8 w-auto"
                    src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
                    width="128"
                    height="30"
                    alt="Workflow"
                  />
</div>

Images loads well but className are not working. Like Tailwind did not see them actually.. In my browser, I can't see config for "hidden" class for example.

Would you have an idea about that ?
Have a good day

Hi,
i implemented the Toasts RQ with your script and curl.
when visiting the example page toast-rq i notided the submit button keeps in loading/spinner state. I expected the code and so far it looks like there are still toasts with "loading" type in the toast state, even when the loading is done.

So current fix looks like this:
`
//useRQWithToast.tsx

if (isError) {
  toast.error(toastMessage.error, { id: toastStatus.current });
  toastStatus.current = 'done';
} else if (isLoading) {
  toastStatus.current = toast.loading(toastMessage.loading, { id: toastStatus.current });
} else if (isSuccess) {
  toastStatus.current = toast.success(toastMessage.success, { id: toastStatus.current });
} else if (data) {
  toast.success(toastMessage.success, { id: toastStatus.current });
  toastStatus.current = 'done';
}

`

this way "it works" but there still stays an toast in the state with status "idle" but it does not affect the ui.. but doesnt feel good
After all i'm wondering if this bug is already noticed? or maybe i implemented something wrong? i'm wondering since script and instruction are realy clear

I was inspired by T3 Stack, but I have already used and fallen in love with your template.

suggest modifying to include one of these configs in the storybook main.js if possible:

https://storybook.js.org/docs/ember/configure/typescript#mainjs-configuration

👋

I installed the expansion-pack for storybook. Prettier throws an error in Component.stories.tsx.hbs:18, when I execute yarn watch.
Any ideas?

[error] src/generators/Component.stories.tsx.hbs: SyntaxError: Cannot use mustaches in an elements tagname:
[error]
[error] |
[error] |  {{ properCase ( getName path ) }}
[error] |
[error]
[error] (error occurred in 'an unknown module' @ line 18 : column 3) (18:3)
[error]   16 |
[error]   17 | const Template: ComponentStory<typeof {{ properCase ( getName path ) }}> = (args) => (
[error] > 18 |   <{{ properCase ( getName path ) }} {...args} />
[error]      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[error]   19 | );
[error]   20 |
[error]   21 | export const Default = Template.bind({});

hey, i just like to let you guys know, that in https://github.com/theodorusclarence/expansion-pack/blob/main/dialog-zustand/src/pages/sandbox/dialog-zustand.tsx
the Layout component as outer wrapper is missing, so i was wondering why no dialog was showing, since i added the changes to my layout file :D
maybe should be added by default or it should be noted in the install insctructions :)

keep on the good work, love your stack so far! <3

name: 🐞 Bug
about: File a bug/issue
title: '[BUG] Missing dependencies on next-i18next'
labels: Bug

Current Behavior:

After following the command to install next-i18next pack, the development server is output

error - ./node_modules/next-i18next/dist/esm/appWithTranslation.js:8:0
Module not found: Can't resolve 'react-i18next'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next-i18next/dist/esm/index.js
./src/pages/_app.tsx
wait  - compiling /next-i18next-example (client and server)...
error - ./node_modules/next-i18next/dist/esm/appWithTranslation.js:8:0
Module not found: Can't resolve 'react-i18next'

Expected Behavior:

Development server with i18next working properly

Steps To Reproduce:

1. Create new project using the starter template
2. Install dependencies using yarn.
3. Start the development server.
4. Run curl -s https://raw.githubusercontent.com/theodorusclarence/expansion-pack/main/next-i18next/trigger.sh | bash -s to install the i18-next expansion pack.
5. See the error in development console.

Environment:

• OS: macOS Ventura 13.1
• Node: 18.15.0
• npm: 9.5.0

I can only drag and drop a file. I cant click to select a file