Skip to content

Commit 621116f

Browse files
dougfabrisggazzo
dougfabris
and
ggazzo
authored
feat(fuselage-toastbar): ToastBar Component & Package (#707)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
1 parent f522d4f commit 621116f

36 files changed

+975
-24
lines changed

‎README.md

+24-23
Large diffs are not rendered by default.

‎packages/fuselage-toastbar/.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

‎packages/fuselage-toastbar/.eslintrc.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
extends: '@rocket.chat/eslint-config-alt/typescript',
3+
env: {
4+
jest: true,
5+
},
6+
rules: {
7+
'react/react-in-jsx-scope': 'off',
8+
},
9+
};

‎packages/fuselage-toastbar/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/dist

‎packages/fuselage-toastbar/.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

‎packages/fuselage-toastbar/.prettierrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@rocket.chat/prettier-config/fuselage');

‎packages/fuselage-toastbar/.storybook/logo.svg

+68
Loading

‎packages/fuselage-toastbar/.storybook/logo.svg.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare const path: string;
2+
3+
export = path;

‎packages/fuselage-toastbar/.storybook/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
addons: ['@storybook/addon-essentials', 'storybook-dark-mode/register'],
3+
stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'],
4+
features: {
5+
postcss: false,
6+
},
7+
};

‎packages/fuselage-toastbar/.storybook/manager.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import colorTokens from '@rocket.chat/fuselage-tokens/colors.json';
2+
import { addons } from '@storybook/addons';
3+
import { create } from '@storybook/theming';
4+
5+
import manifest from '../package.json';
6+
import logo from './logo.svg';
7+
8+
addons.setConfig({
9+
theme: create({
10+
base: 'light',
11+
brandTitle: manifest.name,
12+
brandImage: logo,
13+
brandUrl: manifest.homepage,
14+
colorPrimary: colorTokens.n500,
15+
colorSecondary: colorTokens.b500,
16+
}),
17+
});

‎packages/fuselage-toastbar/.storybook/preview.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
2+
import type { DecoratorFunction } from '@storybook/addons';
3+
import { addParameters } from '@storybook/react';
4+
import '@rocket.chat/icons/dist/rocketchat.css';
5+
import '@rocket.chat/fuselage-polyfills';
6+
import type { ElementType, ReactElement } from 'react';
7+
import { Suspense } from 'react';
8+
import { useDarkMode } from 'storybook-dark-mode';
9+
import ToastBarProvider from '../src/ToastBarProvider';
10+
import { DarkModeProvider } from '@rocket.chat/onboarding-ui';
11+
12+
addParameters({
13+
backgrounds: {
14+
grid: {
15+
cellSize: 4,
16+
cellAmount: 4,
17+
opacity: 0.5,
18+
},
19+
},
20+
docs: {
21+
container: DocsContainer,
22+
page: DocsPage,
23+
},
24+
options: {
25+
storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
26+
},
27+
});
28+
29+
export const decorators: DecoratorFunction<ReactElement>[] = [
30+
(Story: ElementType): ReactElement => {
31+
const dark = useDarkMode();
32+
33+
return (
34+
<Suspense fallback={null}>
35+
<DarkModeProvider forcedDarkMode={dark}>
36+
<ToastBarProvider>
37+
<Story />
38+
</ToastBarProvider>
39+
</DarkModeProvider>
40+
</Suspense>
41+
);
42+
},
43+
];

‎packages/fuselage-toastbar/README.md

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!--header-->
2+
3+
<p align="center">
4+
<a href="https://rocket.chat" title="Rocket.Chat">
5+
<img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
6+
</a>
7+
</p>
8+
9+
# `@rocket.chat/fuselage-toastbar`
10+
11+
---
12+
13+
[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage-toastbar/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage-toastbar) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-toastbar?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage-toastbar?style=flat-square)
14+
15+
![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-toastbar&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-toastbar&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-toastbar&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-toastbar?style=flat-square)
16+
17+
<!--/header-->
18+
19+
## Install
20+
21+
<!--install-->
22+
23+
Firstly, install the peer dependencies (prerequisites):
24+
25+
```sh
26+
npm i @rocket.chat/fuselage @rocket.chat/fuselage-polyfills react react-dom
27+
28+
# or, if you are using yarn:
29+
30+
yarn add @rocket.chat/fuselage @rocket.chat/fuselage-polyfills react react-dom
31+
```
32+
33+
Add `@rocket.chat/fuselage-toastbar` as a dependency:
34+
35+
```sh
36+
npm i @rocket.chat/fuselage-toastbar
37+
38+
# or, if you are using yarn:
39+
40+
yarn add @rocket.chat/fuselage-toastbar
41+
```
42+
43+
<!--/install-->
44+
45+
## Contributing
46+
47+
<!--contributing(msg)-->
48+
49+
Contributions, issues, and feature requests are welcome!<br />
50+
Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
51+
52+
<!--/contributing(msg)-->
53+
54+
### Building
55+
56+
As this package dependends on others in this monorepo, before anything run the following at the root directory:
57+
58+
<!--yarn(build)-->
59+
60+
```sh
61+
yarn build
62+
```
63+
64+
<!--/yarn(build)-->
65+
66+
### Linting
67+
68+
To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
69+
Before commiting, check if your code fits our style by running:
70+
71+
<!--yarn(lint)-->
72+
73+
```sh
74+
yarn lint
75+
```
76+
77+
<!--/yarn(lint)-->
78+
79+
Some linter warnings and errors can be automatically fixed:
80+
81+
<!--yarn(lint-and-fix)-->
82+
83+
```sh
84+
yarn lint-and-fix
85+
```
86+
87+
<!--/yarn(lint-and-fix)-->
88+
89+
### Running tests
90+
91+
Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
92+
93+
<!--yarn(test)-->
94+
95+
```sh
96+
yarn test
97+
```
98+
99+
<!--/yarn(test)-->

