@fitx/gymx-ui
v0.34.0
Published
  .
Available Scripts
you can run the following scripts:
npm run build
: Builds the Storybook documentation and runs unit tests.npm run build:lib
: Builds the component library.npm run test:unit
: Runs unit tests with Vitest.npm run test:e2e
: Runs end-to-end tests using Playwright.npm run lint
: Lints the codebase using ESLint.npm run format
: Formats the code using Prettier.npm run storybook
: Starts the Storybook server for local component development.
To start developing new components or working on the library, use Storybook as dev server:
npm install
npm run storybook
This will start a local storybook server.
You can now work on your components in the src/
directory and see the changes live.
Create a new component
npx tsx utils/create-component.ts example-button
This will automatically create a folder called 'gymx-example-button' with the prefix 'gymx'. The folder will contain the vue file, a test files, story file for Storybook, index and types.
Type Checking and linitng
The project uses TypeScript for type safety. You can run type checks with:
npm run type-check
# Lint with [ESLint](https://eslint.org/)
npm run lint
Testing
Unit Tests
We use Vitest for unit testing. To run the tests:
npm run test:unit
End-to-End Tests
For e2e testing, we use Playwright. To run the e2e tests:
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
Storybook
GymX UI is integrated with Storybook for UI component development and documentation. To start the Storybook server locally, run:
npm run storybook
To build the Storybook static files and generate Unit Tests documentation, run:
npm run build
Access the live Storybook documentation at Storybook on GymX UI.
Contributing
We welcome contributions to GymX UI!.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/my-feature
). - Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/my-feature
). - Create a pull request.