Merge branch 'dev' of https://github.com/intellica-tech/reporting-tool …

…into dev

superset-frontend/packages/superset-ui-core/src/style/index.tsx

@@ -142,6 +142,7 @@ const defaultTheme = {
         dark1: '#02993E',
         dark2: '#599D57',
         light1: '#34D399',
+        light2: '#F0FDF4',
         light3: '#edffec',
       },
       grayscale: {

superset-frontend/src/components/DvtDarkMode/dvt-dark-mode.module.tsx

@@ -0,0 +1,34 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled } from '@superset-ui/core';
+
+const StyledDvtDarkMode = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+`;
+
+const DvtDarkModeLabel = styled.p`
+  color: ${({ theme }) => theme.colors.dvt.text.label};
+  font-size: 14px;
+  margin: 0;
+`;
+
+export { StyledDvtDarkMode, DvtDarkModeLabel };

superset-frontend/src/components/DvtDarkMode/dvt-dark-mode.stories.tsx

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import DvtDarkMode, { DvtDarkModeProps } from '.';
+
+export default {
+  title: 'Dvt-Components/DvtDarkMode',
+  component: DvtDarkMode,
+};
+
+export const Default = (args: DvtDarkModeProps) => <DvtDarkMode {...args} />;
+
+Default.args = {
+  title: 'Dark Mode',
+};
+
+Default.argTypes = {
+  title: {
+    control: { type: 'text' },
+  },
+};

superset-frontend/src/components/DvtDarkMode/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { Switch } from 'antd';
+import moon from '../../assets/dvt-img/moon.png';
+import { StyledDvtDarkMode, DvtDarkModeLabel } from './dvt-dark-mode.module';
+
+export interface DvtDarkModeProps {
+  title: string;
+  darkMode: boolean;
+}
+
+const DvtDarkMode: React.FC<DvtDarkModeProps> = ({ title, darkMode }) => (
+  <StyledDvtDarkMode>
+    <img src={moon} alt="moon" />
+    <DvtDarkModeLabel>{title}</DvtDarkModeLabel>
+    <Switch checked={darkMode} />
+  </StyledDvtDarkMode>
+);
+
+export default DvtDarkMode;

superset-frontend/src/components/DvtDotTitle/dvt-dot-title.module.tsx

@@ -0,0 +1,32 @@
+import { styled } from '@superset-ui/core';
+
+const StyledDotTitle = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledTitle = styled.div`
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 140%;
+  letter-spacing: 0.2px;
+`;
+
+const StyledDotIcon = styled.div`
+  display: flex;
+  height: 48px;
+  width: 48px;
+  background-color: ${({ theme }) => theme.colors.dvt.success.light2};
+  border-radius: 12px;
+  margin-right: 16px;
+`;
+
+const StyledDot = styled.div`
+  height: 16px;
+  width: 16px;
+  background-color: ${({ theme }) => theme.colors.dvt.success.base};
+  border-radius: 50px;
+  margin: auto;
+`;
+
+export { StyledDotTitle, StyledDotIcon, StyledDot, StyledTitle };

superset-frontend/src/components/DvtDotTitle/dvt-dot-title.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import DvtDotTitle, { DvtDotTitleProps } from '.';
+
+export default {
+  title: 'Dvt-Components/DvtDotTitle',
+  component: DvtDotTitle,
+};
+
+export const Default = (args: DvtDotTitleProps) => (
+  <DvtDotTitle label="Welcome Page" {...args} />
+);
+export const Connection = (args: DvtDotTitleProps) => (
+  <DvtDotTitle label="Connection" {...args} />
+);
+export const SQL = (args: DvtDotTitleProps) => (
+  <DvtDotTitle label="SQL" {...args} />
+);

superset-frontend/src/components/DvtDotTitle/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  StyledDotTitle,
+  StyledDotIcon,
+  StyledDot,
+  StyledTitle,
+} from './dvt-dot-title.module';
+
+export interface DvtDotTitleProps {
+  label?: string;
+}
+
+const DvtDotTitle = ({ label = '' }: DvtDotTitleProps) => (
+  <StyledDotTitle>
+    <StyledDotIcon>
+      <StyledDot />
+    </StyledDotIcon>
+    <StyledTitle>{label}</StyledTitle>
+  </StyledDotTitle>
+);
+
+export default DvtDotTitle;

superset-frontend/src/components/DvtNavigation/dvt-navigation.module.tsx

@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { styled } from '@superset-ui/core';
+import { Link } from 'react-router-dom';
+
+const StyledDvtNavigation = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  gap: 23px;
+`;
+
+const DvtNavigationItem = styled.div`
+  display: flex;
+  align-items: center;
+  height: 22px;
+  cursor: pointer;
+  gap: 16px;
+`;
+const DvtNavigationItemIcon = styled.div``;
+
+const DvtNavigationItemLabel = styled(Link)`
+  color: ${({ theme }) => theme.colors.dvt.text.label};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+`;
+
+export {
+  StyledDvtNavigation,
+  DvtNavigationItem,
+  DvtNavigationItemIcon,
+  DvtNavigationItemLabel,
+};

superset-frontend/src/components/DvtNavigation/dvt-navigation.stories.tsx

@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import DvtNavigation, { DvtNavigationProps } from '.';
+
+export default {
+  title: 'Dvt-Components/DvtNavigation',
+  component: DvtNavigation,
+  decorators: [
+    (Story: any) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export const Default = (args: DvtNavigationProps) => (
+  <DvtNavigation {...args} />
+);
+
+Default.args = {
+  data: [
+    { title: 'Connections', url: '', fileName: 'calendar' },
+    { title: 'Dataset', url: '', fileName: 'database' },
+    { title: 'Dashboard', url: '', fileName: 'grid' },
+    { title: 'Report', url: '', fileName: 'code' },
+    { title: 'Alert', url: '', fileName: 'alert' },
+  ],
+};
+
+Default.argTypes = {
+  data: {
+    control: { type: 'object ' },
+  },
+};

superset-frontend/src/components/DvtNavigation/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import Icon from '../Icons/Icon';
+import {
+  StyledDvtNavigation,
+  DvtNavigationItem,
+  DvtNavigationItemIcon,
+  DvtNavigationItemLabel,
+} from './dvt-navigation.module';
+
+export interface DvtNavigationProps {
+  data: DataProps[];
+}
+export interface DataProps {
+  url: string;
+  title: string;
+  fileName: string;
+}
+
+const DvtNavigation: React.FC<DvtNavigationProps> = ({ data }) => (
+  <StyledDvtNavigation>
+    {data.length > 0 &&
+      data.map((item, index) => (
+        <DvtNavigationItem key={index}>
+          <DvtNavigationItemIcon>
+            <Icon fileName={item.fileName} size={22} />
+          </DvtNavigationItemIcon>
+          <DvtNavigationItemLabel to={item.url}>
+            {item.title}
+          </DvtNavigationItemLabel>
+        </DvtNavigationItem>
+      ))}
+  </StyledDvtNavigation>
+);
+export default DvtNavigation;