name | route |
---|---|
Atlantis |
/ |
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Atlantis is a design system for Jobber. The primary objective for Atlantis is to provide a system of reusable components to help developers to quickly build beautiful and consistent interfaces for our users.
node@14
npm@6
To install Atlantis locally for development:
git clone [email protected]:GetJobber/atlantis.git
cd atlantis
npm ci
To start the docz development server:
npm start
When installing dependencies, unless they are required for the documentation viewer, they should be within the package you are working within.
If you are making a change in one package that will be needed in another you
will need to make the needed change and run a npm run lerna:bootstrap
before
using it. The bootstrap will recompile and link the changes across the project.
It's also worth noting that within Atlantis in order for one package to depend
on another all that is required is for it to be listed in the appropriate
package.json
file. Lerna will automatically take care of managing the versions
for you.
Atlantis packages are installed and updated using npm. This following list has installation links for each package:
These are the core packages you'll need to build with Atlantis:
If you're looking to build documentation and tooling using Atlantis' development standards, these packages will be useful:
Running the following command will prompt you for a component name and generate a starting point consisting of a component, tests, styling, etc to help you get started.
You should name your component in PascalCase
.
npm run generate
❯❯❯ npm run generate
> [email protected] generate /path/to/atlantis
> plop
? Component Name: ExampleComponent
✔ +! 5 files added
-> /packages/components/src/ExampleComponent/index.ts
-> /packages/components/src/ExampleComponent/ExampleComponent.css
-> /packages/components/src/ExampleComponent/ExampleComponent.mdx
-> /packages/components/src/ExampleComponent/ExampleComponent.test.tsx
-> /packages/components/src/ExampleComponent/ExampleComponent.tsx
To run tests:
npm test
To ensure your code passes our linters run:
npm run lint
You can also auto fix many linting errors by running:
npm run lint:fix
You can run the linters separately with:
npm run lint:css
npm run lint:ts
The atlantis
repo is a monorepo consisting of a few different packages all
living in the ./packages/
directory.
The primary packages in here are:
packages/
components/
- The primary home for components. Each component lives in its own folder in
the
./src
directory within here.
- The primary home for components. Each component lives in its own folder in
the
design/
- A home for shareable css variables.
docx/
- Any components internal to the documention viewer itself.
When installing dependencies be sure to install them relative to the appropriate
sub package. For example if you want to use package foo
in a component you
would run npm install foo
from within the components
directory.
Everyone is a friend of Atlantis and we welcome pull requests. See the contribution guidelines to learn how.
Atlantis uses Lerna and will automatically publish whenever a pull request is merged.
npm run prerelease
lerna changed