This template ships with the main React configuration files you'll need to get up and running fast.

🚅 Quick start

1. Create the application.

   Use degit to get this template.

   # Clone the template
   npx degit chromaui/learnstorybook-design-system-template learnstorybook-design-system

2. Install the dependencies.

   Navigate into your new site’s directory and install the necessary dependencies.

   # Navigate to the directory
   cd learnstorybook-design-system/
   
   # Install the dependencies
   yarn

3. Open the source code and start editing!

   Open the learnstorybook-design-system directory in your code editor of choice and building your first component!

🔎 What's inside?

A quick look at the top-level files and directories included with this template.

.
├── node_modules
├── src
├── .babelrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── package.json
├── rollup.config.mjs
├── vite.config.js
├── yarn.lock
└── README.md

1. node_modules: This directory contains all of the modules of code that your project depends on (npm packages).

2. src: This directory will contain all of the code related to what you will see on your application.

3. .babelrc.json: This file tells babel which presets and plugins to use when transforming your code.

4. .gitignore: This file tells git which files it should not track or maintain during the development process of your project.

5. .prettierignore: This file tells prettier which files it should not format.

6. .prettierrc: This file tells prettier which rules to use when formatting your code.

7. LICENSE: The template is licensed under the MIT licence.

8. package.json: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.

9. rollup.config.mjs: This file tells rollup which plugins to use when bundling your code.

10. yarn.lock: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually).

11. vite.config.js: This file tells Vite which plugins to use when bundling your code.

12. README.md: A text file containing useful reference information about the project.

Table (@leapeasy/ui-kit)

Portal data grids use the Table component. Run Storybook (npm run storybook) under Design System / Table for live examples.

Column options

Configure each entry in the columns array:

| Option | Type | Description | |--------|------|-------------| | minWidth | number | Column will not shrink below this width (px). | | width | number | Fixed column width (px). | | shrink | boolean | Set false to prevent flex from squeezing the column. | | noShrink | boolean | Alias for shrink: false. | | flexGrow | number | Grow when extra horizontal space is available. | | flex | string | Legacy flex string, e.g. '200px 1 0' (basis grow shrink). | | style.minWidth | string | Also honored (e.g. badge columns). |

Example (badge / property type column):

{
  name: 'Property Type',
  key: 'building_type',
  options: {
    minWidth: 200,
    shrink: false,
    flexGrow: 1,
    style: getTypeBadgeColumnStyle(), // app helper, optional
    sort: true,
    customBodyRenderer: (value) => <Badge label={value} />,
  },
}

Table props (common)

| Prop | Default | Notes | |------|---------|--------| | showEmptyState | false | Built-in “No results found”. Keep false when the app renders NoBuildingData below the table. | | loading | false | Shows overlay spinner over the grid body. | | overflowEllipsis | true | Single-line cells with ellipsis. | | zebraRows | true | Alternate row background. | | stickyHeader | true | Header stays visible while scrolling. | | resizableColumns | true | Drag column edges; widths can persist in localStorage. | | rowsPerPageOptions | [12, 15, 20, 50, 100] | Page-size choices in the footer dropdown (TABLE_ROWS_PER_PAGE_OPTIONS). | | maxBodyHeight | — | Vertical scroll + sticky header when set (px). | | selectableRows | false | Checkbox column; use with selectedRowKeys / onSelectionChange. |

Exported layout utilities

import {
  Table,
  getColumnCellStyle,
  getColumnMinWidth,
  TABLE_DEFAULT_ROW_HEIGHT,
} from '@leapeasy/ui-kit';

LLP-FE adoption checklist

After upgrading to 0.3.4:

1. Rebuild ui-kit (npm run build) and reinstall in LLP-FE (npm install or yarn; run npm run fix-ui-kit-react when using file:../ui-kit).
2. For right-pinned row actions, set options.stickyRight: true on the Actions column.
3. QA Applications: Actions column remains visible when horizontally scrolling with extra columns shown.

After upgrading to 0.3.3:

1. Rebuild ui-kit (npm run build) and reinstall in LLP-FE (npm install or yarn; run npm run fix-ui-kit-react when using file:../ui-kit).
2. For long text identifier columns, use fitContent: true (see getFitContentColumnWidths in exports) so initial width matches page content.
3. QA Properties: default column set on first load, Name column fully readable without resize.

After upgrading to 0.3.2:

1. Reinstall the package (npm install or yarn) and run npm run fix-ui-kit-react when using file:../ui-kit.
2. QA Show Columns persistence: hide a column on a list table, refresh — it should stay hidden (localStorage key table-col-visibility:…).

After upgrading to 0.3.1:

1. Ensure tab/detail wrappers around list tables use overflow: visible (not hidden) so Filter dropdowns are not clipped.
2. QA Filter + Show Columns on Invoice, Applications, Policies, and other dropFilter tables inside building detail.

After upgrading to 0.2.7 (if not already done):

1. Add showEmptyState={false} on each <Table /> that already shows NoBuildingData when empty.
2. Add minWidth + shrink: false on badge and long-text columns (Buildings, Applications, Policies, etc.).
3. QA: empty state centered below header, Filter / Show Columns above the grid, resize cannot shrink badge columns below content.

See CHANGELOG.md for the full release notes.

Publishing a release

1. Update CHANGELOG.md and bump version in package.json (semver: patch for fixes, minor for features).
2. Build: npm run build (runs prebuild clean + rollup).
3. Test: npm test.
4. Publish to npm (scoped package):

   npm publish --access public

   Or use the release script (requires Auto configured for this repo):

   npm run release

5. In consuming apps (e.g. LLP-FE), bump @leapeasy/ui-kit and reinstall; for local file:../ui-kit, run the app’s fix-ui-kit-react postinstall script if present.

Contribute

If you encounter an issue with the template, we encourage you to open an issue in this template's repository.

Learning Storybook

1. Read our introductory tutorial over at Storybook tutorials.
2. Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
3. See our official documentation at Storybook.