dina-ui docs

<PageLayout titleId="splitSubsampleTitle" buttonBarContent={buttonBar}>
  ... Main content of the page
</PageLayout>

node -v
yarn -v

yarn

<DinaForm initialValues={{ myField: "initial text" }}>
  <TextField name="myField" className="col-md-6" />
</DinaForm>

import { COLLECTION_MODULE_REVISION_ROW_CONFIG } from "../../../components/revisions/revision-modules";
import { RevisionsPage } from "../../../components/revisions/RevisionsPageLayout";

export default () => (
  <RevisionsPage
    // The API route to the Javers snapshot list
    auditSnapshotPath="collection-api/audit-snapshot"
    // URL to the details page
    detailsPageLink="/collection/material-sample/view?id="
    // Query for the current state of the record
    queryPath="collection-api/material-sample"
    // The JSONAPI resource "type"
    resourceType="material-sample"
    // The row configs are specific to each module (Collection, Object Store, Agent, etc.)
    revisionRowConfigsByType={COLLECTION_MODULE_REVISION_ROW_CONFIG}
    // The field on the resource that gives the name. Usuallu this field is called "name"
    nameField="materialSampleName"
  />
);

import { COLLECTION_MODULE_REVISION_ROW_CONFIG } from "../../components/revisions/revision-modules";
import RevisionsByUserPage from "../../components/revision-by-user/CommonRevisionsByUserPage";

export default function CollectionRevisionByUserPage() {
  return (
    <RevisionsByUserPage
      // The API route to the Javers snapshot list
      snapshotPath="collection-api/audit-snapshot"
      // The row configs are specific to each module (Collection, Object Store, Agent, etc.)
      revisionRowConfigsByType={COLLECTION_MODULE_REVISION_ROW_CONFIG}
    />
  );
}

import { RevisionRowConfigsByType } from "./revision-row-config";
import { COLLECTING_EVENT_REVISION_ROW_CONFIG } from "./revision-row-configs/collectingevent-revision-row-config";
import { MATERIAL_SAMPLE_REVISION_ROW_CONFIG } from "./revision-row-configs/material-sample-revision-row-configs";
import { METADATA_REVISION_ROW_CONFIG } from "./revision-row-configs/metadata-revision-row-config";

/** Custom revision row behavior for Object Store Resources. */
export const OBJECT_STORE_MODULE_REVISION_ROW_CONFIG: RevisionRowConfigsByType = {
  metadata: METADATA_REVISION_ROW_CONFIG
};

/** Custom revision row behavior for Object Store Resources. */
export const COLLECTION_MODULE_REVISION_ROW_CONFIG: RevisionRowConfigsByType = {
  "collecting-event": COLLECTING_EVENT_REVISION_ROW_CONFIG,
  "material-sample": MATERIAL_SAMPLE_REVISION_ROW_CONFIG
};

import { DinaForm, SubmitButton, TextField } from "../components";

export default function ExampleFormPage() {
  const onSubmit: DinaFormOnSubmit = async ({
    submittedValues,
    api: { save }
  }) => {
    if (!submittedValues.name) {
      throw new Error("Name must be set.");
    }

    // Makes a Create or Update call to the back-end.
    await save(
      [
        {
          resource: submittedValues,
          type: "my-type"
        }
      ],
      { apiBaseUrl: "/objectstore-api" }
    )
  }

  return (
    <div className="card card-body" style={{ width: "1000px" }}>
      <DinaForm initialValues={{}} onSubmit={onSubmit}>
        <TextField name="name" />
        <TextField name="description" />
        <SubmitButton />
      </DinaForm>
    </div>
  );
}

import { DinaForm, ResourceSelectField } from "common-ui";
import { Group } from "../types/user-api/resources/Group";

/**
 * This page shows a dropdown for selecting a Group. You can type the name of a Group you're
 * looking for into the input, which sends a filtered query to the back-end API for a Group with
 * that name. When you select a Group, the onChange callback function sets the selected group into
 * the page's component state. The page displays a message with the name of the currently selected
 * Group.
 */
export default function ExamplePage() {
  return (
    <div className="card card-body" style={{ width: "500px" }}>
      <DinaForm initialValues={{ myGroup: null }}>
        {({ values: { myGroup } }) => (
          <div>
            <h2>Selected group: {myGroup ? myGroup.groupName : "None"}</h2>
            <ResourceSelectField<Group>
              name="myGroup"
              filter={groupName => ({ groupName })}
              model="group"
              optionLabel={group => group.groupName}
            />
          </div>
        )}
      </div>
    </div>
  );
}

