Commit Graph

58 Commits

Author SHA1 Message Date
Nathan Vasse
eb6692bf5e (react) add a design token for checkbox hover background
This was based on recent feedbacks to provide more granularity for
customization.

Resolve #59
2023-05-24 12:00:42 +02:00
Nathan Vasse
527c3fc0c9 (react) set specific cursor on checkbox related components
Even if this is not the default behavior of the native checkbox, based on
recent feedbacks and by comparing what other components libraries do, it
appears that setting a custom cursor on checkbox hover is the most
intuitive thing to do.

Resolve #59
2023-05-24 12:00:42 +02:00
Nathan Vasse
c53d34834c 📝(react) add customization doc
This part of the doc was a huge miss as it is often asked during
installation based on our recent feedbacks.
2023-05-24 11:10:13 +02:00
Nathan Vasse
e05c6b786c 🏷️(react) export DefaultToken types and defaultTokens variable
By doing this we provide more typings for consumers which makes more
handy the use of the local configuration in cunningham.ts files.
2023-05-24 11:10:13 +02:00
Nathan Vasse
bc15ced92f ♻️(react) rename docs to new format
Previously we were using .stories.mdx extension for docs but now
.mdx is the most recommend extension according to official Storybook
7 documentation.
2023-05-24 11:10:13 +02:00
Nathan Vasse
ce6eb50a98 ♻️(react) migrate ArgsTable to ArgTypes and rework imports
Storybook was emitting warnings errors about the fact that ArgsTable
is deprecated, and also I rewrote imports as those are not the one
used in the doc anymore, this will prevent breaking changes in the
upcoming upgrades.
2023-05-23 10:10:40 +02:00
Nathan Vasse
8cda41772d ♻️(react) fix Storybook source blocks
Due to the recent upgrade to Storybook 7, the source blocks of Canvases
were broken, they were only showing args. This was mainly due to the fact
that as of Storybook 7 the meta tags of the MDX files have changed, thus
causing the issue. These are now based on imports. We also needed to rename
index.stories.mdx files to index.mdx because Storybook was throwing errors,
maybe due to a conflicts with index.stories.tsx files and new imports.
Anyway this way of naming MDX files seems to be the recommend one based on
the official documentation.
2023-05-23 10:10:40 +02:00
Nathan Vasse
15eb9b9e57 🏷️(react) add missing types exports
We forgot to add exports for Checkbox and Radio.
2023-05-15 17:23:49 +02:00
Nathan Vasse
77721c3b6d ♻️(react) migrate to Storybook 7
This new release comes with breaking changes for stories and mdx docs.
2023-05-15 11:04:06 +02:00
Nathan Vasse
e7fc782b1c ♻️(react) migrate faker api
faker-js introduced breaking changes in their APIs, so we needed to migrate
our usages.
2023-05-15 11:04:06 +02:00
Nathan Vasse
2ff5fc5d29 (react) add Select component
Finally our powerful Select component is available to make great forms!
2023-05-12 11:13:38 +02:00
Nathan Vasse
270484c0e7 ♻️(react) make Input use LabelledBox
Let's use the power of reusability!
2023-05-12 11:13:38 +02:00
Nathan Vasse
df57fb8a57 ♻️(react) create a generic LabelledBox
This component is responsible to display the label as placeholder for forms
input. It was tied inside Input but now we will need to have the same ui
for Select field, by extracting it in a dedicated component we make it
reusable quickly.
2023-05-12 11:13:38 +02:00
Nathan Vasse
1d3b1456ca (react) add forwardRef to Button
This could be useful to everyone. But at the moment is was needed for the
Select field be able to use Downshift with Button.
2023-05-12 11:13:38 +02:00
Romain Le Cellier
b53afcb4af (react) add DataList
Implement DataList that is a wrapper of DataGrid without header, sorting
nor pagination.
2023-05-05 10:54:50 +02:00
Romain Le Cellier
0e6532f098 🎨(all) global lint
Executiing `yarn format` should not generate any changes in the
project.
Apply yarn format to all files.
2023-05-05 10:54:50 +02:00
Nathan Vasse
d4a574c30f 🔧(react) fix types file broken imports
Generated types for the react package were broken because they were
still using absolute imports which cannot work in standalone .d.ts
files because they cannot rely on the local baseUrl compiler option.
Thus, we introduced an alias that we are able to reliably replace
during type generation.
2023-05-04 16:53:29 +02:00
Nathan Vasse
edf4563e3e 🔧(demo) update tokens file
The existing file was a bit outdated, we regenerate them in order to
keep things as fresh as possible.
2023-04-27 15:34:15 +02:00
Nathan Vasse
f5cb2e791e (react) add Radio component
Implement Radio input based on designed sketches.
2023-04-27 15:34:15 +02:00
Nathan Vasse
43096e2bab (react) add Checkbox component
Implement Checkbox input based on designed sketches.
2023-04-27 15:34:15 +02:00
Nathan Vasse
a462bb5a61 (react) add compact mode to Field
The Field component was only able to display for large fields like
text input, but for small component like Checkbox or Radio we need
to set specific generic padding that are suitable to those.
2023-04-27 15:34:15 +02:00
Nathan Vasse
26be159c91 ♻️(react) make Pagination to use new Input
The Pagination component was not using the label of new Input.
2023-04-25 11:28:32 +02:00
Nathan Vasse
feea284ec8 (react) add Input component
Finally the first form component of the design system. It wraps and enhance
the native input element.
2023-04-25 11:28:32 +02:00
Nathan Vasse
4f1168463f (react) add generic Field component
This component will wrap most of form components in order to provide
them a generic state attribute along with texts below them.
2023-04-25 11:28:32 +02:00
Nathan Vasse
559c1e2cb7 (react) add jest-dom dependency
We want to be able to use convenience methods like "toBeInTheDocument".
2023-04-25 11:28:32 +02:00
jbpenrath
1be02f5a85 💄(react) remove button box shadow effect
On hover and active, buttons have a box shadow effect that is too heavy
visually so we remove this effect for now.
2023-04-21 11:33:46 +02:00
jbpenrath
72091eecbc 🩹(tokens) add blank line at end of token files
Cunningham CLI did not add a blank line at the end of generated
token files.
2023-04-18 14:59:16 +02:00
jbpenrath
cf325719d5 🩹(tokens) fix typo within cunningham.ts file
The fontSizes.h3 contained an extra ";" chars.
2023-04-18 14:59:16 +02:00
jbpenrath
b1925959fe ️(react) improve button accessibility
Rework buttons in order to improve accessibility by increasing color
contrast and shape change across states.
2023-04-12 17:21:19 +02:00
jbpenrath
b79c23da30 💫(tokens) change transitions timing functions
Increase duration by 50ms then switch to ease cubic timing function in
order to get smoother but enough speed transitions.
2023-04-12 17:21:19 +02:00
Nathan Vasse
994d42578e (react) add DataGrid, SimpleDataGrid components
The DataGrid component can be considered as the core one, which provides
a full controlled component, but more complicated than SimpleDataGrid
which is based on DataGrid. SimpleDataGrid is intended to give a simple
ready-to-use data grid for client side data for example.
2023-03-28 12:00:27 +02:00
Nathan Vasse
8e078c87c2 (react) add Loader component
The first use of this loader will be inside the DataGrid for its
loading state. Its colors are based on the existing primary
colors tokens.
2023-03-28 12:00:27 +02:00
Nathan Vasse
b84af99c36 (react) add a temporary Checkbox
We need a temporary Checkbox in order to implement the row
selection feature of the future DataGrid. This do not come
from designer sketches for now.
2023-03-28 12:00:27 +02:00
Nathan Vasse
88e478d9f6 (react) add Pagination component
In order to create a DataGrid we first need a fully working pagination
component. It comes with multiples working examples in the documentation.
2023-03-28 12:00:27 +02:00
Nathan Vasse
90feb4ba4a 🌐(react) add i18n
We need to be able to use localized texts for various components, like for
accessible labels. We decided to setup a lightweight implementation of
localizable to avoid relying on an existing heavy library.
The Provider includes by default full translations for english, and it is
also made to be able to load easily any custom locale directly from the
Provider.
2023-03-28 12:00:27 +02:00
Nathan Vasse
1df3b82571 (react) add a temporary TextInput
Even if we haven't started to work on a complete set of inputs
we need a generic Input to implement the "goto" feature on the
Pagination component. This component is not intended to be used
in by the librarie's dependent, so we mark it as "WIP" for the
moment.
2023-03-28 12:00:27 +02:00
Nathan Vasse
980c80c784 (react) add material icons
We need some icons to implement the Pagination and the DataGrid.
2023-03-28 12:00:27 +02:00
Nathan Vasse
05242ffbcd (react) add button sizes
Add two sizes for the Button component: small and medium. They
are present on the new delivered sketches concerning pagination
but dont exists yet.
2023-03-28 12:00:27 +02:00
Nathan Vasse
f3e3b568fc (react) add active state on button
Previously we had no way of forcing a button to render in
an active state.
2023-03-28 12:00:27 +02:00
jbpenrath
8bf13ae3ad ️(react) add aria-label property to the only icon button story
As this button has no label only an icon, the a11y checker reports us
that there is no accessible label for this component.
2023-02-28 10:29:23 +01:00
Nathan Vasse
2a5acea4a4 (tokens) css utility classes are now optionnal
Previously, when using the cunningham bin to build tokens, the CSS
file always included utility classes, resulting in duplicated CSS
utility classes on the consumer side if no specific CSS optimizer
is defined ( its local cunningham-tokens.css + the one from the
react package ). Now, this new feature introduces a param named
--utility-classes that must be provided to generate those classes.
This params is henceforth only provided to the bin inside the tokens
package.
2023-02-21 09:29:24 +01:00
Nathan Vasse
cd88e46537 ♻️(react) split fonts in a seperate CSS file
Fonts were de-facto included in the bundled dist/style.css file which
wasn't convenient in situations were consumers wanted to import fonts
by themselves.
2023-02-21 09:29:24 +01:00
Nathan Vasse
722b66b3ae (react) add button with icon only
Previously using Button with only an icon made it render with an
internal offset, that wasn't really nice-looking. Now we force the
button to be squared.
2023-02-15 16:00:14 +01:00
Nathan Vasse
63118d0f3e 📝(doc) update docs to install published packages + contributing guide
Updated various parts of existing documentations to make a clean path
to learn how to install the library. I let the most complicated part in
the tokens's README.md file, which is referenced from the Storybook.
2023-01-30 17:47:34 +01:00
Nathan Vasse
1529a5b5e7 📝(doc) fixing things in doc
During the keynote we saw some things to fix in the documentation.
2023-01-25 10:37:37 +01:00
Nathan Vasse
31d29d8cbf 📝(doc) fixing typo in colors doc
So it has not more typos.
2023-01-23 13:54:02 +01:00
Nathan Vasse
dd2a93ffdf 📝(doc) create a global category for Components
This way we ensure that the main categories of the Storybook docs
are well separated, improving readability.
2023-01-20 17:00:31 +01:00
Nathan Vasse
54fd376e91 📝(doc) create docs for utility classes
In order to showcase the utility classes, we needed to create
beautiful tokens-based docs !
2023-01-20 17:00:31 +01:00
Nathan Vasse
b908136224 (tokens) generate css utility classes
These were the missing parts in order to use every design tokens
of Cunningham. Including: spacing, font weight, size, family, and
colors. In order to be really versatile and to allow users to
define new design tokens I had to re-organize the way those tokens
are sub divided in sub objects in cunningham.ts file. That's why
sub division are created for theme.typ.sizes for instance.
2023-01-20 17:00:31 +01:00
Nathan Vasse
b07f9cc869 (react) add danger color to Button
We adding do's and don't to the documentation I realized that the
danger button was really important in some cases even if the style
was not delivered by designers. Example: Delete buttons.
2023-01-18 11:29:33 +01:00