Deploy Storybook to GitHub Pages

openfun · Apr 24, 2024 · 11c7915 · 11c7915
commit 11c7915
Show file tree

Hide file tree

Showing 445 changed files with 42,257 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/demo/.nojekyll b/demo/.nojekyll
diff --git a/demo/assets/index-BtRfxdG7.js b/demo/assets/index-BtRfxdG7.js
diff --git a/demo/assets/index-DrCEK6Fm.css b/demo/assets/index-DrCEK6Fm.css
diff --git a/demo/assets/material-icons-outlined-latin-400-normal-BpWbwl2n.woff b/demo/assets/material-icons-outlined-latin-400-normal-BpWbwl2n.woff
diff --git a/demo/assets/material-icons-outlined-latin-400-normal-DZhiGvEA.woff2 b/demo/assets/material-icons-outlined-latin-400-normal-DZhiGvEA.woff2
diff --git a/demo/assets/roboto-flex-cyrillic-ext-wght-normal-DRTNI9VV.woff2 b/demo/assets/roboto-flex-cyrillic-ext-wght-normal-DRTNI9VV.woff2
diff --git a/demo/assets/roboto-flex-cyrillic-wght-normal-C9LxQtoz.woff2 b/demo/assets/roboto-flex-cyrillic-wght-normal-C9LxQtoz.woff2
diff --git a/demo/assets/roboto-flex-greek-wght-normal-DeN4rzfy.woff2 b/demo/assets/roboto-flex-greek-wght-normal-DeN4rzfy.woff2
diff --git a/demo/assets/roboto-flex-latin-ext-wght-normal-DdIPVSJ2.woff2 b/demo/assets/roboto-flex-latin-ext-wght-normal-DdIPVSJ2.woff2
diff --git a/demo/assets/roboto-flex-latin-wght-normal-C2pcyVKb.woff2 b/demo/assets/roboto-flex-latin-wght-normal-C2pcyVKb.woff2
diff --git a/demo/assets/roboto-flex-vietnamese-wght-normal-Dfb42xSH.woff2 b/demo/assets/roboto-flex-vietnamese-wght-normal-Dfb42xSH.woff2
diff --git a/demo/blueney_bg.jpg b/demo/blueney_bg.jpg
diff --git a/demo/favicon.png b/demo/favicon.png
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href='/cunningham/demo/favicon.png' />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cunningham | Demo</title>
+    <script type="module" crossorigin src="/cunningham/demo/assets/index-BtRfxdG7.js"></script>
+    <link rel="stylesheet" crossorigin href="/cunningham/demo/assets/index-DrCEK6Fm.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/demo/pattern_dark.png b/demo/pattern_dark.png
diff --git a/demo/pattern_default.png b/demo/pattern_default.png
diff --git a/demo/redflux_bg.webp b/demo/redflux_bg.webp
diff --git a/storybook/.nojekyll b/storybook/.nojekyll
diff --git a/storybook/assets/1_migrating_v1_to_v2-WlA7cecC.js b/storybook/assets/1_migrating_v1_to_v2-WlA7cecC.js
@@ -0,0 +1,73 @@
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import"./chunk-HLWAVYOI-D_rrmbDn.js";import{M as s,d as o}from"./index-oka6EUsx.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-B_bK2iH_.js";import"../sb-preview/runtime.js";import"./react-18-C9S5vQxp.js";import"./index-cL7wXuBs.js";import"./extends-CCbyfPlC.js";import"./index-Bw8VTzHM.js";import"./index-k_s-dmML.js";import"./index-DrFu-skq.js";function r(t){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",...i(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Migrating/From v1 to v2"}),`
+`,e.jsx(n.h1,{id:"from-v1-to-v2",children:"From v1 to v2"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"2.0.0"})," introduced themes management. This comes with some structural changes regarding ",e.jsx(n.code,{children:"cunningham.ts|js"}),` configuration
+file and tokens format.`]}),`
+`,e.jsx(n.h2,{id:"configuration-file",children:"Configuration file"}),`
+`,e.jsxs(n.p,{children:["As a reminder here is the v1 format of the ",e.jsx(n.code,{children:"cunningham.ts"})," file:"]}),`
+`,e.jsx(o,{dark:!0,code:`
+// cunningham.ts
+import { DefaultTokens } from "@openfun/cunningham-react";
+
+const config: DefaultTokens = {
+  theme: {
+    colors: {
+      ...
+    },
+  },
+  components: {
+    button: {
+      "border-radius": "30px",
+    },
+  },
+};
+
+export default config;
+`}),`
+`,e.jsxs(n.p,{children:["The new version adds two top-level keys, which are ",e.jsx(n.code,{children:"themes"})," and ",e.jsx(n.code,{children:"default"}),` ( which refers to the default theme name ), so
+the new format of the previous example will be:`]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsx(n.p,{children:"⚠ Updating your configuration file is mandatory ⚠"}),`
+`]}),`
+`,e.jsx(o,{dark:!0,code:`
+// cunningham.ts
+import { DefaultTokens } from "@openfun/cunningham-react";
+
+const config: DefaultTokens = {
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          ...
+        },
+      },
+      components: {
+        button: {
+          "border-radius": "30px",
+        },
+      },
+    },
+  },
+};
+
+export default config;
+`}),`
+`,e.jsxs(n.p,{children:["If you want to learn about theme please see this ",e.jsx(n.a,{href:"?path=/docs/getting-started-theming--docs",children:"Theming"}),"."]}),`
+`,e.jsx(n.h2,{id:"token-files",children:"Token files"}),`
+`,e.jsxs(n.p,{children:["Here we are talking about ",e.jsx(n.code,{children:"cunningham-tokens.ts|js"}),` files. As they are reflecting the structure of the configuration
+of the design tokens we added those two levels of nesting which are `,e.jsx(n.code,{children:"themes.[themeName].*"})]}),`
+`,e.jsx(n.p,{children:"Old way of retrieving design tokens:"}),`
+`,e.jsx(o,{dark:!0,code:`
+import { tokens } from "./cunningham-tokens";
+
+console.log(tokens.theme.color['primary-500']);
+`}),`
+`,e.jsx(n.p,{children:"New way:"}),`
+`,e.jsx(o,{dark:!0,code:`
+import { tokens } from "./cunningham-tokens";
+
+let currentTheme = "default";
+console.log(tokens.themes[currentTheme].theme.color['primary-500']);
+`}),`
+`,e.jsx(n.h2,{id:"what-about-css-file-",children:"What about CSS file ?"}),`
+`,e.jsxs(n.p,{children:["What great is that nothing has changed! You can continue to use ",e.jsx(n.code,{children:"var(--c--theme--colors--primary-500)"}),` as before as their current value
+is automatically updated by Cunningham when the theme is updated in real time.`]})]})}function b(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{b as default};
diff --git a/storybook/assets/Color-RQJUDNI5-BLTWxeVv.js b/storybook/assets/Color-RQJUDNI5-BLTWxeVv.js
diff --git a/storybook/assets/DateRangePicker-KEEzfc5J.js b/storybook/assets/DateRangePicker-KEEzfc5J.js
diff --git a/storybook/assets/DocsRenderer-K4EAMTCU-PA4PHMD5.js b/storybook/assets/DocsRenderer-K4EAMTCU-PA4PHMD5.js
diff --git a/storybook/assets/EdgeCases.stories-C_HKiNgt.js b/storybook/assets/EdgeCases.stories-C_HKiNgt.js
@@ -0,0 +1,53 @@
+import{j as o}from"./jsx-runtime-CKrituN3.js";import{r as M}from"./index-CBqU2yxZ.js";import{B as r}from"./index-oVJ33EwG.js";import{a as e,C as g,M as i,b as a}from"./index-BWakutSw.js";import{l as s}from"./longLorem-CjgWBgpH.js";import"./_commonjsHelpers-BosuxZz1.js";import"./ToastProvider-BCO-6zTX.js";import"./index-Bl6ORisp.js";import"./cunningham-tokens-Bq47iuNG.js";import"./index-cL7wXuBs.js";import"./index-Dk74W0Oi.js";import"./index-CAEZVxT0.js";const P={title:"Components/Modal/Edge Cases",parameters:{docs:{story:{height:"350px"}}}},n={render:()=>{const l=e(),d=e(),c=e(),m=()=>{l.open(),setTimeout(()=>{d.open(),setTimeout(()=>{c.open()},100)},100)};M.useEffect(()=>{m()},[]);const x=Array.from({length:1e3},(t,h)=>h);return o.jsx(g,{children:o.jsxs("div",{style:{minHeight:"3000px",backgroundColor:"pink"},children:[o.jsx(r,{onClick:m,style:{position:"fixed"},children:"Open Modals"}),o.jsx(i,{leftActions:o.jsx(r,{color:"tertiary",children:"Tertiary"}),rightActions:o.jsxs(o.Fragment,{children:[o.jsx(r,{color:"secondary",children:"Secondary"}),o.jsx(r,{color:"primary",children:"Primary"})]}),size:a.LARGE,...l,children:s.text}),o.jsx(i,{leftActions:o.jsx(r,{color:"tertiary",children:"Tertiary"}),rightActions:o.jsxs(o.Fragment,{children:[o.jsx(r,{color:"secondary",children:"Secondary"}),o.jsx(r,{color:"primary",children:"Primary"})]}),size:a.MEDIUM,...d,children:s.text}),o.jsx(i,{leftActions:o.jsx(r,{color:"tertiary",children:"Tertiary"}),rightActions:o.jsxs(o.Fragment,{children:[o.jsx(r,{color:"secondary",children:"Secondary"}),o.jsx(r,{color:"primary",children:"Primary"})]}),size:a.SMALL,...c,children:s.text}),x.map(t=>o.jsx("div",{children:t},t))]})})}};var p,y,u;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  render: () => {
+    const modal1 = useModal();
+    const modal2 = useModal();
+    const modal3 = useModal();
+    const openModals = () => {
+      modal1.open();
+      setTimeout(() => {
+        modal2.open();
+        setTimeout(() => {
+          modal3.open();
+        }, 100);
+      }, 100);
+    };
+    useEffect(() => {
+      openModals();
+    }, []);
+    const array = Array.from({
+      length: 1000
+    }, (_, i) => i);
+    return <CunninghamProvider>
+        <div style={{
+        minHeight: "3000px",
+        backgroundColor: "pink"
+      }}>
+          <Button onClick={openModals} style={{
+          position: "fixed"
+        }}>
+            Open Modals
+          </Button>
+          <Modal leftActions={<Button color="tertiary">Tertiary</Button>} rightActions={<>
+                <Button color="secondary">Secondary</Button>
+                <Button color="primary">Primary</Button>
+              </>} size={ModalSize.LARGE} {...modal1}>
+            {longLorem.text}
+          </Modal>
+          <Modal leftActions={<Button color="tertiary">Tertiary</Button>} rightActions={<>
+                <Button color="secondary">Secondary</Button>
+                <Button color="primary">Primary</Button>
+              </>} size={ModalSize.MEDIUM} {...modal2}>
+            {longLorem.text}
+          </Modal>
+          <Modal leftActions={<Button color="tertiary">Tertiary</Button>} rightActions={<>
+                <Button color="secondary">Secondary</Button>
+                <Button color="primary">Primary</Button>
+              </>} size={ModalSize.SMALL} {...modal3}>
+            {longLorem.text}
+          </Modal>
+          {array.map(i => <div key={i}>{i}</div>)}
+        </div>
+      </CunninghamProvider>;
+  }
+}`,...(u=(y=n.parameters)==null?void 0:y.docs)==null?void 0:u.source}}};const _=["StackedModals"];export{n as StackedModals,_ as __namedExportsOrder,P as default};
diff --git a/storybook/assets/InputPassword.stories-DjklTFHS.js b/storybook/assets/InputPassword.stories-DjklTFHS.js
diff --git a/storybook/assets/Login.stories-SC4vt3C2.js b/storybook/assets/Login.stories-SC4vt3C2.js
@@ -0,0 +1,40 @@
+import{j as r}from"./jsx-runtime-CKrituN3.js";import{c as d,e as a,a as c,u as g,F as h,o as u,g as s,b as o,d as p}from"./reactHookFormUtils-_P8gcJi0.js";import{R as m}from"./stories-utils-DlYLrTMJ.js";import{C as f}from"./index-ByICr-NM.js";import{B as x}from"./index-oVJ33EwG.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-B9oOmMlP.js";import"./index-Bl6ORisp.js";import"./index-CAEZVxT0.js";import"./index-BBlCaVbW.js";import"./index-CcUMfHOE.js";const W={title:"Components/Forms/Examples/React-Hook-Form"},b=d().shape({email:a().email().required(),password:a().min(8).required(),rememberMe:c().required().oneOf([!0])}),t=()=>{const e=g({defaultValues:{email:"",password:"",rememberMe:!1},mode:"onChange",reValidateMode:"onChange",resolver:p(b)});return r.jsx(h,{...e,children:r.jsxs("form",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},onSubmit:e.handleSubmit(u),children:[r.jsx("h1",{className:"fs-h3 fw-bold clr-greyscale-900",style:{textAlign:"center"},children:"Log in"}),r.jsx(m,{label:"Email",fullWidth:!0,state:s("email",e.formState),text:o("email",e.formState),...e.register("email")}),r.jsx(m,{label:"Password",state:s("password",e.formState),type:"password",text:o("password",e.formState)||"Forgot your password?",fullWidth:!0,...e.register("password")}),r.jsx("div",{children:r.jsx(f,{label:"Remember me",state:s("rememberMe",e.formState),text:o("rememberMe",e.formState),...e.register("rememberMe")})}),r.jsx(x,{fullWidth:!0,children:"Log in"}),r.jsxs("div",{className:"fs-m clr-greyscale-800",style:{textAlign:"center"},children:["You do not have an account?"," ",r.jsx("a",{href:"/#",className:"clr-greyscale-800",children:"Register"})]})]})})};t.__docgenInfo={description:"",methods:[],displayName:"Login"};var n,l,i;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
+  const methods = useForm<LoginStoryFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      rememberMe: false
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+    resolver: yupResolver(loginSchema)
+  });
+  return <FormProvider {...methods}>
+      <form style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "1rem",
+      width: "300px"
+    }} onSubmit={methods.handleSubmit(onSubmit)}>
+        <h1 className="fs-h3 fw-bold clr-greyscale-900" style={{
+        textAlign: "center"
+      }}>
+          Log in
+        </h1>
+        <RhfInput label="Email" fullWidth={true} state={getFieldState("email", methods.formState)} text={getFieldErrorMessage("email", methods.formState)} {...methods.register("email")} />
+        <RhfInput label="Password" state={getFieldState("password", methods.formState)} type="password" text={getFieldErrorMessage("password", methods.formState) || "Forgot your password?"} fullWidth={true} {...methods.register("password")} />
+        <div>
+          <Checkbox label="Remember me" state={getFieldState("rememberMe", methods.formState)} text={getFieldErrorMessage("rememberMe", methods.formState)} {...methods.register("rememberMe")} />
+        </div>
+        <Button fullWidth={true}>Log in</Button>
+        <div className="fs-m clr-greyscale-800" style={{
+        textAlign: "center"
+      }}>
+          You do not have an account?{" "}
+          <a href="/#" className="clr-greyscale-800">
+            Register
+          </a>
+        </div>
+      </form>
+    </FormProvider>;
+}`,...(i=(l=t.parameters)==null?void 0:l.docs)==null?void 0:i.source}}};const P=["Login"];export{t as Login,P as __namedExportsOrder,W as default};
diff --git a/storybook/assets/PreBuilt.stories-B9j5fpAw.js b/storybook/assets/PreBuilt.stories-B9j5fpAw.js
@@ -0,0 +1,35 @@
+import{j as l}from"./jsx-runtime-CKrituN3.js";import{r as u}from"./index-CBqU2yxZ.js";import{B as M}from"./index-oVJ33EwG.js";import{c as f}from"./index-BWakutSw.js";import{V as o}from"./ToastProvider-BCO-6zTX.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-cL7wXuBs.js";import"./index-Dk74W0Oi.js";import"./index-Bl6ORisp.js";import"./index-CAEZVxT0.js";import"./cunningham-tokens-Bq47iuNG.js";const K={title:"Components/Modal",parameters:{docs:{story:{height:"350px"}}}},n={render:()=>{const a=f(),e=async()=>{const r=await a.deleteConfirmationModal();alert(`You decided ${r}`)};return u.useEffect(()=>{e()},[]),l.jsx(M,{onClick:e,children:"Open"})}},t={render:()=>{const a=f(),e=async()=>{const r=await a.confirmationModal();alert(`You decided ${r}`)};return u.useEffect(()=>{e()},[]),l.jsx(M,{onClick:e,children:"Open"})}},s=a=>()=>{const e=f(),r=async()=>{const U=await e.messageModal({title:"Watch out!",children:"This is a custom message!",messageType:a});alert(`You decided ${U}`)};return u.useEffect(()=>{r()},[]),l.jsx(M,{onClick:r,children:"Open"})},c={render:s(o.SUCCESS)},d={render:s(o.INFO)},i={render:s(o.ERROR)},p={render:s(o.NEUTRAL)},m={render:s(o.WARNING)};var g,C,E;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{
+  render: () => {
+    const modals = useModals();
+    const ask = async () => {
+      const decision = await modals.deleteConfirmationModal();
+      alert(\`You decided \${decision}\`);
+    };
+    useEffect(() => {
+      ask();
+    }, []);
+    return <Button onClick={ask}>Open</Button>;
+  }
+}`,...(E=(C=n.parameters)==null?void 0:C.docs)==null?void 0:E.source}}};var S,k,y;t.parameters={...t.parameters,docs:{...(S=t.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  render: () => {
+    const modals = useModals();
+    const ask = async () => {
+      const decision = await modals.confirmationModal();
+      alert(\`You decided \${decision}\`);
+    };
+    useEffect(() => {
+      ask();
+    }, []);
+    return <Button onClick={ask}>Open</Button>;
+  }
+}`,...(y=(k=t.parameters)==null?void 0:k.docs)==null?void 0:y.source}}};var R,W,N;c.parameters={...c.parameters,docs:{...(R=c.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  render: MessageWrapper(VariantType.SUCCESS)
+}`,...(N=(W=c.parameters)==null?void 0:W.docs)==null?void 0:N.source}}};var O,T,x;d.parameters={...d.parameters,docs:{...(O=d.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  render: MessageWrapper(VariantType.INFO)
+}`,...(x=(T=d.parameters)==null?void 0:T.docs)==null?void 0:x.source}}};var h,V,B;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  render: MessageWrapper(VariantType.ERROR)
+}`,...(B=(V=i.parameters)==null?void 0:V.docs)==null?void 0:B.source}}};var I,j,w;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  render: MessageWrapper(VariantType.NEUTRAL)
+}`,...(w=(j=p.parameters)==null?void 0:j.docs)==null?void 0:w.source}}};var Y,$,A;m.parameters={...m.parameters,docs:{...(Y=m.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  render: MessageWrapper(VariantType.WARNING)
+}`,...(A=($=m.parameters)==null?void 0:$.docs)==null?void 0:A.source}}};const P=["DeleteConfirmationModal","ConfirmationModal","SuccessModal","InfoModal","ErrorModal","NeutralModal","WarningModal"];export{t as ConfirmationModal,n as DeleteConfirmationModal,i as ErrorModal,d as InfoModal,p as NeutralModal,c as SuccessModal,m as WarningModal,P as __namedExportsOrder,K as default};