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

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
  • Playwright recipe for automatically starting ladle preview with webServer

    Playwright recipe for automatically starting ladle preview with webServer

    First of all, thank you for making ladle. Using it was a seamless experience, especially in projects that already use vite and vitest.

    Is your feature request related to a problem? Please describe. Since 1.11.0, playwright has a feature where you can tell it to start and wait for a local server before testing. However, example on doing visual snapshots bypasses this feature.

    Describe the solution you'd like I've written a different code sample on how to do it using serial mode. Here are the steps:

    1. Add this to playwright.config.ts
    webServer: {
        // This command calls 
        // ladle preview -p 61000
        command: "npm run ci:ladle",
        port: 61000,
    },
    
    // snapshots.spec.ts
    import { test, expect } from "@playwright/test";
    
    test.describe.serial("Laddle Visual Testing", () => {
      let stories;
      const url = "http://localhost:61000";
      test("Setup", async ({ page, request }) => {
        // fetch Ladle's meta file
        // https://ladle.dev/docs/meta
        const response = await request.get(`${url}/meta.json`);
        // iterate through stories
        const json = await response.json();
    
        stories = json.stories;
      });
    
      test("Main test", async ({ page }) => {
        for (let storyKey in stories) {
          await test.step(`${storyKey} - compare snapshots`, async () => {
            // navigate to the story
            await page.goto(`${url}/?story=${storyKey}&mode=preview`);
            // stories are code-splitted, wait for them to be loaded
            await page.waitForSelector("[data-storyloaded]");
            // take a screenshot and compare it with the baseline
            await expect(page).toHaveScreenshot(`${storyKey}.png`);
          });
        }
      });
    });
    

    Describe alternatives you've considered Admittedly I could start the server myself some other ways as the number of tests exploded but for now, I believe this is sufficient for my use case.

    Additional context Add any other context or screenshots about the feature request here.

    documentation 
    opened by thangngoc89 3
  • Settings set through the programatic API don't make it into the custom config in browser

    Settings set through the programatic API don't make it into the custom config in browser

    import serve from "@ladle/react/serve";
    
    await serve({
      addons: {
        width: {
          options: {
            minimum: 1280,
            medium: 1600,
            large: 2060,
          },
          enabled: true,
          defaultValue: 0,
        },
      },
    });
    

    should correctly initialize the width addon but this works only when Ladle is used through its binary and it's set through config.mjs.

    bug 
    opened by tajo 0
  • Implement export default argTypes and add type check

    Implement export default argTypes and add type check

    args/argTypes should can be set only for specific stories (named exports in a file). You should be able to do

    export default {
      args: ...
      argTypes: ...
    }
    
    enhancement 
    opened by tajo 0
  • how to use `react-router-dom` alongside ladle

    how to use `react-router-dom` alongside ladle

    import { Link } from 'react-router-dom'
    import { Button } from '@mantine/core'
    
    export const TryLogin = () => (
        <Link to='/auth/login'>
          <Button variant='default'>login</Button>
        </Link>
    )
    

    I'm trying to render this prop into ladle, however it fails because it requires react router context.

    // router.tsx
    export const router = createBrowserRouter([
      {
        path: '/auth/login',
        element: <LoginPanel />,
      },
    ])
    
    // App.tsx
    import { RouterProvider } from 'react-router-dom'
    import { router } from './router'
    
    export const App = () => {
      return <RouterProvider router={router} />
    }
    

    I've read https://ladle.dev/docs/providers but was unable to figure out how to provide context for every elements. any help would be appreciated.

    question 
    opened by scarf005 3
  • Controls addon UX

    Controls addon UX

    Is your feature request related to a problem? Please describe. This will probably vary between apps and how people are used to use storybook but from what I have seen the add-ons usage was like this

    • controls: they were in almost every story and used heavily
    • dark theme and viewport: very useful but used only once in a while, probably order of magnitude less usage than controls
    • other add-ons: used even less, probably another order of magnitude less compared to dark theme and viewport

    If this usage patterns are correct and not just some isolated outliers (or just me having wrong idea how stories are used) I think it could make sense, from UX point of view, to give the controls add-on more space/priority in the UI, compared to other add-ons.

    Describe the solution you'd like For example storybook has dedicated panel in layout for controls that is always visible unless you minimalize it, so we could do something along these lines?

    Describe alternatives you've considered Or we could just have some simple adjustments like "if there are controls for given story, open by default the controls add-on panel

    TLDR: If most stories use controls, it is little annoying that you need to re-open controls panel whenever you switch between stories

    enhancement 
    opened by Hurtak 1
Releases(@ladle/[email protected])
Owner
Vojtech Miksu
Core Infrastructure at Uber.
Vojtech Miksu
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 60 Dec 7, 2022
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 222 Nov 30, 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 993 Dec 2, 2022
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 349 Nov 25, 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 200 Dec 1, 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 314 Nov 25, 2022
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 38 Nov 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