@magmamath/students-features 0.1.0

package/src/shared/icons/ChatbotIcon.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import Svg, { Path, Defs, LinearGradient, Stop, Mask, G, Rect } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const ChatbotIcon = ({ width = 60, height = 60 }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 60 60" fill="none">
+    <Mask id="a" maskUnits="userSpaceOnUse" x={0} y={0} width={60} height={60}>
+      <Rect x="0" y="0" width="60" height="60" fill="white" />
+      <Rect x="10" y="10" width="40" height="40" fill="black" />
+      <Path d="M60 0H0v60h60V0z" fill="#ffffff" />
+    </Mask>
+    <G mask="url(#a)">
+      <Path
+        d="M53.869 8.767v14.384M6.448 8.767v14.384"
+        stroke="#A83900"
+        strokeWidth={1.0538}
+        strokeLinecap="round"
+      />
+      <Path
+        d="M1.705 25.206c1.897-3.92 6.06-3.53 7.904-2.845L5.025 33.426c-1.897-1.107-5.216-4.3-3.32-8.22z"
+        fill="#FF7819"
+      />
+      <Path
+        d="M58.295 25.206c-1.897-3.92-6.06-3.53-7.904-2.845l4.584 11.065c1.897-1.107 5.216-4.3 3.32-8.22z"
+        fill="#FF275E"
+      />
+      <Path
+        d="M5.025 44.594v-9.168c.474-6.112 3.952-18.673 25.133-18.81 21.182-.138 25.186 12.593 25.291 18.81v9.168c0 6.111-4.954 11.065-11.064 11.065H16.09c-6.111 0-11.065-4.954-11.065-11.065z"
+        fill="#A83900"
+      />
+      <Path
+        d="M5.025 42.594v-9.168c.474-6.112 3.952-18.673 25.133-18.81 21.182-.138 25.186 12.593 25.291 18.81v9.168c0 6.111-4.954 11.065-11.064 11.065H16.09c-6.111 0-11.065-4.954-11.065-11.065z"
+        fill="url(#paint0_linear_722_2)"
+      />
+      <Mask id="b" maskUnits="userSpaceOnUse" x="10" y="22" width="40" height="26">
+        <Path
+          d="M42.356 47.81H18.118c-4.001 0-7.244-3.244-7.244-7.244v-7.298c0-6.639 5.674-11.223 11.855-11.223 2.96 0 5.071 1.202 6.287 2.092.703.515 1.597.53 2.302.02 1.86-1.348 3.617-2.112 6.902-2.112 6.006 0 11.38 5.532 11.38 11.223v7.298c0 4-3.243 7.244-7.244 7.244z"
+          fill="white"
+        />
+      </Mask>
+      <Rect x="0" y="0" width="60" height="60" fill="#ffffff" mask="url(#b)" />
+
+      <G mask="url(#b)">
+        <Path
+          d="M52.566 52.989L15.97 16.393c-.597-.598-.174-1.62.67-1.62h36.596c.524 0 .949.425.949.95v36.595c0 .845-1.022 1.268-1.62.67z"
+          fill="#ffffff"
+          fillOpacity={0.1}
+        />
+        <G filter="url(#filter0_d_722_2)">
+          <Path
+            d="M42.356 47.81H18.118c-4.001 0-7.244-3.244-7.244-7.244v-7.298c0-6.639 5.674-11.223 11.855-11.223 2.96 0 5.071 1.202 6.287 2.092.703.515 1.597.53 2.302.02 1.86-1.348 3.617-2.112 6.902-2.112 6.006 0 11.38 5.532 11.38 11.223v7.298c0 4-3.243 7.244-7.244 7.244z"
+            fill="#F2F2F4"
+          />
+        </G>
+        <Path
+          d="M42.357 47.544h-24.24a6.978 6.978 0 01-6.977-6.978v-7.298c0-6.466 5.528-10.956 11.589-10.956 2.883 0 4.94 1.17 6.13 2.04.793.581 1.813.602 2.615.021.917-.664 1.797-1.176 2.845-1.524 1.049-.349 2.28-.537 3.9-.537 2.922 0 5.702 1.346 7.755 3.399 2.054 2.054 3.36 4.795 3.36 7.557v7.298a6.978 6.978 0 01-6.977 6.978z"
+          stroke="#811200"
+          strokeWidth={0.355555}
+        />
+        <Path
+          opacity={0.33}
+          d="M16.248 34.66c-.294-2.838-1.239-5.452-2.775-7.616-.445.65-1.4 2.215-1.667 3.282a12.456 12.456 0 00-.333 2.666v7.334c0 .666-.1 2.542 1.333 4.333 1.333 1.667 3 2.333 3.442 2.333V34.66zM25.972 34.982v12.344h9.56V34.91c-.133-3.61-1.922-7.251-4.726-9.893 0 0-.37.309-.667.309-.333 0-.666-.334-1.333-.667-2.333-1.666-4-2-6.333-2-1.067 0-2.607.295-3.243.443 3.132 2.174 5.912 6.727 6.742 11.88zM44.94 34.965c0 1.312.15 5.606.153 11.727.682-.344 2.18-1.3 2.713-2.366.666-1.334 1-2.334 1-3.334v-8.666c-.111-1.334-.933-4.534-3.334-6.667-3-2.667-5.333-3.136-8-3.068 3.49 1.794 6.829 6.264 7.469 12.373z"
+          fill="#ffffff"
+        />
+      </G>
+      <Path d="M6.448 9.4a2.53 2.53 0 100-5.059 2.53 2.53 0 000 5.059z" fill="#FD7E14" />
+      <Path d="M53.868 9.4a2.53 2.53 0 100-5.059 2.53 2.53 0 000 5.059z" fill="#FF275E" />
+      <Path
+        d="M26.364 40.065c.747 1.71 2.087 2.621 3.952 2.687 1.969.07 3.48-.882 4.268-2.687"
+        stroke="#FD7E14"
+        strokeWidth={1.68609}
+        strokeLinecap="round"
+      />
+      <Path
+        d="M20.832 37.694a2.53 2.53 0 100-5.058 2.53 2.53 0 000 5.058z"
+        fill="#FD7E14"
+        stroke="#FD7E14"
+        strokeWidth={0.210761}
+      />
+      <Path
+        d="M19.4 33.494l-.505.55a.729.729 0 101.081.977l.497-.559a.723.723 0 00-1.073-.968z"
+        fill="#ffffff"
+      />
+      <Path
+        d="M40.117 37.694a2.53 2.53 0 100-5.059 2.53 2.53 0 000 5.059z"
+        fill="#FD7E14"
+        stroke="#FD7E14"
+        strokeWidth={0.210761}
+      />
+      <Path
+        d="M38.842 33.494l-.505.55a.728.728 0 101.082.977l.496-.559a.723.723 0 00-1.073-.968z"
+        fill="#ffffff"
+      />
+    </G>
+    <Defs>
+      <LinearGradient
+        id="paint0_linear_722_2"
+        x1={5.0249}
+        y1={36.0572}
+        x2={55.4494}
+        y2={36.0572}
+        gradientUnits="userSpaceOnUse"
+      >
+        <Stop stopColor="#FF245F" />
+        <Stop offset={1} stopColor="#FF7917" />
+      </LinearGradient>
+    </Defs>
+  </Svg>
+)

