Merge pull request #43 from MetroStar/war-52

WAR-52: Rename base package from comet to comet-uswds

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path');
 module.exports = {
   stories: [
-    '../packages/comet/src/**/*.stories.@(tsx|mdx)',
+    '../packages/comet-uswds/src/**/*.stories.@(tsx|mdx)',
     '../packages/comet-data-viz/src/**/*.stories.@(tsx|mdx)',
     '../packages/comet-extras/src/**/*.stories.@(tsx|mdx)',
   ],

README.md

@@ -12,7 +12,7 @@ In the beginning, Comet was built with a primary focus of USWDS. Today however,
 
 ## Overview
 
-`comet` - The base USWDS component library implemented in React with TypeScript.
+`comet-uswds` - The base USWDS component library implemented in React with TypeScript.
 
 `comet-data-viz` - A set of Victory Chart components provided as a Comet wrapper.
 

jest.config.js

@@ -8,7 +8,7 @@ export default {
     '^.+.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
   collectCoverageFrom: [
-    'packages/comet/src/components/**/*.{ts,tsx}',
+    'packages/comet-uswds/src/components/**/*.{ts,tsx}',
     'packages/comet-extras/src/components/**/*.{ts,tsx}',
     '!**/*.d.ts',
     '!**/*.stories.tsx',

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint --ext .tsx --ext .ts packages/**/src/ --fix --config .eslintrc.json",
     "format": "npx prettier packages/**/src --write",
     "build:storybook": "storybook build",
-    "build:comet": "cd packages/comet && rollup -c",
+    "build:comet-uswds": "cd packages/comet-uswds && rollup -c",
     "build:comet-data-viz": "cd packages/comet-data-viz && rollup -c",
     "build:comet-extras": "cd packages/comet-extras && rollup -c"
   },

packages/comet/README.md → packages/comet-uswds/README.md

@@ -10,13 +10,13 @@ In order to utilize Comet within your app, you must first ensure USWDS is pre-co
 
 ```sh
 # npm
-npm i --save @metrostar/comet
+npm i --save @metrostar/comet-uswds
 # or yarn
-yarn add @metrostar/comet
+yarn add @metrostar/comet-uswds
 ```
 
 2. Add your first Comet component:
 
 ```tsx
-import { Alert } from '@metrostar/comet';
+import { Alert } from '@metrostar/comet-uswds';
 ```

packages/comet/package.json → packages/comet-uswds/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@metrostar/comet",
-  "version": "1.0.1",
+  "name": "@metrostar/comet-uswds",
+  "version": "1.0.0",
   "description": "React with TypeScript Component Library based on USWDS 3.0.",
   "license": "Apache-2.0",
   "main": "./dist/cjs/index.js",
@@ -31,6 +31,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/MetroStar/comet.git",
-    "directory": "packages/comet"
+    "directory": "packages/comet-uswds"
   }
 }

packages/comet-uswds/src/components/prose/index.ts

@@ -0,0 +1 @@
+export { default } from './prose';

packages/comet-uswds/src/components/prose/prose.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Prose } from '../../index';
+import { ProseProps } from './prose';
+
+const meta: Meta<typeof Prose> = {
+  title: 'USWDS/Prose',
+  component: Prose,
+  argTypes: {
+    id: { required: true },
+  },
+};
+export default meta;
+
+const Template: StoryFn<typeof Prose> = (args: ProseProps) => (
+  <Prose {...args}>
+    <p>
+      <strong>75 characters (68ex) max-width:</strong> Yosemite National Park is set within
+      California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for
+      Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan
+      and Half Dome.
+    </p>
+  </Prose>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'prose-1',
+  className: '',
+};

packages/comet/src/components/prose/prose.test.tsx → packages/comet-uswds/src/components/prose/prose.test.tsx

@@ -5,14 +5,22 @@ import Prose from './prose';
 
 describe('Prose', () => {
   test('should render', () => {
-    const { container } = render(<Prose id="prose"><p>Prose text</p></Prose>);
+    const { container } = render(
+      <Prose id="prose">
+        <p>Prose text</p>
+      </Prose>,
+    );
     const proseComponent = container.querySelector('#prose');
     expect(proseComponent).toHaveClass('usa-prose');
     expect(proseComponent).toHaveTextContent('Prose text');
   });
 
   test('should render with custom className', () => {
-    const { container } = render(<Prose id="prose" className="custom"><p>Prose text</p></Prose>);
+    const { container } = render(
+      <Prose id="prose" className="custom">
+        <p>Prose text</p>
+      </Prose>,
+    );
     expect(container.querySelector('#prose')).toHaveClass('custom');
   });
 });

packages/comet/src/components/prose/prose.tsx → packages/comet-uswds/src/components/prose/prose.tsx

@@ -25,10 +25,7 @@ export const Prose = ({
   children,
   ...props
 }: ProseProps & JSX.IntrinsicElements['section']): React.ReactElement => {
-  const classes = classnames(
-    'usa-prose',
-    className
-  );
+  const classes = classnames('usa-prose', className);
 
   return (
     <section id={id} className={classes} {...props}>