Status: Beta. Breaking changes are expected until 1.0.
View, edit and create Atomic Data from your browser!
Designed for interacting with atomic-server
.
# Install dependencies
pnpm
# Run dev server
pnpm start
# Open browser at http://localhost:5173
If you want to edit data, you’ll need an Agent, including its privateKey
and subject
.
You can get one by accepting an Invite, or by hosting your own atomic-server
.
You can set the Agent on the /app/agent
route.
/app
routes should be used for most app functionality, which will make the chance of having path collisions with a server smaller.Styling.tsx
desribe colors, border radius and margin size. Use these as variables in components to make sure that users can change style preferences (e.g. dark mode, accent color, font, margin size)Store
, which makes sure that you don’t ask twice for the same resource and let’s other resources know that things have changed.useState
, which means that two terms are returned: the first one contains the current value, and the second one is a function for setting the value.about={subject}
tag in HTML elements / DOM nodes, which can be used for debugging and RDFa parsing. This means that you can press e
to edit anything you’re hovering on, or press d
to show the data!/views
. Check the README.md in that folder.useResource
, and passes a subject
URL. This is probably first the one that’s shown in the navigation bar. This resource is fetched (unless it’s already in the store) as a JSON-AD
object, after which it is put in the Store without any changes. The Parser does not perform validation checks - that would make the application slower. After the resource is added to the store, subscribers (users of that resource, such as Components with the useResource
hook) will be notified of changes. The component will re-render, and the props can now be used.store
object.useString
) for maintaining actual resource state. When the form input changes, the new value will be .set()
on the Resource
, and this will throw an error if there is a validation error. These should be catched by passing an error handler to the useString
hook.App.tsx
on initialization. We set Store.errorHandler
which is called when something goes wrong. This should result in a toaster error shown to the user, and a message sent to BugSnag if window.bugsnagApiKey
is set.chunks
folder and should always be imported dynamically to avoid adding the dependancy to the main bundle./show
, /app/theme
).The tests are located in tests
and have .spec
in their filename.
They use the PlayWright framework and run in the browser.
pnpm start
) at http://localhost:5173
atomic-server
instance is running at http://localhost:9883
http://localhost/setup
invite has at least one available usage. You can set a higher amount here, or run atomic-server --inititalize
to reset it to 1.pnpm playwright-install
pnpm test
launches the E2E tests (make sure the dev server is running at http://localhost:5173
)pnpm test-debug
launches the E2E tests in debug mode (a window opens with debug tools)pnpm test-new
create new tests by clicking through the appdata-test
attribute in HTML elements to make playwright tests more maintainable (and prevent failing tests on changing translations)pnpm test-query {word}
run e2e tests in debug mode containing {word}
GitHub Action / Workflow is used for:
playwright
, using an atomic-server
docker image)Open a PR, post an issue, but most of all: join our Discord server!