Raven Design System is Carleton University's design system
npm install @carletonuniversity/rds    !Repo Size
Raven Design System, better known as RDS, is Carleton University’s design system, is a living digital organism uniting campus wide teams around a common visual language.
!TypeScript
!Vite
!Cypress
!Storybook
!React
!Tailwind CSS
1. In a terminal window open your install location and run the following:
``shell`
git clone https://github.com/cuweb/rds.git
2. Once the clone is complete move into the RDS directory and run:
`shell`
npm install
3. Run Storybook
`shell`
npm run storybook
4. Other useful shell commands
- npm run rebuild - deletes node modules, package lock and run npm installnpm run format
- - format files with prettiernpm run lint
- - check for errors with eslintnpm run size
- - compare compiled size against pre-defined limit
Run Storybook and Cypress concurrently
``
npm run test
You can also run Storybook and Cypress individually by using the following commands in different terminal windows:
- Run Storybook - npm run storybooknpx cypress Open
- Run Cypress -
- Run tests in terminal while storybook is being launched - npm run test:ci
When adding a commit with a commit you may be blocked if you do not prefix your comment with one of the following types. So a commit should look like: git commit -m "change: updated spacing around button". The prefix requires a colon to separate it from the comment.
- add - used when adding something new such as a component, story or test filechange
- - used when making a change to an existing file in the projectdeprecate
- - used when deprecating codedoc
- - used when updating something related to documentationfix
- - used when fixing an error, warning or something elsefinish
- - used when finishing a feature or fixrefactor
- - used when refactoring something such as a component or build toolrelease
- - used when preparing a new releaserevert
- - used when revert to a past committest
- - used when making changes relating to testingupgrade
- - used when upgrading packages
This project is available as an NPM Package.
1. Install the package using one of the following command:
`shell`
yarn add @carletonuniversity/rds
npm install @carletonuniversity/rds
2. Import the css file into your primary css file using:
`css`
/ primarycssfile.css /
@import '../node_modules/@carletonuniversity/rds/dist/index.css';
OR
`css``
/ primarycssfile.css /
@import '~@carletonuniversity/rds/dist/index.css';