Skip to content

Commit

Permalink
Merge pull request #245 from WestpacGEL/feature/individual-component-…
Browse files Browse the repository at this point in the history
…exports

feature(ui): add script to generate individual component exports
  • Loading branch information
samithaf authored Nov 6, 2023
2 parents 617536e + 8d3016b commit e44bafa
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 5 deletions.
5 changes: 5 additions & 0 deletions .changeset/three-zoos-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@westpac/ui': minor
---

Add individual component exports
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,22 @@ export default function SampleApp() {
}
```

The following example shows how to import a component individually. (Recommended if running into issues with tree-shaking and bundle size in applications)

```tsx
import { Button } from '@westpac/ui/button';

export default function SampleApp() {
return (
<section>
<div className="space-x-4 mb-2">
<Button look="primary">Pay here</Button>
</div>
</section>
);
}
```

### Unit testing

We recommend [vitest](https://vitest.dev/) for unit testing since `vitest` natively supports `ESM` modules.
Expand Down
134 changes: 129 additions & 5 deletions packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,143 @@
"./css": {
"default": "./dist/css/westpac-ui.min.css"
},
"./hook": {
"default": "./dist/hook/index.js"
},
"./tailwind": {
"default": "./dist/tailwind/index.js"
},
"./accordion": {
"default": "./dist/components/accordion/index.js"
},
"./alert": {
"default": "./dist/components/alert/index.js"
},
"./autocomplete": {
"default": "./dist/components/autocomplete/index.js"
},
"./badge": {
"default": "./dist/components/badge/index.js"
},
"./breadcrumb": {
"default": "./dist/components/breadcrumb/index.js"
},
"./button": {
"default": "./dist/components/button/index.js"
},
"./button-dropdown": {
"default": "./dist/components/button-dropdown/index.js"
},
"./button-group": {
"default": "./dist/components/button-group/index.js"
},
"./checkbox-group": {
"default": "./dist/components/checkbox-group/index.js"
},
"./circle": {
"default": "./dist/components/circle/index.js"
},
"./collapsible": {
"default": "./dist/components/collapsible/index.js"
},
"./compacta": {
"default": "./dist/components/compacta/index.js"
},
"./date-picker": {
"default": "./dist/components/date-picker/index.js"
},
"./error-message": {
"default": "./dist/components/error-message/index.js"
},
"./field": {
"default": "./dist/components/field/index.js"
},
"./flexi-cell": {
"default": "./dist/components/flexi-cell/index.js"
},
"./form": {
"default": "./dist/components/form/index.js"
},
"./form-hint": {
"default": "./dist/components/form-hint/index.js"
},
"./form-label": {
"default": "./dist/components/form-label/index.js"
},
"./grid": {
"default": "./dist/components/grid/index.js"
},
"./icon": {
"default": "./dist/components/icon/index.js"
},
"./hook": {
"default": "./dist/hook/index.js"
"./input": {
"default": "./dist/components/input/index.js"
},
"./input-field": {
"default": "./dist/components/input-field/index.js"
},
"./link": {
"default": "./dist/components/link/index.js"
},
"./list": {
"default": "./dist/components/list/index.js"
},
"./modal": {
"default": "./dist/components/modal/index.js"
},
"./pagination": {
"default": "./dist/components/pagination/index.js"
},
"./panel": {
"default": "./dist/components/panel/index.js"
},
"./pictogram": {
"default": "./dist/components/pictogram/index.js"
},
"./popover": {
"default": "./dist/components/popover/index.js"
},
"./progress-bar": {
"default": "./dist/components/progress-bar/index.js"
},
"./progress-rope": {
"default": "./dist/components/progress-rope/index.js"
},
"./radio-group": {
"default": "./dist/components/radio-group/index.js"
},
"./repeater": {
"default": "./dist/components/repeater/index.js"
},
"./select": {
"default": "./dist/components/select/index.js"
},
"./selector": {
"default": "./dist/components/selector/index.js"
},
"./skip-link": {
"default": "./dist/components/skip-link/index.js"
},
"./switch": {
"default": "./dist/components/switch/index.js"
},
"./symbol": {
"default": "./dist/components/symbol/index.js"
},
"./tailwind": {
"default": "./dist/tailwind/index.js"
"./table": {
"default": "./dist/components/table/index.js"
},
"./tabs": {
"default": "./dist/components/tabs/index.js"
},
"./textarea": {
"default": "./dist/components/textarea/index.js"
},
"./visually-hidden": {
"default": "./dist/components/visually-hidden/index.js"
},
"./well": {
"default": "./dist/components/well/index.js"
}
},
"files": [
Expand All @@ -57,6 +180,7 @@
"build:types": "tsc --project tsconfig.build.json",
"build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
"build:icons": "ts-node --esm ./utils/build-icons/index.ts",
"build:exports": "ts-node --esm ./utils/build-exports/index.ts && prettier --write package.json",
"build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
"build:type-table": "node generate-component-types.cjs",
"build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all && pnpm build:type-table",
Expand All @@ -67,7 +191,7 @@
"test:watch": "vitest --no-coverage",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"generate:component": "plop"
"generate:component": "plop && pnpm build:exports"
},
"devDependencies": {
"@react-types/tabs": "~3.3.0",
Expand Down
38 changes: 38 additions & 0 deletions packages/ui/utils/build-exports/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import fs from 'fs/promises';
import path from 'path';

const exports: Record<string, { default: string }> = {
'.': {
default: './dist/index.js',
},
'./component-type.json': {
default: './dist/component-type.json',
},
'./css': {
default: './dist/css/westpac-ui.min.css',
},
'./hook': {
default: './dist/hook/index.js',
},
'./tailwind': {
default: './dist/tailwind/index.js',
},
};

const main = async () => {
const components = (await fs.readdir(path.join(process.cwd(), 'src/components'), { withFileTypes: true }))
.filter(dirent => dirent.isDirectory())
.map(dirent => dirent.name);

components.forEach(component => {
exports[`./${component}`] = { default: `./dist/components/${component}/index.js` };
});

const pkgJsonPath = path.join(process.cwd(), 'package.json');
const data = await fs.readFile(pkgJsonPath, 'utf-8');
const pkgJson = JSON.parse(data);
pkgJson.exports = exports;
await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJson));
};

main();

0 comments on commit e44bafa

Please sign in to comment.