frontend / storybox Goto Github PK

Drop Webpack in favor of Vite/Rollup:

• Use Vite builder for Storybook
• Refactor src/modules/* build system to use Vite

When building the styleguide, storybook doesn't find the styles.css. Might have been introduced by 1.0.3

Steps to reproduce:

1. Install a brand new styleguide with npx frontend-storybox@latest
2. Build the styleguide with yarn build:styleguide
3. Serve the styleguide with npx http-server storybook-static/
4. Notice the styles are not active on the styleguide and the http-server outputs this error:

[2021-10-13T08:25:50.192Z]  "GET /styles.css" Error (404): "Not found"

Add more default documentation pages:

• Installation
• Current Introduction → Contribution
• Introduction
• Changelog

To be inspired, take a look at:

• Sierre-Anniviers
• T-L
• HEP
• UNIL

• Updates Storybook dependencies
• Refactoring to use CSF3 (+ MDX)

💡 If it's easier, start from a blank base to re-setup the Storybook project.

Find a way to make possible using Alpine.js JS logic in our React documented components as clean as possible. This way, we will be able to use it more often instead of clanky vanilla js.

• Refactor the Icon and Icons component to use an external SVG sprite file and svg-sprite module (f.ex "icons:build": "svg-sprite -s --symbol-inline --symbol-dest public --symbol-sprite icons.svg src/assets/icons/*.svg",)
• Add default documentation page using IconGallery

Add placeholder generation script and documentation. Something like:

 "images:build": "npx zx bin/generate-image.mjs",

and for bin/generate-image.mjs

#!/usr/bin/env zx

/* Require:
 * - ImageMagick (https://imagemagick.org/)
 * - rename (for macOS https://formulae.brew.sh/formula/rename)
 *
 * More on image sizes/formats for the web on https://antistatique.github.io/placeholders/
 */

const widths = [140, 480, 640, 800, 1080, 2000, 3000];
const ratios = ['original'];
const formats = [
  ['jpg', 65],
]

await $`rm -rf ./public/placeholders`;
await $`mkdir -p ./public/placeholders`;
await $`mkdir -p ./public/placeholders/tmp`;

for (const ratio of ratios) {
  await $`mkdir -p ./public/placeholders/tmp/${ratio}`;

  for (const width of widths) {
    const path = `./public/placeholders/tmp/${ratio}/${width}`;
    await $`mkdir -p ${path}`;

    for (const format of formats) {
      const [ext, quality] = format;

      await $`mogrify -format ${ext} -quality ${quality} -resize ${width} -gravity Center -pointsize ${width * 0.05} -fill '#ffffff80' -annotate 0 ' ${width}px - ${ext.toUpperCase()} ' -path ${path} src/assets/placeholders/*.jpg`;
      await $`rename -s .${ext} '_${width}.${ext}' ${path}/*`;

      await $`mv ${path}/*.${ext} ./public/placeholders/`;
    }
  }

}

await $`rm -rf ./public/placeholders/tmp`;

Drop Atomic Design for something more meaningful like Atoms/Navigation/Content/Pages

After successfully migrating to 1.0.2 following the guide instructions, the build command fails with these errors:

ERROR in ./src/modules/slider-vanilla.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/nelson/work/theodora-base-theme/styleguide/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/nelson/work/theodora-base-theme/styleguide/node_modules/ts-loader/dist/index.js:14:21)

ERROR in ./src/modules/header-vanilla.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/nelson/work/theodora-base-theme/styleguide/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/nelson/work/theodora-base-theme/styleguide/node_modules/ts-loader/dist/index.js:14:21)

Might be related to TypeStrong/ts-loader#595