package/src/shared/icons/CloseIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const CloseIcon = ({ width = 22, height = 22, color = '#4D4D63' }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 22 23" fill="none">
+    <Path
+      d="M2.384 1.116A1.25 1.25 0 10.616 2.884L9.232 11.5.616 20.116a1.25 1.25 0 001.768 1.768L11 13.268l8.616 8.616a1.25 1.25 0 001.768-1.768L12.768 11.5l8.616-8.616a1.25 1.25 0 00-1.768-1.768L11 9.732 2.384 1.116z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/shared/icons/GlobeIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const GlobeIcon = ({ width = 20, height = 20, color = '#4D4D63' }: IconProps) => (
+  <Svg width={width} height={height} viewBox="0 0 20 21" fill="none">
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.397 4.365a8.312 8.312 0 003.4 14.148l-.405-2.503-2.298-1.213a1.26 1.26 0 01-.672-1.114v-2.949c0-.442.231-.851.61-1.08l2.23-1.344a1.26 1.26 0 01.651-.181h2.653V6.006H9.348l-.352.557a1.26 1.26 0 01-1.065.587H5.677a1.26 1.26 0 01-1.26-1.244l-.02-1.54zM7.903.72C3.387 1.684 0 5.696 0 10.5c0 5.523 4.477 10 10 10s10-4.477 10-10c0-.997-.146-1.959-.417-2.867a1.333 1.333 0 00-.03-.126c-.184-.654-.528-1.444-1.04-2.255a10.052 10.052 0 00-1.985-2.327 9.681 9.681 0 00-5.808-2.4A10.145 10.145 0 009.966.5C9.2.5 8.512.585 7.903.72zm8.895 5.002c.358.509.66 1.06.899 1.644h-3.34a1.26 1.26 0 00-1.26 1.26v4.465l-.306 1.61-3.27 3.884-.494-3.057a1.26 1.26 0 00-.656-.914l-2.258-1.191v-2.445l1.92-1.158h2.965a1.26 1.26 0 001.26-1.26V5.575a1.26 1.26 0 00-1.26-1.26H9.11a1.26 1.26 0 00-1.066.586l-.352.558h-1.59l-.028-2.135c.38-.282 1.105-.707 2.176-.948a8.34 8.34 0 012.531-.148 8.272 8.272 0 014.565 1.912 8.832 8.832 0 011.451 1.582zm-5.109 12.915a8.311 8.311 0 006.495-9.58h-3.396v4.074c0 .079-.007.157-.022.235l-.334 1.762a1.26 1.26 0 01-.274.577l-2.469 2.932z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/shared/icons/PauseIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const PauseIcon = ({ color = '#4D4D63', height = 16, width = 16 }: IconProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 16 16" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 2.476C1 1.661 1.66 1 2.476 1h2.762c.815 0 1.476.66 1.476 1.476v11.048c0 .815-.66 1.476-1.476 1.476H2.476C1.661 15 1 14.34 1 13.524V2.476zM9.286 2.476c0-.815.66-1.476 1.476-1.476h2.762C14.339 1 15 1.66 15 2.476v11.048c0 .815-.66 1.476-1.476 1.476h-2.762c-.815 0-1.476-.66-1.476-1.476V2.476z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/PlayIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const PlayIcon = ({ color = '#4D4D63', height = 16, width = 16 }: IconProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 16 16" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 2.806C1.5 1.438 2.945.568 4.131 1.22l9.439 5.195c1.24.682 1.24 2.486 0 3.168L4.13 14.78c-1.186.653-2.631-.217-2.631-1.585V2.806z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/SpeakerIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const SpeakerIcon = ({ width = 17, height = 17, color = '#4D4D63' }: IconProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 17 17" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.743 3.016c1.09-.94 2.735-.128 2.735 1.349v8.27c0 1.478-1.644 2.289-2.735 1.35L3.92 11.556H2.172C1.25 11.556.5 10.774.5 9.808V7.192c0-.966.749-1.748 1.672-1.748h1.75l2.82-2.428zM8.01 4.365c0-.182-.202-.281-.336-.166L4.824 6.653c-.243.21-.549.324-.864.324H2.172a.21.21 0 00-.205.215v2.616a.21.21 0 00.205.215H3.96c.315 0 .62.115.864.324l2.851 2.454c.134.115.336.016.336-.165V4.364zM11.18 4.36c.286-.3.75-.3 1.037 0 1.041 1.089 1.78 2.582 1.78 4.14 0 1.558-.739 3.051-1.78 4.14-.287.3-.751.3-1.038 0a.791.791 0 010-1.084c.836-.874 1.35-1.997 1.35-3.056s-.514-2.182-1.35-3.056a.791.791 0 010-1.084z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.057 2.725c.287-.3.75-.3 1.037 0C15.788 4.495 16.5 6.32 16.5 8.5c0 2.18-.713 4.006-2.406 5.775-.286.3-.75.3-1.037 0a.791.791 0 010-1.084c1.437-1.501 1.976-2.945 1.976-4.691s-.54-3.19-1.976-4.691a.791.791 0 010-1.084z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/icon.types.ts

@@ -0,0 +1,8 @@
+export type IconProps = {
+    color?: string
+    className?: string
+    size?: number
+    strokeWidth?: string
+    width?: number
+    height?: number
+}

package/src/shared/translation/constants.ts

@@ -0,0 +1,10 @@
+import { Locale } from './types'
+import EN from '../../lib/localization/en.json'
+import GB from '../../lib/localization/gb.json'
+import SW from '../../lib/localization/sw.json'
+
+export const LOCALIZATION_CONFIGS = {
+    [Locale.EN]: EN,
+    [Locale.GB]: GB,
+    [Locale.SW]: SW,
+}

package/src/shared/translation/helpers.ts

@@ -0,0 +1,34 @@
+import { LOCALIZATION_CONFIGS } from './constants'
+import { $localization, setLocalization } from './model'
+import { GetText, LocalizationConfig } from './types'
+
+export const getSubstitutedString = (str: string, substitutions: Record<string, string> = {}) => {
+    const substitutionsArray = Object.entries(substitutions)
+    let result = str
+
+    if (!substitutionsArray.length) return result
+
+    substitutionsArray.forEach(([key, value]) => {
+        result = result.replace(`{{${key}}}`, value)
+    })
+
+    return result
+}
+
+export const getText: GetText = (key, args = null) => {
+    const config = $localization.getState()
+
+    const translation = config?.[key]
+
+    if (translation && args) {
+        return getSubstitutedString(translation, args)
+    }
+
+    return translation ?? key
+}
+
+export const setFeaturesLocalization = (
+    generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig,
+) => {
+    setLocalization(generator)
+}

package/src/shared/translation/hooks.ts

@@ -0,0 +1,28 @@
+import { useUnit } from 'effector-react'
+import { $localization, setLocalization } from './model'
+import { GetText, LocalizationConfig } from './types'
+import { useEffect } from 'react'
+import { LOCALIZATION_CONFIGS } from './constants'
+import { getSubstitutedString } from './helpers'
+
+export const useText = (): GetText => {
+    const config = useUnit($localization) as LocalizationConfig
+
+    return (key, args = null) => {
+        const translation = config?.[key]
+
+        if (translation && args) {
+            return getSubstitutedString(translation, args)
+        }
+
+        return translation ?? key
+    }
+}
+
+export const useFeaturesLocalization = (
+    generator: ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig) | LocalizationConfig,
+) => {
+    useEffect(() => {
+        setLocalization(generator)
+    }, [generator])
+}

package/src/shared/translation/index.ts

@@ -0,0 +1,5 @@
+export { useFeaturesLocalization, useText } from './hooks'
+export { setFeaturesLocalization, getText as t } from './helpers'
+export { $localization, setLocalization } from './model'
+export { Locale } from './types'
+export type { LocalizationConfig } from './types'

package/src/shared/translation/model.ts

@@ -0,0 +1,15 @@
+import { createEvent, createStore } from 'effector'
+import { Locale, LocalizationConfig } from './types'
+import { LOCALIZATION_CONFIGS } from './constants'
+
+export const setLocalization = createEvent<
+    LocalizationConfig | ((config: typeof LOCALIZATION_CONFIGS) => LocalizationConfig)
+>()
+
+export const $localization = createStore<LocalizationConfig>(LOCALIZATION_CONFIGS[Locale.EN]).on(
+    setLocalization,
+    (state, payload) => {
+        if (typeof payload === 'function') return payload(LOCALIZATION_CONFIGS)
+        if (state.locale !== payload.locale) return payload
+    },
+)

package/src/shared/translation/types.ts

@@ -0,0 +1,9 @@
+export type GetText = (key: string, args?: Record<string, string> | null) => string
+
+export enum Locale {
+    EN = 'en-SE',
+    SW = 'sv-SE',
+    GB = 'en-GB',
+}
+
+export type LocalizationConfig = Record<string, string>

package/src/types/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: Record<string, string>
+  export default content
+}