環境構築

[p238049y]

• Remix環境構築
• Remix
• chakra ui

[p238049y]

~/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

[p238049y]

storybookは一旦諦める

[p238049y]

chakra UI の導入

[p238049y]

        <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>

[p238049y]

いけてそう

[p238049y]

[p238049y]

いけたかな