📦(all) update packages namespace
Change packages namespace from `@openfun` to `@gouvfr-lasuite`.
This commit is contained in:
committed by
Jean-Baptiste PENRATH
parent
6097929593
commit
a6681d19ed
@@ -44,7 +44,7 @@ See the [documentation](https://suitenumerique.github.io/cunningham/storybook)
|
|||||||
➡️ First, install the library
|
➡️ First, install the library
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn add @openfun/cunningham-react
|
yarn add @gouvfr-lasuite/cunningham-react
|
||||||
```
|
```
|
||||||
|
|
||||||
➡️ Then, add this script to your `package.json` file
|
➡️ Then, add this script to your `package.json` file
|
||||||
@@ -68,9 +68,9 @@ It will generate a file named `cunningham-tokens.css`.
|
|||||||
➡️ Then, add these lines at the top of your main stylesheet file:
|
➡️ Then, add these lines at the top of your main stylesheet file:
|
||||||
|
|
||||||
```
|
```
|
||||||
@import "@openfun/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
|
@import "@gouvfr-lasuite/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
|
||||||
@import "@openfun/cunningham-react/icons"; // Imports icons ( Material Icons ).
|
@import "@gouvfr-lasuite/cunningham-react/icons"; // Imports icons ( Material Icons ).
|
||||||
@import "@openfun/cunningham-react/style"; // Imports the default theme.
|
@import "@gouvfr-lasuite/cunningham-react/style"; // Imports the default theme.
|
||||||
@import "cunningham-tokens"; // Imports the file you just generated.
|
@import "cunningham-tokens"; // Imports the file you just generated.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defaultThemes } from "@openfun/cunningham-tokens";
|
import { defaultThemes } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
const defaultConfig = {
|
const defaultConfig = {
|
||||||
themes: {
|
themes: {
|
||||||
|
|||||||
@@ -13,9 +13,9 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@faker-js/faker": "9.7.0",
|
"@faker-js/faker": "9.7.0",
|
||||||
"@openfun/cunningham-react": "*",
|
"@gouvfr-lasuite/cunningham-react": "*",
|
||||||
"@openfun/cunningham-tokens": "*",
|
"@gouvfr-lasuite/cunningham-tokens": "*",
|
||||||
"@openfun/typescript-configs": "*",
|
"@gouvfr-lasuite/typescript-configs": "*",
|
||||||
"@types/react": "19.1.2",
|
"@types/react": "19.1.2",
|
||||||
"@types/react-dom": "19.1.3",
|
"@types/react-dom": "19.1.3",
|
||||||
"@vitejs/plugin-react": "4.4.1",
|
"@vitejs/plugin-react": "4.4.1",
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import {
|
|||||||
CunninghamProvider,
|
CunninghamProvider,
|
||||||
Select,
|
Select,
|
||||||
useModal,
|
useModal,
|
||||||
} from "@openfun/cunningham-react";
|
} from "@gouvfr-lasuite/cunningham-react";
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
import { Create } from "./Create";
|
import { Create } from "./Create";
|
||||||
import { Home } from "./Home";
|
import { Home } from "./Home";
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
TextArea,
|
TextArea,
|
||||||
useToastProvider,
|
useToastProvider,
|
||||||
VariantType,
|
VariantType,
|
||||||
} from "@openfun/cunningham-react";
|
} from "@gouvfr-lasuite/cunningham-react";
|
||||||
import { faker } from "@faker-js/faker";
|
import { faker } from "@faker-js/faker";
|
||||||
import { PageProps } from "./App";
|
import { PageProps } from "./App";
|
||||||
import { Character, database, randomDates } from "./Character";
|
import { Character, database, randomDates } from "./Character";
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
useToastProvider,
|
useToastProvider,
|
||||||
VariantType,
|
VariantType,
|
||||||
useModals,
|
useModals,
|
||||||
} from "@openfun/cunningham-react";
|
} from "@gouvfr-lasuite/cunningham-react";
|
||||||
import { PageProps } from "./App";
|
import { PageProps } from "./App";
|
||||||
import { database } from "./Character";
|
import { database } from "./Character";
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Button, Modal, ModalSize, useModal } from "@openfun/cunningham-react";
|
import { Button, Modal, ModalSize, useModal } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const Onboarding = () => {
|
const Onboarding = () => {
|
||||||
const modal = useModal({
|
const modal = useModal({
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "@openfun/cunningham-react/sass/fonts";
|
@use "@gouvfr-lasuite/cunningham-react/sass/fonts";
|
||||||
@use "@openfun/cunningham-react/sass/icons";
|
@use "@gouvfr-lasuite/cunningham-react/sass/icons";
|
||||||
@use "@openfun/cunningham-react/style";
|
@use "@gouvfr-lasuite/cunningham-react/style";
|
||||||
@use "cunningham-tokens";
|
@use "cunningham-tokens";
|
||||||
@use "cunningham-tokens-sass" as *;
|
@use "cunningham-tokens-sass" as *;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": "@openfun/typescript-configs/react.json",
|
"extends": "@gouvfr-lasuite/typescript-configs/react.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"noEmit": true
|
"noEmit": true
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# @openfun/cunningham-react
|
# @gouvfr-lasuite/cunningham-react
|
||||||
|
|
||||||
## 4.0.0
|
## 4.0.0
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { dirname, sep } from "path";
|
import { dirname, sep } from "path";
|
||||||
import { defaultTokenRefs } from "@openfun/cunningham-tokens";
|
import { defaultTokenRefs } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
import { globSync } from "glob";
|
import { globSync } from "glob";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@openfun/cunningham-react",
|
"name": "@gouvfr-lasuite/cunningham-react",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
"@fontsource-variable/roboto-flex": "5.2.5",
|
"@fontsource-variable/roboto-flex": "5.2.5",
|
||||||
"@fontsource/material-icons-outlined": "5.2.5",
|
"@fontsource/material-icons-outlined": "5.2.5",
|
||||||
"@internationalized/date": "3.8.0",
|
"@internationalized/date": "3.8.0",
|
||||||
"@openfun/cunningham-tokens": "*",
|
"@gouvfr-lasuite/cunningham-tokens": "*",
|
||||||
"@react-aria/calendar": "3.8.0",
|
"@react-aria/calendar": "3.8.0",
|
||||||
"@react-aria/datepicker": "3.14.2",
|
"@react-aria/datepicker": "3.14.2",
|
||||||
"@react-aria/i18n": "3.12.8",
|
"@react-aria/i18n": "3.12.8",
|
||||||
@@ -76,8 +76,8 @@
|
|||||||
"@chromatic-com/storybook": "3.2.6",
|
"@chromatic-com/storybook": "3.2.6",
|
||||||
"@faker-js/faker": "9.7.0",
|
"@faker-js/faker": "9.7.0",
|
||||||
"@hookform/resolvers": "5.0.1",
|
"@hookform/resolvers": "5.0.1",
|
||||||
"@openfun/cunningham-tokens": "*",
|
"@gouvfr-lasuite/cunningham-tokens": "*",
|
||||||
"@openfun/typescript-configs": "*",
|
"@gouvfr-lasuite/typescript-configs": "*",
|
||||||
"@storybook/addon-a11y": "8.6.12",
|
"@storybook/addon-a11y": "8.6.12",
|
||||||
"@storybook/addon-actions": "8.6.12",
|
"@storybook/addon-actions": "8.6.12",
|
||||||
"@storybook/addon-essentials": "8.6.12",
|
"@storybook/addon-essentials": "8.6.12",
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ Cunningham provides a versatile Alert component for displaying any kind of infor
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { Alert } from "@openfun/cunningham-react";`}
|
code={`import { Alert } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Types
|
## Types
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => {
|
export const tokens = (defaults: DefaultTokens) => {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ The Cunningham Button behaves the same as the native html `<button>` element, bu
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { Button } from "@openfun/cunningham-react";`}
|
code={`import { Button } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Icons
|
## Icons
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => {
|
export const tokens = (defaults: DefaultTokens) => {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ We will explore the possibilities that those props provide through the following
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { DataList } from "@openfun/cunningham-react";`}
|
code={`import { DataList } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
This component is a wrapper around the more complicated DataGrid component. It is made to be used for simple lists of elements that don't need pagination nor sorting. Also, it doesn't display any header.
|
This component is a wrapper around the more complicated DataGrid component. It is made to be used for simple lists of elements that don't need pagination nor sorting. Also, it doesn't display any header.
|
||||||
@@ -50,7 +50,7 @@ Here a quick usage example
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { SimpleDataGrid } from "@openfun/cunningham-react";`}
|
code={`import { SimpleDataGrid } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
This component is a wrapper around the more complicated `DataGrid` component. It is mostly intended to be used for client
|
This component is a wrapper around the more complicated `DataGrid` component. It is mostly intended to be used for client
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"background-color--hover":
|
"background-color--hover":
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
width: "292px",
|
width: "292px",
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ Cunningham provides a file uploader component that you can use in your forms.
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { FileUploader } from "@openfun/cunningham-react";`}
|
code={`import { FileUploader } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Multi
|
## Multi
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"background-color": defaults.contextuals.background.surface.primary,
|
"background-color": defaults.contextuals.background.surface.primary,
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ Cunningham provides a versatile Input component that you can use in your forms.
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { Input } from "@openfun/cunningham-react";`}
|
code={`import { Input } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## States
|
## States
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"font-weight": defaults.globals.font.weights.regular,
|
"font-weight": defaults.globals.font.weights.regular,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"label-color--small": defaults.contextuals.content.semantic.neutral.tertiary,
|
"label-color--small": defaults.contextuals.content.semantic.neutral.tertiary,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"accent-color": defaults.contextuals.content.semantic.brand.tertiary,
|
"accent-color": defaults.contextuals.content.semantic.brand.tertiary,
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ Cunningham provides a versatile TextArea component that you can use in your form
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { TextArea } from "@openfun/cunningham-react";`}
|
code={`import { TextArea } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## States
|
## States
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => ({
|
export const tokens = (defaults: DefaultTokens) => ({
|
||||||
"font-weight": defaults.globals.font.weights.regular,
|
"font-weight": defaults.globals.font.weights.regular,
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ Cunningham provides a versatile Modal component for displaying any kind of infor
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { Modal } from "@openfun/cunningham-react";`}
|
code={`import { Modal } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
> ⚠️ If you want to try dark theme on the modal, you need to go on individual stories. It will not work on this page due to iframe wrapping.
|
> ⚠️ If you want to try dark theme on the modal, you need to go on individual stories. It will not work on this page due to iframe wrapping.
|
||||||
@@ -29,7 +29,7 @@ The component is easy to use. You need to use the `useModal()` hook to get all t
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
import { CunninghamProvider, Button, Modal } from "@openfun/cunningham-react";
|
import { CunninghamProvider, Button, Modal } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const modal = useModal();
|
const modal = useModal();
|
||||||
@@ -67,7 +67,7 @@ Here is an example of a modal automatically closing after 2 seconds.
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
import { CunninghamProvider, Button, Modal } from "@openfun/cunningham-react";
|
import { CunninghamProvider, Button, Modal } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const modal = useModal();
|
const modal = useModal();
|
||||||
@@ -169,7 +169,7 @@ The way you will be able to use those pre built modals is by using async calls t
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
import { CunninghamProvider, Button, Modal } from "@openfun/cunningham-react";
|
import { CunninghamProvider, Button, Modal } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const modals = useModals();
|
const modals = useModals();
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => {
|
export const tokens = (defaults: DefaultTokens) => {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ fetch it from a server, the component is really versatile.
|
|||||||
language='ts'
|
language='ts'
|
||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`import { Pagination, usePagination } from "@openfun/cunningham-react";`}
|
code={`import { Pagination, usePagination } from "@gouvfr-lasuite/cunningham-react";`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ Toasts are really simple to use, you need to wrap your app inside `CunninghamPro
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
import { CunninghamProvider } from "@openfun/cunningham-react";
|
import { CunninghamProvider } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const App = () => (
|
const App = () => (
|
||||||
<CunninghamProvider>
|
<CunninghamProvider>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => {
|
export const tokens = (defaults: DefaultTokens) => {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DefaultTokens } from "@openfun/cunningham-tokens";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-tokens";
|
||||||
|
|
||||||
export const tokens = (defaults: DefaultTokens) => {
|
export const tokens = (defaults: DefaultTokens) => {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ If you prefer using Typescript, create a file named `cunningham.ts` at the root
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
@@ -98,7 +98,7 @@ For our example we focus on the `border-radius` design token. Now, incorporate t
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
@@ -133,12 +133,12 @@ If you find out that the current design tokens are not enough for the customizat
|
|||||||
|
|
||||||
## Use default design tokens
|
## Use default design tokens
|
||||||
|
|
||||||
If you want to use the default design tokens, you can import them from the `@openfun/cunningham-react` package. For example,
|
If you want to use the default design tokens, you can import them from the `@gouvfr-lasuite/cunningham-react` package. For example,
|
||||||
let's say we want keep the same border radius when the `Button` component is active without hard-coding it, we can do the following:
|
let's say we want keep the same border radius when the `Button` component is active without hard-coding it, we can do the following:
|
||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";
|
import { defaultTokens, DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
@@ -165,7 +165,7 @@ You can also use more global design tokens from `defaultTokens.globals` and `def
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";
|
import { defaultTokens, DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ Let's create an `App` component that will render a `Button`.
|
|||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
CunninghamProvider
|
CunninghamProvider
|
||||||
} from "@openfun/cunningham-react";
|
} from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
export const MyApp = () => {
|
export const MyApp = () => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ First, install the library
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
yarn add @openfun/cunningham-react
|
yarn add @gouvfr-lasuite/cunningham-react
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -53,9 +53,9 @@ Then, add these lines at the top of your main stylesheet file:
|
|||||||
dark
|
dark
|
||||||
format={false}
|
format={false}
|
||||||
code={`
|
code={`
|
||||||
@use "@openfun/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
|
@use "@gouvfr-lasuite/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
|
||||||
@use "@openfun/cunningham-react/icons"; // Imports icons ( Material Icons ).
|
@use "@gouvfr-lasuite/cunningham-react/icons"; // Imports icons ( Material Icons ).
|
||||||
@use "@openfun/cunningham-react/style"; // Imports the default theme.
|
@use "@gouvfr-lasuite/cunningham-react/style"; // Imports the default theme.
|
||||||
@use "cunningham-tokens"; // Imports the file you just generated.
|
@use "cunningham-tokens"; // Imports the file you just generated.
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ As a reminder here is the v1 format of the `cunningham.ts` file:
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
theme: {
|
theme: {
|
||||||
@@ -38,7 +38,7 @@ the new format of the previous example will be:
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
|
|||||||
@@ -186,7 +186,7 @@ First, update your `package.json` to use version 4.0.0:
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@openfun/cunningham-react": "^4.0.0"
|
"@gouvfr-lasuite/cunningham-react": "^4.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ with a `MyApp` component.
|
|||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
CunninghamProvider
|
CunninghamProvider
|
||||||
} from "@openfun/cunningham-react";
|
} from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
export const MyApp = () => {
|
export const MyApp = () => {
|
||||||
const [theme, setTheme] = useState("default");
|
const [theme, setTheme] = useState("default");
|
||||||
@@ -63,7 +63,7 @@ that in all the examples you had to wrap the modifications inside the following
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
@@ -82,7 +82,7 @@ the dark theme you have to provide the `dark` key accordingly
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
@@ -107,7 +107,7 @@ The logic is the same as what we saw previously. Just add a new key inside the `
|
|||||||
|
|
||||||
<Source dark={true} code={`
|
<Source dark={true} code={`
|
||||||
// cunningham.ts
|
// cunningham.ts
|
||||||
import { DefaultTokens } from "@openfun/cunningham-react";
|
import { DefaultTokens } from "@gouvfr-lasuite/cunningham-react";
|
||||||
|
|
||||||
const config: DefaultTokens = {
|
const config: DefaultTokens = {
|
||||||
themes: {
|
themes: {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
@forward "./utils";
|
@forward "./utils";
|
||||||
|
|
||||||
@use "cunningham-tokens.css";
|
@use "cunningham-tokens.css";
|
||||||
@use "@openfun/cunningham-tokens/default-tokens";
|
@use "@gouvfr-lasuite/cunningham-tokens/default-tokens";
|
||||||
|
|
||||||
@use "utils/accessibility";
|
@use "utils/accessibility";
|
||||||
@use "./components/Alert";
|
@use "./components/Alert";
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": "@openfun/typescript-configs/react.json",
|
"extends": "@gouvfr-lasuite/typescript-configs/react.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# @openfun/cunningham-tokens
|
# @gouvfr-lasuite/cunningham-tokens
|
||||||
|
|
||||||
## 3.0.0
|
## 3.0.0
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# @openfun/cunningham-tokens
|
# @gouvfr-lasuite/cunningham-tokens
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ make Cunningham's Design System yours!
|
|||||||
Install the lib
|
Install the lib
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn add @openfun/cunningham-tokens
|
yarn add @gouvfr-lasuite/cunningham-tokens
|
||||||
```
|
```
|
||||||
|
|
||||||
### Configuration file
|
### Configuration file
|
||||||
@@ -90,7 +90,7 @@ Then, add these lines at the top of your main stylesheet file:
|
|||||||
|
|
||||||
```
|
```
|
||||||
@import "cunningham-tokens"; // Imports the file you just generated.
|
@import "cunningham-tokens"; // Imports the file you just generated.
|
||||||
@import "@openfun/cunningham-react/style";
|
@import "@gouvfr-lasuite/cunningham-react/style";
|
||||||
```
|
```
|
||||||
|
|
||||||
It's all done!
|
It's all done!
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@openfun/cunningham-tokens",
|
"name": "@gouvfr-lasuite/cunningham-tokens",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": "@openfun/typescript-configs/node.json",
|
"extends": "@gouvfr-lasuite/typescript-configs/node.json",
|
||||||
"include": ["**/*"],
|
"include": ["**/*"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": "@openfun/typescript-configs/node.json",
|
"extends": "@gouvfr-lasuite/typescript-configs/node.json",
|
||||||
"include": ["./*"],
|
"include": ["./*"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@openfun/typescript-configs",
|
"name": "@gouvfr-lasuite/typescript-configs",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"volta": {
|
"volta": {
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
],
|
],
|
||||||
"outputs": []
|
"outputs": []
|
||||||
},
|
},
|
||||||
"@openfun/cunningham-tokens#test": {
|
"@gouvfr-lasuite/cunningham-tokens#test": {
|
||||||
"dependsOn": [
|
"dependsOn": [
|
||||||
"build"
|
"build"
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user