🥄 Develop, test and document your React story components faster.

Related tags

Boilerplate react javascript stories testing components playground documentation styleguide typescript ui esbuild vitejs
Overview

Ladle logo


npm package build status discord chat twitter profile homepage stackblitz


Ladle BaseWeb

Ladle is an environment to develop, test, and share your React components faster.

Quick start

mkdir my-ladle
cd my-ladle
pnpm init
pnpm add @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
pnpm ladle serve

with yarn

mkdir my-ladle
cd my-ladle
yarn init --yes
yarn add @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
yarn ladle serve

with npm

mkdir my-ladle
cd my-ladle
npm init --yes
npm install @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
npx ladle serve
Comments
  • CSS Modules doesn't get inserted in the build output

    CSS Modules doesn't get inserted in the build output

    Problem description

    CSS modules don't get inserted in the final build output (with ladle build).

    Reproduction code

    https://stackblitz.com/edit/ladle-nmhbpc

    Short instructions and observations

    1. ✅ Using npm run dev (ladle serve), you can see the code working as excepted. Tested with *.css and *.scss file extension.

    2. ❌ Using npm run build & npm run serve, the CSS modules don't work.
      The output file ./build/assets/basic.stories.<hash_id>.css aren't being included at all, anywhere. I was excepting to see it being included in the <head> tag.
      On the other hand, the JS module ./build/assets/basic.stories.<hash_id>.js do have correct generated CSS module assigned to the components property className.

    bug needs reproduction 
    opened by xeho91 11
  • import aliases?

    import aliases?

    in my tsconfig I have

    {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
}

    and out of the box, when importing stories that use this import format I get "failed to resolve import" errors, which makes sense

    seeing as ladle is based on vite, I looked up how to enable import aliases through vite, and found I can create a vite.config.js like so:

    import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './app'),
    },
  },
})

    however this doesn't seem to have any effect on import resolution in ladle and I still get the same error

    11:50:35 AM [vite] Internal server error: Failed to resolve import "~/utils/classNames" from "app/components/Forms.tsx". Does the file exist?
    question 
    opened by DanielFGray 11
  • Restrict install to node >= v16

    Restrict install to node >= v16

    After adding an engines config and .npmrc file, install with old versions of node fails 🥳

    Related to this issue

    Related npm docs on engine-strict

    Output when trying to install on an old version of node:

    $ npm install
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm ERR! code ENOTSUP
npm ERR! prepareGitDep npm ERR! notsup Unsupported engine for [email protected]: wanted: {"node":">=16.0.0"} (current: {"node":"12.13.0","npm":"6.12.0"})
npm ERR! prepareGitDep npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! prepareGitDep npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! prepareGitDep npm ERR! notsup Required: {"node":">=16.0.0"}
npm ERR! prepareGitDep npm ERR! notsup Actual:   {"npm":"6.12.0","node":"12.13.0"}
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     <some-path>/.npm/_logs/2022-06-22T17_45_14_735Z-debug.log
npm ERR! prepareGitDep
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     <some-path>/.npm/_logs/2022-06-22T17_45_14_842Z-debug.log
    opened by GeorgeNagel 10
  • js. and .ts files must import React explicitly: (Uncaught ReferenceError: React is not defined)

    js. and .ts files must import React explicitly: (Uncaught ReferenceError: React is not defined)

    I've tried the example code and I'm getting an empty story:

    Screen Shot 2022-03-16 at 11 00 36

    Upon inspecting my console, there's this error:

    Uncaught ReferenceError: React is not defined
...

    I'm running it with npx ladle serve, and both that and npx ladle build + a local webserver will render the frame properly, receive the correct data when clicking on the component (as seen in the example), but not render the component on the left. So I changed this code:

    export default {
  title: "Level / Sub level",
};
export const Button = () => <button>My Button</button>;

    Into this one, and now it works, note the first line change:

    import React from "react";

