@typeolymp/ui-components 1.17.8 → 1.18.1

package/README.md

@@ -0,0 +1,24 @@
+# 💅🏼 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.
+
+## 📖 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`
+4. **Run Storybook:** Run storybook with `yarn storybook`
+
+Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
+
+## 👫 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. **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/Accuracy/data.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    xAxis: string;
+    accuracy: number;
+}[];
+export default _default;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const AccuracyChart: FC<ChartPropsType>;
+export default AccuracyChart;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    xAxis: string;
+    failed: number;
+    passed: number;
+}[];
+export default _default;

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

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { BasePropsType } from "../";
+export declare type PropsType = BasePropsType & {
+    data?: Array<{
+        xAxis: string;
+        failed: number;
+        passed: number;
+    }>;
+};
+declare const ExerciseResultsChart: FC<PropsType>;
+export default ExerciseResultsChart;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const HitsChart: FC<ChartPropsType>;
+export default HitsChart;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    xAxis: string;
+    correct: number;
+    wrong: number;
+}[];
+export default _default;

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

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { BasePropsType } from "../";
+export declare type PropsType = BasePropsType & {
+    data?: Array<{
+        xAxis: string;
+        correct: number;
+        wrong: number;
+    }>;
+};
+declare const KeystrokesChart: FC<PropsType>;
+export default KeystrokesChart;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    xAxis: string;
+    kpm: number;
+}[];
+export default _default;

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { BasePropsType } from "../";
+export declare type PropsType = BasePropsType & {
+    data?: Array<{
+        xAxis: string;
+        kpm: number;
+    }>;
+};
+declare const KeystrokesPerMinuteChart: FC<PropsType>;
+export default KeystrokesPerMinuteChart;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const ProgressChart: FC<ChartPropsType & {
+    nExercisesInCourse: any;
+}>;
+export default ProgressChart;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    xAxis: string;
+    progress: number;
+}[];
+export default _default;

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { BasePropsType } from "../";
+export declare type PropsType = BasePropsType & {
+    data?: Array<{
+        xAxis: string;
+        progress: number;
+    }>;
+};
+declare const ProgressPercentageChart: FC<PropsType>;
+export default ProgressPercentageChart;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const ResultsChart: FC<ChartPropsType>;
+export default ResultsChart;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const SpeedChart: FC<ChartPropsType>;
+export default SpeedChart;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ChartPropsType } from "../utils";
+declare const TimeChart: FC<ChartPropsType>;
+export default TimeChart;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    xAxis: string;
+    timePractised: number;
+}[];
+export default _default;

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { BasePropsType } from "../";
+export declare type PropsType = BasePropsType & {
+    data?: Array<{
+        xAxis: string;
+        timePractised: number;
+    }>;
+};
+declare const TimePractisedChart: FC<PropsType>;
+export default TimePractisedChart;

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { TooltipProps } from "recharts";
+import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import { Locale } from "@typeolymp/utils/enums";
+import { Period } from "../utils";
+export declare type PropsType = TooltipProps<ValueType, NameType> & {
+    locale: Locale;
+    period: Period;
+    valueFormatter?: (value: number) => string;
+};
+declare const Tooltip: FC<PropsType>;
+export default Tooltip;

package/build/components/organisms/Chart/Tooltip/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Container: any;
+export declare const Label: any;
+export declare const Dot: any;

package/build/components/organisms/Chart/data.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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").PropsType>;
+};
+export default _default;
+export declare const Accuracy: () => JSX.Element;
+export declare const Hits: () => JSX.Element;
+export declare const Progress: () => JSX.Element;
+export declare const Results: () => JSX.Element;
+export declare const Speed: () => JSX.Element;
+export declare const Time: () => JSX.Element;

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

@@ -0,0 +1,7 @@
+export declare enum Period {
+    "TODAY" = "today",
+    "LAST_7_DAYS" = "7d",
+    "LAST_30_DAYS" = "30d",
+    "LAST_3_MONTHS" = "90d",
+    "LAST_12_MONTHS" = "1y"
+}

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

