Home
Hilfling-gui is a gui compenent library that we can use in different web projects. It is written in React TypeScript, and storybook is used in order to document and display the different components.
The project is designed in an easy to read, easy to understand way. In the root folder, you will find the configuration files and five folders: .storybook, assets, lib, node_modules and src.
The .storybook folder contains the files needed in order to get storybook to run.
The assets folder contains images and other assets used to be displayed as an example in the storybook gui. It is not exported to npm.
These two folders are generated for you, and you do not need to do anything with them. The lib folder is where the transpiled code ends up.
This is where the magic happens! The outer folder contains two folders, and three files.
This folder contains three files, global.css, utilities.module.css and variables.css.
global.css: This file contains the default styling for the different html tags. It is used so that all html elements uses the same default styling.
variables.css: The file contain all css variables used in the code. Add variables if there is some styling that we want to be consistent throughout the code, and always look at this file if there is some relevant variables you should use when you write you code. If there is something we would like to change, it is always easier to change one global variable, then one hundred local css variables.
utitlities.module.css: In the utilities file you will find css code you finde css utilities that applies to a BUNCH of code! The .container tag is what describes our container for the webpage. The .contentContainer tag is what applies the white frame that about 50% of our pages in frontend uses.
When you are to make a new component, create a new folder and name it the same as your component. Inside the folder, you normally have three files: index.tsx, MyComponent.modules.css and MyComponent.stories.tsx.
index.tsx:
- Call your interface Props and extend always DefaultProps
- Always explaind the meaning behind your props using comments on the form /** text */. This is so that they will be documented in the storybook gui.
- In order to let your components be included in the npm gui library, follow the instructions found in Section 1.5, under index.ts.
- When we write componets, we use React Functional Components, and we use the Arrow Function in ECMA2015. The syntax is as follows:
const MyComponent = ({prop1, prop2, prop3}: Props) => { return <h1>My props are {prop1}, {prop2} and {prop3}</h1>; }
MyComponent.module.css:
More information about css can be found in CSS...
MyComponent.stories.css:
This is the file that lets you display your component using storybook. Lets start by showing an example of how to write this file, and then explaining the different aspects presented in the code.
- The first line is what registers the new component with Storybook. The name, here "Card Preamble", is the name of the component.
- The secons line, .addDecorator(withInfo({ inline: true }), displays all props, their default value (if any) and the description you added in your index.tsx file.
- you use the .add("name") to display different instances of your component. Give them a descriptive name. You can add as many instances of one component as you like.
There are three files inside the src folder; declarations.d.ts, index.ts and types.ts.
declarations.d.ts: Put any needed declarations inside this folder.
types.ts: This is where we put interfaces or types that are needed in more then one compoenent, and export them.
index.ts: Every component you write, needs to be exported inside this index file in order to be included in the npm library. This is done by writing
export { default as MyComponent } from "./components/MyComponent";
This project uses CSS Modules. A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Because we are using a CRA (create-react-app) in our frontend application (this project is set up from scratch), we need to name our css files with [name].module.css.
Using CSS modules is easy, and does not require much setup. This is how it is done:
- Create a normal CSS file and name it [name].module.css
- Add CSS classes to this file. Any valid CSS class is acceptable, but name it by camelCase for classes with more than one word.
- Import the module you have created from within your component, like this:
import styles from "./name.module.css. - To use a class defined in your module, just refer to it as a normal property from the styles object, like
<header className={styles.header}>...</header> - When your application runs, the class names in the rendered DOM will be automatically mangled to prevent global conflicts. The runtime name will be something like name-header__23x42z5, instead of just header for example.
Another thing worth noticing, is that in the root folder, there is a file of specific importance copy-css-files.bash. What this file does, is that in copies all the css files and includes it into the folder being published into npm. Without this file, the css files would be excluded, as the typescript compiler does not include the files.
NB! It is worth noticing that CSS modules only scope the variables you have created your self. If you choose to change a html tag like h2, it will affect every h2 used in the project.