Skip to content

Commit 82126e9

Browse files
harshzalavadiyaharshzalavadiya
committed
refactor: ♻️ restored storybook
1 parent 7d0932e commit 82126e9

21 files changed

+9188
-107
lines changed

Diff for: ‎.eslintrc.cjs

+10-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
"plugin:@typescript-eslint/eslint-recommended",
1313
"plugin:@typescript-eslint/recommended",
1414
"plugin:react/recommended",
15+
"plugin:storybook/recommended",
1516
],
1617
rules: {
1718
"@typescript-eslint/ban-ts-comment": "off",
@@ -24,10 +25,17 @@ module.exports = {
2425
"@typescript-eslint/no-explicit-any": "off",
2526
"@typescript-eslint/no-unused-vars": [
2627
"error",
27-
{ ignoreRestSiblings: true },
28+
{
29+
ignoreRestSiblings: true,
30+
},
2831
],
2932
"no-case-declarations": "off",
30-
"no-console": ["error", { allow: ["warn", "error", "debug"] }],
33+
"no-console": [
34+
"error",
35+
{
36+
allow: ["warn", "error", "debug"],
37+
},
38+
],
3139
"no-useless-escape": "off",
3240
"prettier/prettier": "error",
3341
"react/display-name": "off",

Diff for: ‎.storybook/main.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
stories: [
3+
"../stories/**/*.stories.mdx",
4+
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
5+
],
6+
addons: [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials",
9+
{
10+
name: '@storybook/addon-docs',
11+
options: {
12+
configureJSX: true,
13+
transcludeMarkdown: true,
14+
},
15+
},
16+
],
17+
framework: "@storybook/react",
18+
};

Diff for: ‎.storybook/preview-head.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<style>
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
html,
7+
body,
8+
#root {
9+
height: 100%;
10+
font-family: sans-serif;
11+
}
12+
13+
.multi-select {
14+
max-width: 300px;
15+
}
16+
</style>

Diff for: ‎.storybook/preview.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: "^on[A-Z].*" },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
}

Diff for: ‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ yarn add react-multi-select-component # yarn
2323

2424
## 📦 Example
2525

