diff --git a/.github/workflows/client_tests.js.yml b/.github/workflows/client_tests.yml similarity index 85% rename from .github/workflows/client_tests.js.yml rename to .github/workflows/client_tests.yml index 0ae6f75a2..7d44e099d 100644 --- a/.github/workflows/client_tests.js.yml +++ b/.github/workflows/client_tests.yml @@ -9,6 +9,7 @@ on: pull_request: branches: [next] + jobs: client_test: runs-on: ubuntu-latest @@ -30,10 +31,17 @@ jobs: run: npm ci - name: Lint run: npm run prettier + working-directory: ./packages/webawesome + - name: Build run: npm run build + working-directory: ./packages/webawesome + - name: Install Playwright run: npx playwright install --with-deps + working-directory: ./packages/webawesome + - name: Run CSR tests # FAIL_FAST to fail on first failing test. run: FAIL_FAST="true" CSR_ONLY="true" npm run test + working-directory: ./packages/webawesome diff --git a/.github/workflows/ssr_tests.js.yml b/.github/workflows/ssr_tests.yml similarity index 87% rename from .github/workflows/ssr_tests.js.yml rename to .github/workflows/ssr_tests.yml index 85ea40f79..5e5f1cf7e 100644 --- a/.github/workflows/ssr_tests.js.yml +++ b/.github/workflows/ssr_tests.yml @@ -26,17 +26,17 @@ jobs: cache: 'npm' - name: Install dependencies run: npm ci - # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything. - - name: Lint - run: npm run prettier - name: Build run: npm run build + working-directory: ./packages/webawesome - name: Install Playwright run: npx playwright install --with-deps + working-directory: ./packages/webawesome - name: Run SSR tests # FAIL_FAST to fail on first failing test. run: FAIL_FAST="true" SSR_ONLY="true" npm run test + working-directory: ./packages/webawesome diff --git a/.gitignore b/.gitignore index d9ada838c..8e5d066cc 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,9 @@ _site dist/ dist-cdn/ node_modules -src/react +packages/**/*/src/react cdn/ +yarn.lock +_bundle_ +/packages/webawesome-pro +/packages/webawesome-app diff --git a/README.md b/README.md index b78d9ce2a..5ee564a42 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,30 @@ If that's not what you're trying to do, the [documentation website](https://weba Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/). +### Understanding the Web Awesome monorepo + +Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides. + +By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`. + +Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there. + +### Where do NPM dependencies go? + +Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`. + +```bash +npm install -D -w prettier +``` + +Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM. + +Individual packages are also free to install devDependencies as needed as long as they are specific to that package only. + +To do install a package specific to a package, change your working directory to that package's root + +IE: `cd packages/webawesome && npm install ` + ### Forking the Repo Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies. @@ -43,9 +67,10 @@ npm install ### Developing -Once you've cloned the repo, run the following command. +Once you've cloned the repo, run the following command from the respective directory within `packages/*` ```bash +cd packages/webawesome npm start ``` @@ -56,6 +81,7 @@ This will spin up the dev server. After the initial build, a browser will open a To generate a production build, run the following command. ```bash +cd packages/webawesome npm run build ``` @@ -66,15 +92,24 @@ You can also run `npm run build:serve` to start an [`http-server`](https://www.n To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name. ```bash +cd packages/webawesome npm run create wa-tag-name ``` This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar. +### Adding additional packages + +Right now the only additional packages are in private repositories. + +To add additional packages from other repositories, run: `git clone packages/` to clone your repo into `packages/`. + +Make sure to run `npm install` at the root of the monorepo after adding your package! + ### Contributing Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first. ## License -Web Awesome is available under the terms of the MIT license. +Web Awesome is available under the terms of the MIT license. \ No newline at end of file diff --git a/docs/docs/components/page-samples/documentation.md b/docs/docs/components/page-samples/documentation.md deleted file mode 100644 index 4a9c8d760..000000000 --- a/docs/docs/components/page-samples/documentation.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Sample Documentation Page -description: A sample page for a documentation website using Web Awesome's page component. -layout: blank -eleventyExcludeFromCollections: true ---- - - - - - - - - - - -
- -
-
-

Identification

-

Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.

-

Range and Habitat

-

Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.

-

Behavior

-

Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.

-

Conservation

-

Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.

-
-
-
- - -
-
- - - diff --git a/docs/docs/components/page-samples/media-app.md b/docs/docs/components/page-samples/media-app.md deleted file mode 100644 index 362080e2a..000000000 --- a/docs/docs/components/page-samples/media-app.md +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: Sample Media App Page -description: A sample page for a media app using Web Awesome's page component. -layout: blank -eleventyExcludeFromCollections: true ---- - - - - diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md deleted file mode 100644 index cd0623067..000000000 --- a/docs/docs/components/page.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Page -description: Pages offer an easy way to scaffold entire page layouts using minimal markup. -tags: [pro, organization, layout] -isPro: true -order: 0 ---- - -The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation. - -## Layout Anatomy - -This image depicts a page's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them. - -Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need. - -{% include "page-demo.njk" %} - - - -## Using `wa-page` - -:::info -If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component. -::: - -A number of sections are available as part of the page component, most of which are optional. Content is populated by [slotting elements](/docs/usage/#slots) into various locations. - -This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `
`, `
`, `