Beacon-DS is the Beacon Design System project, a comprehensive framework that integrates vital dependencies to enhance its functionality and design. Some of the core dependencies include styled-components for styled elements, Tailwind CSS for utility-first CSS, Radix UI and Headless UI for unstyled, fully accessible UI components, and React Table for building fast and extendable tables and datagrids in React. These dependencies ensure that Beacon-DS remains robust, user-friendly, and versatile in its design capabilities.
├── .DS_Store
├── .changeset
│
│
├── .config
│ └── barrelsby.json
├── .eslintignore
├── .eslintrc.js
├── .github
│ └── workflows
│ ├── deploy-docs.yml
│ ├── deploy-storybook.yml
│ └── release.yml
├── .gitignore
├── .prettierrc
├── .yarn
│ └── install-state.gz
├── .yarnrc.yml
├── README.md
├── apps
│
│ └── docs
│ ├── .DS_Store
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── components
│ │ ├── counters.module.css
│ │ ├── counters.tsx
│ │ └── style.module.css
│ ├── next-env.d.ts
│ ├── next.config.js
│ ├── package.json
│ ├── pages
│ │ ├── .DS_Store
│ │ ├── Foundation
│ │ │ ├── Layouts
│ │ │ │ ├── Container.mdx
│ │ │ │ └── Grid.mdx
│ │ │ ├── Typography.mdx
│ │ │ └── colors.mdx
│ │ ├── _app.mdx
│ │ ├── _meta.json
│ │ ├── advanced.mdx
│ │ ├── another.mdx
│ │ ├── components
│ │ │ ├── button.mdx
│ │ │ ├── card.mdx
│ │ │ ├── modal.mdx
│ │ │ └── spinner.mdx
│ │ └── index.mdx
│ ├── public
│ │ └── dash-layout.png
│ ├── theme.config.tsx
│ └── tsconfig.json
├── package.json
├── packages
│ ├── core
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── jest.config.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── components
│ │ │ │ ├── Avatar
│ │ │ │ │ ├── Avatar.styles.tsx
│ │ │ │ │ ├── Avatar.tsx
│ │ │ │ │ ├── Avatar.type.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Box
│ │ │ │ │ ├── Box.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Breadcrumbs
│ │ │ │ │ ├── Breadcrumb.type.ts
│ │ │ │ │ ├── Breadcrumbs.tsx
│ │ │ │ │ ├── breadcrumbs-icon.svg
│ │ │ │ │ ├── breadcrumbs-icon.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Button
│ │ │ │ │ ├── Button.styles.tsx
│ │ │ │ │ ├── Button.tsx
│ │ │ │ │ ├── Button.types.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Card
│ │ │ │ │ ├── Card.spec.tsx
│ │ │ │ │ ├── Card.styles.tsx
│ │ │ │ │ ├── Card.tsx
│ │ │ │ │ ├── Card.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── Checkbox
│ │ │ │ │ ├── Checkbox.styles.tsx
│ │ │ │ │ ├── Checkbox.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Container
│ │ │ │ │ ├── Container.tsx
│ │ │ │ │ ├── Container.types.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── Grid
│ │ │ │ │ ├── Grid.styles.tsx
│ │ │ │ │ ├── Grid.tsx
│ │ │ │ │ ├── Grid.types.ts
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── Heading
│ │ │ │ │ ├── Heading.spec.tsx
│ │ │ │ │ ├── Heading.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Icon
│ │ │ │ │ ├── Icon.styles.tsx
│ │ │ │ │ ├── Icon.tsx
│ │ │ │ │ ├── Icon.types.ts
│ │ │ │ │ ├── Icons.tsx
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── Label
│ │ │ │ │ ├── Label.styles.tsx
│ │ │ │ │ ├── Label.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Loader
│ │ │ │ │ ├── Loader.tsx
│ │ │ │ │ ├── LoaderComponent.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Menu
│ │ │ │ │ ├── Menu.spec.tsx
│ │ │ │ │ ├── Menu.styles.tsx
│ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Modal
│ │ │ │ │ ├── CloseIcon.tsx
│ │ │ │ │ ├── Modal.spec.tsx
│ │ │ │ │ ├── Modal.styles.tsx
│ │ │ │ │ ├── Modal.tsx
│ │ │ │ │ ├── Modal.types.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Radio
│ │ │ │ │ ├── Radio.tsx
│ │ │ │ │ ├── Radio.type.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── RadioGroup
│ │ │ │ │ ├── RadioGroup.context.tsx
│ │ │ │ │ ├── RadioGroup.tsx
│ │ │ │ │ ├── RadioGroup.type.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Select
│ │ │ │ │ ├── Select.spec.tsx
│ │ │ │ │ ├── Select.styles.tsx
│ │ │ │ │ ├── Select.tsx
│ │ │ │ │ ├── Select.types.tsx
│ │ │ │ │ ├── checkist.todo
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Switch
│ │ │ │ │ ├── Switch.tsx
│ │ │ │ │ ├── Switch.type.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Table
│ │ │ │ │ ├── Table.styles.tsx
│ │ │ │ │ ├── Table.tsx
│ │ │ │ │ ├── Table.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── shared
│ │ │ │ │ ├── ActionPill.tsx
│ │ │ │ │ ├── PaginateButton.tsx
│ │ │ │ │ ├── StatusPill.tsx
│ │ │ │ │ └── util.ts
│ │ │ │ ├── TextField
│ │ │ │ │ ├── Input.styles.tsx
│ │ │ │ │ ├── TextField.spec.tsx
│ │ │ │ │ ├── TextField.tsx
│ │ │ │ │ ├── TextField.types.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── util.ts
│ │ │ │ ├── Toast
│ │ │ │ │ ├── Toast.styles.tsx
│ │ │ │ │ ├── Toast.tsx
│ │ │ │ │ ├── Toast.types.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── util.tsx
│ │ │ │ └── Tooltip
│ │ │ │ ├── Tooltip.styles.ts
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ ├── Tooltip.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ ├── useMenu.ts
│ │ │ │ └── useTheme.tsx
│ │ │ ├── index.ts
│ │ │ ├── style.css
│ │ │ ├── types
│ │ │ │ ├── color.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── react-table-config.d.ts
│ │ │ │ └── size.ts
│ │ │ └── utils
│ │ │ ├── extractProps.ts
│ │ │ ├── getInitials.ts
│ │ │ ├── globalStyles.ts
│ │ │ ├── index.ts
│ │ │ ├── mergeClassnames.ts
│ │ │ └── tokens
│ │ │ ├── colors.ts
│ │ │ ├── radii.ts
│ │ │ └── spacings.ts
│ │ ├── tailwind.config.js
│ │ └── tsconfig.json
│ ├── foundation
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── sd.config.js
│ │ ├── src
│ │ │ ├── index.ts
│ │ │ ├── tailwindPreset.config.js
│ │ │ ├── tokens
│ │ │ │ ├── animations.json
│ │ │ │ ├── colors.json
│ │ │ │ ├── radius.json
│ │ │ │ ├── shadows.json
│ │ │ │ └── spacings.json
│ │ │ └── typography.css
│ │ └── tsconfig.json
│ ├── icons
│ │ ├── .gitkeep
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── SortIcon
│ │ │ │ ├── SortIcon.tsx
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── storybook
│ ├── .babelrc.json
│ ├── .eslintignore
│ ├── .storybook
│ │ ├── main.js
│ │ └── preview.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── stories
│ │ ├── AriaButton.stories.tsx
│ │ ├── Avatar.stories.tsx
│ │ ├── Breadcrumbs.stories.tsx
│ │ ├── Button.stories.tsx
│ │ ├── Card.stories.tsx
│ │ ├── Checkbox.stories.tsx
│ │ ├── Grid.stories.tsx
│ │ ├── Heading.stories.tsx
│ │ ├── Introduction.stories.mdx
│ │ ├── Loader.stories.tsx
│ │ ├── Menu.stories.tsx
│ │ ├── Modal.stories.tsx
│ │ ├── RadioGroup.stories.tsx
│ │ ├── Select.stories.tsx
│ │ ├── Switch.stories.tsx
│ │ ├── Table.stories.tsx
│ │ ├── TextField.stories.tsx
│ │ ├── Toast.stories.tsx
│ │ ├── Tooltip.stories.tsx
│ │ ├── Typography.stories.mdx
│ │ └── assets
│ │ ├── button-tailwind.svg
│ │ ├── button.svg
│ │ ├── code-brackets.svg
│ │ ├── colors.svg
│ │ ├── comments.svg
│ │ ├── direction.svg
│ │ ├── flow.svg
│ │ ├── plugin.svg
│ │ ├── repo.svg
│ │ ├── stackalt.svg
│ │ └── typography.svg
│ └── tsconfig.json
├── tsconfig.json
└── yarn.lock- apps: Contains the main applications of the project.
- packages/core: Core package with various components like Avatar, Checkbox, Modal, etc.
- packages/core/src/components: Collection of reusable UI components.
- packages/core/src/hooks: Custom hooks for managing state and side effects.
- packages/core/src/utils: Utility functions used throughout the project.
- packages/foundation: Package related to foundational elements of the project.
- packages/foundation/src/tokens: Tokens defining design system attributes.
- packages/icons: Package containing custom icons for the project.
- packages/storybook: Storybook configuration and stories for component development.
- packages/storybook/stories: Stories showcasing components in Storybook.
Here's the corrected content:
- Next.js: Framework for building server-rendered React applications.
- React: JavaScript library for building user interfaces.
- radix ui: A low-level UI primitive library for building high-quality, accessible design systems without sacrificing style.
- typescript: Typed superset of JavaScript that compiles to plain JavaScript.
- react table: Hooks for building lightweight, fast, and extendable data-grid tables for React.
- nextra-theme-docs: Theme for Nextra that adds documentation-specific features.
- Headless UI: Completely unstyled, fully accessible UI components.
- @types/node: TypeScript definitions for Node.js.
Ensure the following configurations for a smooth setup:
- Use
yarn berrywith a version ofyarn 3.4.1. - Your system should have
nodeversion 16 or higher. - Ensure
npmis updated to version 9.3.1 or above.
1.Clone the beacon-ds repository:
git clone https://github.com/rotationalio/beacon-ds2.Install the dependencies with one of the package managers listed below:
yarn install3.Some packages need to be built before consuming them, like the foundation, which will distribute the design tokens to the rest of the packages.
yarn buildYou can run Storybook and instantly start experimenting with the components' code running the command:
yarn storybookA compiled storybook can be found also here.
When a change has been made to the codebase, it's essential to keep track of versions for smoother rollbacks, updates, and collaboration. To facilitate this, we utilize the Changeset CLI. This tool allows us to document changes, automatically bump versions, and generate changelogs. Before pushing any updates, ensure you've run the Changeset CLI to log the modifications and update the version accordingly. This practice ensures consistency and clarity for all team members and users of the package.
yarn changesetTo publish the package, execute the following command. However, ensure you have been added to the Rotational Lab NPM account teams beforehand. Follow these instructions to configure your accounts appropriately here.
yarn releaseOur documentation is constructed using NextJS, enhanced with Nextra. For deployment, we use surge.sh to achieve static deployment.
To deploy the documentation, execute the following command:
yarn run docs:exportEnsure you have the necessary dependencies installed and configured before running the command.