26-
![Example](docs/images/preview.gif)
26+
![Example](https://user-images.githubusercontent.com/5774849/150685427-6025d7d3-ddfc-4787-a856-241c4cc100cb.gif)
2727

2828
```tsx
2929
import React, { useState } from "react";
@@ -55,7 +55,7 @@ const Example = () => {
5555
export default Example;
5656
```
5757

58-
More examples can be found [here ↗](./docs/recipes)
58+
More examples can be found [here ↗](https://react-multi-select-component.pages.dev/)
5959

6060
## 👀 Props
6161

Diff for: ‎package.json

+11-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"build": "tsup src/index.tsx --inject-style --minify --format esm,cjs --dts --external react",
1313
"dev": "tsup src/index.tsx --inject-style --format esm,cjs --watch --dts --external react",
1414
"lint": "eslint src --fix",
15-
"size": "size-limit"
15+
"size": "size-limit",
16+
"storybook": "start-storybook -p 6006",
17+
"build-storybook": "build-storybook"
1618
},
1719
"peerDependencies": {
1820
"react": "^16 || ^17",
@@ -21,6 +23,11 @@
2123
"dependencies": {},
2224
"devDependencies": {
2325
"@size-limit/preset-small-lib": "^7.0.5",
26+
"@storybook/addon-actions": "^6.4.14",
27+
"@storybook/addon-essentials": "^6.4.14",
28+
"@storybook/addon-knobs": "^6.4.0",
29+
"@storybook/addon-links": "^6.4.14",
30+
"@storybook/react": "^6.4.14",
2431
"@types/react": "^17.0.13",
2532
"@types/react-dom": "^17.0.8",
2633
"@typescript-eslint/eslint-plugin": "^5.10.0",
@@ -29,10 +36,13 @@
2936
"eslint-plugin-prettier": "^4.0.0",
3037
"eslint-plugin-react": "^7.28.0",
3138
"eslint-plugin-simple-import-sort": "^7.0.0",
39+
"eslint-plugin-storybook": "^0.5.6",
3240
"postcss": "^8.4.5",
3341
"prettier": "^2.5.1",
3442
"react": "^17.0.2",
43+
"react-dom": "^17.0.2",
3544
"size-limit": "^7.0.5",
45+
"storybook-addon-turbo-build": "^1.0.1",
3646
"tsup": "^5.10.1",
3747
"typescript": "^4.5.3"
3848
},

Diff for: ‎stories/basic.stories.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { boolean, text, withKnobs } from "@storybook/addon-knobs";
2+
import React, { useState } from "react";
3+
4+
import MultiSelect from "../src/multi-select";
5+
import { options } from "./constants";
6+
7+
export default {
8+
title: "Basic",
9+
decorators: [withKnobs],
10+
};
11+
12+
export const ExampleDefault = () => {
13+
const [selected, setSelected] = useState([]);
14+
15+
return (
16+
<div>
17+
<pre>{JSON.stringify(selected)}</pre>
18+
<MultiSelect
19+
options={options}
20+
hasSelectAll={boolean("hasSelectAll", true)}
21+
isLoading={boolean("isLoading", false)}
22+
shouldToggleOnHover={boolean("shouldToggleOnHover", false)}
23+
disableSearch={boolean("disableSearch", false)}
24+
value={selected}
25+
disabled={boolean("disabled", false)}
26+
onChange={setSelected}
27+
onMenuToggle={(s) => {
28+
console.debug("Select Toggle: ", s);
29+
}}
30+
labelledBy={text("labelledBy", "Select Fruits")}
31+
className={text("className", "multi-select")}
32+
/>
33+
</div>
34+
);
35+
};
36+
37+
ExampleDefault.story = {
38+
name: "Basic",
39+
};

Diff for: ‎stories/constants.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const options = [
2+
{ label: "Grapes 🍇", value: "grapes" },
3+
{ label: "Mango 🥭", value: "mango" },
4+
{ label: "Strawberry 🍓", value: "strawberry", disabled: true },
5+
{ label: "Watermelon 🍉", value: "watermelon" },
6+
{ label: "Pear 🍐", value: "pear" },
7+
{ label: "Apple 🍎", value: "apple" },
8+
{ label: "Tangerine 🍊", value: "tangerine" },
9+
{ label: "Pineapple 🍍", value: "pineapple" },
10+
{ label: "Peach 🍑", value: "peach" },
11+
];

Diff for: ‎stories/creatable-custom.stories.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { text, withKnobs } from "@storybook/addon-knobs";
2+
import React, { useState } from "react";
3+
4+
import MultiSelect from "../src/multi-select";
5+
6+
export default {
7+
title: "Creatable",
8+
decorators: [withKnobs],
9+
};
10+
11+
const INITIAL_OPTIONS = [
12+
{ label: "Grapes 🍇", value: "grapes" },
13+
{ label: "Mango 🥭", value: "mango", disabled: true },
14+
{ label: "Strawberry 🍓", value: "strawberry" },
15+
];
16+
17+
export const CreatableCustom = () => {
18+
/**
19+
* overrides default `onCreateOption` allows you to modify newly added option
20+
*/
21+
const handleNewField = (value) => ({
22+
label: value,
23+
value: value.toUpperCase(),
24+
});
25+
26+
const [selected, setSelected] = useState([]);
27+
28+
return (
29+
<div>
30+
<pre>{JSON.stringify(selected)}</pre>
31+
32+
<MultiSelect
33+
options={INITIAL_OPTIONS}
34+
value={selected}
35+
onChange={setSelected}
36+
labelledBy={text("labelledBy", "Select Fruits")}
37+
isCreatable={true}
38+
onCreateOption={handleNewField} // <--
39+
/>
40+
</div>
41+
);
42+
};
43+
44+
CreatableCustom.story = {
45+
name: "Creatable Custom onCreateOption",
46+
};

Diff for: ‎stories/creatable.stories.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { text, withKnobs } from "@storybook/addon-knobs";
2+
import React, { useState } from "react";
3+
4+
import MultiSelect from "../src/multi-select";
5+
6+
export default {
7+
title: "Creatable",
8+
decorators: [withKnobs],
9+
};
10+
11+
const INITIAL_OPTIONS = [
12+
{ label: "Grapes 🍇", value: "grapes" },
13+
{ label: "Mango 🥭", value: "mango", disabled: true },
14+
{ label: "Strawberry 🍓", value: "strawberry" },
15+
];
16+
17+
export const CreatableDefault = () => {
18+
const [selected, setSelected] = useState([]);
19+
20+
return (
21+
<div>
22+
<pre>{JSON.stringify(selected)}</pre>
23+
24+
<MultiSelect
25+
options={INITIAL_OPTIONS}
26+
value={selected}
27+
onChange={setSelected}
28+
labelledBy={text("labelledBy", "Select Fruits")}
29+
isCreatable={true}
30+
/>
31+
</div>
32+
);
33+
};
34+
35+
CreatableDefault.story = {
36+
name: "Creatable",
37+
};

Diff for: ‎stories/custom-arrow.stories.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { text, withKnobs } from "@storybook/addon-knobs";
2+
import React, { useState } from "react";
3+
4+
import MultiSelect from "../src/multi-select";
5+
import { options } from "./constants";
6+
7+
export default {
8+
title: "Custom Arrow",
9+
decorators: [withKnobs],
10+
};
11+
12+
export const ExampleCustomArrow = () => {
13+
const [selected, setSelected] = useState([]);
14+
15+
const ArrowRenderer = ({ expanded }) => <>{expanded ? "🦉" : "🦚"}</>;
16+
17+
const CustomClearIcon = () => <div>🤘</div>;
18+
19+
return (
20+
<div>
21+
<pre>{JSON.stringify(selected)}</pre>
22+
<MultiSelect
23+
options={options}
24+
value={selected}
25+
onChange={setSelected}
26+
labelledBy={text("labelledBy", "Select Fruits")}
27+
ArrowRenderer={ArrowRenderer}
28+
onMenuToggle={(isOpen) => console.debug("onMenuToggle", isOpen)}
29+
ClearIcon={<CustomClearIcon />}
30+
ClearSelectedIcon={<CustomClearIcon />}
31+
/>
32+
</div>
33+
);
34+
};
35+
36+
ExampleCustomArrow.story = {
37+
name: "Arrow",
38+
};

Diff for: ‎stories/custom-element-story.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.mso .dropdown-container {
2+
border: 0;
3+
display: inline-block;
4+
width: 100%;
5+
}
6+
7+
.mso .dropdown-container:focus-within {
8+
box-shadow: none;
9+
border-color: transparent;
10+
}
11+
12+
.mso .dropdown-heading {
13+
padding: 0;
14+
height: auto;
15+
}
16+
17+
.mso .dropdown-heading-dropdown-arrow {
18+
display: none;
19+
}

0 commit comments

Comments
 (0)