@@ -0,0 +1,13 @@
+import { Locale } from "@typeolymp/utils/enums";
+import { ExerciseResult } from "./types";
+import { Period } from "./enums";
+export declare const getInterval: (period: Period) => {
+    start: any;
+    end: Date;
+};
+export declare const groupByIntervals: (intervals: Date[], results: ExerciseResult[]) => ExerciseResult[][];
+export declare const prepareData: (period: Period, results: ExerciseResult[]) => {
+    resultsByInterval: ExerciseResult[][];
+    xAxisTicks: number[];
+};
+export declare const tickFormatter: (value: number, period: Period, locale: Locale) => string;

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

@@ -0,0 +1,56 @@
+export * from "./enums";
+export * from "./helpers";
+export * from "./types";
+export declare const margin: {
+    top: number;
+    right: number;
+};
+export declare const cartesianGrid: {
+    stroke: string;
+    vertical: boolean;
+};
+export declare const cursor: {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+};
+export declare const area: (color: any) => {
+    fill: string;
+    stroke: any;
+    strokeWidth: number;
+    activeDot: {
+        strokeWidth: number;
+        r: number;
+    };
+};
+export declare const bar: (color: any) => {
+    strokeWidth: number;
+    stroke: any;
+    fill: any;
+};
+export declare const yAxis: {
+    width: number;
+    axisLine: boolean;
+    tickLine: boolean;
+    tickMargin: number;
+    tick: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+};
+export declare const xAxis: {
+    dataKey: string;
+    height: number;
+    axisLine: boolean;
+    tickLine: boolean;
+    tick: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    tickMargin: number;
+    domain: string[];
+};

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

@@ -0,0 +1,20 @@
+import { Locale } from "@typeolymp/utils/enums";
+import { Period } from "./enums";
+export declare type ExerciseResult = {
+    _id: string;
+    exercise: string;
+    accuracy: number;
+    passed: boolean;
+    kpm: number;
+    hits: {
+        correct: number;
+        wrong: number;
+    };
+    seconds: number;
+    date: string;
+};
+export declare type ChartPropsType = {
+    exerciseResults: ExerciseResult[];
+    locale: Locale;
+    period: Period;
+};

package/build/index.d.ts

@@ -44,10 +44,11 @@ import RadioGroup from "./components/molecules/RadioGroup";
 import SelectField from "./components/molecules/SelectField";
 import ToggleField from "./components/molecules/ToggleField";
 import Tooltip from "./components/molecules/Tooltip";
+import Chart from "./components/organisms/Chart";
 import Form from "./components/organisms/Form";
 import Keyboard from "./components/organisms/Keyboard";
 import Modal from "./components/organisms/Modal";
 import Result from "./components/organisms/Result";
 import Table from "./components/organisms/Table";
 import Transfer from "./components/organisms/Transfer";
-export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Number, Paragraph, Radio, Range, Select, Spacer, Subheading, Tag, Toggle, Trophy, Alert, Card, Checkboxes, Collapse, Countdown, DateInputField, Dropdown, FileUpload, IconButton, InputField, Key, Link, Loading, LocaleSelect, Medals, Notification, NumberField, PasswordInputField, Popup, ProgressBar, Steps, Tabs, RadioGroup, SelectField, ToggleField, Tooltip, Form, Keyboard, Modal, Result, Table, Transfer, };
+export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Number, Paragraph, Radio, Range, Select, Spacer, Subheading, Tag, Toggle, Trophy, Alert, Card, Checkboxes, Collapse, Countdown, DateInputField, Dropdown, FileUpload, IconButton, InputField, Key, Link, Loading, LocaleSelect, Medals, Notification, NumberField, PasswordInputField, Popup, ProgressBar, Steps, Tabs, RadioGroup, SelectField, ToggleField, Tooltip, Chart, Form, Keyboard, Modal, Result, Table, Transfer, };