Project Health:

Issue Tracking:

Installation and Usage

This installation guideline assumes, that you have a running React installation with Tailwind and Typescript installed.

To install the package, you need a personal GitHub Access Token. Create a .npmrc file in the same directory as your package.json and add the key and the declaration of the owner of the repo to your project:

@smartive-education:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken="--PERSONAL KEY--"

Here you can find additional information about setting up a personal access token and configuring the .npmrc File.

To install the design system package, run the following command within the root directory of your project.

npm install @smartive-education/[email protected]

This command installs the package in your node modules and components can be imported with the following syntax:

import {
  Button,
  ButtonColor,
  ButtonSize,
} from '@smartive-education/thierry-simon-mumble';

However, Tailwind Styles and the custom Tailwind-Config are not applied. To get the matching styles, the Tailwind-Config in the consuming project has to be modified as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@smartive-education/thierry-simon-mumble/dist/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [
    require('./node_modules/@smartive-education/thierry-simon-mumble/mumble-presets'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. The content Array needs to include the components from node_modules with `./node*modules/@smartive-education/thierry-simon-mumble/dist/**/_.{js,ts,jsx,tsx}``
2. The presets from the custom config have to be added with presets: [ require('./node_modules/@smartive-education/thierry-simon-mumble/mumble-presets'), ],

With this configuration in place, the components can be used, and the corresponding styles are applied.

Icons

SVG Icons are transformed to React Components with the help of SVGR. Icons are built via CLI command. If new SVG Icons are added, the command has to run once to generate the new component.

npm run svgr

is the command to run. All SVG files from the assets/icons Folder are transformed with the following options:

• Typescript Files are generated (.tsx)
• all color Attributes are removed and replaced with props.color
• are generated with a default size of 1em x 1em (can be overwritten)
• are save in src/Icons

Contributing Guidelines

The Guidelines changed many times over the last few weeks and were always adjusted when needed. Therefore, older issues, commits and pr's may not comply

To contribute to the project, please follow the below guidelines.

• Open a GitHub Issue for each necessary fix or change
• Each issue gets its own branch which is name "gh{issue-no}"
• we use semantic commit messages and always include the issue number as part of the commit message. For example: "fix: #23 Example description of work performed"
• Documentation and information of team members is done via issue.

More info on semantic commits and commit messages:

feat: #Issue No description
^--^  ^-------^ ^----------^
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.

More Examples:

• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• docs: (changes to the documentation)
• style: (formatting, missing semi colons, etc; no production code change)
• refactor: (refactoring production code, eg. renaming a variable)
• test: (adding missing tests, refactoring tests; no production code change)
• chore: (updating grunt tasks etc; no production code change)

References:

• https://www.conventionalcommits.org/
• https://seesparkbox.com/foundry/semantic_commit_messages
• http://karma-runner.github.io/1.0/dev/git-commit-msg.html
• https://gist.githubusercontent.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716/raw/e75b1b9536ee5ee82e2ec0ba8948d8f8238488c3/semantic-commit-messages.md