feat(vital-section): Create vital-section package

packages/vital-section/README.md

@@ -0,0 +1,6 @@
+# `@bodiless/vital-section`
+
+For documentation on the Vital Section package, please see:
+
+- [Vital Section | BodilessJS Docs](https://johnsonandjohnson.github.io/Bodiless-JS/#/VitalDesignSystem/Components/VitalSection/)
+- [`doc/` Directory](./doc)

packages/vital-section/bodiless.docs.json

@@ -0,0 +1,9 @@
+{
+  "VitalDesignSystem": {
+    "Components": {
+      "VitalSection": {
+        "README.md": "./doc/README.md"
+      }
+    }
+  }
+}

packages/vital-section/doc/README.md

@@ -0,0 +1,48 @@
+# Vital Section Component
+?> **Note:** @TODO
+
+
+## Section Variants
+Vital Section provides the following Section variants by default:
+
+- Without Title
+- Without Description
+- Without Link
+
+
+## Content Editor Details
+
+?> **Note:** @TODO
+
+### Add a Section
+
+To add a Vital Section Component to your page:
+
+?> **Note:** @TODO
+
+### Edit a Button
+
+?> **Note:** @TODO
+
+
+## Site Builder Details
+
+### Usage
+
+```jsx
+import { withNodeKey } from '@bodiless/data';
+import { SectionClean, vitalSection } from '@bodiless/vital-section';
+
+const DefaultSection = as(
+  vitalSection.Default,
+  withNodeKey('defaultbutton'),
+)(SectionClean);
+```
+
+### Overriding Section
+
+#### Via Shadowing (*Preferred Method)
+
+Define a Shadowing token collection as defined in [Shadow](../VitalElements/Shadow).
+
+File to shadow: `packages/{my-package}/src/shadow/@bodiless/vital-section/Section.ts`

packages/vital-section/getDocs.js

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-dynamic-require, global-require */
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getPackageDocs } from '@bodiless/cli';
+
+export const getDocs = (nameSpace) => getPackageDocs({
+  resolver: p => require.resolve(p),
+  nameSpace
+});

packages/vital-section/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@bodiless/vital-section",
+  "sideEffects": false,
+  "version": "1.0.0-rc.37",
+  "description": "Section component that allows to group and structure elements.",
+  "author": "Ivan Rudiuk <IRudiu01@kenvue.com>",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "/lib",
+    "/bodiless.docs.json",
+    "/getDocs.js",
+    "/tailwind.config.js",
+    "/doc"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/johnsonandjohnson/bodiless-js.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:lib && npm run build:api-doc",
+    "build:lib": "tsc -p ./tsconfig.json",
+    "build:watch": "npm run build:lib -- --watch",
+    "build:api-doc": "typedoc --out doc/api ./src",
+    "clean": "rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "@bodiless/cli": "^1.0.0-rc.37",
+    "@bodiless/data": "^1.0.0-rc.37",
+    "@bodiless/fclasses": "^1.0.0-rc.37",
+    "@bodiless/hydration": "^1.0.0-rc.37",
+    "@bodiless/components": "^1.0.0-rc.37",
+    "@bodiless/vital-editors": "^1.0.0-rc.37",
+    "@bodiless/vital-elements": "^1.0.0-rc.37",
+    "tailwindcss": "^3.0.23"
+  }
+}

packages/vital-section/src/Components/Section/SectionClean.tsx

@@ -0,0 +1,74 @@
+import React, { FC } from 'react';
+import {
+  designable,
+  Div,
+  H2,
+  Section,
+  Fragment,
+  as,
+} from '@bodiless/fclasses';
+import { withNode } from '@bodiless/data';
+import { asVitalTokenSpec } from '@bodiless/vital-elements';
+
+import { SectionComponents, SectionBaseProps } from './types';
+
+const sectionComponent: SectionComponents = {
+  Wrapper: Section,
+  TitleWrapper: Div,
+  Title: H2,
+  LinkWrapper: Fragment,
+  Link: Fragment,
+  DescriptionWrapper: Fragment,
+  Description: Fragment,
+  ContentWrapper: Div,
+  Content: Div,
+};
+
+const SectionBase: FC<SectionBaseProps> = ({ components, ...rest }) => {
+  const {
+    Wrapper,
+    TitleWrapper,
+    Title,
+    DescriptionWrapper,
+    Description,
+    LinkWrapper,
+    Link: SectionLink,
+    ContentWrapper,
+    Content,
+  } = components;
+
+  return (
+    <Wrapper {...rest}>
+      <TitleWrapper>
+        <Title />
+      </TitleWrapper>
+      <DescriptionWrapper>
+        <Description />
+      </DescriptionWrapper>
+      <LinkWrapper>
+        <SectionLink />
+      </LinkWrapper>
+      <ContentWrapper>
+        <Content />
+      </ContentWrapper>
+    </Wrapper>
+  );
+};
+
+const SectionClean = as(
+  designable(sectionComponent, 'Section'),
+  withNode,
+)(SectionBase);
+
+/**
+ * A token modifier that respects the Section Components.
+ *
+ * @category Token Collection
+ */
+const asSectionToken = asVitalTokenSpec<SectionComponents>();
+const sectionToken = asSectionToken();
+type SectionToken = typeof sectionToken;
+
+export default SectionClean;
+export { asSectionToken };
+export type { SectionToken };

