Deploy Storybook to GitHub Pages

assets/1_migrating_v1_to_v2-2vf8hN8Z.js

@@ -0,0 +1,73 @@
+import{j as e}from"./jsx-runtime-vNq4Oc-g.js";import"./chunk-HLWAVYOI-TDwJT17v.js";import{M as i,d as o}from"./index-GSVA_zU2.js";import{u as s}from"./index-Dbo06S9W.js";import"./index-4g5l5LRQ.js";import"./_commonjsHelpers-4gQjN7DL.js";import"./iframe-ad7aHMK9.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 w(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{w as default};

assets/Login.stories-7gEkMwN7.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-eaf6WBE_.js";import{R as l}from"./stories-utils-0HKsOxnu.js";import{C as x}from"./index-O0n3Xt1Z.js";import{B as b}from"./index-_JPjd9Xq.js";import"./index-4g5l5LRQ.js";import"./_commonjsHelpers-4gQjN7DL.js";import"./index-tCVhToAt.js";import"./index-uebAiod8.js";import"./index-ANeRJe3U.js";import"./index-Tgl-PM10.js";import"./index-7aAKn_qx.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};