arengibook 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index-D8b4DHJx.css +1 -0
- package/dist/assets/index-DEHK2vBv.js +41 -0
- package/{index.html → dist/index.html} +2 -1
- package/dist/index.js +14844 -0
- package/package.json +6 -1
- package/.storybook/main.js +0 -20
- package/.storybook/preview.js +0 -18
- package/.storybook/vitest.setup.js +0 -9
- package/rollup.config.js +0 -28
- package/src/App.css +0 -42
- package/src/App.jsx +0 -35
- package/src/index.css +0 -68
- package/src/index.js +0 -5
- package/src/main.jsx +0 -10
- package/src/stories/Button.jsx +0 -45
- package/src/stories/Button.stories.js +0 -71
- package/src/stories/Configure.mdx +0 -364
- package/src/stories/DatePicker.jsx +0 -40
- package/src/stories/DatePicker.stories.jsx +0 -62
- package/src/stories/Header.jsx +0 -56
- package/src/stories/Header.stories.js +0 -29
- package/src/stories/Page.jsx +0 -69
- package/src/stories/Page.stories.js +0 -28
- package/src/stories/assets/accessibility.png +0 -0
- package/src/stories/assets/accessibility.svg +0 -1
- package/src/stories/assets/addon-library.png +0 -0
- package/src/stories/assets/assets.png +0 -0
- package/src/stories/assets/avif-test-image.avif +0 -0
- package/src/stories/assets/context.png +0 -0
- package/src/stories/assets/discord.svg +0 -1
- package/src/stories/assets/docs.png +0 -0
- package/src/stories/assets/figma-plugin.png +0 -0
- package/src/stories/assets/github.svg +0 -1
- package/src/stories/assets/share.png +0 -0
- package/src/stories/assets/styling.png +0 -0
- package/src/stories/assets/testing.png +0 -0
- package/src/stories/assets/theming.png +0 -0
- package/src/stories/assets/tutorials.svg +0 -1
- package/src/stories/assets/youtube.svg +0 -1
- package/src/stories/button.css +0 -30
- package/src/stories/header.css +0 -32
- package/src/stories/page.css +0 -68
- /package/{src/assets/react.svg → dist/assets/react-CHdo91hT.svg} +0 -0
- /package/{public → dist}/vite.svg +0 -0
package/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "arengibook",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
5
9
|
"type": "module",
|
|
6
10
|
"scripts": {
|
|
7
11
|
"dev": "vite",
|
|
@@ -12,6 +16,7 @@
|
|
|
12
16
|
"build-storybook": "storybook build"
|
|
13
17
|
},
|
|
14
18
|
"dependencies": {
|
|
19
|
+
"arengibook": "^0.0.2",
|
|
15
20
|
"classnames": "^2.5.1",
|
|
16
21
|
"primeicons": "^7.0.0",
|
|
17
22
|
"primereact": "^10.9.4",
|
package/.storybook/main.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/** @type { import('@storybook/react-vite').StorybookConfig } */
|
|
4
|
-
const config = {
|
|
5
|
-
"stories": [
|
|
6
|
-
"../src/**/*.mdx",
|
|
7
|
-
"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
|
|
8
|
-
],
|
|
9
|
-
"addons": [
|
|
10
|
-
"@storybook/addon-essentials",
|
|
11
|
-
"@storybook/addon-onboarding",
|
|
12
|
-
"@chromatic-com/storybook",
|
|
13
|
-
"@storybook/experimental-addon-test"
|
|
14
|
-
],
|
|
15
|
-
"framework": {
|
|
16
|
-
"name": "@storybook/react-vite",
|
|
17
|
-
"options": {}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
export default config;
|
package/.storybook/preview.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import 'primereact/resources/themes/lara-light-indigo/theme.css'; // ou autre thème
|
|
2
|
-
import 'primereact/resources/primereact.min.css';
|
|
3
|
-
import 'primeicons/primeicons.css';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/** @type { import('@storybook/react').Preview } */
|
|
7
|
-
const preview = {
|
|
8
|
-
parameters: {
|
|
9
|
-
controls: {
|
|
10
|
-
matchers: {
|
|
11
|
-
color: /(background|color)$/i,
|
|
12
|
-
date: /Date$/i,
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export default preview;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { beforeAll } from 'vitest';
|
|
2
|
-
import { setProjectAnnotations } from '@storybook/react';
|
|
3
|
-
import * as projectAnnotations from './preview';
|
|
4
|
-
|
|
5
|
-
// This is an important step to apply the right configuration when testing your stories.
|
|
6
|
-
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
|
7
|
-
const project = setProjectAnnotations([projectAnnotations]);
|
|
8
|
-
|
|
9
|
-
beforeAll(project.beforeAll);
|
package/rollup.config.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import resolve from '@rollup/plugin-node-resolve';
|
|
2
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
-
import babel from '@rollup/plugin-babel';
|
|
4
|
-
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
|
|
5
|
-
import postcss from 'rollup-plugin-postcss';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
input: 'src/index.js', // ou ton point d'entrée de composants
|
|
9
|
-
output: {
|
|
10
|
-
file: 'dist/index.js',
|
|
11
|
-
format: 'cjs', // ou 'esm' selon ce que supporte le projet principal
|
|
12
|
-
exports: 'named'
|
|
13
|
-
},
|
|
14
|
-
plugins: [
|
|
15
|
-
peerDepsExternal(),
|
|
16
|
-
postcss(),
|
|
17
|
-
resolve(),
|
|
18
|
-
commonjs(),
|
|
19
|
-
babel({
|
|
20
|
-
babelHelpers: 'bundled',
|
|
21
|
-
exclude: 'node_modules/**',
|
|
22
|
-
presets: [
|
|
23
|
-
['@babel/preset-env', { targets: { node: '8' } }],
|
|
24
|
-
'@babel/preset-react'
|
|
25
|
-
]
|
|
26
|
-
})
|
|
27
|
-
]
|
|
28
|
-
};
|
package/src/App.css
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
#root {
|
|
2
|
-
max-width: 1280px;
|
|
3
|
-
margin: 0 auto;
|
|
4
|
-
padding: 2rem;
|
|
5
|
-
text-align: center;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.logo {
|
|
9
|
-
height: 6em;
|
|
10
|
-
padding: 1.5em;
|
|
11
|
-
will-change: filter;
|
|
12
|
-
transition: filter 300ms;
|
|
13
|
-
}
|
|
14
|
-
.logo:hover {
|
|
15
|
-
filter: drop-shadow(0 0 2em #646cffaa);
|
|
16
|
-
}
|
|
17
|
-
.logo.react:hover {
|
|
18
|
-
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@keyframes logo-spin {
|
|
22
|
-
from {
|
|
23
|
-
transform: rotate(0deg);
|
|
24
|
-
}
|
|
25
|
-
to {
|
|
26
|
-
transform: rotate(360deg);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
31
|
-
a:nth-of-type(2) .logo {
|
|
32
|
-
animation: logo-spin infinite 20s linear;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.card {
|
|
37
|
-
padding: 2em;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.read-the-docs {
|
|
41
|
-
color: #888;
|
|
42
|
-
}
|
package/src/App.jsx
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react'
|
|
2
|
-
import reactLogo from './assets/react.svg'
|
|
3
|
-
import viteLogo from '/vite.svg'
|
|
4
|
-
import './App.css'
|
|
5
|
-
|
|
6
|
-
function App() {
|
|
7
|
-
const [count, setCount] = useState(0)
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<>
|
|
11
|
-
<div>
|
|
12
|
-
<a href="https://vite.dev" target="_blank">
|
|
13
|
-
<img src={viteLogo} className="logo" alt="Vite logo" />
|
|
14
|
-
</a>
|
|
15
|
-
<a href="https://react.dev" target="_blank">
|
|
16
|
-
<img src={reactLogo} className="logo react" alt="React logo" />
|
|
17
|
-
</a>
|
|
18
|
-
</div>
|
|
19
|
-
<h1>Vite + React</h1>
|
|
20
|
-
<div className="card">
|
|
21
|
-
<button onClick={() => setCount((count) => count + 1)}>
|
|
22
|
-
count is {count}
|
|
23
|
-
</button>
|
|
24
|
-
<p>
|
|
25
|
-
Edit <code>src/App.jsx</code> and save to test HMR
|
|
26
|
-
</p>
|
|
27
|
-
</div>
|
|
28
|
-
<p className="read-the-docs">
|
|
29
|
-
Click on the Vite and React logos to learn more
|
|
30
|
-
</p>
|
|
31
|
-
</>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export default App
|
package/src/index.css
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
-
line-height: 1.5;
|
|
4
|
-
font-weight: 400;
|
|
5
|
-
|
|
6
|
-
color-scheme: light dark;
|
|
7
|
-
color: rgba(255, 255, 255, 0.87);
|
|
8
|
-
background-color: #242424;
|
|
9
|
-
|
|
10
|
-
font-synthesis: none;
|
|
11
|
-
text-rendering: optimizeLegibility;
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
-moz-osx-font-smoothing: grayscale;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
a {
|
|
17
|
-
font-weight: 500;
|
|
18
|
-
color: #646cff;
|
|
19
|
-
text-decoration: inherit;
|
|
20
|
-
}
|
|
21
|
-
a:hover {
|
|
22
|
-
color: #535bf2;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
body {
|
|
26
|
-
margin: 0;
|
|
27
|
-
display: flex;
|
|
28
|
-
place-items: center;
|
|
29
|
-
min-width: 320px;
|
|
30
|
-
min-height: 100vh;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
h1 {
|
|
34
|
-
font-size: 3.2em;
|
|
35
|
-
line-height: 1.1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
button {
|
|
39
|
-
border-radius: 8px;
|
|
40
|
-
border: 1px solid transparent;
|
|
41
|
-
padding: 0.6em 1.2em;
|
|
42
|
-
font-size: 1em;
|
|
43
|
-
font-weight: 500;
|
|
44
|
-
font-family: inherit;
|
|
45
|
-
background-color: #1a1a1a;
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
transition: border-color 0.25s;
|
|
48
|
-
}
|
|
49
|
-
button:hover {
|
|
50
|
-
border-color: #646cff;
|
|
51
|
-
}
|
|
52
|
-
button:focus,
|
|
53
|
-
button:focus-visible {
|
|
54
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@media (prefers-color-scheme: light) {
|
|
58
|
-
:root {
|
|
59
|
-
color: #213547;
|
|
60
|
-
background-color: #ffffff;
|
|
61
|
-
}
|
|
62
|
-
a:hover {
|
|
63
|
-
color: #747bff;
|
|
64
|
-
}
|
|
65
|
-
button {
|
|
66
|
-
background-color: #f9f9f9;
|
|
67
|
-
}
|
|
68
|
-
}
|
package/src/index.js
DELETED
package/src/main.jsx
DELETED
package/src/stories/Button.jsx
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
|
|
5
|
-
import './button.css';
|
|
6
|
-
|
|
7
|
-
/** Primary UI component for user interaction */
|
|
8
|
-
export const Button = ({
|
|
9
|
-
primary = false,
|
|
10
|
-
backgroundColor = null,
|
|
11
|
-
borderRadius = 10,
|
|
12
|
-
size = 'medium',
|
|
13
|
-
label,
|
|
14
|
-
...props
|
|
15
|
-
}) => {
|
|
16
|
-
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
17
|
-
return (
|
|
18
|
-
<button
|
|
19
|
-
type="button"
|
|
20
|
-
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
|
21
|
-
style={{
|
|
22
|
-
backgroundColor,
|
|
23
|
-
borderRadius,
|
|
24
|
-
}}
|
|
25
|
-
{...props}
|
|
26
|
-
>
|
|
27
|
-
{label}
|
|
28
|
-
</button>
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
Button.propTypes = {
|
|
33
|
-
/** Is this the principal call to action on the page? */
|
|
34
|
-
primary: PropTypes.bool,
|
|
35
|
-
/** What background color to use */
|
|
36
|
-
backgroundColor: PropTypes.string,
|
|
37
|
-
/** How large should the button be? */
|
|
38
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
39
|
-
/** Button contents */
|
|
40
|
-
label: PropTypes.string.isRequired,
|
|
41
|
-
/** Optional click handler */
|
|
42
|
-
onClick: PropTypes.func,
|
|
43
|
-
/** Je test mon border-radius */
|
|
44
|
-
borderRadius: PropTypes.number
|
|
45
|
-
};
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { fn } from '@storybook/test';
|
|
2
|
-
|
|
3
|
-
import { Button } from './Button';
|
|
4
|
-
|
|
5
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Example/Button',
|
|
8
|
-
component: Button,
|
|
9
|
-
parameters: {
|
|
10
|
-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
11
|
-
layout: 'centered',
|
|
12
|
-
},
|
|
13
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
14
|
-
tags: ['autodocs'],
|
|
15
|
-
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
16
|
-
argTypes: {
|
|
17
|
-
backgroundColor: { control: 'color' },
|
|
18
|
-
borderRadius: { control: 'number' },
|
|
19
|
-
},
|
|
20
|
-
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
|
21
|
-
args: { onClick: fn() },
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
25
|
-
export const Primary = {
|
|
26
|
-
args: {
|
|
27
|
-
primary: false,
|
|
28
|
-
label: 'camille',
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export const Secondary = {
|
|
33
|
-
args: {
|
|
34
|
-
label: 'Button',
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export const Large = {
|
|
39
|
-
args: {
|
|
40
|
-
size: 'large',
|
|
41
|
-
label: 'Button',
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export const Small = {
|
|
46
|
-
args: {
|
|
47
|
-
size: 'small',
|
|
48
|
-
label: 'Button',
|
|
49
|
-
borderRadius: 25
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const Validate = {
|
|
54
|
-
args: {
|
|
55
|
-
size: 'small',
|
|
56
|
-
label: 'Validate',
|
|
57
|
-
backgroundColor: "#3ce10a",
|
|
58
|
-
borderRadius: 12,
|
|
59
|
-
primary: true
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export const Patate = {
|
|
64
|
-
args: {
|
|
65
|
-
primary: false,
|
|
66
|
-
label: "camille",
|
|
67
|
-
size: "medium",
|
|
68
|
-
backgroundColor: "#b72727",
|
|
69
|
-
borderRadius: 50
|
|
70
|
-
}
|
|
71
|
-
};
|