Deploy Storybook to GitHub Pages

storybook/assets/1_migrating_v1_to_v2-o7Y1r_Ih.js

@@ -0,0 +1,73 @@
+import{j as e}from"./jsx-runtime-vNq4Oc-g.js";import"./chunk-HLWAVYOI-oYOnMLz8.js";import{M as i,b as o}from"./index-SaJXffyO.js";import{u as s}from"./index-Dbo06S9W.js";import"./index-4g5l5LRQ.js";import"./_commonjsHelpers-4gQjN7DL.js";import"./iframe-cfTJpQc2.js";import"../sb-preview/runtime.js";import"./react-18-YI47dyij.js";import"./index-ZglUz-kn.js";import"./index-ogXoivrg.js";import"./index-MI7UZ4bI.js";import"./index-PPLHz8o0.js";function r(t){const n=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",blockquote:"blockquote",a:"a"},s(),t.components);return e.jsxs(e.Fragment,{children:[e.jsx(i,{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}=Object.assign({},s(),t.components);return n?e.jsx(n,Object.assign({},t,{children:e.jsx(r,t)})):r(t)}export{b as default};

storybook/assets/Login.stories-UlImRZx2.js

@@ -0,0 +1,42 @@
+import{j as e}from"./jsx-runtime-vNq4Oc-g.js";import{c as u,e as n,a as g,u as p,o as f,g as a,b as o,d as h}from"./reactHookFormUtils-I3Glgref.js";import{R as l}from"./stories-utils-NIw5nhyj.js";import{C as x}from"./index-kccULe8I.js";import{B as b}from"./index-KQ5fxawE.js";import"./index-4g5l5LRQ.js";import"./_commonjsHelpers-4gQjN7DL.js";import"./index-qbqVQdGN.js";import"./index--jIQrVgb.js";import"./index-ANeRJe3U.js";import"./index-LpGNQo9R.js";import"./index--mA4GHQY.js";const V={title:"Components/Forms/Examples/React-Hook-Form"},S=u().shape({email:n().email().required(),password:n().min(8).required(),rememberMe:g().required().oneOf([!0])}),t=()=>{const{register:s,handleSubmit:c,formState:r}=p({defaultValues:{email:"",password:"",rememberMe:!1},mode:"onChange",reValidateMode:"onChange",resolver:h(S)});return e.jsxs("form",{style:{display:"flex",flexDirection:"column",gap:"1rem",width:"300px"},onSubmit:c(f),children:[e.jsx("h1",{className:"fs-h3 fw-bold clr-greyscale-900",style:{textAlign:"center"},children:"Log in"}),e.jsx(l,{label:"Email",fullWidth:!0,state:a("email",r),text:o("email",r),...s("email")}),e.jsx(l,{label:"Password",state:a("password",r),type:"password",text:o("password",r)||"Forgot your password?",fullWidth:!0,...s("password")}),e.jsx("div",{children:e.jsx(x,{label:"Remember me",state:a("rememberMe",r),text:o("rememberMe",r),...s("rememberMe")})}),e.jsx(b,{fullWidth:!0,children:"Log in"}),e.jsxs("div",{className:"fs-m clr-greyscale-800",style:{textAlign:"center"},children:["You do not have an account?"," ",e.jsx("a",{href:"/#",className:"clr-greyscale-800",children:"Register"})]})]})};var m,i,d;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`() => {
+  const {
+    register,
+    handleSubmit,
+    formState
+  } = useForm<LoginStoryFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      rememberMe: false
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+    resolver: yupResolver(loginSchema)
+  });
+  return <form style={{
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+    width: "300px"
+  }} onSubmit={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", formState)} text={getFieldErrorMessage("email", formState)} {...register("email")} />
+      <RhfInput label="Password" state={getFieldState("password", formState)} type="password" text={getFieldErrorMessage("password", formState) || "Forgot your password?"} fullWidth={true} {...register("password")} />
+      <div>
+        <Checkbox label="Remember me" state={getFieldState("rememberMe", formState)} text={getFieldErrorMessage("rememberMe", formState)} {...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>;
+}`,...(d=(i=t.parameters)==null?void 0:i.docs)==null?void 0:d.source}}};const A=["Login"];export{t as Login,A as __namedExportsOrder,V as default};

storybook/assets/PreBuilt.stories-skrkkYER.js

@@ -0,0 +1,35 @@
+import{j as l}from"./jsx-runtime-vNq4Oc-g.js";import{r as u}from"./index-4g5l5LRQ.js";import{B as M}from"./index-KQ5fxawE.js";import{a as f}from"./index-XR-JU9UK.js";import{V as o}from"./ToastProvider-hYbNFTfk.js";import"./_commonjsHelpers-4gQjN7DL.js";import"./index--jIQrVgb.js";import"./index-ZglUz-kn.js";import"./index-ANeRJe3U.js";import"./cunningham-tokens-X342qG7_.js";const J={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 K=["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,K as __namedExportsOrder,J as default};