Closed p238049y closed 1 month ago
~/w/h/docker ❯❯❯ docker compose exec app npx storybook@latest init
Need to install the following packages:
storybook@8.2.3
Ok to proceed? (y)
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
╭──────────────────────────────────────────────────────╮
│ │
│ Adding Storybook version 8.2.3 to your project.. │
│ │
╰──────────────────────────────────────────────────────╯
• Detecting project type. ✓
Installing dependencies...
added 1 package, and audited 821 packages in 2s
255 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
• Adding Storybook support to your "React" app • Detected Vite project. Setting builder to Vite. ✓
✔ Getting the correct version of 10 packages
Configuring Storybook ESLint plugin at .eslintrc.cjs
✔ Installing Storybook dependencies
. ✓
Installing dependencies...
up to date, audited 1182 packages in 837ms
325 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ Storybook was successfully installed in your project! 🎉 │
│ To run Storybook manually, run npm run storybook. CTRL+C to stop. │
│ │
│ Wanna know more about Storybook? Check out https://storybook.js.org/ │
│ Having trouble or want to chat? Join us at https://discord.gg/storybook/ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Running Storybook
> storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet
storybook v8.2.3
(node:352) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Starting manager..
info => Starting preview..
/usr/src/app/node_modules/storybook/bin/index.cjs:23
throw error;
^
Error: spawn xdg-open ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:286:19)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:292:12)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn xdg-open',
path: 'xdg-open',
spawnargs: [ 'http://localhost:6006/?path=/onboarding' ]
}
Node.js v22.4.1
storybookは一旦諦める
chakra UI の導入
<Center>
<HStack>
<VStack>
<Box bg="red.700" w="40px" h="40px" />
<Box bg="red.500" w="40px" h="40px" />
<Box bg="red.300" w="40px" h="40px" />
</VStack>
<VStack>
<Box bg="yellow.700" w="40px" h="40px" />
<Box bg="yellow.500" w="40px" h="40px" />
<Box bg="yellow.300" w="40px" h="40px" />
</VStack>
<VStack>
<Box bg="blue.700" w="40px" h="40px" />
<Box bg="blue.500" w="40px" h="40px" />
<Box bg="blue.300" w="40px" h="40px" />
</VStack>
</HStack>
</Center>
いけてそう
いけたかな