@everreal/react-building-stacking-plan v1.0.3

@everreal/react-building-stacking-plan

A building stacking plan built with React

yarn install
yarn dev #-> builds the storybook

Example:

<BuildingStackingPlan
  onUnitClick={action('onUnitClick')}
  building={{
    floors: [
      {
        name: '6th Floor',
        surface: 900,
        units: [
          {
            name: 'U60',
            companyName: 'Facebook',
            surface: 900,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#3ABD8F' },
          },
        ],
      },
      {
        name: '5th Floor',
        surface: 1000,
        units: [
          {
            name: 'U50',
            companyName: 'Facebook',
            surface: 1000,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#3ABD8F' },
          },
        ],
      },
      {
        name: '4th Floor',
        surface: 1000,
        units: [
          {
            name: 'U40',
            companyName: 'Linked In',
            surface: 1000,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#C7E37C' },
          },
        ],
      },
      {
        name: '3d Floor',
        surface: 1000,
        units: [
          {
            name: 'U30',
            companyName: 'Linked In',
            surface: 1000,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#C7E37C' },
          },
        ],
      },
      {
        name: '2nd Floor',
        surface: 1000,
        units: [
          {
            name: 'U20',
            companyName: 'EverReal',
            surface: 200,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#E0807C' },
          },
          {
            name: 'U21',
            companyName: 'AppDirect',
            surface: 200,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#FDB87D' },
          },
          {
            name: 'U22',
            companyName: 'Starbuks',
            surface: 200,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#FBF47E' },
          },
          { isVacant: true, name: 'U23', surface: 400 },
        ],
      },
      {
        name: '1st Floor',

        surface: 1000,
        units: [
          {
            name: 'U10',
            companyName: 'Starbuks',
            surface: 800,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#FEDD6F' },
          },
          {
            isVacant: true,
            name: 'U11',
            surface: 200,
            pricePerSqm: 16.5,
            contractEndDate: new Date(),
            style: { backgroundColor: '#A6A6A6' },
          },
        ],
      },
    ],
  }}
/>