@typeolymp/ui-components 1.18.0 → 1.18.2

package/README.md

@@ -1,7 +1,11 @@
 # 💅🏼 ui-components
 The `ui-components` repository is a collection of [React](https://react.dev/) components, crafted with [Typescript](https://www.typescriptlang.org/) and [Styled Components](https://styled-components.com/). The components are organized according to the [Atomic Design system](https://bradfrost.com/blog/post/atomic-web-design/) and provides a versatile set of building blocks to create beautiful and consistent user interfaces.
 
-## Development
+## 📖 Table of Contents
+- [Development](https://github.com/TypeOlymp/ui-components/tree/main#-development)
+- [Contributing](https://github.com/TypeOlymp/ui-components/tree/main#-contributing)
+
+## 👨🏻‍💻 Development
 To get started with this project, follow these step:
 1. **Clone the repository:** Clone the [repository](https://github.com/TypeOlymp/ui-components) to your local machine.
 3. **Install dependencies:** Install the dependencies using `yarn install`
@@ -9,11 +13,12 @@ To get started with this project, follow these step:
 
 Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
 
-## Contributing
+## 👫 Contributing
 To contribute to the `ui-components` package, follow these step:
 1. **Clone the Repository:** Clone the [repository](https://github.com/TypeOlymp/ui-components) to your local machine.
 3. **Create a Branch:** Create a new branch for your changes using a descriptive name: `git checkout -b feature/my-new-feature`.
 4. **Make Changes:** Make your desired changes and improvements to the codebase.
 5. **Commit Changes:** Commit your changes with a clear and concise commit message: `git commit -m "Add a new feature"`.
 6. **Push Changes:** Push your changes to your development branch: `git push origin feature/my-new-feature`.
-7. **Open a Pull Request:** Visit the [repository](https://github.com/TypeOlymp/ui-components) and open a Pull Request. Describe your changes, and submit the pull request.
+7. **Update the CHANGELOG:** Update the `CHANGELOG.md` file with the new changes.
+8. **Open a Pull Request:** Visit the [repository](https://github.com/TypeOlymp/ui-components) and open a Pull Request. Describe your changes, and submit the pull request.

package/build/components/organisms/Chart/data copy.d.ts

@@ -0,0 +1,30 @@
+declare const _default: ({
+    _id: string;
+    student: string;
+    exercise: string;
+    passed: boolean;
+    medal: string;
+    accuracy: number;
+    kpm: number;
+    hits: {
+        correct: number;
+        wrong: number;
+    };
+    seconds: number;
+    date: string;
+} | {
+    _id: string;
+    student: string;
+    exercise: string;
+    passed: boolean;
+    accuracy: number;
+    kpm: number;
+    hits: {
+        correct: number;
+        wrong: number;
+    };
+    seconds: number;
+    date: string;
+    medal?: undefined;
+})[];
+export default _default;

package/build/components/organisms/Chart/index.d.ts

@@ -1,15 +1,15 @@
 import { FC } from "react";
 import { Locale } from "@typeolymp/utils/enums";
-import { ExerciseResult, ChartType } from "./utils";
+import { ExerciseResult } from "./utils";
 declare type BasePropsType = {
     exerciseResults: ExerciseResult[];
     locale: Locale;
 };
 export declare type PropsType = (BasePropsType & {
-    type: Exclude<ChartType, "progress">;
+    type: "accuracy" | "hits" | "results" | "speed" | "time";
     nExercisesInCourse?: never;
 }) | (BasePropsType & {
-    type: ChartType.PROGRESS;
+    type: "progress";
     nExercisesInCourse: number;
 });
 declare const Chart: FC<PropsType>;

package/build/components/organisms/Chart/stories.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Locale } from "@typeolymp/utils/enums";
 declare const _default: {
     title: string;
     component: React.FC<import(".").PropsType>;
@@ -10,3 +11,38 @@ export declare const Progress: () => JSX.Element;
 export declare const Results: () => JSX.Element;
 export declare const Speed: () => JSX.Element;
 export declare const Time: () => JSX.Element;
+export declare const Playground: {
+    (args: any): JSX.Element;
+    args: {
+        locale: Locale;
+        exerciseResults: ({
+            _id: string;
+            student: string;
+            exercise: string;
+            passed: boolean;
+            medal: string;
+            accuracy: number;
+            kpm: number;
+            hits: {
+                correct: number;
+                wrong: number;
+            };
+            seconds: number;
+            date: string;
+        } | {
+            _id: string;
+            student: string;
+            exercise: string;
+            passed: boolean;
+            accuracy: number;
+            kpm: number;
+            hits: {
+                correct: number;
+                wrong: number;
+            };
+            seconds: number;
+            date: string;
+            medal?: undefined;
+        })[];
+    };
+};

package/build/components/organisms/Chart/utils/enums.d.ts

@@ -5,11 +5,3 @@ export declare enum Period {
     "LAST_3_MONTHS" = "90d",
     "LAST_12_MONTHS" = "1y"
 }
-export declare enum ChartType {
-    "ACCURACY" = "accuracy",
-    "RESULTS" = "results",
-    "HITS" = "hits",
-    "SPEED" = "speed",
-    "PROGRESS" = "progress",
-    "TIME" = "time"
-}

package/build/index.es.js

@@ -47363,16 +47363,7 @@ var Period;
     Period["LAST_30_DAYS"] = "30d";
     Period["LAST_3_MONTHS"] = "90d";
     Period["LAST_12_MONTHS"] = "1y";
-})(Period || (Period = {}));
-var ChartType;
-(function (ChartType) {
-    ChartType["ACCURACY"] = "accuracy";
-    ChartType["RESULTS"] = "results";
-    ChartType["HITS"] = "hits";
-    ChartType["SPEED"] = "speed";
-    ChartType["PROGRESS"] = "progress";
-    ChartType["TIME"] = "time";
-})(ChartType || (ChartType = {}));
+})(Period || (Period = {}));
 
 var getInterval = function (period) {
     var start = undefined;
@@ -47639,8 +47630,8 @@ var ProgressChart = function (_a) {
             return parseISO(date) >= start;
         });
         var _a = prepareData(period, passedExercisesAfterStart), resultsByInterval = _a.resultsByInterval, xAxisTicks = _a.xAxisTicks;
-        var count = passedExercisesBeforeStart.length;
         setData(function () {
+            var count = passedExercisesBeforeStart.length;
             return resultsByInterval.map(function (exercises, index) {
                 count += exercises.length;
                 var progress = Math.floor(100 / (nExercisesInCourse / count));
@@ -47698,11 +47689,7 @@ var Chart = function (_a) {
         time: translations[locale]["Time practised"],
     };
     var renderChart = function () {
-        var props = {
-            exerciseResults: exerciseResults,
-            locale: locale,
-            period: period,
-        };
+        var props = { exerciseResults: exerciseResults, locale: locale, period: period };
         switch (type) {
             case "accuracy":
                 return jsx$1(AccuracyChart, __assign$2({}, props));
@@ -47723,10 +47710,11 @@ var Chart = function (_a) {
                     alignItems: "baseline",
                     justifyContent: "space-between",
                     marginBottom: 10,
-                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsx$1("div", __assign$2({ style: { paddingRight: 10 } }, { children: jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) { return setPeriod(value); }, id: "period", name: "period" }, { children: periods.map(function (_a) {
-                                var value = _a.value, label = _a.label;
-                                return (jsx$1("option", __assign$2({ value: value }, { children: label }), value));
-                            }) })) }))] })), renderChart()] }));
+                    paddingRight: 15,
+                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) { return setPeriod(value); }, id: "period", name: "period" }, { children: periods.map(function (_a) {
+                            var value = _a.value, label = _a.label;
+                            return (jsx$1("option", __assign$2({ value: value }, { children: label }), value));
+                        }) }))] })), renderChart()] }));
 };
 
 var StyledTextarea = styled.textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {