Lego Lib

A small React UI component library for demonstration purposes

Check out the Storybook for a full list of available components and their usage.

Install

npm i the-lego-lib

Example usage

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import 'the-lego-lib/styles'

import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// App.jsx
import { Heading, Sandbox } from 'the-lego-lib';

export function App (){
    return (
        <div id="App" style={{maxWidth: '900px', margin: '0 auto'}}>
            <Heading text="Lego World"/>
            <Sandbox />
        </div>
    )
}

Development

futureproof students only

Setup

• Fork & clone the repo & git checkout lego-lib
• npm i
• Run storybook with npm run storybook (runs on port 6006 by default)

Package trial run

NB: there are various ways to do this, here's just one option

• npm run build
• npm pack --pack-destination ~
• Go to another local project that can import React component libs eg. a new Vite app
• Add to package.json dependencies: "<lib-name>": "file:~/<lib-name>-<version>.tgz" eg. "lego-lib": "file:~/lego-lib-0.0.2.tgz"
• npm i
• Try and use the library!

Publishing new version

NB: this is for reference for you own libs only - this will fail on this lib as you will not have the right permissions!

• npm run build
• Update version with npm version <patch|minor|major> as appropriate
• npm publish (you will need to be logged in to npm to do this & have permission - follow the prompts)