‎packages/fuselage-toastbar/babel.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: [
3+
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
4+
['@babel/plugin-proposal-private-methods', { loose: true }],
5+
['@babel/plugin-proposal-class-properties', { loose: true }],
6+
],
7+
};

‎packages/fuselage-toastbar/package.json

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"name": "@rocket.chat/fuselage-toastbar",
3+
"version": "0.31.10",
4+
"description": "",
5+
"author": {
6+
"name": "Rocket.Chat",
7+
"url": "https://rocket.chat/"
8+
},
9+
"homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme",
10+
"license": "MIT",
11+
"publishConfig": {
12+
"access": "public"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git",
17+
"directory": "packages/fuselage-toastbar"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
21+
},
22+
"main": "dist/cjs/index.js",
23+
"module": "dist/esm/index.js",
24+
"types": "dist/esm/index.d.ts",
25+
"files": [
26+
"/dist"
27+
],
28+
"scripts": {
29+
"build": "run-s .:build:clean .:build:esm .:build:cjs",
30+
".:build:clean": "rimraf dist",
31+
".:build:esm": "tsc -p tsconfig-esm.json",
32+
".:build:cjs": "tsc -p tsconfig-cjs.json",
33+
"lint": "lint",
34+
"lint-and-fix": "lint-and-fix",
35+
"lint-staged": "lint-staged",
36+
"test": "jest --runInBand",
37+
"docs": "typedoc",
38+
"storybook": "start-storybook -p 6006",
39+
"build-storybook": "build-storybook"
40+
},
41+
"peerDependencies": {
42+
"@rocket.chat/fuselage": "*",
43+
"@rocket.chat/fuselage-polyfills": "*",
44+
"react": "^17.0.2",
45+
"react-dom": "^17.0.2"
46+
},
47+
"dependencies": {
48+
"@rocket.chat/fuselage-hooks": "workspace:~",
49+
"@rocket.chat/styled": "workspace:~"
50+
},
51+
"devDependencies": {
52+
"@rocket.chat/eslint-config-alt": "workspace:~",
53+
"@rocket.chat/onboarding-ui": "workspace:~",
54+
"@rocket.chat/prettier-config": "workspace:~",
55+
"@storybook/addon-essentials": "~6.4.18",
56+
"@storybook/addons": "~6.4.18",
57+
"@storybook/react": "~6.4.18",
58+
"@storybook/source-loader": "~6.4.18",
59+
"@storybook/theming": "~6.4.18",
60+
"@types/jest": "~27.4.0",
61+
"eslint": "~8.8.0",
62+
"jest": "~27.5.1",
63+
"lint-all": "workspace:~",
64+
"lint-staged": "~12.3.3",
65+
"npm-run-all": "^4.1.5",
66+
"prettier": "~2.5.1",
67+
"rimraf": "~3.0.2",
68+
"storybook-dark-mode": "~1.1.0",
69+
"ts-jest": "~27.1.3",
70+
"typedoc": "~0.22.11",
71+
"typescript": "~4.3.5"
72+
},
73+
"eslintConfig": {
74+
"extends": "@rocket.chat/eslint-config-alt/typescript",
75+
"env": {
76+
"jest": true
77+
}
78+
},
79+
"prettier": "@rocket.chat/prettier-config/fuselage",
80+
"jest": {
81+
"preset": "ts-jest",
82+
"errorOnDeprecated": true,
83+
"testMatch": [
84+
"<rootDir>/src/**/*.spec.[jt]s?(x)"
85+
],
86+
"testEnvironment": "jsdom",
87+
"globals": {
88+
"ts-jest": {
89+
"tsconfig": {
90+
"noUnusedLocals": false,
91+
"noUnusedParameters": false
92+
}
93+
}
94+
}
95+
}
96+
}

‎packages/fuselage-toastbar/src/ToastBar.spec.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ToastBar } from '@rocket.chat/fuselage';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<ToastBar />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

0 commit comments

Comments
 (0)