import { FilterParam } from "kitsu";
import { useState } from "react";
import { FilterBuilderField } from "../components/filter-builder/FilterBuilderField";
import { rsql } from "../components/filter-builder/rsql";
import Head from "../components/head";
import Nav from "../components/nav";
import { QueryTable } from "../components/table/QueryTable";
import { DinaForm, DinaFormOnSubmit } from "../components/formik-connected/DinaForm";

export default function ExamplePage() {
  const [filter, setFilter] = useState<FilterParam>();

  const onSubmit: DinaFormOnSubmit = ({ submittedvalues:  { filter } }) => {
    setFilter({ rsql: rsql(filter) });
  }

  return (
    <div>
      <Head />
      <Nav />
      <div className="container-fluid">
        <DinaForm initialValues={{}} onSubmit={onSubmit}>
          <FilterBuilderField
            filterAttributes={["name", "group.groupName"]}
            name="filter"
          />
          <button type="submit">search</button>
        </DinaForm>
        <QueryTable
          columns={["name", "type", "group.groupName"]}
          filter={filter}
          include="group"
          path="pcrPrimer"
        />
      </div>
    </div>
  );
}

import { useQuery } from "../components";
import { PcrPrimer } from "../types/seqdb-api/resources/PcrPrimer";

function ExampleComponent() {
  const { error, loading, response } = useQuery<PcrPrimer>({ path: "pcrPrimer/1" });

  if (loading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <ErrorInfo error={error} />;
  } else {
    return <div>Primer name: {response.data.name}</div>;
  }
}

import { useQuery } from "../components";
import { PcrPrimer } from "../types/seqdb-api/resources/PcrPrimer";

function ExampleComponent() {
  const { error, loading, response } = useQuery<PcrPrimer[]>({ path: "pcrPrimer" });

  if (loading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <ErrorInfo error={error} />;
  } else {
    return (
      <div>
        {response.data.map(primer => (
          <PcrPrimerInfo key={primer.id} primer={primer} />
        ))}
      </div>
    );
  }
}

import { useQuery, withResponse } from "../components";
import { PcrPrimer } from "../types/seqdb-api/resources/PcrPrimer";

function ExampleComponent() {
  const primerQuery = useQuery<PcrPrimer[]>({ path: "pcrPrimer" });

  return withResponse(primerQuery, ({ data: primers }) => (
    <div>
      {primers.map(primer => (
        <PcrPrimerInfo key={primer.id} primer={primer} />
      ))}
    </div>
  ));
}

import React from "react";
import { useApiClient } from "common-ui";

export funcion NewRegionButton() {
  const { save } = useApiClient();

  async function createRegion() {
    await save(
      [
        {
          resource: {
            name: `new-region-${Math.random()}`,
            seq: "",
            symbol: `${Math.random()}`,
            type: "PRIMER"
          },
          type: "region"
        }
      ],
      { apiBaseUrl: "/seqdb-api" }
    );
  };

  return <button onClick={this.createRegion}>Create Region</button>;
}

git clone https://github.com/pa11y/pa11y.git
cd pa11y

// An example of running Pa11y on multiple URLS
'use strict';

const pa11y = require('.');

runExample();

// Async function required for us to use await
async function runExample() {
        try {

                // Put together some options to use in each test
                const options = {
                        log: {
                                debug: console.log,
                                error: console.error,
                                info: console.log
                        }
                };

                // Run tests against multiple URLs
                const results = await Promise.all([
                        pa11y('http://localhost:8000/product/list', options),
                        pa11y('http://localhost:8000/product/edit?id=1', options),
                        pa11y('http://localhost:8000/product/view?id=1', options)

                ]);

        } catch (error) {

                // Output an error if it occurred
                console.error(error.message);

        }
}

node multiple.js > WCAGreports.txt

 {
      code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name',
      context: '<input class="form-control" type="text" value="">',
      message: 'This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.',
      type: 'error',
      typeCode: 1,
      selector: '#__next > div > div > div > div > form > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div > input'
    },
    {
      code: 'WCAG2AA.Principle1.Guideline1_3.1_3_1.F68',
      context: '<input class="form-control" type="text" value="">',
      message: 'This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.',
      type: 'error',
      typeCode: 1,
      selector: '#__next > div > div > div > div > form > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div > input'
    },

const rows = keys.filter(key => english.messages[key] && (french.messages[key] === undefined ||
      french.messages[key]?.trim().length === 0 ||
    french.messages[key] === null )
    ).map<CsvRow>(key => ({

cd ./packages/scripts
yarn --silent export-intl-csv > messages.csv

cd ./packages/scripts
CSVFILE=messages.csv yarn import-intl-csv