packages/vital-section/src/Components/Section/index.bl-edit.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// In non "static" mode (in dev mode and during HTML render), we need the static version
+// of the token to be the same as the normal version.
+export { default as vitalSectionStatic } from './tokens';

packages/vital-section/src/Components/Section/index.static.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// In "static" mode (in the browser in production) we do not need any of the static
+// token code bc it won't be hydrated.
+export {
+  staticTokenCollection as vitalSectionStatic,
+  StaticInline as SectionStatic,
+} from '@bodiless/hydration';

packages/vital-section/src/Components/Section/index.ts

@@ -0,0 +1,6 @@
+export { default as SectionClean, asSectionToken, SectionToken } from './SectionClean';
+export { default as vitalSection } from './tokens';
+export { default as vitalSectionBase } from './tokens/vitalSection';
+
+export * from './types';
+export * from './index.bl-edit';

packages/vital-section/src/Components/Section/tokens/index.ts

@@ -0,0 +1,4 @@
+import vitalSection, { SectionNodeKeys } from './vitalSection';
+
+export default vitalSection;
+export { SectionNodeKeys };

packages/vital-section/src/Components/Section/tokens/vitalSection.ts

@@ -0,0 +1,66 @@
+import { withNodeKey } from '@bodiless/data';
+import { flowHoc, replaceWith } from '@bodiless/fclasses';
+import { withPlaceholder } from '@bodiless/components';
+import { vitalEditorPlain } from '@bodiless/vital-editors';
+
+import { asSectionToken } from '../SectionClean';
+
+export const SectionNodeKeys = {
+  Title: 'title',
+  Description: 'description',
+  Link: 'link',
+  Content: 'content',
+};
+
+const Default = asSectionToken({
+  Components: {
+    Title: vitalEditorPlain.Default,
+    Description: vitalEditorPlain.Default,
+  },
+  Layout: {
+    Wrapper: 'w-full flex flex-col',
+  },
+  Schema: {
+    Title: withNodeKey(SectionNodeKeys.Title),
+    Description: withNodeKey(SectionNodeKeys.Description),
+    Link: withNodeKey(SectionNodeKeys.Link),
+    Content: withNodeKey(SectionNodeKeys.Content),
+  },
+  Content: {
+    Title: withPlaceholder('Default Section Title'),
+    Content: withPlaceholder('Default Section Content'),
+    Description: withPlaceholder('Section description'),
+  },
+  Meta: flowHoc.meta.term('Type')('Section'),
+});
+
+const WithNoTitle = asSectionToken({
+  ...Default,
+  Components: {
+    ...Default.Component,
+    Title: replaceWith(() => null),
+  },
+});
+
+const WithNoDescription = asSectionToken({
+  ...Default,
+  Components: {
+    ...Default.Component,
+    Description: replaceWith(() => null),
+  },
+});
+
+const WithNoLink = asSectionToken({
+  ...Default,
+  Components: {
+    ...Default.Component,
+    Link: replaceWith(() => null),
+  },
+});
+
+export default {
+  Default,
+  WithNoTitle,
+  WithNoDescription,
+  WithNoLink
+};

packages/vital-section/src/Components/Section/types.ts

@@ -0,0 +1,27 @@
+import { ComponentType, HTMLProps } from 'react';
+import {
+  DesignableComponents,
+  DesignableComponentsProps,
+  StylableProps,
+  DesignableProps,
+} from '@bodiless/fclasses';
+
+/**
+ * @category Component
+ */
+export interface SectionComponents extends DesignableComponents {
+  Wrapper: ComponentType<StylableProps>;
+  TitleWrapper: ComponentType<StylableProps>;
+  Title: ComponentType<StylableProps>;
+  DescriptionWrapper: ComponentType<StylableProps>;
+  Description: ComponentType<StylableProps>;
+  LinkWrapper: ComponentType<StylableProps>;
+  Link: ComponentType<StylableProps>;
+  ContentWrapper: ComponentType<StylableProps>;
+  Content: ComponentType<StylableProps>;
+}
+
+export type SectionProps = DesignableProps<SectionComponents> & HTMLProps<HTMLElement>;
+
+// eslint-disable-next-line max-len
+export type SectionBaseProps = DesignableComponentsProps<SectionComponents> & HTMLProps<HTMLElement>;

packages/vital-section/src/Components/index.ts

@@ -0,0 +1 @@
+export * from './Section';

packages/vital-section/src/index.ts

@@ -0,0 +1 @@
+export * from './Components';

packages/vital-section/tailwind.config.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-dynamic-require, global-require */
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getPackageTailwindConfig } from '@bodiless/fclasses';
+
+const resolver = (pkgName) => require.resolve(pkgName);
+
+const twConfig = {
+  content: [
+    './lib/**/!(*.d).{ts,js,jsx,tsx}',
+  ],
+};
+
+module.exports = getPackageTailwindConfig({
+  twConfig,
+  resolver,
+});