export default {
  title: "Level / Sub level",
};
export const Button = () => <button>My Button</button>;

    My react version is 17.0.2 (same as react-dom) since 18.x is not yet official. Should we add the import React from "react"; to the docs? Or maybe I'm missing some config that would make it not needed? The only different thing I'm doing is running it with npx ladle serve instead of yarn ladle serve otherwise.

    wontfix 
    opened by franciscop 10
  • Ladle breaking TypeScript when `moduleResolution:

    Ladle breaking TypeScript when `moduleResolution: "NodeNext"`

    Describe the bug

    Ladle breaks Typescript type-checking (e.g. tsc --noEmit) when Typescript has the config moduleResolution: "NodeNext", even when skipLibCheck: true

    Reproduction

    https://stackblitz.com/edit/ladle-zq9ane?file=package.json

    and run

    npm run typecheck

    The specific error that causes issues looks like the following, and note that it's looking in node_modules:

    node_modules/@ladle/react/lib/app/exports.ts:2:33 - error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './src/context.js'?

2 import { useLadleContext } from "./src/context";

    Environment

    • OS: MacOS
    • Browser: n/a
    • Version: n/a

    More Context

    From this TS issue (that apparently is "working as intended" for now), it seems that the error comes from the fact that Ladle's package.json#types field points to a .ts file instead of a .d.ts file.

    bug 
    opened by frehner 9
  • Support for importing named packages within a yarn monorepo

    Support for importing named packages within a yarn monorepo

    Setup

    Use a yarn (3.2.1) monorepo. ladle is in a separate workspace from the components that it is to render.

    Within .ladle/components.tsx:

    import type { GlobalProvider } from '@ladle/react';
import { Root } from '@scope/package'

export const Provider: GlobalProvider = ({ children }) => <Root>{children}</Root>;

    Get runtime error:

    Uncaught SyntaxError: The requested module '/static/scope__storybook/1.0.4/@fs/C:/git/@scope/package/dist/index.js' does not provide an export named 'Root' (at components.tsx:3:10)

    question 
    opened by paulzacz 8
  • Add --base and --mode options

    Add --base and --mode options

    fixes https://github.com/tajo/ladle/issues/201

    This allows doing ladle build --base=/my-project/, for e.g. building Ladle storybooks to GitHub Pages.

    I also took the opportunity to clean up some CLI parsing code that was unnecessarily triplicated.

    opened by akx 7
  • Use Yarn v3 instead of legacy v1

    Use Yarn v3 instead of legacy v1

    Looks like we can shave 20-25 seconds off CI & publish job thanks to faster installs & caching, but benefits just start here. Read more:

    https://threadreaderapp.com/thread/1486318477203881985.html

    I would be happy to help with the update. Thoughts?

    enhancement 
    opened by wojtekmaj 7
  • Add scripts that modify the package.json before publishing

    Add scripts that modify the package.json before publishing

    In order to get TS types working correctly for "Node16" and "NodeNext"

    Closes #267

    For normal npm versions:

    1. Update release.sh to run update-package-types.js, which
    2. Makes a copy of package.json as backup-package.json, and then
    3. Writes the necessary changes out to package.json, and then
    4. Generates the types with an npm script, and then
    5. Reverts package.json from backup-package.json and deletes the backup-package.json.

    😓

    For next npm versions, it was a bit easier since there was already a NodeJS script modifying package.json, so I just hooked into it to make those changes and made sure the npm script was executed.

    I'm very open to changing any and all of this if you think there's something that needs to be changed. 👍

    opened by frehner 6
  • feat(devcontainer): add devcontainer config files

    feat(devcontainer): add devcontainer config files

    Provide the ability to work on this project inside of a Docker container and/or on GitHub Codespaces through the creation of devcontainer and Docker configuration files.

    This helps contributors to all share the same development environment, notably, ensuring that everyone uses the same versions of the various tools required for development of Ladle. Further, it makes it possible to work on the project without the need to install this project's tools and dependencies globally on your computer.

    The configurations build upon the official Playwright Docker images (and security profiles) to ensure contributors have everything they need to run development, testing, linting, and building processes.

    opened by andrewbrey 6
  • feat: support publicDir from vite

    feat: support publicDir from vite

    Hi! 👋🏽

    I found this package today and started to evaluate it as a replacement for Storybook. During my first look at it, I didn't find a way to serve files statically like the -s, --static-dir in Storybook.

    vite has the publicDir config option, currently not supported. It defaults to public but it can be false to disable the behaviour.

    The root directory for ladle is inside the node_modules folder. Therefore, I used the process.cwd() to figure the absolute path. With this, users can use only publicDir: 'myFolder' as in vite itself.

    ❗ I'll work on a documentation update tomorrow but decided to open the PR for feedback.

    If you have any opinions or suggestions about this change, let me know below.

    opened by arthurdenner 6
  • Vite reloads on story change

    Vite reloads on story change

    Describe the bug

    If your '*.stories' file has a default export, it will break hmr on every save.

    Reproduction

    Just make a story with a default export and start editing stories, vite does a full update-invalidation-reload cycle for every change. Now comment out the default export and do the same thing, hmr works again

    Not sure if this is intended behaviour but kinda weird :/

    enhancement question 
    opened by snowytime 2
  • Version Packages

    Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @ladle/[email protected]

    Minor Changes

    • #298 2616fa5 Thanks @tajo! - Ugrade to Vite4 and all other deps

    • 91c758c Thanks @tajo! - Provider has access to story.meta values through a new argument storyMeta.

    Patch Changes

    • #300 bee0789 Thanks @tajo! - publicDir should default to the folder public if there is no vite.config.js

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    [email protected]

    Patch Changes

    opened by tajo 3
  • Unnecessary redirect / URL change, when controls are used

    Unnecessary redirect / URL change, when controls are used

    Describe the bug

    When I use controls their state is in url, eg

    • url by default: http://localhost:61000/?story=button--default
    • url when controls selected http://localhost:61000/?arg-l-variant=BIG&story=button--default

    Then, when I go to such URL that has the controls in the parameters (eg http://localhost:61000/?arg-l-variant=BIG&story=button--default), there seems to be URL change back and forth for no reason

    1. I go to http://localhost:61000/?arg-l-variant=BIG&story=button--default, story still loading so blank page
    2. URL changes to http://localhost:61000/?story=button--default, story still loading so blank page
    3. URL changes back to http://localhost:61000/?arg-l-variant=BIG&story=button--default, story rendered

    See video (slow down the playback or go frame by frame)

    https://user-images.githubusercontent.com/6587821/207578931-35caf0b1-6543-416d-b239-2468c2f06a48.mov

    bug 
    opened by Hurtak 0
  • `action` requires data to be passed into it

    `action` requires data to be passed into it

    Describe the bug

    The action function from

    import { action } from '@ladle/react';

    require actual data to be passed inside

    export const Default = () => (
  <Form  
    // This works fine since onFinish passes data into the action function
    onFinish={action('onFinish')} 
    // This is type error since onCancel just call the action but does not pass any data
    onCancel={action('onCancel')} />
    // Current workaround
    onCancel={() => action('onCancel')(undefined)} />
);

    The TS error message

    Type '(event: any) => void' is not assignable to type '() => void'.

    I think we could just update types to (event?: any) to fix this

    enhancement 
    opened by Hurtak 1
  • vite-plugin-react-swc and ladle

    vite-plugin-react-swc and ladle

    Is your feature request related to a problem? Please describe.

    Vite 4x. brought react-plugin-swc plugin.

    However, when enabling it, Ladle does not work because, apparently, esbuild and its configuration is ignored, and so .ts files used by the ladle are not transpired.

    See caveats for more context.

    Describe the solution you'd like Ladle should work with the new plugin :)

    needs reproduction 
    opened by phaistonian 2
Releases(@ladle/[email protected])
Owner
Vojtech Miksu
Core Infrastructure at Uber.
Vojtech Miksu
GitHub https://www.ladle.dev
React-Typescript-Webpack was config with React, Typescript, and Webpack without CRA. Faster to start your next react project.

Start your react typescript project with manual webpack config in seconds Flexible to control webpack, easy to deploy Keywords: React Starter, Webpack

jdn97 61 Jan 5, 2023
My personal portfolio where you can find my top projects and other details. I have used react to develop this website.

Portfolio website Reactjs Browse My React js responsive Portfolio source code above. You can easily clone this Portfolio website with Suraj Sahu's cod

Suraj Sahu 5 Oct 18, 2022
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

yuzhou 102 Nov 21, 2022
A fullstack monorepo template to develop ethereum dapps

full-stack dApp starter for solidity smart contract development A monorepo boilerplate code for typesafe full-stack Solidity development based on temp

Nafees Nazik 224 Dec 6, 2022
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

Ian De Guzman 1 May 3, 2022
Berry free react material-ui admin template for easing and faster web development.

Berry is a creative free react admin template build using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard Template with easy and intuitive responsive design as on retina screens or laptops.

CodedThemes 1k Jan 5, 2023
A library to help you prototype React apps faster

Substantiate A library to help you prototype React apps faster. It is a standard React reducer with four extra properties: Takes a query function. Thi

Mary Rose Cook 5 Apr 24, 2022
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian José Torrealba Rondón 4 Nov 11, 2022
YoutubeDownloader - A test project for learning React, Vue and TS

Requirements: Node.js 10.x Vue.JS 2.x Python 2.6+ FFMPEG Youtube-DL Installation Run command below in root directory npm install --production And inst

Matthias 0 Jan 1, 2022
🦅 Custom jest matchers to test the state of React Native

jest-native Custom jest matchers to test the state of React Native. Table of Contents The problem This solution Compatibility Installation Usage Match

Testing Library 353 Dec 23, 2022
Test-task-fullstack-dashboard - Full-stack dashboard App With React.js

Test Task: Full-stack dashboard app Link to task Link to Figma template Live Dem

Andrew Dryuk 1 Jan 6, 2022
Experimental test runner based on vite

Va vite! vavite is a Vite plugin that provides SSR functionality that is environ

Fatih Aygün 211 Dec 31, 2022
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

React Scope 315 Nov 18, 2022
Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

Sayan Bhattacharyya 9 Sep 16, 2022
Compose your React provider components to avoid boilerplates.

compose-providers Compose your React provider components to avoid boilerplates. Install npm i compose-providers Usage Assume you're using serveral lib

Doma 2 Mar 28, 2022
In this course you learn how to use MUI components in your React applications

React + MUI In this course you learn how to use MUI components in your React applications. But, what is MUI? MUI offers a comprehensive suite of UI to

AmirHossein Mohammadi 5 Jul 25, 2022
🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components

?? Papanasi is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.

Quique Fdez Guerra 387 Jan 4, 2023
Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

ABU SAID 47 Dec 29, 2022
React Native Typescript Template with scalable design and cutting edge technologies like CodePush, Sentry and other libraries pre-configured to save your time.

A React Native Template/Boilerplate containing the best practices and scalable design with cutting edge technologies like CodePush/Sentry and all other neccessary libraries pre-configured and basic helper functions and components to help you save your time and make your App super fast.

KASHAN HAIDER 23 Dec 1, 2022