@ssa-ui-kit/widgets 0.0.8-alpha → 0.0.10-alpha

package/src/components/WaterConsume/WaterConsume.tsx

@@ -1,188 +1,188 @@
-import { css, useTheme } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Stepper,
-  Step,
-  StepLabel,
-  Typography,
-  ResponsiveImage,
-  ProgressBar,
-  ProgressLegend,
-  ProgressLegendItem,
-  ProgressVertical,
-} from '@ssa-ui-kit/core';
-
-import { WaterConsumeProps } from './types';
-
-const CustomConnector = ({
-  active,
-  completed,
-}: {
-  active?: boolean;
-  completed?: boolean;
-}) => {
-  const theme = useTheme();
-  return (
-    <div
-      css={css`
-        flex: 1 1 auto;
-        margin-left: 11.5px;
-      `}>
-      <span
-        css={css`
-          display: block;
-          border-color: ${active || completed
-            ? theme.colors.blueLightLighter
-            : theme.colors.greyDarker60};
-          border-left-style: dashed;
-          border-left-width: 1px;
-          min-height: 20px;
-        `}></span>
-    </div>
-  );
-};
-
-const CustomStep: React.FC = (props: {
-  active?: boolean;
-  completed?: boolean;
-}) => {
-  const { active, completed } = props;
-  const theme = useTheme();
-
-  return (
-    <div
-      css={css`
-        width: 6px;
-        height: 6px;
-        background-color: ${active || completed
-          ? theme.colors.blueLightLighter
-          : theme.colors.greyDarker60};
-        border-radius: 50%;
-      `}></div>
-  );
-};
-
-/**
- *
- * UI Component shows the water consumption objective of the user
- * @param steps - the order goes from top to bottom, from left to right
- */
-export const WaterConsume = ({
-  minValue = 0,
-  maxValue = 100,
-  currentValue,
-  active,
-  steps,
-  unit = '%',
-}: WaterConsumeProps) => {
-  const theme = useTheme();
-  const currentPercentage = Math.round((currentValue * 100) / maxValue);
-
-  return (
-    <Card
-      css={css`
-        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
-        border-radius: 20px;
-      `}>
-      <CardHeader
-        icon={
-          <ResponsiveImage
-            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
-            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_64.png?alt=media&token=2abf9f9c-2159-4235-856c-f054783a007d 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2 48w"
-            sizes="(min-width: 1440px) 64px, 48px"
-            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2"
-            alt="Water"
-          />
-        }>
-        <Typography variant="h6" weight="bold">
-          Water
-        </Typography>
-      </CardHeader>
-
-      <CardContent
-        css={{
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'stretch',
-        }}>
-        <div style={{ fontSize: 14, marginRight: '15px' }}>
-          <ProgressVertical>
-            <ProgressLegend>
-              <ProgressLegendItem position="end" percentage={100}>
-                <span
-                  style={{
-                    textAlign: 'right',
-                    display: 'block',
-                    paddingRight: 6,
-                  }}>
-                  {`${maxValue}${unit}`}
-                </span>
-              </ProgressLegendItem>
-              <ProgressLegendItem
-                position="current"
-                percentage={currentPercentage}>
-                <span
-                  style={{
-                    textAlign: 'right',
-                    display: 'block',
-                    paddingRight: 6,
-                  }}>
-                  {`${currentValue}${unit}`}
-                </span>
-              </ProgressLegendItem>
-              <ProgressLegendItem position="start" percentage={0}>
-                <span
-                  style={{
-                    textAlign: 'right',
-                    display: 'block',
-                    paddingRight: 6,
-                  }}>
-                  {`${minValue}${unit}`}
-                </span>
-              </ProgressLegendItem>
-            </ProgressLegend>
-            <ProgressBar percentage={currentPercentage} color="blueLight" />
-          </ProgressVertical>
-        </div>
-
-        <Stepper
-          color={theme.colors.blueLight}
-          activeStep={active}
-          orientation={'vertical'}
-          inverted
-          sx={{
-            rowGap: 0,
-          }}>
-          {steps.map((step, index) => {
-            return (
-              <Step key={index} Connector={CustomConnector}>
-                <StepLabel StepIcon={CustomStep}>
-                  <span
-                    style={{
-                      textAlign: 'left',
-                      display: 'block',
-                      fontSize: 9,
-                    }}>
-                    {step.caption}
-                  </span>
-                  <span
-                    style={{
-                      textAlign: 'left',
-                      display: 'block',
-                      fontSize: 9,
-                      fontWeight: 700,
-                    }}>
-                    {step.title}
-                  </span>
-                </StepLabel>
-              </Step>
-            );
-          })}
-        </Stepper>
-      </CardContent>
-    </Card>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Stepper,
+  Step,
+  StepLabel,
+  Typography,
+  ResponsiveImage,
+  ProgressBar,
+  ProgressLegend,
+  ProgressLegendItem,
+  ProgressVertical,
+} from '@ssa-ui-kit/core';
+
+import { WaterConsumeProps } from './types';
+
+const CustomConnector = ({
+  active,
+  completed,
+}: {
+  active?: boolean;
+  completed?: boolean;
+}) => {
+  const theme = useTheme();
+  return (
+    <div
+      css={css`
+        flex: 1 1 auto;
+        margin-left: 11.5px;
+      `}>
+      <span
+        css={css`
+          display: block;
+          border-color: ${active || completed
+            ? theme.colors.blueLightLighter
+            : theme.colors.greyDarker60};
+          border-left-style: dashed;
+          border-left-width: 1px;
+          min-height: 20px;
+        `}></span>
+    </div>
+  );
+};
+
+const CustomStep: React.FC = (props: {
+  active?: boolean;
+  completed?: boolean;
+}) => {
+  const { active, completed } = props;
+  const theme = useTheme();
+
+  return (
+    <div
+      css={css`
+        width: 6px;
+        height: 6px;
+        background-color: ${active || completed
+          ? theme.colors.blueLightLighter
+          : theme.colors.greyDarker60};
+        border-radius: 50%;
+      `}></div>
+  );
+};
+
+/**
+ *
+ * UI Component shows the water consumption objective of the user
+ * @param steps - the order goes from top to bottom, from left to right
+ */
+export const WaterConsume = ({
+  minValue = 0,
+  maxValue = 100,
+  currentValue,
+  active,
+  steps,
+  unit = '%',
+}: WaterConsumeProps) => {
+  const theme = useTheme();
+  const currentPercentage = Math.round((currentValue * 100) / maxValue);
+
+  return (
+    <Card
+      css={css`
+        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+        border-radius: 20px;
+      `}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{ filter: `drop-shadow(0px 5px 5px ${theme.colors.grey})` }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_64.png?alt=media&token=2abf9f9c-2159-4235-856c-f054783a007d 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fwater%2Fwater_48.png?alt=media&token=abc1e619-940a-4fc0-9f83-ef0a998464f2"
+            alt="Water"
+          />
+        }>
+        <Typography variant="h6" weight="bold">
+          Water
+        </Typography>
+      </CardHeader>
+
+      <CardContent
+        css={{
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'stretch',
+        }}>
+        <div style={{ fontSize: 14, marginRight: '15px' }}>
+          <ProgressVertical>
+            <ProgressLegend>
+              <ProgressLegendItem position="end" percentage={100}>
+                <span
+                  style={{
+                    textAlign: 'right',
+                    display: 'block',
+                    paddingRight: 6,
+                  }}>
+                  {`${maxValue}${unit}`}
+                </span>
+              </ProgressLegendItem>
+              <ProgressLegendItem
+                position="current"
+                percentage={currentPercentage}>
+                <span
+                  style={{
+                    textAlign: 'right',
+                    display: 'block',
+                    paddingRight: 6,
+                  }}>
+                  {`${currentValue}${unit}`}
+                </span>
+              </ProgressLegendItem>
+              <ProgressLegendItem position="start" percentage={0}>
+                <span
+                  style={{
+                    textAlign: 'right',
+                    display: 'block',
+                    paddingRight: 6,
+                  }}>
+                  {`${minValue}${unit}`}
+                </span>
+              </ProgressLegendItem>
+            </ProgressLegend>
+            <ProgressBar percentage={currentPercentage} color="blueLight" />
+          </ProgressVertical>
+        </div>
+
+        <Stepper
+          color={theme.colors.blueLight}
+          activeStep={active}
+          orientation={'vertical'}
+          inverted
+          sx={{
+            rowGap: 0,
+          }}>
+          {steps.map((step, index) => {
+            return (
+              <Step key={index} Connector={CustomConnector}>
+                <StepLabel StepIcon={CustomStep}>
+                  <span
+                    style={{
+                      textAlign: 'left',
+                      display: 'block',
+                      fontSize: 9,
+                    }}>
+                    {step.caption}
+                  </span>
+                  <span
+                    style={{
+                      textAlign: 'left',
+                      display: 'block',
+                      fontSize: 9,
+                      fontWeight: 700,
+                    }}>
+                    {step.title}
+                  </span>
+                </StepLabel>
+              </Step>
+            );
+          })}
+        </Stepper>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/WaterConsume/index.ts

@@ -1,2 +1,2 @@
-export { WaterConsume as default } from './WaterConsume';
-export * from './types';
+export { WaterConsume as default } from './WaterConsume';
+export * from './types';

package/src/components/WaterConsume/types.ts

@@ -1,11 +1,11 @@
-export interface WaterConsumeProps {
-  minValue?: number;
-  maxValue?: number;
-  unit?: string;
-  active: number;
-  currentValue: number;
-  steps: {
-    title: string;
-    caption: string;
-  }[];
-}
+export interface WaterConsumeProps {
+  minValue?: number;
+  maxValue?: number;
+  unit?: string;
+  active: number;
+  currentValue: number;
+  steps: {
+    title: string;
+    caption: string;
+  }[];
+}

package/src/consts.ts

@@ -1,18 +1,18 @@
-export const SCREEN_SIZES = {
-  390: {
-    width: 390,
-    height: 844,
-  },
-  900: {
-    width: 900,
-    height: 1200,
-  },
-  1440: {
-    width: 1440,
-    height: 900,
-  },
-  1920: {
-    width: 1920,
-    height: 1080,
-  },
-};
+export const SCREEN_SIZES = {
+  390: {
+    width: 390,
+    height: 844,
+  },
+  900: {
+    width: 900,
+    height: 1200,
+  },
+  1440: {
+    width: 1440,
+    height: 900,
+  },
+  1920: {
+    width: 1920,
+    height: 1080,
+  },
+};

package/src/index.ts

@@ -1,53 +1,53 @@
-/* eslint-disable @typescript-eslint/no-empty-interface */
-import './injectGlobal';
-import '@emotion/react';
-
-import { Theme as T } from '@ssa-ui-kit/core';
-
-declare module '@emotion/react' {
-  export interface Theme extends T {}
-}
-
-export { default as Activity } from './components/Activity';
-export * from './components/Activity';
-export { default as Calories } from './components/Calories';
-export * from './components/Calories';
-export * from './components/HeartRate';
-export * from './components/MealNutrients';
-export { default as NavBar } from './components/NavBar';
-export * from './components/NavBar';
-export { default as ProgressInfo } from './components/ProgressInfo';
-export * from './components/ProgressInfo';
-export { default as UpcomingWorkouts } from './components/UpcomingWorkouts';
-export * from './components/UpcomingWorkouts';
-export { default as WaterConsume } from './components/WaterConsume';
-export * from './components/WaterConsume';
-export { default as Bmi } from './components/Bmi';
-export * from './components/Bmi';
-export { default as CardList } from './components/CardList';
-export * from './components/CardList';
-export { default as ListGoals } from './components/ListGoals';
-export * from './components/ListGoals';
-export { default as MealPlanner } from './components/MealPlanner';
-export * from './components/MealPlanner';
-export { default as StepsCounter } from './components/StepsCounter';
-export * from './components/StepsCounter';
-export { default as UserCard } from './components/UserCard';
-export * from './components/UserCard';
-export * from './components/Pagination';
-export * from './components/TradingInfoCard';
-export * from './components/TradingScoreboard';
-export * from './components/NotificationCard';
-export * from './components/LinksTabBar';
-export * from './components/NotificationMenu';
-export * from './components/SearchBox';
-export * from './components/UserProfile';
-export * from './components/BotsTable';
-export * from './components/AddNewAccountCard';
-export * from './components/PieChart';
-export * from './components/AccountBalance';
-export * from './components/ExchangeAccount';
-export * from './components/CollapsibleNavBar';
-export * from './components/ExchangeAccountKeys';
-export * from './components/Filters';
-export * from './components/TableFilters';
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import './injectGlobal';
+import '@emotion/react';
+
+import { Theme as T } from '@ssa-ui-kit/core';
+
+declare module '@emotion/react' {
+  export interface Theme extends T {}
+}
+
+export { default as Activity } from './components/Activity';
+export * from './components/Activity';
+export { default as Calories } from './components/Calories';
+export * from './components/Calories';
+export * from './components/HeartRate';
+export * from './components/MealNutrients';
+export { default as NavBar } from './components/NavBar';
+export * from './components/NavBar';
+export { default as ProgressInfo } from './components/ProgressInfo';
+export * from './components/ProgressInfo';
+export { default as UpcomingWorkouts } from './components/UpcomingWorkouts';
+export * from './components/UpcomingWorkouts';
+export { default as WaterConsume } from './components/WaterConsume';
+export * from './components/WaterConsume';
+export { default as Bmi } from './components/Bmi';
+export * from './components/Bmi';
+export { default as CardList } from './components/CardList';
+export * from './components/CardList';
+export { default as ListGoals } from './components/ListGoals';
+export * from './components/ListGoals';
+export { default as MealPlanner } from './components/MealPlanner';
+export * from './components/MealPlanner';
+export { default as StepsCounter } from './components/StepsCounter';
+export * from './components/StepsCounter';
+export { default as UserCard } from './components/UserCard';
+export * from './components/UserCard';
+export * from './components/Pagination';
+export * from './components/TradingInfoCard';
+export * from './components/TradingScoreboard';
+export * from './components/NotificationCard';
+export * from './components/LinksTabBar';
+export * from './components/NotificationMenu';
+export * from './components/SearchBox';
+export * from './components/UserProfile';
+export * from './components/BotsTable';
+export * from './components/AddNewAccountCard';
+export * from './components/PieChart';
+export * from './components/AccountBalance';
+export * from './components/ExchangeAccount';
+export * from './components/CollapsibleNavBar';
+export * from './components/ExchangeAccountKeys';
+export * from './components/Filters';
+export * from './components/TableFilters';

package/src/injectGlobal.ts

@@ -1,41 +1,41 @@
-import { injectGlobal } from '@emotion/css';
-
-injectGlobal`
-  * {
-    outline: none;
-
-    box-sizing: border-box;
-    font-family: 'Manrope', sans-serif;
-
-    &::after,
-    &::before {
-      box-sizing: border-box;
-    }
-  } 
-
-  html {
-    font-size: 1rem;
-    font-weight: 400;
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin: 0;
-    padding: 0;
-  }
-
-  #root {
-    height: 100vh;
-  }
-  
-`;
+import { injectGlobal } from '@emotion/css';
+
+injectGlobal`
+  * {
+    outline: none;
+
+    box-sizing: border-box;
+    font-family: 'Manrope', sans-serif;
+
+    &::after,
+    &::before {
+      box-sizing: border-box;
+    }
+  } 
+
+  html {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  #root {
+    height: 100vh;
+  }
+  
+`;