Getting Started

Content

| Name | Type | Description | | -------------------- | ------------------ | ------------------------------------------------------------------------- | | useBreakpointValues | Hook | Get diferent values based on media queries | | useClickOutside | Hook | Triggers a function when clicks outside the selected HTML tag | | useUpdateEffect | Hook | Runs the useEffect hook only when the references are updated | | useFlexRowSize | Hook | Calculates the width of all direct children of an element (gaps included) | | useKeyPress | Hook | | | useScrollHorizontal | Hook | Ads the proper events to allow the horizontal scroll with the mouse | | useSize | Hook | Get the size of an element | | UIModal | Component (layout) | A modal component | | NumberInput | Component | A number field with more frinedly buttons | | SelectMultiple | Component | A multiple selector | | Slider | Component | An horizontal slider (features: arrows, dots, loop animation) | | ui-section-container | class (CSS) | Centers a container on the middle of the screen, has horizontal margins | | ui-flex-center | class (CSS) | Shortcut for centers the content | | ui-shadow-center-sm | class (CSS) | | | ui-shadow-center-md | class (CSS) | | | ui-shadow-center-lg | class (CSS) | | | ui-shadow-center-xl | class (CSS) | | | ui-shadow-bottom-sm | class (CSS) | | | ui-shadow-bottom | class (CSS) | | | ui-shadow-deep | class (CSS) | Special shadow to create light sources (deep) | | ui-shadow-raised | class (CSS) | Special shadow to create light sources (raise) | | ui-slider | class (CSS) | Adds the scroll snap features | | cssMerge | tools | custom configuration for tailwind-merge | | cssVariants | tools | custom configuration for tailwind-variants |

Develop: The Storybook and documentation

NPM publish

Use the library

In order to work you must configure a small things:

// tailwind.config.ts

import { UIStyles } from '@org-serturner-institut/code-library/src/tailwindcss';

const config = {
    content: [
        './node_modules/@org-serturner-institut/code-library/src/**/*.{js,ts,jsx,tsx}',
        // ...other paths
    ],
    plugins: [UIStyles]
    // ...other configs
}

export default config;

// next.config.mjs

const nextConfig = {
    // ... other configurations
    transpilePackages: ['@org-serturner-institut/code-library'],
}

Status Badges

See how to configure: https://github.com/Sidnioulz/storybook-addon-tag-badges