richie 2.25.0b2.dev138__tar.gz → 2.25.0b2.dev142__tar.gz

richie-2.25.0b2.dev142/PKG-INFO

@@ -0,0 +1,153 @@
+Metadata-Version: 2.1
+Name: richie
+Version: 2.25.0b2.dev142
+Summary: A CMS to build learning portals for open education
+Author-email: "Open FUN (France Université Numérique)" <fun.dev@fun-mooc.fr>
+License: MIT License
+        
+        Copyright (c) 2018-present GIP FUN MOOC.
+        
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+        
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+        
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+        
+        
+Project-URL: Bug Tracker, https://github.com/openfun/richie/issues/new
+Project-URL: Changelog, https://github.com/openfun/richie/blob/master/CHANGELOG.md
+Project-URL: Homepage, https://github.com/openfun/richie
+Project-URL: Repository, https://github.com/openfun/richie
+Project-URL: Documentation, https://richie.education/
+Project-URL: Demonstration website, https://demo.richie.education/
+Keywords: Django,Django-CMS,Open edX
+Classifier: Development Status :: 5 - Production/Stable
+Classifier: Framework :: Django
+Classifier: Framework :: Django :: 2.2
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Natural Language :: English
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: arrow
+Requires-Dist: Django<4
+Requires-Dist: djangocms-file
+Requires-Dist: djangocms-googlemap
+Requires-Dist: djangocms-link
+Requires-Dist: djangocms-picture
+Requires-Dist: djangocms-text-ckeditor
+Requires-Dist: djangocms-video
+Requires-Dist: djangorestframework
+Requires-Dist: django-autocomplete-light==3.11.0
+Requires-Dist: django-cms<4.0.0,>=3.11.0
+Requires-Dist: django-parler>=2.3
+Requires-Dist: django-redis>=4.11.0
+Requires-Dist: django-treebeard
+Requires-Dist: dj-pagination
+Requires-Dist: easy_thumbnails[svg]>=2.8
+Requires-Dist: elasticsearch<7.0.0,>=6.0.0
+Requires-Dist: exrex==0.11.0
+Requires-Dist: importlib-metadata
+Requires-Dist: oauthlib==3.2.2
+Requires-Dist: requests==2.31.0
+Provides-Extra: dev
+Requires-Dist: bandit==1.7.8; extra == "dev"
+Requires-Dist: black==24.2.0; extra == "dev"
+Requires-Dist: pyRdfa3==3.6.2; extra == "dev"
+Requires-Dist: cssselect==1.2.0; extra == "dev"
+Requires-Dist: factory-boy==3.3.0; extra == "dev"
+Requires-Dist: flake8==7.0.0; extra == "dev"
+Requires-Dist: flake8-pyproject==1.2.3; extra == "dev"
+Requires-Dist: htmlmin==0.1.12; extra == "dev"
+Requires-Dist: ipdb==0.13.13; extra == "dev"
+Requires-Dist: ipython==8.22.2; extra == "dev"
+Requires-Dist: isort==5.13.2; extra == "dev"
+Requires-Dist: lxml==5.1.0; extra == "dev"
+Requires-Dist: msgpack==1.0.8; extra == "dev"
+Requires-Dist: mysqlclient==2.2.4; extra == "dev"
+Requires-Dist: pylint==3.1.0; extra == "dev"
+Requires-Dist: pylint-django==2.5.5; extra == "dev"
+Requires-Dist: pytest==8.1.1; extra == "dev"
+Requires-Dist: pytest-cov==4.1.0; extra == "dev"
+Requires-Dist: pytest-django==4.8.0; extra == "dev"
+Requires-Dist: responses==0.25.0; extra == "dev"
+Provides-Extra: ci
+Requires-Dist: twine==5.0.0; extra == "ci"
+Provides-Extra: sandbox
+Requires-Dist: django-configurations==2.5; extra == "sandbox"
+Requires-Dist: dockerflow==2024.3.0; extra == "sandbox"
+Requires-Dist: factory-boy==3.3.0; extra == "sandbox"
+Requires-Dist: gunicorn==21.2.0; extra == "sandbox"
+Requires-Dist: psycopg2-binary==2.9.9; extra == "sandbox"
+Requires-Dist: sentry-sdk==1.41.0; extra == "sandbox"
+
+# Richie, the best OpenSource CMS to build education portals
+
+[![CircleCI](https://circleci.com/gh/openfun/richie/tree/master.svg?style=svg)](https://circleci.com/gh/openfun/richie/tree/master)
+
+## Overview
+
+`Learning Management Systems` (LMS) are great tools for hosting and playing interactive online
+courses and MOOCs.
+
+However, if you need to build a complete website with flexible content to aggregate your courses,
+in several languages and from different sources, **you will soon need a CMS**.
+
+At "France Université Numérique", we wanted to build an OpenSource portal with `Python` and
+`Django`. That's why we built `Richie` on top of [DjangoCMS](https://www.django-cms.org), one of
+the best CMS on the market, as a toolbox to easily create full fledged websites with a catalog of
+online courses.
+
+Among the features that `Richie` offers out of the box:
+
+- multi-lingual by default,
+- advanced access rights and moderation,
+- catalog of courses synchronized with one or more `LMS` instances,
+- search engine based on `Elasticsearch` and pre-configured to offer full-text queries,
+  multi-facetting, auto-complete,...
+- flexible custom pages for courses, organizations, categories, teachers, blog posts,
+  programs (and their inter-relations),
+- Extensible with any third-party `DjangoCMS` plugin or any third-party `Django` application.
+
+## Discover Richie
+
+If you're looking for a quick preview of `Richie`, you can take a look and have a tour of
+`Richie` on our dedicated [demo site](https://demo.richie.education).
+
+It is connected back-to-back with a demo of OpenEdX running on
+[OpenEdX Docker](https://github.com/openfun/openedx-docker).
+
+Two users are available for testing:
+
+- admin: `admin@example.com`/`admin`
+- student: `edx@example.com`/`edx`
+
+The database is regularly flushed.
+
+## Getting started
+
+Take a look at our [documentation](https://richie.education/docs/discover) to get started with Richie.
+
+## Contributing
+
+### [Contributing guide](https://richie.education/docs/contributing-guide)
+
+Read our [contributing guide](https://richie.education/docs/contributing-guide) to learn about our development process and get started developing on `Richie`.
+
+### License
+
+This work is released under the MIT License (see [LICENSE](./LICENSE)).

richie-2.25.0b2.dev142/src/frontend/js/components/SaleTunnel/components/StepBreadcrumb/index.spec.tsx

@@ -0,0 +1,242 @@
+import {
+  act,
+  getAllByRole,
+  getByText,
+  queryAllByTestId,
+  render,
+  renderHook,
+} from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { IconTypeEnum } from 'components/Icon';
+import { type Manifest, useStepManager } from 'hooks/useStepManager';
+import { StepBreadcrumb } from '.';
+
+describe('StepBreadcrumb', () => {
+  const Wrapper = ({ children }: React.PropsWithChildren<{}>) => (
+    <IntlProvider locale="en">{children}</IntlProvider>
+  );
+
+  it('renders visually a minimal manifest', () => {
+    // If manifest's steps does not have `label` and `icon` property,
+    // only a breadcrumb with the step index is displayed.
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
+      start: 'step0',
+      steps: {
+        step0: {
+          next: 'step1',
+        },
+        step1: {
+          next: null,
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useStepManager(manifest));
+    const { container, rerender } = render(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    expect(getAllByRole(container, 'listitem')).toHaveLength(2);
+
+    const labels = queryAllByTestId(container, 'StepBreadcrumb__step__label');
+    const stepsIcons = queryAllByTestId(container, 'StepBreadcrumb__step__icon');
+    let activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    let currentStep = container.querySelector(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--current',
+    );
+    expect(labels).toHaveLength(0);
+    expect(stepsIcons).toHaveLength(2);
+    stepsIcons.forEach((icon, index) => {
+      expect(icon.firstChild).toBeInstanceOf(HTMLSpanElement);
+      expect(icon.firstChild).toHaveTextContent((index + 1).toString());
+    });
+    expect(activeSteps).toHaveLength(1);
+    expect(currentStep).toHaveTextContent('1');
+    expect(currentStep).toHaveAttribute('tabindex', '-1');
+
+    act(() => result.current.next());
+    rerender(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    currentStep = container.querySelector('li.StepBreadcrumb__step.StepBreadcrumb__step--current');
+    expect(activeSteps).toHaveLength(2);
+    expect(currentStep).toHaveTextContent('2');
+  });
+
+  it('renders visually a complete manifest', () => {
+    // If manifest's steps has `label` and `icon` property,
+    // this information was shown.
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
+      start: 'step0',
+      steps: {
+        step0: {
+          label: '0. Step',
+          icon: IconTypeEnum.ARROW_RIGHT,
+          next: 'step1',
+        },
+        step1: {
+          label: '1. Step',
+          icon: IconTypeEnum.ARROW_RIGHT,
+          next: null,
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useStepManager(manifest));
+    const { container, rerender } = render(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    expect(getAllByRole(container, 'listitem')).toHaveLength(2);
+
+    const stepsIcons = queryAllByTestId(container, 'StepBreadcrumb__step__icon');
+    let activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    let currentStep = container.querySelector(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--current',
+    );
+
+    const currentStepLabel = getByText(container, '0. Step', { exact: true });
+    const nextStepLabel = getByText(container, '1. Step', { exact: true });
+
+    expect(stepsIcons).toHaveLength(2);
+    stepsIcons.forEach((icon) => {
+      expect(icon.firstChild).toBeInstanceOf(SVGElement);
+    });
+    expect(activeSteps).toHaveLength(1);
+    expect(currentStep).toHaveTextContent('0. Step');
+    // there should be hidden text that make things more explicit for screen reader users
+    expect(currentStepLabel?.querySelector('.offscreen')).toHaveTextContent('Step 1 of 2 (active)');
+    expect(nextStepLabel?.querySelector('.offscreen')).toHaveTextContent('Step 2 of 2');
+    // the current step should be programmatically focusable
+    expect(currentStep).toHaveAttribute('tabindex', '-1');
+    const separator = container.querySelectorAll('li.StepBreadcrumb__separator');
+    let activeSeparator = container.querySelector(
+      'li.StepBreadcrumb__separator.StepBreadcrumb__separator--active',
+    );
+    expect(separator).toHaveLength(1);
+    expect(activeSeparator).toBeNull();
+
+    act(() => result.current.next());
+    rerender(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    currentStep = container.querySelector('li.StepBreadcrumb__step.StepBreadcrumb__step--current');
+    expect(activeSteps).toHaveLength(2);
+    expect(currentStep).toHaveTextContent('1. Step');
+
+    activeSeparator = container.querySelector(
+      'li.StepBreadcrumb__separator.StepBreadcrumb__separator--active',
+    );
+    expect(activeSeparator).not.toBeNull();
+  });
+
+  it('sorts manifest steps to guarantee the display order of steps', () => {
+    type Steps = 'step1' | 'step0';
+    const manifest: Manifest<Steps> = {
+      start: 'step1',
+      steps: {
+        step0: {
+          next: null,
+        },
+        step1: {
+          next: 'step0',
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useStepManager(manifest));
+    const { container } = render(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    expect(getAllByRole(container, 'listitem')).toHaveLength(2);
+
+    const activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    const currentStep = container.querySelector(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--current',
+    );
+    expect(activeSteps).toHaveLength(1);
+    expect(currentStep).toHaveTextContent('1');
+  });
+
+  it('displays all active steps on mount if manifest does not start to the first step', () => {
+    type Steps = 'step0' | 'step1';
+    const manifest: Manifest<Steps> = {
+      start: 'step1',
+      steps: {
+        step0: {
+          next: 'step1',
+        },
+        step1: {
+          next: null,
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useStepManager(manifest));
+    const { container } = render(
+      <Wrapper>
+        <StepBreadcrumb manifest={manifest} step={result.current.step} />
+      </Wrapper>,
+    );
+
+    expect(getAllByRole(container, 'listitem')).toHaveLength(2);
+
+    const activeSteps = container.querySelectorAll(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--active',
+    );
+    const currentStep = container.querySelector(
+      'li.StepBreadcrumb__step.StepBreadcrumb__step--current',
+    );
+    expect(activeSteps).toHaveLength(2);
+    expect(currentStep).toHaveTextContent('2');
+  });
+
+  it('can contain a single step ', () => {
+    type LastStep = 'step0';
+    const manifest: Manifest<LastStep> = {
+      steps: {
+        step0: {
+          next: null,
+        },
+      },
+      start: 'step0',
+    };
+
+    const { result } = renderHook(() => useStepManager(manifest));
+    // - step 0
+    expect(result.current.step).toEqual('step0');
+    // - terminated state
+    act(() => result.current.next());
+    expect(result.current.step).toEqual(null);
+    // - Reset: should go back to step0
+    act(() => result.current.reset());
+    expect(result.current.step).toEqual('step0');
+  });
+});

richie-2.25.0b2.dev142/src/frontend/js/components/SaleTunnel/components/StepBreadcrumb/index.tsx

@@ -0,0 +1,125 @@
+// StepBreadcrumb has been created to work in pair with useStepManager hook.
+// Within a step process, it aims to guide the user to know where he/she is in
+// the current process by translating visually the steps manifest.
+import { Children, Fragment, useCallback } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Nullable } from 'types/utils';
+import { Icon } from 'components/Icon';
+import { Manifest, Step, useStepManager } from 'hooks/useStepManager';
+
+interface Props<Keys extends PropertyKey> {
+  manifest: Manifest<Keys>;
+  step: Nullable<PropertyKey>;
+}
+
+type FlattenStep = [PropertyKey, Step];
+
+/**
+ * Retrieve the index of the active step.
+ * When step is null, we know that process is terminated so we have to return
+ * the last step index.
+ * @params step[]
+ * @returns {number} active step index
+ */
+function getActiveStepIndex(steps: FlattenStep[], step: Nullable<PropertyKey>) {
+  if (step === null) return steps.length - 1;
+  return steps.findIndex((s) => s[0] === step);
+}
+
+/**
+ * As object properties order is not guaranteed, we have to sort steps to ensure
+ * that they are displayed in the right order.
+ *
+ * // MARK When IE 11 supports will be dropped, we can use a `Map`
+ * to define `manifest.steps` then remove this sort function
+ */
+function sortSteps<Keys extends PropertyKey>(firstStep: Keys, manifest: Manifest<Keys>) {
+  const steps: FlattenStep[] = [];
+  let step: Nullable<Keys> = firstStep;
+
+  while (step !== null) {
+    steps.push([step, manifest.steps[step]]);
+    step = manifest.steps[step].next;
+  }
+
+  return steps;
+}
+
+const messages = defineMessages({
+  stepCount: {
+    defaultMessage:
+      'Step {current, number} of {total, number} {active, select, true {(active)} other {}}',
+    description: 'Info about current step, not visible, only announced by screen readers',
+    id: 'components.StepBreadcrumb.stepCount',
+  },
+});
+
+export const StepBreadcrumb = <Keys extends PropertyKey>({ step, manifest }: Props<Keys>) => {
+  const { firstStep } = useStepManager(manifest);
+  const orderedSteps = sortSteps(firstStep, manifest);
+  const activeIndex = getActiveStepIndex(orderedSteps, step);
+
+  const getStepClassName = useCallback(
+    (index: number) => {
+      const className = ['StepBreadcrumb__step'];
+      if (index <= activeIndex) className.push('StepBreadcrumb__step--active');
+      if (index === activeIndex) className.push('StepBreadcrumb__step--current');
+
+      return className.join(' ');
+    },
+    [activeIndex],
+  );
+
+  const getSeparatorClassName = useCallback(
+    (index: number) => {
+      const className = ['StepBreadcrumb__separator'];
+      if (index < activeIndex) className.push('StepBreadcrumb__separator--active');
+
+      return className.join(' ');
+    },
+    [activeIndex],
+  );
+
+  return (
+    <ol className="StepBreadcrumb">
+      {Children.toArray(
+        orderedSteps.map(([, entry], index) => (
+          <Fragment>
+            <li
+              aria-current={index === activeIndex ? 'step' : 'false'}
+              className={getStepClassName(index)}
+              tabIndex={index === activeIndex ? -1 : undefined}
+            >
+              <div className="StepBreadcrumb__step__icon" data-testid="StepBreadcrumb__step__icon">
+                {entry.icon ? <Icon name={entry.icon} /> : <span>{index + 1}</span>}
+              </div>
+              {entry.label ? (
+                <strong
+                  className="h6 StepBreadcrumb__step__label"
+                  data-testid="StepBreadcrumb__step__label"
+                >
+                  {entry.label}
+                  <span className="offscreen">
+                    {/* we repeat the "active" info in the hidden SR message because not all screen
+                    readers support the aria-current="step" attribute */}
+                    <FormattedMessage
+                      {...messages.stepCount}
+                      values={{
+                        current: index + 1,
+                        total: orderedSteps.length,
+                        active: index === activeIndex,
+                      }}
+                    />
+                  </span>
+                </strong>
+              ) : null}
+            </li>
+            {entry.next !== null ? (
+              <li aria-hidden={true} className={getSeparatorClassName(index)} />
+            ) : null}
+          </Fragment>
+        )),
+      )}
+    </ol>
+  );
+};