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>
    );
}

Components

You can find components inside @daf/core/components, and their prototypes in storybook. They can be imported in aplications from 'datastake-daf/dist/components'. To create a new component you should:

  1. Create a folder of the component, with index.jsx and _index.scss.
  2. Import _index.scss in _style.scss, found in components folder.
  3. Create a prototype in storybook.
  4. Export the component in index.js.

Hooks

You can find components inside @daf/hooks. They can be imported in aplications from 'datastake-daf/dist/hooks'. To create a new hook you should:

  1. Create a new file in the hooks folder.
  2. Export the hook in hooks.js.

Contexts

You can find components inside @daf/core/context. They can be imported in aplications from 'datastake-daf/dist/context'. To create a new context you should:

  1. Create a new file in the context folder.
  2. Each context should have the Context with default values, Provider and Hook to use it.
  3. Export the Context, Provider and Hook in context.js.

When you use context in applications, make sure to import Context, Providers and Hooks from daf :)

Forms

You can find forms components, and prototpyes with some form examples(in storyConfigs) inside @daf/core/components/ViewForm, @daf/core/components/EditForm, @daf/core/components/DynamicForm. Input types used in forms are:

  "text",
  "drawTerritory",
  "link",
  "number",
  "select",
  "multiselect",
  "date",
  "comment",
  "textarea",
  "phoneNumber",
  "switch",
  "total100",
  "percentage",
  "year",
  "upload",
  "imageUpload",
  "videoUpload",
  "geolocation",
  "ajaxSelect",
  "tag",
  "modal",
  "website",
  "dataLink",
  "internallink",
  "group",
  "groupInputs",
  "radioGroup",
  "checkboxGroup"

Stylings

Styles are build using a sass theme, which you can find inside src/styles. Each component should have it's own .scss file.

Helpers

You can find helpers inside src/helpers.