@salecycle/beyable-ui — Design System

Internal React component library for Beyable, published on npm as @salecycle/beyable-ui.

Storybook → sunny-figolla-cbf0e6.netlify.app (auto-deployed via GitHub Actions)

Tech stack

• React 18 + TypeScript
• CSS Modules + CSS custom properties (design tokens --ds-space-*)
• Rollup for bundling (CJS + ESM output)
• Storybook 8 (Vite builder) for interactive documentation

Installation & local development

# Clone the repository and install dependencies
npm install

# Start Storybook (interactive documentation)
npm run storybook

Deploy Storybook (private repo)

GitHub Pages does not work for free on private repos. Use Netlify via GitHub Actions instead (no need to link the private repo to Netlify).

Setup (one time)

1. Create a free account at netlify.com

2. Add new site → Deploy manually (empty site is fine)

3. Copy the Site ID : Site settings → General → Site details

4. Create a Personal access token : User settings → Applications → Personal access tokens

5. Add two secrets (not variables!) to the GitHub repo (Settings → Secrets and variables → Actions → Secrets tab → New repository secret) :

   • NETLIFY_AUTH_TOKEN → your Netlify token
   • NETLIFY_SITE_ID → your site ID

   Important: use the Secrets tab, not Variables. The workflow reads secrets.NETLIFY_*, not vars.NETLIFY_*.

Each push to main triggers .github/workflows/storybook-netlify.yml and publishes Storybook automatically.

Troubleshooting

| Error in Actions | Fix | |---|---| | Missing secret NETLIFY_AUTH_TOKEN | Add it in Secrets tab (not Variables) → Settings → Secrets → Actions | | Missing secret NETLIFY_SITE_ID | Same — must be a Secret, not a Variable | | 401 Unauthorized | Regenerate the Netlify token and update the secret | | 404 Not Found | Verify the Site ID matches your site (sunny-figolla-cbf0e6) |

After fixing secrets, re-run the workflow: Actions → Deploy Storybook to Netlify → Re-run all jobs.

Alternative — local only

npm run storybook          # dev server at http://localhost:6006
npm run build-storybook      # static build in storybook-static/
npx serve storybook-static   # preview the build locally

Link the library to a local project

# In this repository
npm link

# In your app
npm link @salecycle/beyable-ui

After every code change:

npm run buildlib

Build & npm publishing

# Full build (Rollup → lib/cjs + lib/esm)
npm run prepublishOnly

# Log in to npm
npm login

# Publish stable release
npm publish

# Publish a beta version (update version to x.x.x-beta.0 first)
npm publish --tag beta

Project structure

src/
├── components/          # 31 components, each in its own folder
│   ├── Btn/
│   │   ├── Btn.tsx
│   │   ├── Btn.module.css
│   │   ├── types.ts
│   │   └── Btn.stories.tsx   ← co-located Storybook story
│   └── ...
├── styles/              # Global CSS modules (Flex, Margin, Typo, Colors…)
├── index.tsx            # Public entry point (exports)
└── Introduction.stories.tsx  ← Storybook landing page

Available components

| Category | Components | |---|---| | Buttons | Btn, BtnGroup, BtnSwitch, IconBtn | | Forms | Textfield, SearchBar, Select, Checkbox, Radio, Switch, Fieldset | | Layout | Box, Stack, StackRow, Inline, InlineColumn, Container, Section, Article, ArticleFoldable, Hr | | Navigation | TabBar, TabItem, Breadcrumb, Collapse, Dropdown, DropdownSection | | Overlays | Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelHeader, PanelBody, PanelSection, Confirm | | Lists | Listbox, ListboxItem, ListboxSep, ListboxGroupLabel | | Feedback | Spinner, SpinnerLogo, Message, EmptyState, Kpi, KpiList, KpiItem | | Utilities | Copy, Text, Picto, Tooltip |

License

MIT © Beyable