Datastake-daf NPM

Getting Started with Datastake DAF

Run locally

  git clone https://link-to-project

Go to the DAF project

  cd ./datastake-daf

Install dependencies and build DAF

  npm install
  npm run build-dist

Go to your application and link daf

  cd ../my-app
  npm link ../datastake-daf

Testing DAF components

You can have a better understanding of DAF components by runnings storybook. This can be done by running: npm run storybook.

DAF Theme

Every application should have its own theme. Below you will find an example:

export const myAppTheme = {
  // Base
  white: '#ffffff',
  colorPrimary: '',
  borderColor: '',

  // Gray
  gray10: '',
  gray20: '',
  gray30: '',
  gray40: '',
  gray50: '',
  gray60: '',
  gray70: '',
  gray80: '',
  gray90: '',
  gray100: '',
  gray110: '',
  
  // Base Gray
  baseGray10: '',
  baseGray20: '',
  baseGray30: '',
  baseGray40: '',
  baseGray50: '',
  baseGray60: '',
  baseGray70: '',
  baseGray80: '',
  baseGray90: '',
  baseGray100: '',
  baseGray110: '',

  // Primary
  colorPrimary1: '',
  colorPrimary2: '',
  colorPrimary3: '',
  colorPrimary4: '',
  colorPrimary5: '',
  colorPrimary6: '',
  colorPrimary7: '',
  colorPrimary8: '',
  colorPrimary9: '',
  colorPrimary10: '',

  // Success
  success1: '',
  success2: '',
  success3: '',
  success4: '',
  success5: '',
  success6: '',
  success7: '',
  success8: '',
  success9: '',
  success10: '',

  // Warning
  warning1: '',
  warning2: '',
  warning3: '',
  warning4: '',
  warning5: '',
  warning6: '',
  warning7: '',
  warning8: '',
  warning9: '',
  warning10: '',

  // Error
  error1: '',
  error2: '',
  error3: '',
  error4: '',
  error5: '',
  error6: '',
  error7: '',
  error8: '',
  error9: '',
  error10: '',

  // Red
  red1: '',
  red2: '',
  red3: '',
  red4: '',
  red5: '',
  red6: '',
  red7: '',
  red8: '',
  red9: '',
  red10: '',

  // Volcano
  volcano1: '',
  volcano2: '',
  volcano3: '',
  volcano4: '',
  volcano5: '',
  volcano6: '',
  volcano7: '',
  volcano8: '',
  volcano9: '',
  volcano10: '',

  // Orange
  orange1: '',
  orange2: '',
  orange3: '',
  orange4: '',
  orange5: '',
  orange6: '',
  orange7: '',
  orange8: '',
  orange9: '',
  orange10: '',

  // Gold
  gold1: '',
  gold2: '',
  gold3: '',
  gold4: '',
  gold5: '',
  gold6: '',
  gold7: '',
  gold8: '',
  gold9: '',
  gold10: '',

  // Yellow
  yellow1: '',
  yellow2: '',
  yellow3: '',
  yellow4: '',
  yellow5: '',
  yellow6: '',
  yellow7: '',
  yellow8: '',
  yellow9: '',
  yellow10: '',

  // Lime
  lime1: '',
  lime2: '',
  lime3: '',
  lime4: '',
  lime5: '',
  lime6: '',
  lime7: '',
  lime8: '',
  lime9: '',
  lime10: '',

  // Green
  green1: '',
  green2: '',
  green3: '',
  green4: '',
  green5: '',
  green6: '',
  green7: '',
  green8: '',
  green9: '',
  green10: '',

  // Cyan
  cyan1: '',
  cyan2: '',
  cyan3: '',
  cyan4: '',
  cyan5: '',
  cyan6: '',
  cyan7: '',
  cyan8: '',
  cyan9: '',
  cyan10: '',

  // Blue
  blue1: '',
  blue2: '',
  blue3: '',
  blue4: '',
  blue5: '',
  blue6: '',
  blue7: '',
  blue8: '',
  blue9: '',
  blue10: '',

  // Purple
  purple1: '',
  purple2: '',
  purple3: '',
  purple4: '',
  purple5: '',
  purple6: '',
  purple7: '',
  purple8: '',
  purple9: '',
  purple10: '',

  // Magenta
  magenta1: '',
  magenta2: '',
  magenta3: '',
  magenta4: '',
  magenta5: '',
  magenta6: '',
  magenta7: '',
  magenta8: '',
  magenta9: '',
  magenta10: '',

  // Sizes
  sizeUnit: 4,
  size: 16,
  sizeXXS: 4,
  sizeXS: 8,
  sizeSM: 12,
  sizeMD: 20,
  sizeLG: 24,
  sizeXL: 40,
  sizeXXL: 30,

  // Padding
  padding: 16,
  paddingXXS: 4,
  paddingXS: 8,
  paddingSM: 12,
  paddingMD: 20,
  paddingLG: 24,
  paddingXL: 32,
  paddingXXL: 48,

  // Margin
  margin: 16,
  marginXXS: 4,
  marginXS: 8,
  marginSM: 12,
  marginMD: 16,
  marginLG: 24,
  marginXL: 48,

  // Height
  controlHeight: 32,
  controlHeightXS: 16,
  controlHeightSM: 24,
  controlHeightLG: 40,

  // Border Radius
  borderRadius: 6,
  borderRadiusXS: 2,
  borderRadiusSM: 4,
  borderRadiusLG: 8,

  // Font Size
  fontSize: 14,
  fontSizeSM: 12,
  fontSizeLG: 16,
  fontSizeXL: 20,

  fontSizeHeading1: 38,
  fontSizeHeading2: 30,
  fontSizeHeading3: 24,
  fontSizeHeading4: 20,
  fontSizeHeading5: 16,
}

Connect your app with DAF

import { ConfigProvider } from 'antd';
import { DafTheme } from "datastake-daf/dist/components";
import { useThemeLayout } from 'datastake-daf/dist/hooks';
import { myAppTheme } from './theme';

import 'datastake-daf/src/styles/_index.scss';

export default function MyApp() {
    const callback = useCallback(() => myAppTheme, []);
    const { theme } = useThemeLayout({ callback });

    return (
        <ConfigProvider theme={{ token: theme }}>
            <DafTheme theme={theme}>
                ...
            </DafTheme>
        </ConfigProvider>
    );
}

List of components

DafTheme
Table
MoreMenu
MoreTags
Pagination
StickyTable
Button
FilterButton
CustomIcon
SelectFilters
SelectFiltersTimeFrame
SelectFiltersSelect
SelectFiltersAjaxSelect
SearchFilters
SettingsPopover
FormPopover
GoToSelect
Header
TabsHeader
ModalHeader
DrawerHeader
Widget
ActionWidget
WidgetLoader

List of hooks

usePagination
useThemeLayout
useLinearGradientAreaChart

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

4 months ago

5 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago